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 ? kalau memang begitu, lihat demonya dibawah ini dan langsung saja kita coba membuat dibawah ini
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/AVvXsEjc6d5HBvMSm1ImBeWPuy0X4w_oRuid845qI6ZBgy9lcqOhLrTCbo_CUZVULyWIcDWCsnDP9E2fmC32pSUQPFzAunHJDvkw0T2Q7TzJQ-Cu8A4zEMArPnd6FPn6xQt3wQzDZhXy01Srz00/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/AVvXsEiwm9JVKqX3cxRIZMMJQPDsrX_bFjaUfCJ1XbBjEVn4tHTtYvZvmUYdVEpD04_2v1BVxNorxxoogZbuVY5DWjiorQ1TlzRxcqwzQp6nXCB-1G-GRDgMTSla4sbr9fKruNBDo_HbGNHGgco/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/AVvXsEjH4VRafteUkOL_GYiYV9b_bh1m1UObgthgE8rjC0SYGtTf8SXsWRFVV1OD4Ilx2DDPdCs02ZEwA1kpY0veX5SdRYC1fECKYRJlVSXUR-c5hRzc7mDv21ItPtrQKsxrouqC2DFSZ4SYXGg/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/AVvXsEiwr5KGXxENwRY4MjvumdjcbQwo11KAYFIIdcN4vi72OYHtVAmz_KUcW6px6693v7N7sBH_N3q_z8NybY8o8zo0ibyBBN2SuZIcC250I6UlEggomTtE1UCFJgObwzq65x82iXJP5GPFomA/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
Keep Blogging
