หน้าเว็บ

วันพฤหัสบดีที่ 11 พฤษภาคม พ.ศ. 2560

Widgets

8 ขั้นตอนเพิ่มโค้ด Related Posts Widget ใส่ในบล็อกเกอร์

ส่วนใหญ่การใช้งาน Widget ในบล็อกเกอร์ จะมีให้ใช้เฉพาะที่บล็อกเกอร์เตรียมไว้ให้ ส่วน Widget ที่ Extra ขึ้นมา ต้องพัฒนาหรือเขียนโค้ดใส่ในธีมหรือเทมเพลตเพิ่มเติมเอาเอง

วันนี้ผมจะมาแนะนำ วิธีเพิ่มโค้ด Related Posts Widget ใส่ในบล็อกเกอร์ เพียง 6 ขั้นตอน เราก็จะได้ Related Posts Widget ใส่ในบล็อกเกอร์ของเราแล้วครับ ตัวอย่างดังรูป


8 ขั้นตอนเพิ่มโค้ด Related Posts Widget ใส่ในบล็อกเกอร์ มีดังต่อไปนี้

1. ให้ล๊อกอินเข้า บัญชีบล็อกเกอร์ ของเรา จากนั้นก็ไปที่เมนู ธีม(template) ต่อมาให้คลิกปุ่ม แก้ไข HTML(Edit HTML) ตัวอย่าง ดังรูป



2. เมื่อมาที่หน้าแก้ไขธีม(template) ได้แล้ว ให้คลิกเม้าส์ 1 ทีที่ช่องว่างภายในโค้ด HTML จากนั้นกดปุ่ม Ctrl+F จะได้ตัวอย่าง ดังรูป



3. พิมพ์หรือคัดลอก tag ด้านล่าง ในช่องค้นหา จากในขั้นตอนที่ 2 แล้วกดปุ่ม Enter ที่คีย์บอร์ด เพื่อทำการค้นหา

</head>

4. คัดลอกโค้ดด้านล่างนี้ นำไปวางใส่ด้านบน หรือก่อน tag </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:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
5. จากนั้นค้นหา tag ด้านล่างนี้ ปกติจะค้นหาเจอ 2 ครั้ง โดยให้หยุดที่ตำแหน่งค้นหาเจอที่ 2

<div class='post-footer'>

6. คัดลอกโค้ดด้านล่างนี้ นำไปวางใส่ด้านบน หรือก่อน tag <div class='post-footer'> ที่ค้นหาเจอ

<!-- 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>
<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=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
7. กดปุ่มบันทึกธีม(Save template) ตัวอย่างดังรูป



8. จากนั้นก็เปิดดูโพสต์ในบล็อกของเราดูผลลัพธ์ได้เลยครับ จะเป็นดังตัวอย่างที่ผมโชว์ด้านบนเลยครับ


อ่านจบบทความนี้ หรือจะลองทำตาม 8 ขั้นตอนเพิ่มโค้ด Related Posts Widget ใส่ในบล็อกเกอร์ ไปที่ละ step เพื่อเพิ่ม Related Posts Widget ใส่ในในบล็อกดูนะครับ :)

ไม่มีความคิดเห็น:

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