Kali ini kita akan membahas tentang bagaimana cara membuat Simple Share Buttons agar dapat diimplementasikan di Blogger. Sedikit berbeda dengan sharing button yang pernah disinggung sebelumnya yang dibuat oleh BlogNusa, sharing button kali ini merupakan aplikasi yang dibuat oleh seorang webmaster David Neal. Oleh pembuatnya, sharing button ini dapat dipakai secara gratis, jadi tidak perlu khawatir tentang masalah biaya.
Simple Share Buttons pada dasarnya dapat dipakai untuk platform Wordpress, Blogger dan Website biasa. Namun kali ini, kita akan memakainya untuk platform Blogger. Penerapan untuk platform lain pada dasarnya serupa dengan yang di Blogger. Untuk melihat versi demonya di Blogger, silahkan klik tautan dibawah.
Untuk membuatnya, pertama kali kita harus membuat kode CSS nya seperti tampak dibawah ini :
<style type="text/css">#share-buttons img {width: 35px;padding: 5px;border: 0;box-shadow: 0;display: inline;}</style>
Pasang kode tersebut diantara tag <head></head>.
Selesai memasang kode CSS nya, kemudian pasang kode HTML nya. Berikut merupakan kode HTML yang dipakai :
<!-- Simple Share Buttons --><div id="share-buttons"><!-- Facebook --><a href="http://www.facebook.com/sharer.php?u=http://www.blognusa.com" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" /></a><!-- Twitter --><a href="http://twitter.com/share?url=http://www.blognusa.com&text=Simple Share Buttons" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" /></a><!-- Google+ --><a href="https://plus.google.com/share?url=http://www.blognusa.com" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/google.png" alt="Google" /></a><!-- Digg --><a href="http://www.digg.com/submit?url=http://www.blognusa.com" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/diggit.png" alt="Digg" /></a><!-- Reddit --><a href="http://reddit.com/submit?url=http://www.blognusa.com&title=Simple Share Buttons" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/reddit.png" alt="Reddit" /></a><!-- LinkedIn --><a href="http://www.linkedin.com/shareArticle?mini=true&url=http://www.blognusa.com" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/linkedin.png" alt="LinkedIn" /></a><!-- Pinterest --><a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());"><img src="http://www.simplesharebuttons.com/images/somacro/pinterest.png" alt="Pinterest" /></a><!-- StumbleUpon--><a href="http://www.stumbleupon.com/submit?url=http://www.blognusa.com&title=Simple Share Buttons" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/stumbleupon.png" alt="StumbleUpon" /></a><!-- Email --><a href="mailto:?Subject=Simple Share Buttons&Body=I%20saw%20this%20and%20thought%20of%20you!%20 http://www.blognusa.com"><img src="http://www.simplesharebuttons.com/images/somacro/email.png" alt="Email" /></a></div>
Pasang kode tersebut di tempat dimana kamu akan menampilkan sharing button tersebut. Kalo kamu ingin menampilkannya di bawah postingan artikel, cukup tempelkan kode tersebut di bawah <data:post.body/> yang kedua. Atau pasang kode tersebut di laman depan blog kamu melalui blogger widget dengan memilih layanan menu Layout, kemudian pilih Tambah Gadget. Pilih HTML/Javascript untuk menampilkan kode sharing buttons di laman depan blog kamu. Ganti kode berwarna merah dengan kode dari alamat url web/blog kamu.
Kamu dapat mengotak-atik sendiri kode yang ada diatas jika kamu menguasai CSS dan HTML. Kamu dapat menyesuaikan tampilan sharing button dengan mengubah kode CSS atau HTML nya.
Selamat mencoba.
Credit Author : http://www.simplesharebuttons.com
Description : Cara membuat Simple Share Buttons di Blogger
Rating : 5
Reviewer : Penjaga Lilin - Cara membuat Simple Share Buttons di Blogger
