Friday 17 August 2012

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

Selamat Mencoba

Sumber: http://tutorial-blogz.blogspot.com/2012/06/cara-membuat-widget-share-keren-di-blog.html


No comments:

Post a Comment

LinkWithin

Related Posts Plugin for WordPress, Blogger...
;