 |
| Galatema Awal |
Salam sejahtera
Share Button atau tombol berbagi memang sangat diperlukan dalam sebuah blog, disamping untuk menyebarkan artikel, tips serta pengetahuan kita melalui media-media seperti twitter dan facebook, tentunya juga untuk menarik pengunjung blog kita dan ini akan berefek baik bagi traffick rank sebuah blog dan mesin pencari seperti mbah google pun lebih cepat mengindex content blog kita.
Ok, saya akan jelaskan sedikit mengenai widget ini, mengapa dikatakan tombol mengapung atau mengambang? Karena ketika mouse roll diputar ke atas atau ke bawah si tombol ini tetap berada pada posisi yang sama tanpa tergoyahkan sedikitpun, asal tahu ada beberapa widget yang mirip seperti ini tapi masih bisa bergerak, beruntung yang ini tidak, :D
Lanjut... Secara tampilan cukup bagus, background transparan(lebih oke menurut saya), tombol lumayan lengkap(yang terpenting ada tombol twitter dan facebook), counter tersedia dan vertical. Kalau anda faham coding tentu bisa ditambah lagi tombolnya jika dirasa masih ada yang kurang, ukuran dan tampilan juga bisa dimodif sesuai selera, tapi saya tidak sampai menjelaskan ke hal-hal tersebut.
Okelah kalo begitu. Baiknya kita langsung praktekan saja sob.
Saya asumsikan anda sudah masuk ke blogger, klik DESIGN>PAGE ELEMENTS>ADD A GADGET pada bagian sidebar mana saja, selanjutnya cari HTML/JavaScript kalau tidak salah ada di baris ke tujuh. Klik dan copy paste kode dibawah ini tanpa harus di edit:
<style>
#galatema {display:scroll; -webkit-border-radius: 10px;
-moz-border-radius: 10px;border-radius: 10px; position:fixed; top:30%; left:5%; border: 1px solid #E8E8E8; padding:0px 0px 0px 0px; width:70px;} #galatema li {list-style:none;padding : 5px 5px 5px 5px;} #galatema a:link{color:transparent;text-shadow:none;} #galatema a:visited{color:transparent;text-shadow:none;} </style><div align="center" id="galatema">
<li><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></li> <div class='floatbutton' id='facebook'> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> <fb:like layout="box_count" show_faces="false" font=""></fb:like> </div> <div style="float: right; margin: 4px;">
<a name="fb_share" type="box_count" expr:share_url="data:post.url" 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><li><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="galatema">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></li><li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><div class="g-plusone" data-size="tall"></div></li> <li><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></li> <div class='floatbutton' id='digg'> <script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script> <!-- Medium Button --> <a class="DiggThisButton DiggMedium"></a> </div><a href="http://www.galatema.info/" target="_blank" title="GALATEMA">Galatema</a>
</div>
Selanjutnya save dan lihat hasilnya.
Sekian
Terima kasih dan silahkan bertanya jika menemui kesulitan..
Wassalmualaikum wr. wb
Regards!