Cara membuat Author Box di blog

Kali ini saya akan share tentang Cara membuat Author Box di blog.
Penasaran kan seperti apa , , yuk kita lihat ScreenShotnya!!!
Nah udah tau kann??
Langsung aja ke tutorialnya!!!

1. Buka Blog kamu
2. Langsung menuju ke Template
3. 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) }
4. Kalau udah , , silahkan menuju ke tata letak
5. lalu , , add gadget > HTML/Javascript
6. Silahkan anda masukan kode di bawah ini kedalamnya!!!
<!-- Author Blog Start -->
<div class='AHSadmin'>
<img alt='Oriezt' src='https://sites.google.com/site/maencit/gambar/Protagonist_DeSu2_Break_Record.png' title="Oriezt" class='AHSadmin-gambar' />
<a class='AHSfb' href='http://www.facebook.com/Oriezt' rel='nofollow' target="_blank">f</a>
<a class='AHSgp' href='https://plus.google.com/u/0/100694433203791510224' rel='nofollow' target="_blank">G</a>
<a class='AHStw' href='http://twitter.com/OrieztMaenCit' rel='nofollow' target="_blank">t</a>
<div class='AHSdeskripsi'>
Hai, perkenalkan nama saya <a href=http://www.facebook.com/oriezt title="Oriezt" rel='nofollow' target="_blank">Oriezt</a><br/>
</div></div>
<!-- Ends -->
7. Kalau sudah silahkan anda edit sendiri!!!
8. Setelah itu klik Save , , SELESAI.

Sumber : AH-SHARED

Artikel Terkait

24 komentar

thanks gan atas infonya,bermanfaat

Ya , , sama - sama sob!!!

terima kasih sob tutor nya...

komen back ya di blog baru gue :)
http://smpnegri7bekasi.blogspot.com/

- AHS Blogwalking -
thx udah kasih sumbernya :3

ttd. #AHS Admin~

Sama2 sob , , komen back siap meluncurr!!!

Sama2 sob , , komen back siap meluncurr!!!

Ya Sob Sama - sama!!! :D

boleh juga nih :3
sevenskys.blogspot.com

Makasih Udah Berkunjung kak!!! :D :)

Wajib di Coba Nihk

http://r3d-xcode.blogspot.com

nice info gan,ane mau coba dulu :D
logikasemua.blogspot.com

thanks gan atas infonya,, mau ane coba dulu ahh,, btw templatenya keren, tapi terlihat sedikit acak-acakan,, sorry gan hanya pendapat ane doang,,,

koment back yaa www.ankurniawan.blogspot.com

Ok sob comment back siap meluncurr!!!

Infonya bermanfaat sob! Comment back http://dark-kazejin.blogspot.com

infomasi yang bagus ^^

Thank's udah mampir sob , , comment back siap meluncurr!!!

Thank's udah mampir sob!!!

Praktekin dulu akh , Nice Info

r3d-xcode.blogspot.com