Cara Membuat Widget Author Blog Keren V1

Hy sobat, ketemu lagi dengan mimin diblog yang unyu unyu ini kemarin kita sudah bahas tentang "Banner Exchange :Revanite Version 1" udah tau belum? kalo belum silahkan "Klik Disini" dan sekarang kita akan membahas "Cara Membuat Widget Author Blog Keren" mau tau caranya langsung saja nih :
Ini penambakan Widgetnya

Gmana keren bukan ini script dapet dari blog sebelah alias ane lupa link blognya XD tapi sedikit tak ubah dari font sampai yang lainnya

Langkah-langkah :
1. Login blogger
2. Pilih template
3. Edit HTML
4. Cari kode ]]></b:skin> dan letakkan kode dibawah ini diatas kode ]]></b:skin>

/* Author Blog */
.AHSadmin {width:auto; height:83px;padding:5px}
.AHSadmin-gambar {
float: left;
width: 85px;
height: 85px;
box-shadow: 0 0px 10px rgba(0, 0, 0, 1);
margin: 4px 1px 0px 0px;
opacity: 0.8;
border: 2px solid #181818;
}
.AHSdeskripsi{
width: auto;
padding: 1%;
font-family: Century Gothic,sans-serif;
margin: -90px 0 0 150px;
font-size: 13px;
color: #fff;
}
.AHSfb, .AHSgp, .AHStw {
color: #fff!important;
display: block;
font-weight: bold;
line-height: 20px;
height: 20px;
width: 20px;
border: 3px solid #181818;
text-align: center;
padding: 3px;
border-radius: 15px;
font-size: 13px;
text-decoration: none!important;
margin: 5px;
position: relative;
margin-right: 0px;
}
.AHSfb {
background: #121111;
box-shadow: 0 0px 10px rgba(0, 0, 0, 1);
margin-left: 95px;
}
.AHSfb:hover {
border-color: #4F77CC;
box-shadow: 0 0 3px #4F77CC;
background: #072DA5;
}
.AHSgp {
background: #121111;
font-size: 11px;
margin-top: -8px;
box-shadow: 0 0px 10px rgba(0, 0, 0, 1);
margin-left: 115px;
}
.AHSgp:hover {
border-color: #EB503C;
box-shadow: 0 0 3px #EB503C;
background: #440707;
}
.AHStw {
background: #121111;
margin-left: 95px;
margin-top: -8px;
box-shadow: 0 0px 10px rgba(0, 0, 0, 1);
}
.AHStw:hover {
border-color: #36D0FF;
background: #028B86;
box-shadow: 0 0 3px #36D0FF;
}

5. Simpan Template
6. Lalu ke tata letak
7. Tambahkan Widget, lalu pilih HTML/Javascript
8. Copy kode dibawah ini dan pastekan dikolom HTML/Javascript

<div class='AHSadmin'><img alt='Arbi Einsteins' src='http://i.imgur.com/0tJeV5e.jpg?1?4618' title="Arbi Einsteins" class='AHSadmin-gambar' /><a class='AHSfb' href='http://www.facebook.com/arbiwahyudi' rel='nofollow' target="_blank">F</a><a class='AHSgp' href='https://plus.google.com/109286757953211271389' rel='nofollow' target="_blank">G</a><a class='AHStw' href='http://twitter.com/susihyuro' rel='nofollow' target="_blank">t</a> <div class='AHSdeskripsi'>Hay Sobat, Perkenalkan Nama Saya Arbi Einsteins Nama Aslinya Adadeh :v<br/><a style="color:#888;" href="#" target="_blank"> Read More »</a></div></div>

9. Lalu simpan
Dan liat hasilnya, kalo ada yang error silahkan komentar
Bila ingin copas sertakan sumbernya ok :)
Sampai ketemu diposting berikutnya

Artikel Menarik Lainnya

1 komentar: