Home » Tutorial Blogging » Cara Membuat Floating(melayang) Tombol Share Post

Cara Membuat Floating(melayang) Tombol Share Post

Satrya

October 3, 2010

32 Comments

Tutorial Blogging

Tombol share post atau yang lebih dikenal sebagai tombol-tombol social bookmark sedikit banyak memang membantu meningkatkan visitor 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 (baca : mengunjungi blog bersangkutan), menambah visitor kan ?
Sudah lama saya menggunakan floating tombol share post ini, namun sekarang saya copot sementara. Ada beberapa perbaikan dan tes-tes sana sini . Tertarik untuk memasangnya ? Silahkan ikuti step-stepnya berikut ini :

• Karena hanya pada halaman bagian dalam(single.php) saja tombol share post ini muncul, untuk itu sekarang anda buka file single.php pada template anda.
• Cari kode <?php get_header(); ?>, biasanya terletak pada baris paling atas.
• Setelah ketemu, sebelum membuat/memunculkan tombol-tombol share postnya, pertama kita buat wrappernya/pembungkusnya terlebih dahulu, sekarang anda buat kode html seperti di bawah ini tepat di bawah kode <?php get_header(); ?>

<div class="sharepost"></div>

• Kemudian sekarang anda buka file style.css (file css pada template anda). Lalu anda salin kode css dibawah ini, copykan kedalam style.css anda, simpan saja di bagian paling bawah.

.sharepost {
background:none repeat scroll 0 0 #FFFFFF;
border:2px solid #d5d5d5;
float:left;
margin-left:-140px;
position:fixed;
width:60px;
top:115px;
}

» background = untuk memberi warna pada background/warna latar pembungkus tombol share post nantinya. » border = memberikan garis pada pembungkus tombolnya. » float = agar melayang di sebelah kiri layar monitor anda. » margin-left = untuk memberikan jarak ke kiri, agar posisinya tidak menimpa body blog. » posisiton = Secara sederhana kenapa diberi Fixed adalah agar posisi tombol-tombol ini akan tetap pada posisinya walaupun anda melakukan scroll ke bawah/atas pada sebuah halaman blog. » width = lebar dari pembungkusnya. » top = Memberi jarak/mengatur jarak atas dari pembungkus tombol-tombolnya.
• Setelah itu anda buka kembali file single.php, sisipkan kode berikut pada kode pembungkus tadi.

<div class="sharer"></div>

Atau menjadi

<div class="sharepost">
<div class="sharer"></div>
</div>

• Untuk percobaan pertama kita masukan tombol retweet dulu. Silahkan anda masuk terlebih dahulu ke Twitter untuk mengambil kode tombolnya. Setelah anda mendapatkan kodenya sisipkan diantas kode-kode HTML di atas, lihat contoh :

<div class="sharepost">
<div class="sharer"><a class="twitter-share-button" href="http://twitter.com/share">Tweet</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script></div>
</div>

• Kemudian anda buka kembali style.css, sekarang kita rapih kan tombol retweet tersebut dengan memasukan kode css di bawah ini (simpan di bawah kode css yang tadi).

.sharer {
 padding:5px;
 border-bottom:1px solid #DADADA;
 }

» padding = untuk mengatur jarak antara garis pembungkus dan tombol. » border-bottom = memberikan garis bawah pemberi jarak antara 1 tombol dengan tombol lainnya.

Itu satu contoh untuk memasukan tombol retweet pada floating tombol share post. Untuk tombol-tombol social bookmark lainnya silahkan anda ikuti saja step-step diatas dan ganti kode retweet menjadi kode tombol social bookmark yang anda inginkan. Berikut ini kode-kodenya:
Facebook :

<script type="text/javascript">// <![CDATA[
var fbShare = {
url: '',
size: 'large',
google_analytics: 'true'
}
// ]]></script>
<script src="http://widgets.fbshare.me/files/fbshare.js"></script>

Digg :

<script src="http://widgets.digg.com/buttons.js" type="text/javascript"></script><a class="DiggThisButton DiggMedium"></a>

Stumbleupon :

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5&r=">// <![CDATA[ "> // ]]></script>

Google Buzz :

<a class="google-buzz-button" title="Poskan ke Google Buzz" href="http://www.google.com/buzz/post"></a>
<script src="http://www.google.com/buzz/api/button.js" type="text/javascript"></script>

Semoga bermanfaat !