Cara Membuat Widget Berbagi yang Keren
Widget yang akan saya share pada kesempatan kali ini adalah widget Social Media Sharing yang di kenal dengan sebutan widget "Touch Me". Touch Me dalam bahasa Indonesia berarti "Sentuh Saya". Sobat blogger tau, kenapa widget ini di sebut dengan widget "Touch Me"? Karena kalau cursor kita diarahkan pada masing-masing ikon, maka warna dari masing-masing ikon akan berubah menjadi ikon yang berwarna indah dan menarik.
Widget Social Media Sharing Touch Me terdiri atas beberapa jejaring sosial (Social Network) seperti Facebook, Twitter, Google Plus dan Google FeedBurner. Dari gambar yang saya siapkan di atas, sobat blogger pasti sudah bisa melihat bagaimana indahnya dan cantiknya widget blogger ini.
Cara Memasang Widget Social Media Sharing Di Blog
- Sign In di blogger.com
- Pada menu drop down, pilih Layout
- Klik Add a gadget dan pilih HTML/JavaScript
- Copy Paste kode di bawah ini pada kolom yang tersedia
<style>
/*--------TutorialBlogspot Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://beautifulbloggerwidgets.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>
<p style="display:none;">Cool Social Media Sharing Touch Me Widget by <a href="http://www.tutorialblogspot.com/">Tutorial Blogspot</a></p>
<div class='touchme'>
<!--RSS-->
<a class='rss' href="RSS LINK" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="GOOGLE+ PROFILE LINK" rel='nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="FACEBOOK LINK" rel='nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="TWITTER LINK" rel='nofollow' target='_blank' ></a>
</div>
- Simpan Widget Touch Me sobat
Tambahan :
Ganti tulisan yang berwarna merah seperti RSS LINK, GOOGLE+ PROFILE LINK, FACEBOOK LINK dan TWITTER LINK sesuai dengan akun sobat blogger
.png)
