Jumat, 25 Oktober 2013

Cara Membuat Widget Share keren di Blog


Cara Membuat Widget Share keren di Blog - Kali ini saya akan bahas Cara Membuat Widget Share keren di Blog. Widget share ini tentunya akan mempercantik tampilan blog sobat, karena saat mouse diarahkan ke icon secara otomatis icon tersebut akan terganti. Berikut tutorialnya:

1. Login ke Blogger
2. Klik Rancangan, Elemen laman, lalu Tambah Gadget
3. Copy kode dibawah ini di HTML/JavaScript

<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>

4. Klik Simpan. dan lihat hasilnya :)

Tidak ada komentar:

Posting Komentar