Cara Membuat Author Box Atau Kotak Admin di Blog

1. Pertama silahkan sobat login ke dashboard blog sobat

2. Setelah itu pilih template dan edit template sobat

3. Selanjutnya sobat cari kode ]]></b:skin> pada template (untuk memudahkan pencarian sobat dapat menekan tombol Ctrl+F pada keyboard)

4. setelah itu silahkan sobat Copy kode dibawah ini dan letakan tepat diatas kode ]]></b:skin>

/*kotak admin lalu suhairi*/.admin-suhairi{display:block;width:auto;background:#A9A9F5;border:2px solid #fff;box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;padding:0;margin:30px 0 10px 0;font:normal 12px Arial,Sans-Serif;color:#222;}.admin-admin-suhairi .kontainer{padding:5px;}.admin-admin-suhairi h4{background:#4B088A;border:none;border-bottom:1px solid#699019;color:#fff;text-transform:normal;text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);font:bold 12px Arial,Sans-Serif;padding:5px 10px;margin:0 0 0 0;display:block;}.admin-suhairi h4 a{color:#FEEA83;}.admin-admin-suhairi img{width:70px;height:70px;margin:0 10px 0 0;float:left;border:1px solid #954B02;padding:2px;background:#C36702;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;margin: 0px;border: 5px solid #eee;-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);box-shadow: 4px 4px 4px rgba(0,0,0,0.2);-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease;-o-transition: all 0.5sease;-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);}/* kotak admin lalu suhairi*/

Keterangan :

Sesuaikan warna background yang chinot tandai dengan warna merah diatas dengan warna background blog milik sobat

5. Setelah itu cari lagi kode <div class='post-footer'> setelah ketemu silahkan copy kode dibawah ini dan letakan tepat diatas kode <div class='post-footer'>

<!-- Kotak Admin Lalu Suhairi&#160;-->&#160; &#160; <b:if cond='data:blog.pageType == &quot;item&quot;'>&#160; &#160; <div class='admin-suhairi'>&#160; &#160; <h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> | Pesan</h4>&#160; &#160; <div class='kontainer'>&#160; &#160; <img src='https://scontent-b-hkg.xx.fbcdn.net/hphotos-xpa1/l/t1.0-9/994118_583904378384974_4160977796756321798_n.jpg'/>&#160; &#160;Terimah Kasih telah membaca artikel<a expr:href='data:post.url'><data:post.title/></a>. Yang ditulis oleh <data:post.author/>. Jika anda ingin sebarluaskan artikel ini, mohon untuk menyertakan <blink><strong>sumber link asli dibawah ini</strong></blink> Untuk Kritik dan saran silahkan post kan pada kotak komentar, Terimakasih&#160; &#160; <p><textarea cols='57' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://lalusuhairi.blogspot.com/2014/07/cara-membuat-author-box-atau-kotak.html' target='_blank'>:: Get this widget ! ::</a></span></p>&#160; &#160; <div style='clear:both;'/>&#160; &#160; </div>&#160; &#160; </div>&#160; &#160; </b:if>&#160; &#160; <!-- Kotak Admin&#160;Lalu Suhairi&#160;-->

Keterangan :

Ganti Tulisan yang ditandai dengan warna merah sesuai keinginan sobat

Ganti link yang berwarna biru dengan link gambar milik sobat

7. Simpan template dan lihatlah hasilnya

NB : Untuk menghindari eror sebaiknya sobat simpan dulu atau backup dulu template sobat sebelum menggunakan kode sript diatas.