แทรกปุ่ม Pin it ของ Pinterest ใน Blogger

กระแส Pinterest มาแรงเสียจน ใครหลายคนต้องเข้าไปทดลองใช้บริการ  เพื่อไม่ให้ตกกระแส วันนี้มาชวนทำตัว อินเทรนด์กับเพื่อนบนโลกออนไลน์ด้วยการนำปุ่ม Pin it มาแปะไว้บนเวบบล็อกกันหน่อยดีกว่า  ตามมาดูขั้นตอนการนำปุ่ม Pin it ของ Pintererest มาแปะไว้ในเวบบล็อกของ blogger กันค่ะ

ขั้นตอนที่ 1  Login เข้าหน้าบล็อกของฉัน  เลือก บล็อกที่ต้องการแก้ไข  คลิ๊กเลือก เมนูปรับแต่ง >แม่แบบ  ดังรูปด้านบน

ขั้นตอนที่ 2 คลิ๊กแก้ไข html>ดำเนินการ

ขัั้นตอนที่ 3 ขยายแม่แบบวิตเจ็ตโดยติ๊กเครื่องหมายถูก  ต่อจากนั้น ค้นหา โค้ด <data:post.body/> โดยการ กด Crtl+f แล้ว paste โค้ดดังกล่าวในกล่องค้นหา จะปรากฏสีส้ม ๆ ขึ้นมาตรง code ดังกล่าว เพื่อระบุตำแหน่งให้เราทราบ

ขั้นตอนที่ 4  copy โค้ด Pin it วาง ก่อน โค้ด <data:post.body/>  เพื่อ ให้ปุ่ม แสดงก่อนบทความ และ copy  โค้ด Pin  it วาง ด้านล่าง โค้ด <data:post.body/> เพื่อให้ปุ่มแสดงตอนท้ายของบทความ

สำหรับ Code ของปุ่ม Pin it ของ Pinterest มี โค้ดแสดง 2 แบบ

แบบที่ 1 แบบแสดงในแนวนอน  

<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It Now!</a> <a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/> <script type='text/javascript'> function run_pinmarklet() { var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;); e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;); e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999); document.body.appendChild(e); } </script>

แบบที่ 2 แบบแสดงในแนวขวาง 

<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It now!</a> <a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/> <script type='text/javascript'> function run_pinmarklet() { var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;); e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;); e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999); document.body.appendChild(e); } </script>

 

ขั้นตอนที่ 5 ขั้นตอนสุดท้าย หลังการวาง Code Pin it ใส่ในเทมเพลตของบล็อกเกอร์เรียบร้อย คลิ๊ก บันทึกเทมเพลต  แล้วเข้าไปดูการแสดงผลของ Pinterest ได้แล้วค่ะ

ขอบคุณข้อมูลจาก http://www.mybloggertricks.com/