Cara² Memasang Button LIKE dan SHARE Facebook pada Blogger

Ini adalah pertolongan pemasangan button LIKE dan SHARE Facebook yang diminta oleh Aynora Nur. Beliau meminta agar button tersebut berada dibawah bawah setiap post/entry blog. Harap² dengan adanya tutorial ini akan dapat membantu beliau dan blogger² lain yang memerlukannya.

Tutorial Like and Share Button Facebook

Assalam....
Anastasyea, awak sibuk tak? Nak tanya dan minta tolong sikit boleh? Saya hadapi masalah nak install 'Like & Send Button' kat template saya. Kenapa ek?

Kalau awak boleh tolong, saya sertakan template saya untuk rujukan awak. Kalau ada apa2, tolong reply back ya.

Bantuan awak amat saya hargai.

Terima kasih.

Ikhlas,
Diari Cik Puan @ Aynora Nur

Cara²nya adalah;

1. Mula² sekali, sila Login Blogger.com.
2. Klik pada Design > Edit HTML >
3. Tick pada Expand Widget Templates
4. Cari code <b:if cond='data:post.hasJumpLink'>
5. dan akan kelihatan macam kat bawah ni

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:if cond='data:post.hasJumpLink'>

6. Kemudian copy code dibawah, dan pastekan sebelum code step 5. Hasilnya adalah seperti ini;

</br>
<div>
<div style='float:left; margin-left:0px;'>
<a expr:share_url='data:post.url' name='fb_share' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div style='float:left; margin-left:10px;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:400px; height:27px;'/>

</div>
</div>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:if cond='data:post.hasJumpLink'>

Penerangan;
margin-left:10px = Nilai 10 tu adalah jarak dari kiri. Kalau nak bagi jarak lagi. Sila tambah nilai tersebut.

p/s : Sekiranya anda nak menambah button² lain seperti button Google + dan Twitter. Sila pastikan code² tersebut diletakkan diantara code ini, <div style='float:left; margin-left:10px;'> dan diakhiri dengan </div> dan akhir sekali tukar nilai margin-left bersesuaian dengan paparan blog anda.

Anastasyea : Selamat mencuba !

12 comments :

  1. Awak!! thanks share!!! menjadi!! :D

    ReplyDelete
  2. Thanks a lot Anas...
    Memang betullah awak ni terror.
    Boleh pulak sy letak button tu kat blog sy, easy...

    Luv u & smile,
    Aynora Nur

    ReplyDelete
  3. Hahahaha .. tak lah ! Mana ada terror. (",)

    ReplyDelete
  4. thank u kak ana

    menjadi gak akhirnya

    ReplyDelete
  5. tak jadi2 plak..tak taulah kena[a..next time cuba lagi..huhu

    ReplyDelete
  6. Okey dah jadi..rupa2nye silap kat spatutnya
    ..haiya..sabo ajelah.. :)

    apa2 pun thanks for sharing :)

    ReplyDelete
  7. eh tak kuar plak.. code mula2 tu..terbalik je palang dia..huhu lepas br/ barulah betul..hehe

    ReplyDelete
  8. Salam saya mohon bantuan, sudah berbagai cara saya cuba dari berbagai-bagai trik yang disampaikan oleh blogger yang lainnya, namun saya tidak berjaya membuat button share didalam blog saya. Mohon jasa baik anda bantu saya untuk buat button send diblog saya. Saya amat perlukan button ini..dan disini blog sayakembalakenterprise

    ReplyDelete
  9. salam... awak, saya dah try buat . jadi tapi appear kat home. bila click entri.. xada pula buttonnya. cuma boleg dilihat di home saja. Boleh bantu? terima kasih ya

    ini blog saya

    sabdapelangi.blogspot.com

    ReplyDelete