CARA MEMBUAT WIDGET SOSIAL MEDIA PADA BLOG DENGAN MUDAH

Cara Membuat Sosial Media Di Blog Dengan Mudah

Blogger standar tanpa modifikasi seperti sayur tanpa garam. Apa jadinya ? sangat tidak enak hehhe :) tampilan blog anda yang terlihat standar akan membuat blog anda sepi pengunjung. Kenapa ? karena bisa di bilang jika terlihat standar, minim navigasi, dan lai-lain membuat penunjung kita malas berlama-lama di blog anda. Lalu bagaimana mengatasinya? salah satu nya dengan membuat widget pendukung.

Ada banyak widget pendukung yang akan membuat navigasi blog anda jelas, dapat mempermudah penunjung dalam mengeksplorasi blog anda, dan yang jelas membuat tampilan blog anda profesional. Salah satu nya dengan menambahkan widget Sosial Media. Kali ini saya akan memberikan tutorial cara membuat widget sosial media pada blog anda. Contoh nya seperti ini :

Jika di sorot widget itu akan berubah warna sesuai warna ciri khas masing-masing sosial media nya. Seperti Facebook menjadi biru tua, Twitter menjadi Biru muda, Google + menjadi merah dan RSS feed menjadi orange.

Oke tidak perlu lama-lama lagi berikut cara memasang widget circle seperti di atas :
1. Buka Blogger anda
2. Masuk / Pilih pada bagian tata letak / Layout
3. Lalu pilih HTML/Script
4. Copy script di bawah ini dan paste di kolom widget HTML nya.

<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> <p style="display:none;">Social Media Sharing by <a href="http://contohblognih.blogspot.com">CB Bloggerz</a></p> <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='nofollow' target='_blank'></a>
<!--Facebook--> <a class='facebook' href="YOUR FACEBOOK LINK" rel='nofollow' target='_blank'></a>
<!-- Twitter --> <a class='twitter' href="YOUR TWITTER LINK" rel='nofollow' target='_blank' ></a> </div>

5. Simpan template, dan lihat hasilnya.

NB:
-jangan lupa ganti tulisan warna orange dengan url feed anda
-ganti warna merah dengan url G+ anda
-ganti warna biru dengan url facebook anda
-dan warna biru muda dengan url twitter anda

Oke sekian dulu artikel saya kali ini tentang cara membuat widget sosial media keren. Semoga dapat bermanfaat dan terima kasih.