Kali ini Dicky's akan menshare Tips Blog yang berjudul Cara Membuat Widget Social Media Efek Hover Dan Warna-Warni Di Blog | Dari widget social media yang sudah banyak Dicky's share, kini Dicky's kembali share lagi widget social media, ada banyak keunikan diwidget ini yaitu Efek Hover (jika disentuh dengan cursor akan berubah), Warna-warni (Jika disentuh cursor akan berubah warna, yang semula silver berubah menjadi warna masing-masing seperti Twitter jika disentuh berubah menjadi biru muda). Gimana keren gak ?? Bagi yang sudah ingin memasangnya, ikuti Tips-nya.
Berikut Cara Membuat Widget Social Media Efek Hover Dan Warna-Warni Di Blog :
- Login ke Blogger, atau klik disini
- Pilih Tata Letak --> Tambahkan Gadget --> Pilih HTML/JavaScript
- Copy kode dibawah ini dan letakkan ke kolom HTML/JavaScript
<style>
a.db_twitter
{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_JV3U71UliwLDq1yhkpaUrMYisEd3mh8T_cgKZ08uDr0sI05Tyjo4jPMsySdtb0KAkRVicYA-nJMVu6Ogn0_uNd1G1lMtzGj12Lr-yunZ2OzUtHuyk_QhluqDj8lkOw_c6sa_isqSnFQ/s1600/btrix_twitter.jpg);
background-position:0 0px;
width:300px;
height:51px;
text-indent:-9999px;
display:block;
background-repeat: no-repeat;
border:0px;
float:left;}
a.db_facebook
{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPCq90TDCNe9NNH0jFhTvWx96_edw96GUGKx0faHbWnQmyQTTsc1IblsSIQ7VuN0yVtaZXoHl7mz3h3cdro5KEy467JZ2JBfb-HpgSfpDs_yc27mODSsSQr40iRFoWFDWiSQvELXaihWE/s1600/btrix_facebook.jpg);
background-position:0 0px;
width:300px;
height:51px;
text-indent:-9999px;
display:block;
background-repeat: no-repeat;
border:0px;
float:left;}
a.db_linkedin
{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjLwU1zyonhQX-83b9J0px-VS32ANGVcc_QaPd66jvoIxpaqjes3tJ9_JG5xY_ZDzDaNZxzKv0-Q0RiLEQTkEJemfz7m7iFP5KLwwUN7D1frB-P_NOTgIEBbA2eFbKzibYocvK9kTXCz0/s1600/btrix_linkedin.jpg);
background-position:0 0px;
width:300px;
height:51px;
text-indent:-9999px;
display:block;
background-repeat: no-repeat;
border:0px;
float:left;
}
a.db_stumbleupon
{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjORyUl_BJ7c4_A0_KWsW2_gyQcPuNMxIFMxQPeAn6Yu_gwxe0tY2Gh4Luq_sRWHq_YBGm9tcd77fq6khreFtKo_3VIk5SCqyYXNpG-6v5vGU_ol0RcYFgwKs9mrViB9XCw2All-m_meeI/s1600/btrix_stumbleupon.jpg);
background-position:0 0px;
width:300px;
height:51px;
text-indent:-9999px;
display:block;
background-repeat: no-repeat;
border:0px;
float:left;
}
.db1social a:hover
{
background-position:0 -51px;
}
.db1social
{
width:255px;
}
</style>
<br />
<div class="textwidget">
<div class="db1social">
<a class="db_linkedin" href="http://id.linkedin.com/ID LINKEDIN SOBAT" target="_blank">linkedin</a>
<a class="db_stumbleupon" href="http://www.stumbleupon.com/ID STUMBLEUPON SOBAT" target="_blank">stumbleupon</a>
<a class="db_twitter" href="http://twitter.com/ID TWITTER SOBAT" target="_blank">twitter</a>
<a class="db_facebook" href="http://www.facebook.com/ID FACEBOOK SOBAT" target="_blank">Facebook</a>
</div>
</div>
Keterangan : sudah dikode diatas.
- Simpan
Semoga Tips Blog yang berjudul Cara Membuat Widget Social Media Efek Hover Dan Warna-Warni Di Blog bisa bermanfaat......
dan selamat mencoba.......
Post a Comment