เพิ่ม Related Posts Widget บน Blogger

"

         หลังจากที่ผมเขียนเรื่อง Linux ไปเยอะแ้ล้วในบทความนี้จะมาพูดถึง Blogger บ้าง โดยวันนี้ผมจะมาแนะนำ Widget ตัวนึง เพิ่มเข้ามาใน Blogger ก็คือ Related Posts  ซึ่งเวลาเราคลิกอ่านทความแล้วอยากให้มีบทความที่เกียวข้องมาแนะนำหละ นี่แหละผมเลยจะมาสอนการเพิ่มเข้าไป มาดูวิธีกันเลยครับ

1. เข้ามาที่บล็อกของเรา แล้วไปที่ แม่แบบ-->แก้ไข HTML  จากนั้นค้นหา </head> โดยกด ctrl+F แล้วค้นหาก็ได้ครับ

2. จากนั้นวางโค้ดด้านล่างไว้หลัง </head> ครับ

<!--Related Posts with thumbnails Scripts and Styles Start B2W--><b:if cond='data:blog.pageType == "item"'><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, “Times New Roman”, 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 type='text/javascript'>var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeYcjWVcNDbaIGjIcEbFC9lyMaZmDncYk__KGwrUDtE9gmAwN9JRZMZI2gJ6zFR2bm6KnNqn5ZP5_SOGzGSWgr_wR7x3YYGeSErfIne6qonJJrP4NNV4c59GuAM0ledsmuxj_hs6fG95Y/s400/noimage.png";var maxresults=5;var splittercolor="#d4eaf2";var relatedpoststitle="Related Posts";</script><script src='http://beautifulbloggerwidgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/></b:if><!--Related Posts with thumbnails Scripts and Styles End B2W-->

3. ค้าหาโค้ด

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

ถ้าหาไม่เจอ

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

หรือ

<data:post.body/>

4. ก๊อปปี้โค้ดด้านล่างไปวางต่อจากโค้ดที่เราค้นหาข้างบนครับ

<!-- Related Posts with Thumbnails Code Start B2W--> <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div> <div style='clear:both'/> <!-- remove --></b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://beautifulbloggerwidgets.blogspot.com/' ><img style="border: 0" alt="Blogger Widgets" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmAmrih2RPRs756e2TlFSZtc9nJlhviWBtlCWc9HeFDISBfc-NrXkya4GsWx7G6_wIAGs330TY5NKdAi7MLWvYr0EDmykvt4Ke-4rS5ESEtHb_pA6oYDah9EHveo_oUGXZhkxkL6W5cZz-/s1600/blogger-widgets.png" /></a> </b:if></b:if> <!-- Related Posts with Thumbnails Code End B2W-->

จากนั้นบันทึกแล้วเปิดดูบทความของคุณได้เลยครับ ก็จะเจอครับ 

"

         หลังจากที่ผมเขียนเรื่อง Linux ไปเยอะแ้ล้วในบทความนี้จะมาพูดถึง Blogger บ้าง โดยวันนี้ผมจะมาแนะนำ Widget ตัวนึง เพิ่มเข้ามาใน Blogger ก็คือ Related Posts  ซึ่งเวลาเราคลิกอ่านทความแล้วอยากให้มีบทความที่เกียวข้องมาแนะนำหละ นี่แหละผมเลยจะมาสอนการเพิ่มเข้าไป มาดูวิธีกันเลยครับ

1. เข้ามาที่บล็อกของเรา แล้วไปที่ แม่แบบ-->แก้ไข HTML  จากนั้นค้นหา </head> โดยกด ctrl+F แล้วค้นหาก็ได้ครับ

2. จากนั้นวางโค้ดด้านล่างไว้หลัง </head> ครับ

<!--Related Posts with thumbnails Scripts and Styles Start B2W--><b:if cond='data:blog.pageType == "item"'><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, “Times New Roman”, 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 type='text/javascript'>var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeYcjWVcNDbaIGjIcEbFC9lyMaZmDncYk__KGwrUDtE9gmAwN9JRZMZI2gJ6zFR2bm6KnNqn5ZP5_SOGzGSWgr_wR7x3YYGeSErfIne6qonJJrP4NNV4c59GuAM0ledsmuxj_hs6fG95Y/s400/noimage.png";var maxresults=5;var splittercolor="#d4eaf2";var relatedpoststitle="Related Posts";</script><script src='http://beautifulbloggerwidgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/></b:if><!--Related Posts with thumbnails Scripts and Styles End B2W-->

3. ค้าหาโค้ด

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

ถ้าหาไม่เจอ

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

หรือ

<data:post.body/>

4. ก๊อปปี้โค้ดด้านล่างไปวางต่อจากโค้ดที่เราค้นหาข้างบนครับ

<!-- Related Posts with Thumbnails Code Start B2W--> <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div> <div style='clear:both'/> <!-- remove --></b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://beautifulbloggerwidgets.blogspot.com/' ><img style="border: 0" alt="Blogger Widgets" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmAmrih2RPRs756e2TlFSZtc9nJlhviWBtlCWc9HeFDISBfc-NrXkya4GsWx7G6_wIAGs330TY5NKdAi7MLWvYr0EDmykvt4Ke-4rS5ESEtHb_pA6oYDah9EHveo_oUGXZhkxkL6W5cZz-/s1600/blogger-widgets.png" /></a> </b:if></b:if> <!-- Related Posts with Thumbnails Code End B2W-->

จากนั้นบันทึกแล้วเปิดดูบทความของคุณได้เลยครับ ก็จะเจอครับ