Archive for the ‘Blogger’ Category

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

Thursday, May 11th, 2017 |

ส่วนใหญ่การใช้งาน 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 ใส่ในในบล็อกดูนะครับ 🙂

แปลงโค้ดแทรกโฆษณา Adsense ลงในบล็อก Blogger

Thursday, January 12th, 2017 |

แปลงโค้ดใส่โฆษณา Adsense ลงในบล็อก Blogger

เคยเจอกันไหมครับ เวลาที่เราจะแทรกโค้ดโฆษณาของ Google Adsense หรือแม้แต่โค้ด javascript ต่างๆ ลงใน XML template ของ Blogger พอบันทึกเปลี่ยนแปลงแก้ไขแม่แบบแล้วมันจะขึ้น Error ดังข้อความตัวอย่าง ดังนี้

“Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The processing instruction target matching “[xX][mM][lL]” is not allowed.”

หรือ

“Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The content of elements must consist of well-formed character data or markup.“

แล้วเราจะมีวิธีการอย่างไรถึงจะแทรกโค้ดโฆษณาของ Google Adsense หรือโค้ด javascript ลงใน XML template หรือ XML แม่แบบของบล็อก Blogger ของเรา มาดูกันครับ

วิธีแปลงโค้ดใส่โฆษณา Adsense ลงในบล็อก Blogger

1. ไปที่เว็บ Blogger Ad Code Converter จากนั้นวางโค้ด Google Adsense ลงไปในช่อง Paste Ad Code to Convert Here:
สมมติว่า โค้ด Google Adsense เป็นดังนี้

<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– สร้างเมื่อ 11/08/10- –>
<ins class=”adsbygoogle”
     style=”display:inline-block;width:300px;height:250px”
     data-ad-client=”ca-pub-4569076549340596″
     data-ad-slot=”6879584328″></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

เราก็วางโค้ดลงในช่อง ตัวอย่างดังรูป

2. จากนั้นกดปุ่ม Convert Ad Code จะได้โค้ดที่แปลงแล้ว ให้กดปุ่ม Highlight All  แล้วคัดลอกไว้ ซึ่งตัวอย่างโค้ดที่แปลงแล้วเป็น ดังนี้

&lt;script async src=&quot;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&quot;&gt;&lt;/script&gt;
&lt;!– &agrave;&cedil;&ordf;&agrave;&cedil;&pound;&agrave;&sup1;�&agrave;&cedil;&sup2;&agrave;&cedil;�&agrave;&sup1;�&agrave;&cedil;&iexcl;&agrave;&cedil;&middot;&agrave;&sup1;�&agrave;&cedil;&shy; 11/08/10- –&gt;
&lt;ins class=&quot;adsbygoogle&quot;
     style=&quot;display:inline-block;width:300px;height:250px&quot;
     data-ad-client=&quot;ca-pub-4569076549340596&quot;
     data-ad-slot=&quot;6879584328&quot;&gt;&lt;/ins&gt;
&lt;script&gt;
(adsbygoogle = window.adsbygoogle || []).push({});
&lt;/script&gt;

 ตัวอย่างดังรูป

3. จากนั้นให้ไปที่หน้า แก้ไขHTML ซึ่งอยู่ในเมนู แม่แบบ > แก้ไขHTML แล้วหาจุดที่เราจะแทรกโค้ด Google Adsense ลงไปแล้วเลือกวางโค้ดนั้นๆ ในตำแหน่งที่เราต้องการได้เลยครับ

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

ลองนำวิธีแปลงโค้ดใส่โฆษณา Adsense ลงในบล็อก Blogger ไปปรับใช้กันดูนะครับ

หมายเหตุ: โค้ดแที่แปลงแล้วนี้ ผิดกฏของ AdSense program policies. ด้วยนะครับ เพราะไม่มีการปรับแก้อะไร เพียงแต่แปลงตัวเปิด-ปิดแท๊ก หรือ XHTML entities เพื่อให้สามารถใช้งานใน XML template ของ Blogger ได้เท่านั้นเอง

About Me

เว็บ ilovebrowser.com(i♥b) ก่อตั้งขึ้นมาเพื่อเป็นแหล่งข้อมูล แหล่งเรียนรู้ วิธีการใช้งานเว็บเบราว์เซอร์ วิธีแก้ไขปัญหาเว็บเบราว์เซอร์ แนะนำทิป ทริก เทคนิคต่างๆ ที่เกี่ยวกับเว็บเบราว์เซอร์ ไม่ว่าจะเป็นเว็บเบราว์เซอร์ Internet Explorer,Firefox,Chrome,Opera,Safari,Maxthon และเว็บเบราว์เซอร์อื่นๆ More

Want to subscribe?

Subscribe in a reader