Pages

Selasa, 21 September 2010

Cara Memasukkan Tombol Share Twitter/Facebook Ke Dalam Blog



Rekan-rekan blogger, saya ingin bagi-bagi ilmu lagi nich soal tombol share Twitter/Facebook ke dalam blog. Seperti yang ada di kanan atas blog saya saat ini. Jika, rekan-rekan ingin memasangnya, silahkan ikuti lebih lanjut artikel kali ini.

Tombol share ini selain berfungsi untuk dapat digunakan oleh pengunjung blog agar dapat menshare artikel yang mereka minati ke Twitter/Facebook, juga dapat melihat berapa banyak artikel itu di share ke jejaring sosial tersebut, karena akan tertera angka diatas logo tombol share Twitter/Facebook nantinya.

Okeh, jika rekan-rekan berminat untuk memasangnya, berikut ini adalah langkah-langkah yang harus ditempuh dalam pemasangannya di blog, khusus Blogger :

1. Login ke akun Blogger

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/>

Seperti biasa, pergunakan "Ctrl + F" untuk mencari kodenya

NB : Jika terdapat "dua kode yang sama", gunakan kode yang "pertama" (yang paling atas)


5. Letakkan diatas kode tersebut, kode dibawah ini :

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

6. Ganti tulisan KODE-FACEBOOK dan KODE-TWEETMEME dengan kode berikut :


Untuk Facebook :

<a href='http://www.facebook.com/sharer.php' name='fb_share' title='Share on Facebook' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>


Dan untuk Twitter :

<a class='twitter-share-button' data-count='vertical' data-via='Sayap2Kehidupan' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>


NB : Tulisan 'Sayap2Kehidupan' warna pink di kode Twitter, ganti dengan id Twitter rekan-rekan


7. Klik tombol “PREVIEW” untuk mereview perubahan tampilan template

8. Jika setelah di PREVIEW tidak terjadi perubahan, coba dicari lagi kode <data:post.body/> yang lain, karena ada template yang menggunakan kode tersebut beberapa kali, dan lakukan hal yang sama sesuai dengan point 5 diatas

9. Bila tampilannya sudah benar, silahkan klik “SAVE TEMPLATE”

10. Done!


Untuk memasang widget tersebut, rekan-rekan tidak perlu menggunakan account Twitter/Facebook. Bahkan, tidak harus juga punya account di Twitter/Facebook, karena tombol itu secara otomatis akan membaca URL artikel rekan-rekan dan menunjukkan angka link sharenya. So, bisa dipasang di blog / website mana saja.

Kode di atas adalah untuk pemasangan pada bagian atas artikel sebelah kanan. Kalau rekan-rekan mau meletakkannya di kiri, ganti kode style pada tag div menjadi seperti ini :

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

Kalau ingin memasang widget secara memanjang/menyamping, hilangkan tag <br /> atau rekan-rekan coba-coba experiment sendiri, yach! :p ..Namanya juga sekalian belajar, khan? Ntar bisa direview dulu koq sebelum disave. Hokeh okeh!!!

GuTLaK !!! (Sambil berdoa Mode : +On)

(",)v




Sumber : infonetmu.blogspot.com, berbagai sumber lainnya
Editor : AdeL`FarouK

18 komentar:

  1. nice share !

    tapi ini khan perpost yah? kalo pengen ditaruh diatas (jadi ngesharenya langsung blog), sejajar ama ikonnya rssfeed gimana yah??

    tengkyuu..

    jgn lupa mampir2 ke blogku yaa...

    BalasHapus
  2. @E.R.L.I.K.A iya, perpost.. dicoba² aja ya, biar dapet seninya.. ;p
    ok, pasti mampir koq.. thank u ;)

    BalasHapus
  3. ma'af ni saya kurang paham..

    ,aklum masih newmbie

    gmana caranya yang gampang kk

    BalasHapus
  4. @rahmat : coba bereksperimen aja di design edit HTML,, ;)

    @roliz : silahkan gan,, ;)

    BalasHapus
  5. izin sedot ilmu gan..

    BalasHapus
  6. tingkyu... aq utak-atik dg penuh prjuangan akhirnya goal jg...

    BalasHapus
  7. aduh gak bisa bisa nih... taro kode nya di sebelah mana nya yah?

    BalasHapus
    Balasan
    1. itu penjelasannya sudah ada,,
      ikutin aja langkah-langkahnya,, ;)

      Hapus
  8. boleh dicoba nih mas, tks sheringnya
    lam kenal ya mas

    BalasHapus
  9. udah di cari kodenya tpi kok gak ada ya gan,, udah brulang kali dcoba ttep gak bisa,, hmm.. mohon pencerahannya ya gan,, trims

    BalasHapus
  10. Kunjungan malem gan :)

    www.bandarfashionkeren.blogspot.com

    BalasHapus

“Hello friend, jika artikel di atas menarik menurut kamu, jangan lupa berikan sepatah dua patah kata komentarnya ya.”