7 Step to Customize Linkwithin Gadget

Linkwithin Gadget เป็น Gadget ที่ช่วยแสดงบทความที่เกี่ยวของใน blogger ให้ผู้อ่านบทความได้เลือกอ่านบทความในป้ายกำกับเดียวกัน ในหมวดหมู่เดียวกันได้ง่ายขึ้น การติดตั้ง Linkwithin Gadget หรือการติดตั้ง Related Post Gadget ในบทความนั้นนอกจากจะช่วยให้ผู้อ่านเลือกอ่านบทความที่อยู่ในหมวดหมู่เดียวกัน เนื้อหาสัมพันธ์กันแล้วยังจะช่วยให้ผู้อ่านอยู่ที่บล็อกของคุณนานขึ้นซึ่งก็ส่งผลดีกับบล็อกของคุณมากขึ้นนั่นเอง

สอนทำบล็อก วิธีสร้าง blogger Linkwithin

การติดตั้ง Linkwithin Gadget นั้นไม่ใช่เรื่องยากเพียงทำตามขั้นตอน 2-3 ขั้นตอนก็ติดตั้งได้สำเร็จแล้ว แต่บางท่านที่ใช้ Automatic Readmore ก็จะทราบดีว่า Linkwithin Gadget นั้นจะปรากฎในหน้าแรกด้วย ซึ่งมันไม่ควรเป็นเช่นนั้น บทความนี้ผมจะมานำเสนอวิธีการปรับแต่ง ให้ปัญหาที่ว่านี้หมดไปและยังมีลูกเล่นในการปรับแต่งมานำเสนอเพิ่มเติมด้วย

ขั้นตอนการติดตั้ง Linkwithin Gadget

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

ขั้นที่ 1  ไปที่ Homepage ของ Linkwithin
http://www.linkwithin.com/
วิธีสร้างบล็อก สอนเขียนบล็อก แต่ง blog

ขั้นที่ 2 สร้าง Gadget
ให้คุณกรอก email + URL ของบล็อกที่ต้องการติดตั้งและให้ + เลือก platform เป็น other ส่วนเลข 3 – 4 – 5 นั้นหมายถึงจำนวนบทความที่จะแสดง ซึ่งขึ้นอยู่กับว่า Template ในส่วนบทความของคุณกว้างแค่ไหน

วิธีแต่ง blogspot

ขั้นที่ 3 รับโค้ดเพื่อนำไปติดตั้งบน blogger
เมื่อผ่านขั้นที่ 2 แล้วระบบจะสร้างโค้ดให้เราดังรูป
สอนแต่งบล็อก สอนสร้างบล็อก ทำบล็อก  

ซึ่งโค้ดที่ได้จะมีลักษณะดังนี้
<script>
var linkwithin_site_id = 253644;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts with Thumbnails" style="border: 0" /></a>
จากนั้นให้ปรับแต่งโค้ดดังนี้ (เติมโค้ดสีแดงลงไป)
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
var linkwithin_site_id = 253644;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts with Thumbnails" style="border: 0" /></a>
</b:if>
เราเติมโค้ดสีแดงลงไปเพื่อให้ Gadget ปรากฎเฉพาะในหน้าบทความเท่านั้น  ส่วนโค้ดสีเขียวเป็นเครดิตจะลบทิ้งก็ได้แต่โดยมารยาทก็ไม่ควรลบทิ้ง

ขั้นที่ 4 ติดตั้งโค้ดใน Blogger
การติดตั้งโค้ดที่ได้จากขั้นที่ 3 ทำได้โดยการนำโค้ดไปวางในตำแหน่งก่อนหน้าโค้ด </head> หรือก่อนหน้า </body> ในแม่แบบของ blogger ก็ได้
สร้าง blog ทำบล็อก blogspot
เมื่อบันทึกแม่แบบแล้วแน่นอนว่า Gadget จะยังไม่ปรากฎ

ขั้นที่ 5 กำหนดตำแหน่งที่ต้องการให้ Gadget แสดงผล
ขั้นต่อมาถ้าคุณต้องการให้แสดงผลที่ตำแหน่งใดก็ให้ใช้โค้ด้านล่างนี้ไปวางในตำแหน่งที่ต้องการของ Template
<div class="linkwithin_div"></div>
โดยก่อนจะหาตำแหน่งในการติดตั้งคุณจะต้อง ขยายเทมเพลตวิดเจ็ตเสียก่อน
สอนทำ blogspot

ตัวอย่างเช่น
5.1 ถ้าต้องการให้อยู่ตอนท้ายของบทความวางโค้ดถัดจากโค้ดใดโค้ดหนึ่งที่พบในแม่แบบของคุณ
<data:post.body/>
หรืออาจจะพบโค้ดเป็น
<div class='post-footer'>
ซึ่งขึ้นอยู่กับว่าแม่แบบของคุณจะใช้โค้ดแบบใด (แนะนำให้ติดตั้งโดยวิธีนี้)
5.2 ถ้าคุณต้องการให้ Gadget นี้ปรากฎอยู่ใต้ชื่อบทความก็วางถัดจากโค้ด
<div class='post-body entry-content'>
ซึ่งผมคิดว่าไม่ค่อยเหมาะเท่าไร
5.3 คุณอาจจะนำโค้ด
<div class="linkwithin_div"></div>
ไปติดตั้งใน HTML/จาวาสคริปต์ Gadget ก็ได้ ตามความต้องการและความเหมาะสม

หมายเหตุ 1
กรณีที่ติดตั้งแล้ว Linkwithin แสดงแค่ข้อความแสดงว่าบทความนั้นไม่มีรูปภาพประกอบนั่นเอง
หมายเหตุ 2
โค้ดที่สร้างขึ้น 1 ครั้งสามารถใช้ได้กับ 1 บล็อกหรือหนึ่งเว็บไซต์เท่านั้น ถ้าต้องการสร้างเพิ่มเติมในบล็อกอื่น ๆ อีกคุณจะต้องสร้างโค้ดใหม่อีกครั้งและทำซ้ำขั้นที่ 1-5 ในทุกครั้งที่ติดตั้งกับเว็บไซต์หรือบล็อกอื่น ๆ


ขั้นตอนการปรับแต่ง Linkwithin Gadget

ในขั้นนี้เป็นการตกแต่งเพิ่มเติมซึ่งคณอาจจะทำตามหรือไม่ทำก็ได้

ขั้นที่ 6 ปรับแต่ง Title ของ Linkwthin Gadget
เราสามารถปรับแต่งคำว่า You might also like: เป็นคำอื่น ๆ ได้โดยเติมโค้ด
<script>linkwithin_text='ใส่ข้อความที่ต้องการ:'</script>
เพิ่มลงไปจากโค้ดของเดิมเช่นถ้าผมเพิ่มโค้ดนี้เข้าไปรวมกับโค้ดในขั้นที่ 3 ก็จะได้โค้ดใหม่เป็น

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>linkwithin_text='ใส่ข้อความที่ต้องการ:'</script>
<script>
var linkwithin_site_id = 253644;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts with Thumbnails" style="border: 0" /></a>
</b:if>

การติดตั้งก็ทำเหมือนที่อธิบายในขั้นที่ 4 และ 5 เช่นเดิมครับ

ขั้นที่ 7 คุณสามารถกำหนด CSS ให้กับ Gadget นี้ได้
เช่น ถ้าผมใช้โค้ด CSS
.linkwithin_div a{color:#000}/*ลิงค์สีดำ*/
.linkwithin_div a:hover{color:#AD0000}/*เปลี่ยนเป็นสีแดงเข้ม*/
เมื่อนำ CSS โค้ดนี้ไปติดตั้งในแม่แบบโดยวางโค้ดในตำแหน่งกอ่นหน้าโค้ด ]]></b:skin>

สอนแต่งบล็อกของ blogger ิสนเหยนะ

ผลที่ได้คือสีของลิงค์จะเปลี่ยนเป็นสีดำและเมื่อนำเมาส์ไป over สีก็จะเปลี่ยนเป็นสีแดงเข้มเป็นต้น คุณอาจจะเพิ่มเติมการปรับแต่งมากกว่านี้ก็ได้โดยให้กำหนดสไตล์ไปที่คลาส linkwithin_div

หวังว่าคงเป็นประโยชน์นะครับ สวัสดีครับ

ตอนนี้มีความคิดเห็น : 13 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. คุณนี่ช่างมีน้ำใจจริงๆครับ

  1. คือว่าผมทำผิดพลาดประการใดหรือเปล่าครับ ทำไมมันถึงยังโชว์ที่หน้าแรกอยู่อ่ะครับ

    <b:if cond='data:blog.pagetype == &quot;item&quot;'>
    <script>
    var linkwithin_site_id = 681041;
    </script>
    <script src="http://www.linkwithin.com/widget.js"></script>
    <a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts with Thumbnails" style="border: 0" /></a>
    </b:if>

    นี่อ่ะครับ ชี้แนะด้วยครับ

  1. อยากให้แสดงมากกว่า 5 post ทำยังไงครับ

  1. ทำไมของผมมันไม่โชว์ชื่อละครับมีแต่รูป

  1. แจ่มครับ

  1. ขอบคุณมากครับ โครตความรู้เลยครับ

  1. ทำยังไงถึงแสดงได้มากกว่า 5 บทความ

  1. ของผมโชว์ด้านล้างแต่ไม่มีข้อมูลขึ้นเลยครับ
    ภาพตัวอย่าง http://image.ohozaa.com/i/2db/UXcvBx.png
    เว็บไซต์ http://inwprohacker.blogspot.com
    ดูหน่อยครับ

  1. สวัดดีครับ ต้องขอเเนะนำตัวก่อนเลยนะครับ ผมชื่อตี๋ เป็นคนดีของสังคมครับ
    คือผมได้ทำตามที่พี่บอกทุกอย่าง เเต่มันไม่มีรูปขึ้นเลยอ่ะครับ มีเเต่ชึ้นว่า You might also like: กับ LinkWithin
    รูปกับหัวข้อมันไม่ขึ้นอ่ะครับพี่ ช่วยชี้เเนะหน่อยครับผม ผมลองทำหลายรอบเเละ มันก็ไม่ได้อ่ะครับ ชี้ทางสว่างเเก่ผมด้วยครับ
    T T

  1. รูปไม่ขึ้นอะครับ ทำไงดี

    มีเเต่ชึ้นว่า You might also like: กับ LinkWithin

  1. มันไม่ยอมอัพเดท ชื่อบทความที่เราเปลี่ยนใหม่อะครับ

  1. ทำไงให้มันเชื่อมโยงกับบทความเราล่ะครับ

  1. http://www.linkwithin.com/ เข้าไม่ได้ซะแล้วค่ะ

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

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel