Membuat Widget Share Keren Untuk Blog

kali ini saya akan membahas bagaimana Cara Membuat Widget Share Keren Untuk Blogger, widget share kali ini sanagat sepcial karena saat pointer di arahkan pada icon secara otomatis icon tersebut akan berganti. Untuk lebih jelasnya lagi silahkan lihat gambar di bawah ini.

Cara Membuat :

1. Login ke Blog kamu.

2. Add Gadget, pilih HTML JavaScript.

3. Copy kode di bawah ini.

 

 <style>
/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://mybloggertricks.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}
.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
</style>
<div class='touchme'>
<!--RSS-->
<a class='rss' href="YOUR RSS LINK" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="YOUR GOOGLE PROFILE LINK" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="YOUR FACEBOOK PAGE" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="YOUR TWITTER PAGE" rel='external nofollow' target='_blank' ></a>
</div>

 

simpan dan lihat hasilnya

untuk keterangannya :

• ganti kode yang diberi warna merah ( weight, height) bisa kalian sesuaikan sendiri ukurannya
• ganti kode yang diberi warna kuning dengan account masing masing ( profil google plus +, alamat halaman facebook, dan halaman twitter)