Sunday, September 7, 2014

Tambah "Social Media Share Button"

Line atas Share artikel ini Share to Facebook Share to Twitter Email This Line bawah
Inginkan social media share button macam kat atas tu?
Penggunaan share button memudahkan pengunjung anda untuk share artikel anda dengan rakan-rakan mereka melalui FB, Twitter, email dll. Ini akan membantu meningkatkan trafik blog anda.
Tapi macamana nak buat? Bagi yang menggunakan Blogger, ia cukup senang sekali. Tak tahu HTML pun tak pe. Ikut je step berikut:
1.    Login  akaun Blogger anda dan pergi ke Dashboard
2.    Klik dropdown menu (A) dan  pilih template (B)
add-share-button-action @ dashboard

3.    Klik Edit HTML (C)
add-share-button-edit-html untuk masukkan kod
4.    Klik dalam ruangan HTML program (D), Mana2 pun boleh asalkan dalam ruangan HTML
add-share-button-search- cari data:post.body
5.    Tekan Ctrl F
6.    Gunakan Search (E) untuk mencari data:post.body
7.    Pastikan cursor berada di ruangan Search . Tekan Enter beberapa kali untuk  pastikan berapa bilangan data:post.body yang ada
8.    Jika bilangan data:post.body lebih daripada 1, cuba step 9 & 10 bagi data:post.body yang ke 2. Jika tak berjaya, delete dan cuba untuk yang lain pula
add-share-button-search- cari berapa data:post.body yang ada
9.    Pastekan kod berikut. Pastekan diatas data:post.body jika anda inginkan share button dibahagian atas artikel anda. Pastekan dibawah data:post.body jika anda inginkan share button selepas artikel anda. Contoh yang saya gunakan ialah dibahagian atas:
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_share'><img alt='Line atas' border='0' src='http://2.bp.blogspot.com/-sIAowFV22-I/VAlwKncJNWI/AAAAAAAAAFc/P-WzWsPQDac/s1600/share-line-ummimaryam.com.png'/></a>
<a class='addthis_button_share'><img alt='Share artikel ini' border='0' src='http://2.bp.blogspot.com/-sKqA8sU5CTg/VAk5Jy9OGSI/AAAAAAAAAE8/JfC3Ji-XAhk/s170/share-artikel-ini-ummimaryam.png'/></a>
<a class='addthis_button_facebook'><img alt='Share to Facebook' border='100' height='30' src='http://1.bp.blogspot.com/-5ps2zxPL7BA/VAnVzyBKypI/AAAAAAAAAGo/b55PclAWHjQ/s1600/share-facebook-ummimaryam.png' width='90'/></a>
<a class='addthis_button_twitter'><img alt='Share to Twitter' border='200' height='30' src='http://4.bp.blogspot.com/-FcZvynQDWIs/VAnV0HaB-tI/AAAAAAAAAGs/PShifPbn1gg/s1600/share-twitter-ummimaryam.png' width='90'/></a>
<a class='addthis_button_email'><img alt='Email This' border='100' height='30' src='http://3.bp.blogspot.com/-cHJNLy9qw84/VAnVzb0jT2I/AAAAAAAAAGk/TxhtLV057XA/s1600/share-email-ummimaryam.png' width='90'/></a>
<a class='addthis_button_share'><img alt='Line bawah' border='0' src='http://2.bp.blogspot.com/-sIAowFV22-I/VAlwKncJNWI/AAAAAAAAAFc/P-WzWsPQDac/s1600/share-line-ummimaryam.com.png'/></a>
</div>
</div>
<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:false};</script>
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd' type='text/javascript'/>
<!-- AddThis Button END -->


add-share-button-search-pastikan macam ni selepas paste

10.  Save template anda. View blog anda untuk pastikan semuanya ok
Semoga berjaya. Anda boleh hubungi saya sekiranya menghadapi masalah dan memerlukan bantuan.
Zamri Sidik
WhatsApp/ Telegram: 019913207
Email : zbs@ummimaryam.com

4 comments:

  1. Menarik share button ini, kod html di atas tak perlu edit ke? Saya lihat ada link ummimaryam diatas.

    ReplyDelete
    Replies
    1. Tak perlu edit. Boleh dpt exactly macam dlm blog ni sekarang. Ada ummimaryam sebab saya guna image (icon fb, twitter, dll) dlm blog ummimaryam. Kalau nak guna image sendiri kena ganti the whole url. Pastikan pointing to image yg betul.

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. artikel yang menarik dan bermanfaat, terima kasih sudah berbagi, semoga blog ini semakin sukses, http://obatasmatr.wordpress.com/

    ReplyDelete