วิธีแสดงบทความที่เกี่ยวข้องพร้อมรูปประกอบ (Related Article with thumbnail)

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

สอนทำบล็อก




วิธีสร้าง

ขั้นที่ 1 ไปที่แผงควบคุม >> รูปแบบ    >>  แก้ไข HTML   >> ขยายแม่แบบเครื่องมือ

ขั้นที่ 2 ให้ค้นหาโค้ด  </head>  แล้วแทนที่ด้วยโค้ดต่อไปนี้

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://hackublog.googlecode.com/files/related-with-thumbs.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>




ขั้นที่ 3 ต่อไปให้ค้นหาโค้ดที่มีลักษณะคล้ายหรือเหมือนกับ

<div class='post-footer-line post-footer-line-1'>

หรือพยายามหาโค้ดแบบนี้

<p class='post-footer-line post-footer-line-1'>
แล้ววางโค้ดต่อไปนี้ต่อจากโค้ดดังกล่าว
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://hackublog.blogspot.com/2009/09/blog-post_30.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://hackublog.blogspot.com' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->




หมายเหตุ  อักษรสีแดงสามารถแก้ไขได้ เช่น เลข 5 กำหนดว่าจะแสดงบทความที่เกี่ยวข้อง 5 บทความ และคำว่า Related Posts สามารถแก้ไขได้อย่างเช่นบล็อกของผมแก้เป็นคำว่า บทความที่เกี่ยวข้อง




ปล.เสร็จแล้วอย่าลืมบันทึกแม่แบบด้วยนะครับ และเช่นเคยถ้าแก้แล้วกลัวพลาดให้ ทำการสำรองแม่แบบก่อนแก้ไข HTML นะครับ

ที่มา :  bloggerplugins.org

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

  1. ถ้าไม่เอา thumbnails ให้โชว์แต่ชื่อหัวข้อ ทำอย่างไรครับ

  1. ดาวน์โหลดวิธีทำไปได้เลยครับ

    http://www.mediafire.com/file/htyzmjnwtyy/Related-post-Nothumb.rar

  1. ขอบคุณครับ

  1. ดีคับบบ

    ผมทำตามขั้นตอนแล้ว ไม่ยอมออก rerated articles ภายแต่ละบทความเลยคับบ

    ไม่รู้ผิดพลาดตรงไหน

  1. @ S.laecher : ขึ้นอยู่กับจำนวนบทความในป้ายกำกับนั้นด้วยครับ ส่วนใหญ่ที่เกิดปัญหาเป็นเพราะบทความในแต่ละป้ายกำกับน้อยเกินไป แก้ปัญหาโดยติดป้ายกำกับให้แต่ละบทความมากกว่า 1 ป้ายครับลองดู

  1. ผมว่า ผมติดป้ายทุกบทความแล้วนะครับ
    ลองเข้าไปชม blog ผมดูนะครับ

    http://tribalcenter.blogspot.com

  1. @ Tribal Country:
    เป็นอย่างที่แจ้งไว้ครับ บทความในแต่ละป้ายกำกับน้อยเกินไป
    พี่ว่าน้องลองใช้ บริการของ http://www.linkwithin.com/ ทดแทนดูครับ คุณภาพพอ ๆ กันครับ ลองดู

  1. พี่..น้องเคยทำ http://www.linkwithin.com/ เว็บนี้หลายครั้งแล้วนะครับบ

    ใส่ข้อมูลเสร็จ..กดที่ get widget ....หน้าจะ error ตลอด... ทำไม่ได้คับบ

    ออกมาแบบนี้ตลอด

    Proxy Error

    The proxy server received an invalid response from an upstream server.
    The proxy server could not handle the request POST /learn.

    Reason: Error reading from remote server

    Apache/2.2.8 (Ubuntu) PHP/5.2.4-2ubuntu5.10 with Suhosin-Patch mod_wsgi/3.1 Python/2.5.2 Server at www.linkwithin.com Port 80

    ไม่เคยทำได้เลย

  1. แบบนี้ด้วย...ทำมา 20 กว่าคร้งแล้ว

    500 Internal Server Error

    The server encountered an unexpected condition which prevented it from fulfilling the request.

    Powered by CherryPy 3.1.2

  1. @ S.laecher : เปิด feed ในบล็อกหรือยังครับ (ในเมนูการตั้งค่า)
    สำหรับคนอื่น ๆ ก็ทำได้ปกติดี ทั้งสองวิธีนี่แหละครับ มันไม่ได้ผิดพลาดที่ วิธีทำแล้วล่ะครับ มันผิดพลาดที่บล้อกของน้องนั่นแหละ ลองเปิดฟีดดูก่อน

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

    ถ้าไม่ได้จริง ๆ ก็ใช้รูปแบบอื่นครับ
    http://www.mediafire.com/file/htyzmjnwtyy/Related-post-Nothumb.rar

  1. ขอบคุณมากครับ..ทำได้แล้ว...

    แต่ติดที่หนึ่ง ไม่อยากให้โชว์หน้าแรกคับบ retated post

    อยากให้ไปโชว์หน้าคอมเม้น

    http://tribalcenter.blogspot.com/

  1. ถ้าใช้ linkwithin ให้เอาโค้ดจากขั้นตอนการ install (ดูรูป)
    http://upic.me/i/dk/20100602_100429.png

    ซึ่งจะได้โค้ดดังนี้

    <script>
    var linkwithin_site_id = ใส่ id 6หกหลักของคุณ ;
    </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>

    แล้วนำไปวางในตำแหน่งเดียวกับขั้นที่ 3 ในบทความนี้

  1. พี่ HackBlog คับ ไม่ทราบว่า จะแก้ ส่วนไหน ที่ทำให้ อืมรูปมีขนาดใหญ่ขึ้น แล้วก็ มีบทความที่มากกว่า5 บทความ หรือไม่คับ ผม ทดรองแก้จากเลข5 เป็นเลข7แล้ว แต่ก็ ทำไม่ได้คับ ลบกวนพี่HackBlog ช่วยชี้แนะด้วยคับผม
    ปล.ขอบคุณคับพี่

  1. ตอบคุณ AngelofDeath : แก้จากเลข 5 เป็นเลข 7 ถูกต้องแล้วครับ แต่ gadget นี้บางครั้งก็ไม่ทำงานกับบทความที่มีป้ายกำกับเดียว หรือกับบางป้ายกำกับที่ยังมีบทความน้อย

    ส่วนการแก้ขนาดรูปแก้ที่จาวาสคริปต์ในขั้นที่ 2 โดยดาวน์โหลดโค้ด
    http://hackublog.googlecode.com/files/related-with-thumbs.js
    และเปิดใน notepad หรือ wordpad

    จากนั้นแก้จากโค้ดบรรทัดที่ 72 จาก
    img style="width:72px;height:72px;

    เป็นขนาดที่ต้องการครับ.
    แล้วทำการ upload จาวาสคริปต์ตามวิธีที่สอนในบทความนี้
    http://www.hackublog.com/2010/01/hack-googlecode-java-script-bandwidth.html

    ฝึก upload จาวาสคริปต์ด้วยตัวเองดูครับ ระยะยาวจะเป็นผลดีครับ

  1. ขออภัย มาแก้ไขข้อมูลหน่อย
    ต้องแก้โค้ดบรรทัดที่ 86 (พอดีดูไฟล์ที่แก้ไปแล้ว) และแก้ค่า style="width:72px; ในบรรทัดติดกันให้เท่ากับกับค่าที่ได้แก้ไป เช่นถ้าแก้
    img style="width:72px;height:72px;
    เป็น
    img style="width:90px;height:90px;

    ค่า style="width:72px; ก็จะต้องถูกแก้เป็น style="width:90px; เป็นต้นครับ

  1. ขอสอบถามหน่อยนะคะ
    ในส่วนที่คุณ Tribal Country สอบถามไว้ด้านบนนี้

    "แต่ติดที่หนึ่ง ไม่อยากให้โชว์หน้าแรกคับบ retated post
    อยากให้ไปโชว์หน้าคอมเม้น"

    และ Webmaster ได้ตอบคำถามมาแล้วนั้น

    ดิฉันได้ลองทำตามแล้ว ที่ให้นำ code ไปใส่ไว้ตามขั้นตอนที่ 3 นั้น
    แต่ก็ไม่มีอะไรเปลี่ยนแปลงค่ะ Related post ยังคงแสดงที่หน้าแรก

    เนื่องจากได้จัดหน้าแรกเป็นแบบ Read more ไว้
    พอขึ้น Related post ทุกหัวข้อ เลยดูรกมากค่ะ

    ขอรบกวนสอบถามหน่อยนะคะ :D

  1. @ KimNamGil-FC : ถ้าใช้ Gadget ของ Linkwithin อ่านวิธีแก้ให้ไม่แสดงในหน้าแรกที่บทความนี้ได้เลยครับ

    การแสดง related post ด้วย Linkwithin Gadget

    ใส่โค้ดเหมือนขั้นที่ 3 เลยนะครับ

  1. ชอบมากๆเลยครับ ขอบคุณหลายๆครับ

  1. ทำตามได้แล้วค่ะ แสดง Related Post เฉพาะในหน้าบทความเท่านั้น ขอบคุณมากเลยนะคะ (-/\-)

  1. ตอนแรกใช้ linkwithin แต่ทำไปทำมามันไม่แสดงทุกบทความก็เลยเปลี่ยนมาใช้วิธีนี้ เยี่ยมมากเลยค่ะ
    ขอบคุณมากๆเลย

  1. @ Cherry : ถ้าบทความยังไม่ถูก index ส่วนใหญ่การแสดงผลก้จะไม่สมบูรณ์ครับ คือขึ้นบ้างไม่ขึ้นบ้างครับ

  1. รบกวนถามนิดนึงนะครับ ถ้าหากไม่ต้องการให้ผู้ชมเว็บคลิ๊กเซฟรูป Thumbnail ของ Related Articles จะต้องแก้ไขใน js อย่างไรครับ พอดีเป็นรูปของลิขสิทธิ์น่ะครับ เค้าไม่ให้คลิ๊กขวาเซฟ

  1. แล้วจะเซฟไฟล์ .js ด้วยโปรแกรมอะไรครับ ก่อนจะเอาไปอัปลง googlecode ครับ ขอบคุณครับ

  1. @ HongSiam :
    คำถามแรก : search ใน google หาสคริปต์ห้ามคลิกขวา เอามาติดตั้งเพิ่มครับ
    คำถามที่ 2 : คัดลอกโค้ดไปวางใน Notepad แล้วบันทึกเป็นไฟล์ที่มีนามสกุล .js ครับ

  1. ขอบคุณมาก ทำให้บทความที่มีอยู่น่าติดตามเข้าไปอ่านเพิ่มขึ้น

  1. ตอนนี้จาวาสครปต์มีปัญหาครับ แก้ปัญหาโดยดาวน์โหลดจาวาสคริปต์จาก

    http://sites.google.com/site/hackublogcodex/home/code/relatedthumbs-min.js

    จากนั้น ให้อ่านวิธีแก้ไขจากบทความ

    http://www.hackublog.com/2010/10/javascript-hackublog.html

  1. ขอบคุณสำหรับคำแนะนำครับ....แก้ได้เรียบร้อยแล้วครับ

  1. วิธีนี้ผมชอบมากกว่าครับ ชอบมากกว่าใช้ script ของ Linkwithin
    แต่อยากถามว่า ภาพที่โชว์ในนะครับ มันไม่คมอ่ะครับ
    ไม่ทราบว่าไปแก้ได้จากไหน

    ปล. ผมปรับ px ใน script แล้ว เป็น 106x106

  1. อยากทำ related post ให้แสดงใน side bar ทำอย่างไรครับ จะทำแบบของ youtube ครับ

  1. ไม่เห็นมีอะไรขึ้นมาเลย

  1. พี่ครับช่วยผมหน่อยครับ ผมทำตามแล้วมันไม่ออกอ่ะครับ ลอง 3 บล็อกแล้วครับไม่ออกเลยครับ

  1. แล้วผมลองของคนอื่น มันออกครับ แต่ไม่มีรูปแล้วผมจะทำให้มันมีรูปยังไงอ่ะครับ ช่วยหน่อยครับ

  1. ตั้งค่า random ยังไง ครับ

  1. ผมไม่เจอทั้ง 2 อันนี้เลยครับ ทำยังไงดี

    <div class='post-footer-line post-footer-line-1'>


    <p class='post-footer-line post-footer-line-1'>

  1. ลองโหลดแบบไม่มี Thumbnail ไปใช้ค่ะ ก้อทำตามขั้นตอนแล้ว แต่พอไปดูหน้าโพส ก้อไม่มี Related Post น่ะค่ะ ไม่แน่ใจว่าทำผิดตรงไหน

    ปล. ใน Template ของเว็บเรามีโค้ดนี้อยู่ 2 ที่ค่ะ

    <div class='post-footer-line post-footer-line-1'>

    เลยไม่แน่ใจว่าจะวางไว้ใต้อันไหน

    ที่เว็บนี้ค่ะ http://autoincare.blogspot.com รบกวนช่วยดูให้ด้วยนะคะ ขอบคุณค่ะ

  1. มีวิธีให้บางโพสที่ไม่มีป้ายกำกับตั้งแต่แรก ไม่ต้องแสดงคำว่า Related Post มั๊ยคะ เพราะว่าบางโพสที่ไม่มีป้ายกำกับ มันจะขึ้นคำว่า Related Posts แต่ไม่มีลิงค์อยู่แล้วน่ะค่ะ

  1. หมายเหตุ อักษรสีแดงสามารถแก้ไขได้ เช่น เลข 5 กำหนดว่าจะแสดงบทความที่เกี่ยวข้อง 5 บทคือว่าอักษรสีแดงอยู่ส่วนไหนหร๋อครับ วิธีทำที่เคยอัพไว้ก็ถูกลบไปแล้วครับ รบกวนหน่อยครับ

  1. ที่บล็อค http://jadhai-loadgame2013.blogspot.com/ นี้อะครับรบกวนหน่อยนะครับ

  1. ของผมใส่ลงไปแล้วไม่ขึ้นอะครับ ทำไงดีครับ

  1. a href='http://hackublog.blogspot.com' style='display:none;'>blogger widgets

    ฮั่นแน่ ๆๆๆๆ

  1. ขอสอบถามหน่อยจร้าา ถ้ามันไม่ขึ้น Thumbnail เวลาเอา Link ไปวางใน Facebook อยากให้มันขึ้นต้องทำไงอ่ะ เว็บเป็น C#.NET ง่ะ ขอบคุณจร้า

  1. ความคิดเห็นนี้ถูกผู้เขียนลบ
  1. ความคิดเห็นนี้ถูกผู้เขียนลบ
  1. ลองดูแล้วค่ะ Relate Post ไม่ออกค่ะ รบกวนด้วยค่ะ

    www.itrendylifestyle.com

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

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

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