Kali ini saya akan share tentang Cara membuat Author Box di blog.
Penasaran kan seperti apa?, langsung liat penampakannya kayakl dibawah

• Buka Blog kamu

• Langsung menuju ke Template

• Lalu letakkan kode dibawah ini tepat di atas kode ]]></b:skin> 

.AHSadmin {width:auto; height:83px;padding:5px}

.AHSadmin-gambar {-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);float:left;width:75px;height:75px;margin:4px 1px 0px 0px;border-radius:90em;opacity:0.8;border-top:2px solid #cf2031;border-right:2px solid #0f7dc8;border-bottom:2px solid #2eb31a;border-left:2px solid #eab823;-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;}
.AHSdeskripsi{width:auto; padding:1%;font-family:arial,sans-serif; margin:-85px 0 0 110px; font-size:11px; color:#fff;}
.AHSfb, .AHSgp, .AHStw {color:#fff!important; display:block;font-weight: bold; line-height: 14px; height: 14px; width: 14px; border: 3px solid #444;text-align: center;padding:3px;border-radius:15px;font-size: 13px;text-decoration:none!important;margin: 1px;position:relative;margin-right:0px}
.AHSfb {background: #3B5998;margin-left:73px}
.AHSfb:hover { -moz-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;border-color: #4F77CC; box-shadow: 0 0 3px #4F77CC;-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);background:#444}
.AHSgp {background: #D34836;font-size:11px;margin-left:85px}
.AHSgp:hover {-moz-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;border-color: #EB503C; box-shadow: 0 0 3px #EB503C;-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);background:#444}
.AHStw {background: #4099FF;margin-left:73px}
.AHStw:hover {-moz-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;border-color: #36D0FF; box-shadow: 0 0 3px #36D0FF;-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);background:#444}.admin-gambar:hover{-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);opacity:0;}
.AHSadmin-gambar:hover {border-radius:10px;border:2px solid #0000FF;box-shadow:0 0 30px #ff0000;-webkit-filter: grayscale(0%);-moz-filter: grayscale(0%);-ms-filter: grayscale(0%);-o-filter: grayscale(0%);filter: grayscale(0%);-moz-transform:rotate(715deg);-webkit-transform:rotate(715deg);-o-transform:rotate(715deg) }

• Kalau udah , , silahkan menuju ke tata letak

• lalu , , add gadget > HTML/Javascript,Silahkan anda masukan kode di bawah ini kedalamnya!!!

<!-- Author Blog Start -->

<div class='AHSadmin'>
<img alt='Oriezt' src='Gambar yang ada dilingkaran' title="Nama Kamu" class='AHSadmin-gambar' />
<a class='AHSfb' href='Alamat Facebook' rel='nofollow' target="_blank">f</a>
<a class='AHSgp' href='Alamat G+' rel='nofollow' target="_blank">G</a>
<a class='AHStw' href='Alamat Twitter' rel='nofollow' target="_blank">t</a>
<div class='AHSdeskripsi'>
Hai, perkenalkan nama saya <a Alamat FB/TW/G+ title="Nama Kamu" rel='nofollow' target="_blank">Nama Kamu</a><br/>
</div></div>
<!-- Ends --> 

•  Keterangan :

1. Warna Hijau : Isi pakai link gambar.
2. Warna Ungu : Isi pakai Nama kamu
3. Warna Biru : Isi pakai akun Facebook kamu
4. Warna Orange : Isi pakai akun G+ kamu
5. Warna Aqua : Isi pakai akun Twitter kamu
6. Warna Fuchsia : Isi terserah apa aja akun kamu

• Kalau sudah silahkan anda edit sendiri!!!

• Setelah itu klik Save , , SELESAI.

• Check, jadi gak ?, kalau ada masalah langsung tulis dikomentar.