Cara Membuat Author Box Di Blog

Posted by : Sandhy09 4 Jul 2013

Hay sob, pada kesempatan kali ini saya akan share Cara Membuat Author Box Di Blog. Simak 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:#000000;}
.AHSfb, .AHSgp, .AHStw {color:#000000!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

<div class='AHSadmin'><img alt='Sandhy09' src='http://sadpanda.us/images/1699497-4XNATZY.jpg' title="Sandhy09" class='AHSadmin-gambar' /><a class='AHSfb' href='http://www.facebook.com/Sandy.oploverz' 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/Sandymufc09' rel='nofollow' target="_blank">t</a> <div class='AHSdeskripsi'>Hai, saya <a href=https://plus.google.com/7049530791492749265 title="Sandhy09" rel='nofollow' target="_blank">Sandhy09</a><br/> Saya adalah orang yang selalu beranggapan optimis akan sesuatu.<br/><a style="color:#888;" href="#" target="_blank"> Read More »</a></div></div>

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 footer blog saya.Semoga bermanfaat ^__^

Sumber : AH-SHARED dan Smart Education

Diposkan Oleh : Sandhy09 ~ Life Must Be Creative

Sobat sedang membaca artikel tentang Cara Membuat Author Box Di Blog. Oleh Sandhy09, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini dibawah postingan yang sobat copas sebagai sumbernya

<a href="http://sandymufc09.blogspot.com/2013/07/cara-membuat-author-box-di-blog.html" target="_blank">Cara Membuat Author Box Di Blog</a>

{ 1 komentar... read them below or add one }

PERHATIAN:

Komentar Akan di Hapus Jika :
1. Komentar Spam
2. Komentar Sara/Porno
3. Komentar Penghinaan/Fitnah
4. Komentar Bahasa Kasar.

Sandy-Cyber

Life Must Be Creative