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/

Tweet

Unknown pada 6/20/2013