Posted by : ultah
May 31, 2015
Tag :// blogger,
Tag :// Tutorial Blog
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>
nah, setelah itu menuju ke tata letak lalu, add gadget > HTML/Javascript
tambahkan kode di bawah ini di kotak yang besar itu...
Nah,sekarang anda sudah selesai,tetapi itu belum anda setting !
Semoga bermanfaat :D
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 »</a>
</div></div>
<!-- Ends
-->
Nah,sekarang anda sudah selesai,tetapi itu belum anda setting !
Semoga bermanfaat :D
Sumber kode : http://ah-shared.blogspot.com/
Dengan Sedikit Perubahan :)
Related Posts :
- Back to Home »
- blogger , Tutorial Blog »
- Cara Membuat Author Box di Blogger