Pengunjung yang baik adalah pengunjung yang selalu meninggalkan komentar :)
Posted by : Fitrah Gilang Fadilah May 31, 2015

Cara Membuat Author Box di Blogger
Kali ini saya akan membagikan tutorial tentang Cara membuat Author Box di Blog.
Yuk langsung aja kita mulai tutorialnya :

1. Login 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...

<!--Author Blog Start -->

<div class='AHSadmin'><img alt='Fitrah Gilang Fadilah' src='http://4.bp.blogspot.com/-5aucT37eZXw/UqGDtBvExWI/AAAAAAAAAC8/DTnFyDOcykk/s400/dutch-kelinci.jpg'
 title="Fitrah Gilang Fadilah" class='AHSadmin-gambar' />

<a class='AHSfb' 
href='http://www.facebook.com/Gilang.asd' rel='nofollow' 
target="_blank">F</a>

<a class='AHSgp' 
href='https://plus.google.com/+FitrahGilangf' rel='nofollow' 
target="_blank">G</a>

<a class='AHStw' 
href='http://twitter.com/fitrahgf' rel='nofollow' 
target="_blank">t</a>

<div class='AHSdeskripsi'>Hai, saya
 <a href=https://plus.google.com/7049530791492749265 title="Fitrah Gilang Fadilah" rel='nofollow' target="_blank">Fitrah Gilang Fadilah</a><br/> saya seorang lelaki yang pendiam, agak 
malas.<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 !

Semoga bermanfaat :D

Dengan Sedikit Perubahan :)

Tinggalkan Komentar

Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA DI SINI...</i> atau <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Copyright © 2014 Kuro Usagi - Designed by Fitrah Gilang F Template By Djogzs