Membuat Tombol Share Post Melayang di Blog

Bloger

Blogger

Minggu, 23 Juni 2013

Belum ada komentar

Tahukah temen-temen apa itu tombol share post? Tombol share post atau yang lebih dikenal sebagai tombol-tombol social bookmark sedikit banyak memang membantu meningkatkan pengunjung dari social bookmark yang bersangkutan. Contoh saja twitter, dengan mengintegrasikan feedburner dan twitter ketika ada artikel baru dari sebuah blog, maka secara otomatis akan langsung terupdate di twitter. Dengan begitu para follower yang penasaran dengan artikel tersebut akan langsung melihat artikelnya. Nah, untuk kali ini saya akan memberikan tips untuk memasang tombol share post melayang, untuk anda yang penasaran bisa dilihat contohnya disini.

Membuat tombol share post melayang ini sangat mudah karena kita tidak perlu pusing mengutak-atik HTML template kita. Kita tinggal memasukkan ke dalam widget sidebar. Untuk lebih jelasnya berikut ini adalah langkah-langkah pemasangannya :

1.  Login dengan akun blogger anda.
2.  Pilih Rancangan >> Elemen Halaman
3.  Klik tambah gadget
4.  Pilih HTML/Java Script
5.  Silahkan Copy kode berikut dan paste didalam konten HTML/Java script nya

view plainprint?

1. <style  type="text/css">  
2. *{margin:0;padding:0;}  
3.   
4. * html #z33sHare{   
5. position:  absolute;  
6. }   
7.  
8. #z33sHare{  
9. right:1%;width:  70px;background:transparant;border:0px solid  #E7E7E7;-moz-border-radius:3px;-webkit-border-radius:3px;  
10. position:fixed;  
11. top:  20%;   
12. }  
13.  
14. #z33sHare div{  
15. padding:6px 6px 6px 5px;  
16. }  
17.  
18. #stw{  
19. margin-left:-2px;  
20. }  
21.  
22. #sfs{  
23. margin-left:-5px;  
24. }  
25.   
26. </style>  
27. <div  id="z33sHare">  
28. <div id="ssl-box">  
29. <div id="stw">  
30. <a  href="http://twitter.com/share" class="twitter-share-button"  data-count="vertical">Tweet</a><script  type="text/javascript"  src="http://platform.twitter.com/widgets.js"></script>  
31. </div>  
32. <div><a  title="Post to Google Buzz" class="google-buzz-button"  href="http://www.google.com/buzz/post"  data-button-style="normal-count"></a><script  type="text/javascript"  src="http://www.google.com/buzz/api/button.js"></script>  
33. </div>  
34. <div>  
35. <script  type="text/javascript">  
36. (function() {  
37. var s =  document.createElement('SCRIPT'), s1 =  document.getElementsByTagName('SCRIPT')[0];  
38. s.type =  'text/javascript';  
39. s.async = true;  
40. s.src =  'http://widgets.digg.com/buttons.js';  
41. s1.parentNode.insertBefore(s,  s1);  
42. })();  
43. </script>  
44. <a class="DiggThisButton  DiggMedium"></a>  
45. </div>  
46. </div>  
47. <div><a  name="fb_share" type="box_count"  href="http://www.facebook.com/sharer.php">Share</a><script  src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"  type="text/javascript"></script></div><div  style="clear:both;"></div></div>  

5.  Yang terakhir tentu saja anda harus simpan.

Jika sudah selesai anda dapat lihat di sebelah kiri blog anda sekarang ada tombol share post yang melayang. Gampang bukan? Demikian tadi sedikit tutorial dari saya, selamat mencoba dan semoga bermanfaat.