Widget ini kalau keliatannya biasa saja pertamanya, tapi kalau sobat
mengarahkan kursor kepada salah satu sosial media akan berubah dan ada
warnanya sesuai sosial medianya.. sobat tertarik dengan widget dan ingin
menggunakan widgetnya di blog sobat ?
Membuat Widget Sosial Media Dengan Effect Hover
--------------------------------------------------------
- Login ke Blogger
- Pergi ke Menu ''Tata Letak''
- Selanjutnya klik ''Tambah Gadget''
- Sekarang, pilih Gadget ''HTML/JavaScript
- Taruhlah code dibawah ini, di kotak yang tersedia
<style>
a.btrix1_twitter
{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcUXkOcSD1jUVeNeWlIBnBLw9KEkLn6DxZ0Dx22EkpAVWjRN6B6CAKqwOX4ftroIL9PpXpTOEDk0MkkGkcoWNEgugb7cOPAV2I2D_Rws8ANgmpvXKyDc4X0nKwZBSXkJWPc5IHb8vxlhc/s1600/btrix_twitter.jpg);
background-position:0 0px;
width:255px;
height:51px;
text-indent:-9999px;
display:block;
background-repeat: no-repeat;
border:0px;
float:left;}
a.btrix1_facebook
{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYqn-LW2nul64fSyaz-0hd2gxtrreNFR7sBRyRV0uuHdROMJ3O7qdCPlvbqlwhMJRSBxunQXdp_nWKDGVe_lpWjiO-2oy-vsQIjlE5N89g3P2DjfVfd9J6WHTs_caV7t_r3EyxNo1xil8/s1600/btrix_facebook.jpg);
background-position:0 0px;
width:255px;
height:51px;
text-indent:-9999px;
display:block;
background-repeat: no-repeat;
border:0px;
float:left;}
a.btrix1_linkedin
{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi28Q6sE0Do6CUTrqOTcBlO8reBKwtwjNngblbWTqtQ3JDgTs9gD3p2eLdpyWBmdwRC2NNo4lExTXG1hxUiY0lrydKMxz5B9qEDZnEKiVpIHyh69OM5cu690edLvZYIQ1uWHDQtYfzL_fg/s1600/btrix_linkedin.jpg);
background-position:0 0px;
width:255px;
height:51px;
text-indent:-9999px;
display:block;
background-repeat: no-repeat;
border:0px;
float:left;
}
a.btrix1_stumbleupon
{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLboxAvFs5dRG6iWRXwTyZ3VoPpN_Gt9TqP5ND1MFoo75nbmM6mQzHEy-vBzmU9Xe0jL-oonxOfBzQ-xlXVSZ8LYSF135ukMdZBEBy-zMKJ9usJF_9mZDAJ_6QzUESnoP7yRuvGXEcg7M/s1600/btrix_stumbleupon.jpg);
background-position:0 0px;
width:255px;
height:50px;
text-indent:-9999px;
display:block;
background-repeat: no-repeat;
border:0px;
float:left;
}
.btrix11social a:hover
{
background-position:0 -51px;
}
.btrix11social
{
width:255px;
}
</style>
<br />
<div class="textwidget">
<div class="btrix11social">
<a class="btrix1_linkedin" href="http://in.linkedin.com/Username" target="_blank">linkedin</a>
<a class="btrix1_stumbleupon" href="http://www.stumbleupon.com/Username" target="_blank">stumbleupon</a>
<a class="btrix1_twitter" href="http://twitter.com/Username" target="_blank">twitter</a>
<a class="btrix1_facebook" href="http://www.facebook.com/Username" target="_blank">facebook</a>
</div>
</div>
- Ganti Username Dengan username linkedin anda
- Ganti Username Dengan username stumble anda
- Ganti Username Dengan username Twitter anda
- Ganti Username Dengan username Facebook anda
- Kalau sudah di ganti, sekarang klik simpan
