Beranda  ›  Blogger  ›  Social Media  ›  Tutorial Blog

Cara membuat Widget sosial Touch Me keren di Blog

by -
touch social media
Social Media akan menumbuhkan ketertarikan pengunjung di 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 disalip menjadi pencarian trafik. Blogger saat ini sangat tergantung pada jaringan seperti Facebook, Google plus dan twitter untuk mengarahkan trafik ke blog mereka. 

Widget ini terlihat menarik yang akan memaksa pengunjung untuk menggulung membawa kursor di atas ikon dan menekannya! :) Wadget ini terstruktur rapi dengan menggunakan tombol dari layanan populer seperti Google Plus, Facebook, Twitter dan RSS. Widget ini menggunakan HTML dasar dan beberapa gaya CSS. JIka anda tertarik, ikuti step by stepnya:

Add it to blogger

  • Masuk ke Blogger > Layout
  • add a gadget
  • Pilih HTML/JavaScript
  • Simpan code dibawah ini
<style>
/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFn3x_BVCw7h4BfItWD9Qfrm-FFKDODo8g3YkIROiePP4w3iilXesNYzmYueG0HbsZIRAZDlzFoRviSUN8tC8sH3aQn_dYBkx-wYrtOm44BFR3rRfut6jU6YskFDEMbEeydasn_XNuAsY/s1600/Sharing+Touch+Me.png) no-repeat;
Related:Cara membuat animasi burung twitter di blog
-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 {
Related:Cara memasang Widget Recent Tweet melayang
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;
}
Related:Cara membuat widget Email Subscription [4 style]
.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'>
Related:Cara mendaftar di DMOZ dan dapatkan kebanjiran visitor
<!--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 LINK" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="YOUR TWITTER LINK" rel='external nofollow' target='_blank' ></a>
</div>

Keterangan:

  • Replace YOUR RSS LINK with your Feed burner link.
  • Replace YOUR GOOGLE PROFILE LINK with your Google+ URL
  • Replace YOUR FACEBOOK  LINK  with your Facebook URL
  • Replace YOUR TWITTER LINK with your Twitter Profile URL.

Last Words

Bagaimana? sangat mudah sekali bukan? Jadi kesimpulannya, semoga widget ini akan membantu Anda untuk meningkatkan pengikut sosial Anda. Jika Anda memiliki pertanyaan maka beritahu saya di komentar. Sekian post tentang Cara membuat Widget sosial Touch Me keren di Blog. Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Maaf bila ada salah-salah kata, semoga tulisan ini dapat bermanfaat bagi anda. Tetap terhubung dengan Ujangyoyo karena akan ada postingan baru yang lebih menarik. Happy Blogging friends!


Share this

Related Posts

About Contact Disclaimer Privacy Policy Sitemap
close