Membuat Widget Sosial Media Dengan Effect Hover

 

 

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/AVvXsEh2aQghofFjF1m0vtgORNevSOd5eeSqt62e1bxdQlJk6jL47Jj1zMlyU8AxVagSKJnRoN-tkV0EjYhdXwF9pRpuCkhtyptfPHkLSMPUZwZcOUbRqPvFdOU181Rv9DCw1ILbNjuIiDMQxFk/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/AVvXsEgAMPmRkIdi3hEd0WWO-O6-wb6_h4-oambjKc4yHc1PbcolyUjOCer4HbCpdZiiFYglfZyAnRViVzEI_rNvhUGV-tGIZ3sclwV1a7REi3ncIKd-zQy-Ng9AXx2zdvmvqFluUnqAUEa15fM/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/AVvXsEjIfiG0r12OUXHGpDdQBEzg6Hsz-7wjpSdUEReldfbIJw6wgr-C3pSNChl5H85JPb9Yt8-MFL72Doe1SK8SferSVA_5GJgJ5zZNJZOqgLzQIwSNVGinK2y9CiRQW6K9idNMe_w4-19NuXc/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/AVvXsEgKj_dla89f3AxviampOp77N0dI6yvf-as6AEfKS_s1IQmnQuJPp5rdAlxTD-zIRdVAdJEjloc0mbou0wLaUczJB3VxyOO-aGld2qpZDXCKT4L7002IJan8cr7HpMte3JV9_SQBsseRbas/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

Tweet

Subscribe to receive free email updates: