Pengunjung yang baik adalah pengunjung yang selalu meninggalkan komentar :)
Posted by : ultah 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-pu_6kjGVcr9sxJKwGaC4PVsbjJS3NHK4lbeHU3Y12kNAG0nqbpLEPXIxAO73QYfe20FoGw6JGAxQ98JpWuto2HmEvtsfzY44nHfJ_Wfu_kEXLWzOvYeT5QfRGEah4R2D9tAilM11vbI/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