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

• Tweet
• Share
• Share
• Share
• Share

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post