Cara Membuat Author Box di Blog

Cara Membuat Author Box di Blog, cara membuat widget profil di blog

Halo sobat Blog Krizeer, apa kabarnya baik kan ?, yaudah kalo baik. Kali ini saya akan membagikan tutorial tentang Cara membuat Author Box di Blog.

penasaran kan seperti apa?, yuk kita lihat dulu screenshotnya :

Nah udah tau kan?, yuk langsung aja kita mulai tutorialnya
Tutorial Membuat Author Box di Blog :
1. Loggin ke Blogger
2. klik ke template
3. Edit HTML
4. Lalu,tambahkan kode di bawah ini di atasnya ]]></b:skin>

/* Author Blog */
.AHSadmin {width:auto; height:83px;padding:5px}
.AHSadmin-gambar
{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;}
.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 {border-color: #4F77CC; box-shadow: 0 0 3px #4F77CC;}
.AHSgp {background: #D34836;font-size:11px;margin-left:85px}
.AHSgp:hover {border-color: #EB503C; box-shadow: 0 0 3px #EB503C;}
.AHStw {background: #4099FF;margin-left:73px}
.AHStw:hover {border-color: #36D0FF; box-shadow: 0 0 3px #36D0FF;}

nah, setelah itu menuju ke tata letak
lalu, add gadget > HTML/Javascript
tambahkan kode di bawah ini di kotak yang besar itu :v

<!--Author Blog Start --><div class='AHSadmin'><img alt='Yoga Pratama' src='httphttp://lh3.googleusercontent.com/-MRkIW9aCKqk/AAAAAAAAAAI/AAAAAAAAAAA/EdZwfzUCDB4/s96-c/photo.jpg'
title="Yoga Pratama" class='AHSadmin-gambar' /><a class='AHSfb'
href='http://www.facebook.com/Twish4' rel='nofollow'
target="_blank">F</a><a class='AHSgp'
href='https://plus.google.com/7049530791492749265' rel='nofollow'
target="_blank">G</a><a class='AHStw'
href='http://twitter.com/Yoga_TC' rel='nofollow'
target="_blank">t</a> <div class='AHSdeskripsi'>Hai, saya
<a href=https://plus.google.com/7049530791492749265 title="Yoga
Pratama" rel='nofollow' target="_blank">Yoga
Pratama</a><br/> saya seorang lelaki yang pendiam, agak
malas, tetapi bertanggung jawab. Dan saya ingin belajar tentang
CSS.<br/><a style="color:#888;" href="#" target="_blank">
Read More &#187;</a></div></div><!-- Ends
-->

Nah,sekarang anda sudah selesai,tetapi itu belum anda setting !

Perhatikan tulisan yang saya warna itu
Ganti tulisan warna merah itu dengan kepunyaan anda sendiri
Untuk
Foto,bebas ukuran berapapun,karena udah di atur secara otomatis di
cssnya, Untuk yang warna biru juga sama,ganti itu dengan kepunyaan anda
sendiri
Nah ini yang agak susah,untuk yang warna orange,juga anda
ganti itu,tetapi anda harus menyesuaikan dengan width/lebar footer anda.
Untuk demonya anda bisa lihat sendiri di sidebar blog saya.Semoga
bermanfaat -_-

Sumber kode : http://ah-shared.blogspot.com/