Social Share Widget "Touch Me" Untuk Blog

Social Media akan menumbuhkan ketertarikan pengunjung melalui interaksi social pada blog yang sudah menyediakan ruang untuk sharing widget dan pelayanannya. Banyak web master yang semakin kecanduan dengan alat ini karena tidak seperti trafik organik dari mesin pencari, web trafik berasal dari sosial media yang telah disulap menjadi pencarian trafik.

Blogger saat ini sangat tergantung pada jaringan seperti Facebook, Google Plus, Twitter ataupun social media lainnya yang saat ini semakin banyak variasinya dan masih diminati pengguna Internet untuk mengarahkan trafik ke blog mereka.

Widget ini terlihat menarik (lihat animasi diatas) yang akan memaksa pengunjung untuk menggulung membawa kursor di atas ikon dan menekannya dan menjadi penasaran untuk setidaknya sekali saja mengkliknya. Wadget ini terstruktur rapi dengan menggunakan tombol dari layanan populer seperti Google Plus, Facebook, Twitter dan RSS. Widget ini menggunakan HTML dasar dan beberapa tambahan CSS untuk mempercantinya. JIka rekan-rekan tertarik memasangnya di Blog rekan-rekan, ikuti panduannya sebagai berikut :

• Masuk ke akun Blogger rekan-rekan
• Pilih Menu Layout
• Add a Gadget pada element yang nantinya widget ini dipasang, biasanya sidebar atas atau header seperti yang diterapkan pada Web ini
• Pilih HTML/JavaScript
• Salin code dibawah ini pada formulir yang terbuka

<style scoped="" style="text/css">
/* Touch Me Sharing Widget modified by fenuto.com */
.touchme a{display:block;height:50px;width:50px;padding:0 4px;float:left;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzQ2ATWsfFAJD6rZZJCedyRM6qOCXXBxh-ncpv480ciHrtyswczoxty4eYgi3fI0Co3GVbzl4RCSJDpHy_VmDpm27zXkxG21pPkJjFghujFrJ0RM1W1_Yyph8syIsDs6PrT9d27LI4hLo/s1600/Sharing+Touch+Me.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:0 -58px}
.touchme a.googleplus:hover{background-position:0 0}
.touchme a.twitter{background-position:0 -290px}
.touchme a.twitter:hover{background-position:0 -232px}
.touchme a.facebook{background-position:0 -406px}
.touchme a.facebook:hover{background-position:0 -348px}
.touchme a.rss{background-position:0 -174px}
.touchme a.rss:hover{background-position:0 -116px}
</style>
<div class='touchme'>
<a class='rss' href="YOUR RSS LINK" rel='external nofollow' target='_blank'></a>
<a class='googleplus' href="YOUR GOOGLE PROFILE LINK" rel='external nofollow' target='_blank'></a>
<a class='facebook' href="YOUR FACEBOOK LINK" rel='external nofollow' target='_blank'></a>
<a class='twitter' href="YOUR TWITTER LINK" rel='external nofollow' target='_blank' ></a>
</div>

• Kemudian Save

Pengaturan :

• Ganti YOUR RSS LINK dengan Feed Burner Link milik rekan-rekan
• Ganti YOUR GOOGLE PROFILE LINK dengan Google+ URL milik rekan-rekan
• Ganti YOUR FACEBOOK  LINK  dengan Facebook URL milik rekan-rekan
• Ganti YOUR TWITTER LINK dengan Twitter Profile URL milik rekan-rekan

Jika Widget tidak berfungsi silahkan hapus (scoped="") pada baris pertama kode CSS diatas, sebenarnya attribut (scoped="") ini digunakan untuk memvalidasi Widget agar pada saat dicek Markup Validasi tidak terjadi penambahan error. Cara lain untuk mensiasati ini yaitu dengan memisahkan kode CSS dan diterapkan langsung kedalam Template.