Friday, May 7, 2010

Memasang tombol share twitter/facebook

Pernah lihat tombol-tombol share seperti di samping kanan atau kiri pada suatu postingan? Ya pernah dong,kan itu ada di kanan Maksudnya, mungkin anda pernah/sering lihat ada tombol/widget share Facebook dan Twitter di bagian atas sebuah artikel blog di mana pada kedua widget itu terlihat angka yang menunjukkan banyaknya link dari sebuah artikel/posting
yang dishare oleh pengunjung blog. Bila tertarik, anda juga bisa memasangnya dengan
memasukkan kode tertentu pada template blog, sehingga pada setiap artikel secara otomatis akan terlihat berapa banyak link yang dishare pada kedua layanan online social networking tersebut (Twitter dan Facebook).
Berikut ini adalah tutorial cara pemasangannya di blog, khususnya Blogger/Blogspot.

1. Login ke akun Blooger.
2. Klik “Layout”, lalu klik tab “Edit HTML”.
3.Klik “Expand Widget Templates”.
4 Cari kode dibawah ini:

<p><data:post.body/></p> atau <data:post.body/>

5. letakkan Di atas kode tersebut, masukkan kode ini:

<div style='float:right; margin:0 0 10px 10px; text-align:center;'>
KODE-TWEETMEME
<br />
<br />
KODE-FACEBOOK
</div>

6. Ganti tulisan tulisan yang berwarna merah dengan kode berikut:
untuk twitter:

<script type='text/javascript' src='http://tweetmeme.com/i/scripts/button.js'></script>

dan untuk facebook:

<a title='Share on Facebook' 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>


tampilanya akan seperti dibawah ini:

Share




7. Klik tombol “PREVIEW” untuk mereview perubahan tampilan template.
8 Bila tampilannya sudah benar, silahkan klik “SAVE TEMPLATE”.

NB:
Untuk memasang widget tersebut (TweetMeme dan Facebook), kita tidak perlu menggunakan akun Twitter atau Facebook. Bahkan kita tidak harus punya akun di Twitter atau Facebook, karena tombol itu secara otomatis akan membaca URL artikel kita dan menunjukkan angka link sharenya yang tidak tergantung pada akun kita, jadi sebenarnya bisa dipasang di blog/situs mana saja.

Kode di atas adalah untuk pemasangan pada bagian atas artikel sebelah kanan. Kalau mau ditaruh di kiri, ganti kode style pada tag div menjadi:

<div style='float:left; margin:0 10px 10px 0;'>

Kalau ingin memasang widget secara memanjang (menyamping), hilangkan tag <br /> Atau coba experimen sendiri aja ya :P , kan nanti bisa direview dulu sebelum disave.



BACA JUGA!
- Meta tag title blog yang ramah SEO
- Membuat efek turun salju pada blog
- Menambah elemen dibawah postingan
- Menampilkan kode html dalam postingan blog
- Mengganti favicon/logo blogger
- Memasang widget user online whos amung us
- Membuat efek pelangi pada link blog
- Membuat widget tabview pada blog
- Menambah emotion pada cbox
- Memasang status ym pada blog
- memasang histats blog
- Membuat sebuah tabel dengan html
- Membuat garis dengan kode html

No comments:

Post a Comment

 

Sponsor