Ahad, 23 Februari 2014

Tutorial Menambah butang "Pinterest Pin it" ke Blog

Teks: Dalila Yusof
Bismillahirahmanirahim....

Selamat pagi dan salam sejahtera hari ini saya akan berkongsi tentang tutorial memasang pin it button di blog anda. Pinterest ibarat suatu fail yang mengumpul kesemua tutorial kraft, resepi rujukan, dan pelbagai perkara yang anda minati daripada pelbagai blog. Namun, blog tersebut perlu mempunyai butang (butang) 'Pin it' supaya mudah pembaca mengumpulkannya dalam satu fail. Pada masa sama, 'Pinterest' berfungsi seperti blog yang juga mempunyai pengikut (follower). Apa yang tersimpan dalam fail 'Pinterest' anda boleh dilihat oleh pembaca di seluruh dunia. Jadi, kongsikan perkara baik dan elok sahaja untuk tatapan pembaca.

Sumber: Pinterest
Tutorial Mengait untuk aksesori bayi.
Perkara pertama dan paling penting untuk meletakkan butang 'Pin it', anda perlu menyediakan templat salinan sandar (backup copy) supaya jika berlaku sebarang kesulitan, anda mudah setkan kembali templat kepada templat asal.

  • Pada panel kawalan (dashboard) 'Blogger', pilih "Template" pada menu di sebelah kiri. 
  • Klik pada butang "Bakup/Restore" di penjuru atas kanan. 
  • Klik pada butang "Download Full Template"
how to backup your blogger template


  • Pilih di mana anda ingin simpan fail pada komputer dan klik pada butang "Save". Sekarang teruskan mengedit templat "Blogger". Jika terdapat sebarang masalah yang timbul anda hanya perlu memulihkannya menggunakan templat sandaran tersebut. 

Menambah butang "Pin it"


  • Langkah pertama sila salin kod di bawah. Jika terdapat sebarang masalah berbangkit anda boleh melawat ke laman sesawang Blogger sentral untuk menyalin kod tersebut di laman tersebut. 

<script>
//<![CDATA[
var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
// This Pinterest Hover Button is brought to you by bloggersentral.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
</script>
  • Pergi ke templat "blogger" klik  Edit HTML
  • Cari tag </body> di bawah templat anda (a) dan salin kod di atas dan letakkan kod tersebut DI ATAS tag tadi. 
(a)
 (b)

  • Untuk menggunakan butang sendiri, gantikan kod MERAH dengan url butang baru anda. Dapatkan butang yang menarik di laman sesawang ini.
  • Klik kiri pada butang kesukaan anda di laman ini, salin url yang tertera. Gantikan pada kod yang berwarna merah. Jangan lupa "" ini perlu diletakkan semasa mengantikan kod. 
  • Untuk memudahkan anda faham rujuk video  di laman web di sini.
  • Jika anda ingin mengubah posisi butang tukarkan perkataan berwarna HIJAU ke :
topleft, topright
bottomright, bottomleft
  • Untuk menyimpan templat klik pada butang "save templat".
  • Lihat kembali pada paparan skrin blog anda, jika anda klik kiri pada imej di blog anda. Imej tersebut akan terus ke pautan "Pick a board" . Anda sudah boleh menguruskan fail "Pinterest " berkaitan blog

Jika anda klik kanan pada tetikus anda, terdapat imej butang "Pin it" pada imej di blog anda. Selamat mencuba.



Jana wang melalui blog di Akademi Bekerja Dari Rumah

Ingin selesa berjalan jauh, sewa kereta MPV dan Hiace

Rujukan: 
Pinterest
http://www.katrinaleechambers.com/how-to-add-the-pin-it-hover-button-to-your-blog-images/
http://www.digitalkonline.com/blog/how-to-add-a-pinterest-hover-button-to-your-blogger-images/

2 ulasan: