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

Written By Aucharaporn Theemcle on วันศุกร์ที่ 20 เมษายน พ.ศ. 2555 | 01:21

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

image

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

แทรก pinterest ใน blog blog.aphsara.net

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

เพิ่ม pinterest ใน blog

ขัั้นตอนที่ 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 แบบแสดงในแนวนอน   pin it

<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 แบบแสดงในแนวขวาง  pin it

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

8 comments:

Natar Nikarus กล่าวว่า...

ปุ่มลอยไปติดหลังตัวอักษรบทความเลยครับ :)]

Aucharaporn Theemcle กล่าวว่า...

ลองใส่โค้ด < p align="left"> ตัวนี้ไว้ก่อน Code pinterest ดูนะคะ หมายถึงให้แสดงผลชิดขอบซ้าย < p align="right"> ให้แสดงผลชิดขวา < p align="center"> ให้แสดงผลอยู่ตรงกลาง ระหว่างเครื่องหมาย < กับตัว p ให้ดึงมาชิดกันเลยนะคะ เพราะกล่อง comment มันไม่ยอมแสดงผลต้องเคาะให้ห่างกันค่ะเพื่อแนะนำค่ะ

Natar Nikarus กล่าวว่า...

ขอบคุณครับ

Natar Nikarus กล่าวว่า...

เกิดข้อผิดพลาดอ่ะครับ

เกิดข้อผิดพลาดในการแยกวิเคราะห์ XML บรรทัดที่ 1615 คอลัมน์ 8: Element type "palign" must be followed by either attribute specifications, ">" or "/>".

Aucharaporn Theemcle กล่าวว่า...

กะจะเข้าไปดูเวบบล็อกว่าเป็้นอย่างไร จากหน้า Profile แต่เห็นคุณ Natar Nikarus ใช้ google plus เลยไม่รู้ url blog ...

Natar Nikarus กล่าวว่า...

urlบล็อกผมก็มี
http://dinoplayprogramandgame.blogspot.com/
กับ
http://www.informationezaguta.co.cc/
ครับ

Aucharaporn Theemcle กล่าวว่า...

แว้บไปดูมาแล้วค่ะ :) ขอให้สนุกในการปรับแต่งบล็อกนะคะ

PR-Realestates กล่าวว่า...

ขอบคุณครับ

แสดงความคิดเห็น