Membuat Widget Sosial Media Dengan Effect Hover ~ Ron1st Blog

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/AVvXsEjWsbxpTp0X62dOD-C0AF9sA63-1nGF_oeYdTwYvzXRHGrt2ksEcsUEIbl45QRNDAL53bjegYG4qc7DVAQ2H2DTaJiTeUQDySlIc-0LkS-0Makg8Vl2Maq3W8SVHppDX96GvBLbibLE-dQ/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/AVvXsEgcUuPmKLGkSo8_jgcC5_ks8TZQczVSJObX8AE68-6_7q3UWDFqmAe02fLBexID8wcuZomntL-QGxCMCwYq9Iumpk61EKN_j585RqS0dukbMrtimD07zQjS7ST2plzNcX59_D4T4H0DKNk/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/AVvXsEjS1Nv4TUt6IMzR41YdeBK_k_Boek7HA7kxS4YcJWnc1Cg1Zba-nDJNgsrI78yqEULHvc7FZ4c8HWssufEvraOCDtkRgjR7EItd_ariK5UYLPq2jVmDZPmqFvIJuqS1d8fqje4sUjMpERE/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/AVvXsEjcKUv9adlG8_h4y-Ec19jS9obdqYSJEqzAHQQj5HGM5N-BwvAAmCmks0H0ELXtY40a9aeKnbtmNwwlQkXjsZ7bNx-DqzTwIXMyyJKjQyy0aC620QDpZCTqAGIFIMGbd78teFu9YvbPE7U/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>