วิธีแสดงบทความล่าสุดพร้อมรูป แบบ Animation

<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirVOqzfKBsE1eV3kbqKbh4L-ohj7iCS-FXhXGqoJXTS-BrTxHOB-zhZ-Gz2D3vpaxlqQuC-J8xdRKmpQ92eHsa96W8wmrGyEfPkRBbDZwhVDayA4FX2pi74W70876IxHE_cxPB12G-MLDj/s1600-h/Hackublog%5B2%5D.gif"><img alt="Hackublog" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicvfea-ypPZ5W244cyZ4FFtkEbqGsqSqcMA6qpbpSQLkXNz2BZmO3SnNLW01vzdydRth2k3iFV5elIATCBaJ3ejw6kUPP6103Ags0Grgr60cEtG2EeUkvnBjfsatKy-Mk9eZE5zaQfPWSv/?imgmax=800" title="Hackublog" width="144" /></a> <br />การแสดงบทความล่าสุดจะมีประโยชน์มากในกรณีที่ผู้อ่านได้เปิดอ่านบทความอื่นอยู่ แล้วไม่ต้องการกลับมาดูบทความล่าสุดในหน้าแรกทุกครั้ง ก็สามารถเลือกอ่านได้จาก Sidebar Gadget นี้ได้ทันทีครับ <br /><b>วิธีติดตั้ง</b> <br />ไปที่แผงควบคุม >> รูปแบบ <b>Add Gadget</b> ในตำแหน่งที่ต้องการ >> เลือก Gadget ชนิด HTML/จาวาสคริปต์ >> วางโค้ดด้านล่างนี้ลงไปแก้ไขตามต้องการ โดยไม่ต้องตั้งชื่อแล้วทำกับบันทึก</p> <p> </p> <pre><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><br /><style media="screen" type="text/css"> <br /> <!-- <br /> #spylist { <br /> overflow:hidden; <br /> margin-top:0px; <br /> padding:0px 0px; <br /> height:<b><font color="#f79646">250</font></b>px; <br /> } <br /> #spylist ul{ <br /> width:<b><font color="#ff0000">318</font></b>px; <br /> overflow:hidden; <br /> list-style-type: none; <br /> padding: 0px 0px; <br /> margin:0px 0px 0px 0px; <br /> } <br /> #spylist li { <br /> width:<b><font color="#0000ff">310</font></b>px; <br /> padding: 5px 5px; <br /> margin:0px 0px 0px 0px; <br /> list-style-type:none; <br /> float:none; <br /> height:<b><font color="#00ff00">50</font></b>px; <br /> overflow: hidden; <br /> background:#EDEEEF; <br />border-top:2px solid #ffffff;border-bottom:1px solid #565656;border-left:1px solid #BBBBBB;border-right:1px solid #565656 <br /> } <br /> #spylist li a { <br /> text-decoration:none; <br /> color: #520000; <br /> font-size:11px; <br /> height:18px; <br /> overflow:hidden; <br /> margin:0px 0px; <br /> padding:0px 0px 2px 0px; <br /> } <br /> #spylist li img { <br /> float:left; <br /> margin-right:5px; <br /> background:#EFEFEF; <br /> border:0; <br /> } <br /> .spycomment{ <br /> overflow:hidden; <br /> font-family:Tahoma,Arial,verdana, sans-serif; <br /> font-size:10px; <br /> color:#262B2F; <br /> padding:0px 0px; <br /> margin:0px 0px; <br /> } <br /> --></style><br /><br /> <script language="JavaScript"> <br /> imgr = new Array(); <br /> imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";<br /> imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";<br /> imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";<br /> imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";<br /> imgr[4] = "http://i43.tinypic.com/orpg0m.jpg"; <br /> showRandomImg = true; <br /> boxwidth = <b><font color="#ff0000">318</font></b>; <br /> cellspacing = 6; <br /> borderColor = "#232c35"; <br /> bgTD = "#000000"; <br /> thumbwidth = <b><font color="#ff00ff">40</font></b>; <br /> thumbheight = <b><font color="#ff0000">40</font></b>; <br /> fntsize = 12; <br /> acolor = "#666"; <br /> aBold = true; <br /> icon = " "; <br /> text = "comments"; <br /> showPostDate = true; <br /> summaryPost = 40; <br /> summaryFontsize = 10; <br /> summaryColor = "#666"; <br /> icon2 = " "; <br /> numposts = <b><font color="#9e7c7c">10</font></b>; <br /> home_page = ' <b><font style="background-color: #ffff00" color="#ff0000">http://ใส่ชื่อบล็อกของคุณ.blogspot.com/</font></b> ';<br /> limitspy=<b><font color="#9b00d3">4</font></b> <br /> intervalspy=4000 <br /> </script> <br /><div id="spylist"> <br /><script src="http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js" type="text/javascript"></script> <br /></div></pre><br /><br /><p><br /> <br />เมื่อวางโค้ดแล้ว<u>แก้ไข</u><b>โค้ดชื่อบล็อกของคุณ และตัวเลขความกว้างยาว</b>ตามความต้องการแล้วบันทึกครับ <br /><br /> <br /><b>แนวทางการปรับแต่งและความหมายของตัวเลข</b><br /><br /> <br />ตัวเลข<b>สีแดง</b>คือความกว้างควรปรับให้พอดีกับ ความกว้งของ Template ของคุณเพื่อความสวยงาม<br /><br /> <br />ตัวเลข<b>สีแสด</b>คือความสูงของกรอบการแสดงผลซึ่งถ้าตั้งเป็น 250 ก็กำลังสวยงาม แต่ก็สามารถปรับเพิ่มและลดได้<br /><br /> <br />ตัวเลข<b>สีน้ำเงิน</b>ควรตั้งค่าให้น้อยกว่าตัวเลขสีอแดงเล็กน้อย<br /><br /> <br />ตัวเลข<b>สีเขียว</b>หมายถึงความสูงของแต่ละบทความล่าสุดที่จะแสดงผล<br /><br /> <br />ตัวเลข<b>สีชมพู</b>หมายถึงความสูงและความกว้างของรูปภาพของบทความล่าสุด<br /><br /> <br />ตัวเลข<b>สีม่วง</b> (เลข 4) นั้นหมายถึงบทความล่าสุดที่จะแสดงผลขณะ load<br /><br /> <br />และตัวเลข<b>สีน้ำตาล</b> (เลข 10) หมายถึงจำนวนบทความล่าสุดที่จะนำมาแสดง<br /><br /> <br /><b>หมายเหตุ</b> ถ้าคุณเคยติดตั้ง jquery1.3.2 ไว้ใน Tamplate แล้ว ก็ให้ตัดโค้ดด้านล่างนี้ทิ้งไปแล้วใช้เฉพาะโค้ดที่เหลือ</p><br /><br /><p> </p><br /><br /><pre><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script></pre>

วิธีแสดงบทความล่าสุดพร้อมรูป แบบ Animation

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

อ่านเพิ่มเติม »

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

<p>จากที่ได้เคยแนะนำ การจัดหมวดหมู่ให้กับบทความ ไปแล้ว ในบทความนี้จะใช้ประโยชน์จาการจัดหมู่ของบทความอีกต่อหนึ่ง ซึ่งคือการ <b>แสดงบทความที่เกี่ยวข้องกับบทความที่ผู้อ่านกำลังอ่าน</b> และถ้าหากในบทความของคุณมีรูปภาพประกอบ วิธีที่จะกล่าวถึงนี้ยังสามารถแสดงรูปภาพให้กับเราได้อีกด้วย ดังนั้นหากท่านใดยังไม่ได้ทำการจัดหมวดหมู่บทความก็ไปดูบทความการจัดหมวดหมู่ให้กับบทความด้วย Label Gadget ก่อนนะครับ</p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgplu89qLsMQ-S6gF-Z45HR7uo27Adoh702p1g3M6W_jlF5m6OWCZMPlMCSzSfseYa_EJUnZe_i7JD6M8hoNVPg5NeIblPG4Kx5BvHhABhM4-XtyBc4r84Ra1P65wF2KmIONCJG34bCnF1T/s1600-h/2010-04-07_064531.png"><img alt="สอนทำบล็อก" border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgplu89qLsMQ-S6gF-Z45HR7uo27Adoh702p1g3M6W_jlF5m6OWCZMPlMCSzSfseYa_EJUnZe_i7JD6M8hoNVPg5NeIblPG4Kx5BvHhABhM4-XtyBc4r84Ra1P65wF2KmIONCJG34bCnF1T/s400/2010-04-07_064531.png" width="400" /></a></p> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg55BkubOa0Mhkp5qXr0FPgDmu9Upoae65za7L6Os0ePhnQUVCd6CyUR6EZOPNDiw6MfgulgSV5OFgbnFl5sUMERvHCFqfDeaRpFItWaWzMoGz2yV7pZYYNT5PjZ0Fe2NfrTDmyT6ghEUjU/s1600-h/2009-09-30_224904%5B2%5D.png"> <p> <br /></p> <br /><b><font style="background-color: #ffc000">วิธีสร้าง</font></b> <br /><font color="#0000ff"><b>ขั้นที่ 1</b> ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ขยายแม่แบบเครื่องมือ</font> <br /><b></b></a> <p><font color="#f79646"><b>ขั้นที่ 2</b> ให้ค้นหาโค้ด </head> แล้วแทนที่ด้วยโค้ดต่อไปนี้</font> <br /><code></code></p> <p><code><!--Related Posts with thumbnails Scripts and Styles Start--> <br /><b:if cond='data:blog.pageType == "item"'> <br />< style type="text/css"> <br />#related-posts { <br />float:center; <br />text-transform:none; <br />height:100%; <br />min-height:100%; <br />padding-top:5px; <br />padding-left:5px; <br />} <br />#related-posts h2{ <br />font-size: 1.6em; <br />font-weight: bold; <br />color: black; <br />font-family: Georgia, “Times New Roman”, Times, serif; <br />margin-bottom: 0.75em; <br />margin-top: 0em; <br />padding-top: 0em; <br />} <br />#related-posts a{ <br />color:black; <br />} <br />#related-posts a:hover{ <br />color:black; <br />} <br />#related-posts a:hover { <br />background-color:#d4eaf2; <br />} <br />< /style> <br />< script src='http://hackublog.googlecode.com/files/related-with-thumbs.js' type='text/javascript'/> <br />< /b:if> <br />< !--Related Posts with thumbnails Scripts and Styles End--> <br />< /head></code></p> <code></code> <p> <br /><font color="#ffff00"><b>ขั้นที่ 3</b> ต่อไปให้ค้นหาโค้ดที่มีลักษณะคล้ายหรือเหมือนกับ</font> <br /><code></code></p> <p><code><div class='post-footer-line post-footer-line-1'></code> <br /></p> <p>หรือพยายามหาโค้ดแบบนี้ <br /><code></code></p> <p><code><p class='post-footer-line post-footer-line-1'></code></p> <p><code></code> <br /><font color="#ffc000">แล้ววางโค้ดต่อไปนี้<b><u>ต่อจาก</u></b>โค้ดดังกล่าว</font> </p> <p> <br /><code><!-- Related Posts with Thumbnails Code Start--> <br /><b:if cond='data:blog.pageType == "item"'> <br />< div id='related-posts'> <br />< b:loop values='data:post.labels' var='label'> <br />< b:if cond='data:label.isLast != "true"'> <br />< /b:if> <br />< b:if cond='data:blog.pageType == "item"'> <br />< 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: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> <br />< script type='text/javascript'> <br />var currentposturl="<data:post.url/>"; <br />var maxresults=5; <br />var relatedpoststitle="Related Posts"; <br />removeRelatedDuplicates_thumbs(); <br />printRelatedLabels_thumbs(); <br />< /script> <br />< /div><div style='clear:both'/> <br />< /b:if> <br />< !-- Related Posts with Thumbnails Code End—></code></p> <p><code></code> <br /><b>หมายเหตุ</b> อักษรสีแดงสามารถแก้ไขได้ เช่น เลข 5 กำหนดว่าจะแสดงบทความที่เกี่ยวข้อง 5 บทความ และคำว่า Related Posts สามารถแก้ไขได้อย่างเช่นบล็อกของผมแก้เป็นคำว่า <b>บทความที่เกี่ยวข้อง</b></p> <p>เสร็จแล้วอย่าลืม<b>บันทึก</b>แม่แบบด้วยนะครับ และเช่นเคยถ้าแก้แล้วกลัวพลาดให้ </p> <p>ทำการสำรองแม่แบบก่อนแก้ไข HTML นะครับ</p>

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

จากที่ได้เคยแนะนำ การจัดหมวดหมู่ให้กับบทความ ไปแล้ว ในบทความนี้จะใช้ประโยชน์จาการจัดหมู่ของบทความอีกต่อหนึ่ง ซึ่งคือการ แสดงบทความที่เกี่ยวข...

อ่านเพิ่มเติม »

วิธีแสดง Recent Post with thumbnail บน Blogger

<p>การติดตั้ง Gadget แสดงบทความล่าสุดบน Blogger จะมีประโยชน์ตรงที่ ทำให้ผู้อ่านหรือผู้ติดตามบล็อกของเรารู้ความเคลื่อนไหวของบล็อกเรามากขึ้น ยิ่งถ้าหากมีรูปภาพประกอบด้วยบทความก็ยิ่งน่าสนใจมากขึ้นด้วยครับ <br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiZhXf3dJdcIMCgtM4m7WFhi-s3p70fpIbnBeEXNFiuPVIn_bvR36xgIc6SDZ0R2uB8XEA-OrHhCbpWK5IlMDvpmXlrTT78YKO3rWO0A7H1nbCw2TBwl2IT7_iNYyiNx1yWp7kubAC4W7j/s1600-h/2010-07-16_142455%5B6%5D.png"><img alt="สอนทำบล็อก วิธีสร้างบล็อก คู่มือบล็อก" border="0" height="297" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFDIg5kUZhUzHcF6eaS3nnQenuGHbBWhk-bKThAxSEFkEpjnMKcR551sJAsX1Cuig56MvcL-yTdkbZ6q8ZlQDCjlvzN3ffg8odQVq4oMSS1g_wa9dge1CkqFkT0GfMeLf_9_PnYhqPEKsR/?imgmax=800" title="สอนทำบล็อก วิธีสร้างบล็อก คู่มือบล็อก" width="631" /></a> <br /><b></b> <br /><b><font color="#ffff00">ขั้นตอนการแสดงบทความล่าสุดพร้อมรูปประกอบ</font></b> <br /><b><font style="background-color: #9b00d3">ขั้นที่ 1</font></b> ไปที่ <b>รูปแบบ</b> >> <b>องค์ประกอบของหน้า</b> >> เพิ่ม Gadget ชนิด <b>HTML/จาวาสคริปต์</b> <br /><a href="http://draft.blogger.com/rearrange?blogID=5473814575979617709&sectionId=sidebar1&action=editWidget&widgetType=HTML&referrer=directory"><img alt="แต่ง blogspot" src="http://draft.blogger.com/img/widgets/icon_html.gif" title="แต่ง blogspot" width="120" /></a>HTML/จาวาสคริปต์ <a href="http://draft.blogger.com/rearrange?blogID=5473814575979617709&sectionId=sidebar1&action=editWidget&widgetType=HTML&referrer=directory"><img alt="สอนทำ Blogger" src="http://draft.blogger.com/img/plus.png" /></a> <br /><b></b> <br /><b><font style="background-color: #9bbb59">ขั้นที่ 2</font></b> วางโค้ดด้านล่างนี้ลงไป แก้ไขอักษรสีแดงและทำการบันทึกครับผม </p> <pre><script language="JavaScript"> <br />imgr = new Array(); <br />imgr[0] = "http://i43.tinypic.com/orpg0m.jpg"; <br />imgr[1] = "http://i43.tinypic.com/orpg0m.jpg"; <br />imgr[2] = "http://i43.tinypic.com/orpg0m.jpg"; <br />imgr[3] = "http://i43.tinypic.com/orpg0m.jpg"; <br />imgr[4] = "http://i43.tinypic.com/orpg0m.jpg"; <br />showRandomImg = true; <br />boxwidth = 298; <br />cellspacing = 8; <br />borderColor = "#ffffff"; <br />bgTD = "#000000"; <br />thumbwidth = 40; <br />thumbheight = 40; <br />fntsize = 12; <br />acolor = "#666"; <br />aBold = true; <br />icon = " "; <br />text = "comments"; <br />showPostDate = false; <br />summaryPost = 40; <br />summaryFontsize = 10; <br />summaryColor = "#666"; <br />icon2 = " "; <br /><b>numposts =10;</b> <br />home_page = "<a href="http://blog-app-web.blogspot.com/">http://blog-app-web.blogspot.com/</a>"; <br /></script> <br /><script src='http://siiam.bravehost.com/recentposts_thumbnail.js' type='text/javascript'/></script></pre><br /><br /><br /><b><font color="#00ff00">แนวทางการปรับแต่งโค้ด</font></b><br /><br /><blockquote>http://i43.tinypic.com/orpg0m.jpg คือภาพที่จะปรากฎเมื่อ</blockquote><br /><br /><blockquote>showRandomImg = true; คือคำสังที่ทำให้ภาพปรากฎซึ่งถ้าไม่ต้องการให้ปรากฎอาจจะตั้งค่าเป็น false ก็ได้ </blockquote><br /><br /><blockquote>boxwidth = 298; คือ ความกว้างของ Gadget นี้ สามารถเพิ่ม/ลดได้</blockquote><br /><br /><blockquote>borderColor = "#ffffff"; <br /> <br />bgTD = "#000000"; คือค่าสีพื้นหลังและเส้นขอบ</blockquote><br /><br /><blockquote>thumbwidth = 40; <br /> <br />thumbheight = 40; คือสูงและความกว้างของภาพสามารถปรับเพิ่ม/ลดได้ตามความเหมาะสม</blockquote><br /><br /><blockquote>fntsize = 12; <br /> <br />acolor = "#666"; <br /><br /> <br />aBold = true; <br /><br /> <br />icon = " "; <br /><br /> <br />text = "comments"; คือ ขนาดและสไตล์ของ font </blockquote><br /><br /><blockquote>showPostDate = false; คือการตั้งค่าให้แสดงวันที่โพสด้วยหรือไม่ ถ้าต้องการแสดงตั้งเป็น true</blockquote><br /><br /><blockquote>summaryPost = 40; คือ จำนวนอักษรที่ถูกจำกัดให้แสดง </blockquote><br /><br /><blockquote><b>numposts =10; </b>คือจำนวนบทความที่ต้องการแสดง</blockquote><br /><br /><blockquote>home_page = "<a href="http://blog-app-web.blogspot.com/">http://blog-app-web.blogspot.com/</a>"; ให้แก้ไขเป็น URL ของบล็อกของคุณ</blockquote><br /><br /><br />สำหรับคนที่ Add gadget แล้ว<u>ไม่</u>แสดงกระทู้ล่าสุด ให้ไป<u>ตั้งค่าฟีดของบล็อกให้ส่งออกแบบเต็ม (ดูรูป)</u><br /><br /><br /><b></b><br /><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4jR9tyUkA7IonEbVuTavlEaHCbs4zUycG53UC38HgZVMTsNwHITTWIum-EKsnGgLqcJbedkr5RUu_C7-69L4uCseyzatMbjJLpRsq2A4iPmxNn6nHjXkR8ijP7d91bErnI2YXgrDJjJto/s1600-h/2010-07-16_143252%5B4%5D.png"><img alt="Feed blogger" border="0" height="253" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA0TI2k5qF6NngeOoyhuEnwMlQEIg3SP0NnryhG1eS9is509YAmOHQ3CDrFxd1kgXGnO-UUre221ypybcTRDTTucpfAsyzCcqnKoiWl5zfzpZpJJD-c8YaIfJT1sXsbqIKgPjpLR43xnWF/?imgmax=800" title="Feed blogger" width="641" /></a><br /><br /><br /><b><font style="background-color: #dd8484">หมายเหตุ</font></b> หากคุณทำตามบทความนี้สำเร็จแล้วโปรดดาวน์โหลด<br /><br /><br />จาวาสคริปต์เก็บไว้หรือ upload ใช้งานด้วยตนเอง เพื่อป้องกันปัญหาการเรียกใช้งานจาก hackublog ครับ<br /><br /><pre>http://siiam.bravehost.com/recentposts_thumbnail.js</pre>

วิธีแสดง Recent Post with thumbnail บน Blogger

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

อ่านเพิ่มเติม »

วิธีแสดง Random Post บน Blogger

<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0yIGKNih4tXhO3fAJLqnTPNiXsmAN1OCTYmhgGnOG8ko84n1EFElnBFPUjQBMK5qLzjunjPxibY8zuyRx13I5gICl4hAL4DVO1wZzXDVhdRejnUZZ_Nu6a-1haUKiL93ddKQ6aeiqXiT_/s1600-h/ist2_9358542-white-dices-and-multicolored-chips%5B5%5D.jpg"><img alt="Random Posts on Blogger" border="0" height="155" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6meXHiXBP7KoGFk6C0_7qCXoaSmgb6M3Ey2s6irTCUm1v-p9B1UUpFDkL16tSM8shyULQNpscD-ORoctXhS1Z-LAtBCdXeJ8CWPmCEfN1FdTU1QwlDqB_873WEHXfEGOKsY2cKB9T2-2n/?imgmax=800" title="ist2_9358542-white-dices-and-multicolored-chips" width="179" /></a> <br />การสุ่มบทความขึ้นมาแสดง จะมีประโยชน์ตรงที่ผู้อ่านไม่ต้องเสียเวลาค้นหาบทความที่ต้องการมากนัก เพราะแต่ละครั้งที่ refresh หน้าเว็บบล็อก Gadget นี้จะทำการสุ่มบทความขึ้นมาเท่ากับจำนวนที่เรากำหนดไว้ <br /><b></b></p> <p><b>ขั้นตอนการติดตั้ง</b></p> <strong></strong> <p> <br />ไปที่แผงควบคุม >> รูปแบบ >> องค์ประกอบหน้า >> Add Gadget >> เลือก Gadget ชนิด HTML/จาวาสคริปต์ <br />จากนั้นวางโค้ดด้านล่างนี้ลงไป ตั้งชื่อ Gadget นี้ และบันทึก</p> <p> <br /><code><script type="text/javascript"> <br />var randarray = new Array();var l=0;var flag; <br />var numofpost=<b><font style="background-color: #ff0000">6</font>;</b>function randomposts(json){ <br />var total = parseInt(json.feed.openSearch$totalResults.$t,10); <br />for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}} <br />if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>'); <br />for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1]; <br />for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>"; <br />document.write(item);}} <br />}document.write('</ul>');} <br />< /script> <br />< script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></code></p> <p><code></code> <br />ตัวอักษร<b><font style="background-color: #ff0000">สีแดง</font></b>นั้นหมายถึงจำนวนบทความที่จะให้สุ่มขึ้นมาแสดง สามารถปรับเปลี่ยนได้ครับ มีข้อสงสัยประการใดเชิญสอบถามได้เลยครับ</p>

วิธีแสดง Random Post บน Blogger

การสุ่มบทความขึ้นมาแสดง จะมีประโยชน์ตรงที่ผู้อ่านไม่ต้องเสียเวลาค้นหาบทความที่ต้องการมากนัก เพราะแต่ละครั้งที่ refresh หน้าเว็บบล็อก Gad...

อ่านเพิ่มเติม »

วิธีแสดง Poppular Post บน Blogger

<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvDfy01q7pU4N5hjovGdDWeItLJPM5QlEOF9sFipyGxyXQP1n38twwFMUrowXVpjNg0edYRyiIr0MQY247ioo6cb5noZ4oiX2fXCFPfJowSqpQMEt9ULdNZssdy4DZSxbSqSTPehC3dxvE/s1600-h/popular-photoshop-tutorials%5B4%5D.png"><img alt="สอนทำบล็อก" border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOXH0gVzMQmEEU5_fVUaO2A2JVgAWQufzyxfiMSVeLYLM1rjOtzkekmilMtXIy0way922unvDCStL-BHq52RuxwL8hoz34JcnPkFWfNRK5GSV5SeakvKJuTS0TNZx8vKpQ-eiijOl0UMAW/?imgmax=800" title="popular-photoshop-tutorials" width="260" /></a> <br />การแสดง Popular Post นั้นหมายถึงการแสดงบทความที่มีการโต้ตอบ และ Comment มากที่สุด ซึ่งสามารถทำได้โดยอาศัย จาวาสคริปต์ และ Gadget ผลที่ได้ก็จะทำให้ผู้อ่าน/ผู่เยี่ยมชมได้เห็นบทความที่โดดเด่นในบล็อกของเรา หรือก็จะทำให้เราได้รับ feed back ว่า บทความไหนที่โดนใจคนอ่านมากที่สุด <br /><b>ขั้นตอนการติดตั้ง</b> <br />ไปที่<b>แผงควบคุม</b> >> รูปแบบ >> องค์ประกอบของหน้า >> เพิ่ม Gadget ชนิด HTML/ จาวาสคริปต์ แล้ววางโค้ดด้านล่างนี้ลงไป >> ตั้งชื่อ Gadget และบันทึกครับ</p> <pre><script language="JavaScript"> <br />aBold = true; <br />numposts=200; <br />maxshowresult=<b>5</b>; <br />home_page = "http://www.ใส่ชื่อบล็อก.blogspot.com/"; <br /></script> <br /><script src='http://siiam.bravehost.com/popularpostblogger-lastedit-min.js' type="text/javascript"></script></pre><br /><br /><br />จำนวน <b>5</b> หมายถึงจำนวนบทความที่จะปรากฏ สามารถปรับเปลี่ยนได้ครับ<br /><br /><br /><b>หมายเหตุ :</b> กรุณาดาวน์โหลดจาวาสคริปต์ http://siiam.bravehost.com/popularpostblogger-lastedit-min.js เก็บเอาไว้สำรองไฟล์ด้วยครับ และถ้าเป็นไปได้ให้ upload สำหรับใช้เองจะดีที่สุดครับ<br /><br /><br />

วิธีแสดง Poppular Post บน Blogger

การแสดง Popular Post นั้นหมายถึงการแสดงบทความที่มีการโต้ตอบ และ Comment มากที่สุด ซึ่งสามารถทำได้โดยอาศัย จาวาสคริปต์ และ Gadget ผลที่ได...

อ่านเพิ่มเติม »

วิธีสร้างตารางสารบัญของเนื้อหาบน Blogger

<p>บทความนี้เป็นเทคนิคง่าย ๆ ที่จะทำให้ผู้อ่านค้นหาบทความแต่ละบทความในบล็อกของเราได้ง่ายขึ้น โดยการใช้จาวาสคริปต์ร่วมกับการเขียนบทความ ผลที่ได้ก็จะคล้ายกับการท site map นั้นเองครับ สำหรับตัวอย่างตารางของเนื้อหานั้นสามารถ <br /> <br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixPUFXUUA-cOvQJbw9wXgtX71lOE_VzYBstZYs0NDSEzwQ5BlmE3RFWDpyzFZoRmBvSDMxIEW4W-046WUxb1iRjkAshkvDpV06bv1kdTciThSHU-98_uHpBUWj86QmFNazKwcjBTA4JXXA/s1600-h/toctitle%5B28%5D.png"><img alt="สอนทำ blogger" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Lma_2_QcXx08SPkzvEuGJhtsFzwbo-klC2hn12FEdgVZ1o9bAalk7AMPh_IqI4DaaAivbdjBWSHhwJIDKTHJ49kNqD6uTMYDuYPYqMTiSfsbRJnWWFf4UOiZqJnuERLhvBS45gXaZ9Rb/?imgmax=800" title="toctitle" width="240" /></a></p> <p><b>ขั้นตอนการทำ</b></p> <p>1. ไปที่แผงควบคุมแล้วเลือกบทความใหม่ <br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1PpEA1FK-oyBFIroJzfPsb1QRgQMpJ0CB5RRkpppQQcbYT5WaBqjTHGoDrdZmVJmxtqaRatv3q0lbxYT50UnN-Koe0lQr0FXp8JbiO2_JfLePYT251pqR8wAT-8HhjUxMQgrM7ivibjc1/s1600-h/2009-11-28_152557%5B12%5D.png"><img alt="สอนทำ blogspot" border="0" height="80" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheEEDD54s81P-xPCwUUzrAk0fWMFgVKFkv64d7D32a6NOwZ71SEdtWupPjH0IG6A7mK_VZsMJ8AdV9-JQM-C0tCAvnEpzyfO_Ezn5ohUib6gogN5l1vp47C21HapsH-ZbJJDgi97CzU8cp/?imgmax=800" title="2009-11-28_152557" width="339" /></a> <br />2. ตั้งชื่อบทความที่สามารถสื่อได้ว่าบทความนี้คือสารบัญของเนื้อหา <br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY7scmO1mvDE9vHjXDPXBCd5t6c5BwqQyhAZAA0Qp66gWix1vaek0brchuATonXLeuCKG1Zh9FzEfh2Crwg5hRFM85k1oV4F0F70zzEVUDsItDtxMik8bBU70O89bOXlvhKZQ7r3zDEvCp/s1600-h/2009-11-28_152938%5B4%5D.png"><img alt="blogger Template" border="0" height="284" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidTFbFIkNj5Wl5gc0mRFUBd87GVEQKy7aB8Gfk-sM6vs_Eeqox-kCH_UHYB06_0OA75pgQqGbsvE4ToVppp4jpBF1-yMvxD6nPIkpVrsfZScdMls6QC3x_MiGSh6nNqvMZy9y-IHDTrNH_/?imgmax=800" title="2009-11-28_152938" width="452" /></a> <br />3. วางโค้ดด้านล่างนี้ลงใปในบทความและทำการบันทึก <br /><code> <br /><script src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"> <br />< /script> <br />< script src="<a href="http://blog-app-web.blogspot.com/">http://blog-app-web.blogspot.com</a>/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"> <br />< /script></code> <br />แก้ไข<b>โค้ดสีแดง</b>เป็นชื่อบล้อกของคุณ <br />4. สร้างลิงค์มายังบทความนี้ ซึ่งทำได้หลายวิธี เช่น <br />4.1. Add Gadget ที่ sidebar <br />4.1.1 เลือก Gadget ชนิด <b>รูปภาพ</b> แล้วใส่ลิงก์เชื่อมโยงมายังบทความนี้ <br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRoVCpf5lCL76Z7E1bhml5Zw2e4SRHISty-o1DJXUfSDINFGtfwle6iiNai_R1UmYBzh1M-2f_3XAiB2pRc4N4PgwwPP51kMrKZH6sGjaEHesjVXGYyeeWYNRj7Odlnmk0JD5msG5rSqv4/s1600-h/2009-11-28_153903%5B3%5D.png"><img title="2009-11-28_153903" border="0" alt="สอนสร้างบล็อก" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-IdqTbqUuMn9Ua999ihdKfEGwGJDR3vaSZT6udAaNXY-f5UhO_nhlA9bJtETOJg4UtRLUc-CDRUWwRWDc4eMGtW814LgRfL8-sXz7PE0k5Z4s4TntlBjGqJ1qEBvoB7Cj8UqZ2qZNqXI/?imgmax=800" width="283" height="55" /></a> <br />4.1.2 เลือก Gadget ชนิด <b>รายชื่อลิงก์</b> แล้วใส่ลิงก์เชื่อมโยงมายังบทความนี้ <br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiShCiGcoIYFYvpzBsRM_JJckqpZ_bnkxC6Y7zBi8c5tiSzergXgAnXWGOSg0w74rGAbm9rV0XTjfPd3UmsEa9MNPYs3M_xJz5tmvoG4f3eFXmVtnt0OL8w77EqvRmfPuj_LYYs65DWEV2W/s1600-h/2009-11-28_154139%5B3%5D.png"><img title="2009-11-28_154139" border="0" alt="สอนแต่งบล็อก" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOj4SsXHD2nU1iZigW9BOtirm0mwMjM2Y5Xy0_jOXxikmMULT2qyx9jTvbt9jmBcSKBrOvgOCpgKrhbsVD-SmO99K4EFTbJr6sY6nu9z1v85FalelGJCOKxq_S0VskZp0ylSwzt_A4SKtI/?imgmax=800" width="304" height="64" /></a> <br />4.2 เชื่อมโยงจาก navigtion menu โดยตรง โดยจะต้องเข้าไปแก้/เพิ่มเติมเมนู โดยการแก้ไข HTML <br />4.3 ทำให้บทความสารบัญนี้เป็นบทความแรกเสมอ โดยใช้เคล็ดลับตามบทความนี้ >> “วิธีทำให้บทความที่ต้องการอยู่หน้าแรกเสมอ” <br />ผมแนะนำให้เลือกวิธีที่ถนัดที่สุดแล้วกันนะครับ <br /><b>หมายเหตุ</b> บทความที่แสดงในตารางสารบัญนี้จะต้องเป็นบทความที่ติดป้ายกำกับแล้วเท่านั้น <br />และเช่นเคยครับหากมีข้อสงสัยประการใดสอบถามได้เลยครับ</p>

วิธีสร้างตารางสารบัญของเนื้อหาบน Blogger

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

อ่านเพิ่มเติม »

วิธีทำให้บทความที่ต้องการอยู่หน้าแรกเสมอ

<p>บทความนี้ก็เป็นเทคนิคเล็กๆ น้อยๆ แต่มีประโยชน์มากสำหรับใครที่อยากให้บทความสำคัญ หรือที่บทความที่ตนเองชื่นชอบอยู่หน้าแรกสุดเสมอ ด้วยวิธีการง่ายๆ ดังนี้ครับ <br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-QWAzZtHU4zgoyPTi3NB3_5bzd_PBI3dAef5kb0g3CmomKRygd_zGBRFFWgxlRZZO9y2o8AMd6OXUXapjQkzWBqmRcgULGk8wEbPOp1rTqnrrNGhlcgueg3J-LmFaOGYep3mvcQHL-OZP/s1600-h/flj5mw%5B2%5D.png"><img alt="สอนทำ blogger" border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioNyVlxG7LFNGAH8tVv1aQkcqkdNNGChv6cuAwTBBW8NK5nQO8rwU9qy4tWgkqBp31bl_4G0Gu1l-FtwN_JozPbWJUBzJI9BJuhh7-oN4Kcz3jVjP1Vf1ftfzfVkTr3p_nxb3ZWakwWPgs/?imgmax=800" title="flj5mw" width="244" /></a> <br /><b>ขั้นที่ 1</b> ไปที่แผงควบคุม >> แก้ไขบทความ แล้วเลือกแก้ไขบทความที่ต้องการ <br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6JlPS5knCqVDRKXhmSNMx-4A5wR-HWfIYeTUzWHCDyhRrm9Ca8My_1O4LKYOKrN3na1Dw6HLwKdNHtM-Bb2DOSjCL4_6cucz_anHO9zrxi3jGs2OL4JqFzXNmAJuDhSPQm5HapLSoKlMA/s1600-h/2009-10-07_011119%5B2%5D.png"><img alt="สอนทำบล็อก" border="0" height="79" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1S7eszoIMbjwbfkZjFGpTbDcjecpU4_ch4Ogm3NovQreh9F_06G2ka6O1v2W4KkoGwWK7PZvBz5oxjw2IguywoxOIFn-myZab_VJpPPpeE047QIDibqeZzitBQjxECa64VS9c1UMt35ZZ/?imgmax=800" title="2009-10-07_011119" width="244" /></a> <br /><b>ขั้นที่ 2</b> ให้สังเกตเมนูด้านล่างของการเขียน/แก้ไขบทความ จะมีเมนูชื่อว่า <b>ตัวเลือกของบทความ </b> <br /><b>ขั้นที่ 3</b> ให้แก้วันที่ของบทความที่ต้องการแสดงในหน้าแรก เป็นวันที่หลังจากวันที่ของบทความสุดท้าย (ถ้าอยากให้อยู่หน้าแรกเสมอจริงๆ ก็แก้ คศ. ให้เป็นปีหน้าเลยก็ได้ครับ) <br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia6Xk5as6C7dEXbv78IDPxJvbdzh0ibcsmB0jONa-60BoksJBDYuFDDiOwuh2PQOka_G-0rO8054eB9iJ_vmOA4IGgmWb9am8UWfPLJv-bzNzgG9hnUXt1KSHcmq8_fsF9SMLsTKX1IhY9/s1600-h/2009-10-07_010000%5B6%5D.png"><img alt="สอนแต่ง blogger" border="0" height="309" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjShKS7iD3ByckaF-Px104aKu1nXblQ9sGuv3viDsGyoaJHnBiEfzfTvBoeNBMWMoA_XoEFcFvP6chE9zHrT7JuPngZuOM5W4f_KL5qpydbPht2JELUVgq84AA8kMCHlUvhPBcKn5v_SaFp/?imgmax=800" title="2009-10-07_010000" width="338" /></a> <br />เมื่อตั้งค่าเสร็จแล้วก็ทำการบันทึกครับ เท่านี้บทความที่คุณโปรดปรานก็จะอยู่ในหน้าแรกสุดของบล็อกทุกครั้งที่เปิดชมแล้วครับผม</p>

วิธีทำให้บทความที่ต้องการอยู่หน้าแรกเสมอ

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

อ่านเพิ่มเติม »

วิธีทำให้ URL ของบทความใน Blogger เป็นมิตรกับ SEO

<p align="center"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaX_3SDHlYBsML3jwO96Ll84r-u1UIMQIVSDQ0E7ICwqLcQDoZpdduqGOHPz6oQCBudsUvUma5tqq_JmZ44KkkO-vMmN4evWg49C7gHQa5AF8cZmewsKuvXhs-aoEatJp2R2ZdAapAyaeq/s1600-h/3%5B3%5D.png"><img alt="สอนทำบล็อก" border="0" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh00pJH5yRaqgFhlzsb1trqpt7vpqM-rxjV7va6Y_-ew3GK_PbsTLRF9_uTNGhPk8Aes2W36NKZj7K5zMKcKeGaLtNtW5QlnHq1bantP4iHbIv3LY1IKT35SxMbFywmM3lnG60VKaQLubaa/?imgmax=800" title="สอนทำบล็อก" width="260" /></a> <br />ถ้าคุณเคยค้นหาบทความใน Google จะเห็นว่าผลลัพธ์ในการค้นหาบาง URL นั้นจะมีชื่อตรงกับสิ่งที่คุณต้องการ หรือสื่อได้ว่ามีเนื้อหาที่เกี่ยวข้องกับสิ่งที่คุณต้องการ ซึ่งทำให้คุณตัดสินใจที่จะเลือกอ่านเนื้อหานั้น ๆ ได้ง่ายขึ้น <br />ในทำนองเดียวกันลองมาสังเกต URL ของบล็อกของคุณดูบ้างว่า มันสื่อความหมายดีหรือไม่ ในที่นี้ผมยกตัวอย่างบทความในบล็อกของตนเองให้ดูดังนี้ : </p> <p align="center">โดยใช้วิธีการง่าย ๆ คือเอาชื่อบทความในบล็อกของผม(ของคุณ) ไปค้นหาใน Google ซึ่งได้ผลลัพธ์ดังนี้</p> <p align="center"><b>ตัวอย่างที่ 1</b></p> <p align="center"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibOmjfuyrIh-8z7GOf0CY4ZYc78bb67ogxpD73TwO5wYU27t7oQJR_JmPeS-corusLcLTwUryTxCqitIB_-ad0zUgO2DuPEK68ReO6OCHQOil0KB2sp8l-r3RffL1j03w0SmoD2Vq7gMKW/s1600-h/image%5B6%5D.png"><img alt="สอน blogger" border="0" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1K99uRjfMs7OeNFXVT91kQIsbyN-eHefpBDWKJh000pJUMZ_CV4Ma9r5u4jtxGh6M-eS1Ir7ciuBjHHeG3pDK9w4364p3iwC7V5xtyOmAQ6-Q3ZlQEAH9wGgppCHaYpLQ5aEwLNqaQn52/?imgmax=800" title="สอน blogger" width="503" /></a></p> <p align="center"><b>ตัวอย่างที่ 2</b></p> <p align="center"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMQK0l_aZazrEVabMOO4CEABMelrmPfyPCx4v2YEHnSpeHEEqyEJvgamw7lw_jTlqVLyjYxm2tQDWYg06NA-08jqMTIdpGtQJFimxPS-iK9XBUarfjRtK-poHMg4oIUEVHy8FsD-JuBrqp/s1600-h/image%5B11%5D.png"><img alt="วิธีสร้าง blog" border="0" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhykg5IvvmTS8IePGKmAHVJptk7TbVcDu3cNwRTEQ-CSCiHjpJ9dxT-u94xHrZ2RKe4RgNsOWaP2IgLQYlbP2JteD499Qrw8sK3mZvmQJEYWFP7BxpQTfQ6ZDdcdMWOotnzMzzADQ5zgUz9/?imgmax=800" title="วิธีสร้าง blog" width="519" /></a></p> <p align="center">จะเห็นได้ว่า URL ของบทความในตัวอย่างที่ 1 นั้นไม่สัมพันธ์กับเนื้อหาเลย สาเหตุที่เป็นเช่นนี้เพราะว่า โปรแกรมของ Blogger ยังไม่สร้าง URL ที่เป็นภาษาไทยได้ แต่สำหรับบทความที่ 2 ที่ใช้ชื่อเป็นภาษาอังกฤษกลับมี URL ที่สื่อความหมายถึงเนื่อหาของบทความมาก ๆ </p> <p align="center">หลังจากที่ผมได้สังเกตเห็นจึงได้ทำการทดลองในการเขียนบทความถัดมา ก็เลยพบเทคนิคในการสร้าง Post URL ใน Blogger ให้มีความหมายและตรงกับที่เราต้องการได้ตามใจชอบ</p> <p align="center"><b>ขั้นตอนการทำให้ Blog URL เป็นมิตรกับ SEO</b></p> <p align="center"><b>ขั้นที่ 1</b> เขียนบทความตามปกติ โดยให้<u>ตั้งชื่อเป็นภาษาอังกฤษ</u>ที่สามารถสื่อความหมายถึงเนื้อหาในบทความนั้น ๆ ได้</p> <p align="center"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuSNSbuoVsTfAKc5ZFb97YJnsIpNDtezFGmW2tQEoOKd-sh0_h8M8v6-DPk1av9ABi842sYNwFaWMUUJ_LibQONKVjhcdrAYN4wWpis09ZA5to6tOWffJJ5SD0HN668QGcBJLGQFIwGHdW/s1600-h/5%5B4%5D.png"><img alt="สอนทำ blogger" border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqVyjETwatzay-nxBweqVhRUnWBmFv41u_G0FP2lDbl9hf4B46O1fQDELn_nnXQu01tqfnYZeUKiZxYwX0pDCv8VN9Z01FKGLpPN0z7u3Dyo_4nAKgWV2C-UIM09XLxERBPMcmX17AuD_/?imgmax=800" title="สอนทำ blogger" width="462" /></a></p> <p align="center"><b>ขั้นที่ 2</b> เมื่อเขียนเสร็จแล้วก็ให้โพสบทความตามปกติ</p> <p align="center"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqp3mcIxpIBMLKkerTK6Ko1bp6_mxPuTJwhgVIxfi7Wm6JmmQX0wpGgy7_HPv_CqV6XmnZi75W-SxIilUso1gz1Y4AMtB87Tr71tB41N4l13Qc8z921q8OLtCMsMrutkhEq7ffZ96gN0HV/s1600-h/4%5B5%5D.png"><img alt="ทำ blogger SEO" border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3TxxafqKodxsD2_JSfH7EFGNTJNY5D3A0XMkGNsHPwGOPEBCNJOk-tRcHeuxCRse8kCvctF5F2ZdH81XRC1GmtAeiA_FrttLVmVVrt6daALdgechzOcdB-Let-h5zWpg5DrHyAPMlKmc-/?imgmax=800" title="ทำ blogger SEO" width="461" /></a></p> <p align="center"><b>ขั้นที่ 3</b> ไปที่แผงควบคุม >> แก้ไขบทความ >> เปลี่ยนชื่อบทความใหม่ให้เป็นชื่อภาษาไทยหรือชื่อใด ๆ ก็ได้ที่คุณต้องการ <b><u>แต่</u></b>ถ้าหากคุณชอบชื่อของบทความที่เป็นภาษาอังกฤษอยู่แล้วก็ไม่ต้องแก้ไขใด ๆ ในขั้นตอนที่ 3 นี้</p> <p align="center"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYEpoPK29-7AWnFsiAgUk2LIJNvh-Fi565J9AQ9NV8a5-vbVVRdAyUXYPUOGKD7kTtUalJXyJllwXDEuIgcfc874tUD7lal0aqPxjTyuxG_w7AUDLn9RbPjacAl47Bt2ONGoXhqJlx7D0Z/s1600-h/image%5B16%5D.png"><img alt="สอน blogspot" border="0" height="291" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV94o7hSgDAwAOwxfTE_yHegkkM3A3TeR-SJQu1FXuLGpqo36aFNmN9lIVQuMcflWYsyBPq4_1erDpLu_vDPBHD3nySHo8eCfvA2sKc1R9jo4646vEqkd0PNwvKCIND0IQ4zs7rZn9g8uy/?imgmax=800" title="สอน blogspot" width="459" /></a></p> <p align="center">เมื่อดำเนินการตามขั้นตอนตามข้างต้นแล้วลองดูผลลัพธ์ที่ URL ของบทความในบล็อกของคุณดุว่ามีผลอย่างไร สุดท้ายหวังว่าบทความนี้จะเป็นประโยชน์กับ blogger ทุกท่าน ขอบคุณครับ</p>

วิธีทำให้ URL ของบทความใน Blogger เป็นมิตรกับ SEO

ถ้าคุณเคยค้นหาบทความใน Google จะเห็นว่าผลลัพธ์ในการค้นหาบาง URL นั้นจะมีชื่อตรงกับสิ่งที่คุณต้องการ หรือสื่อได้ว่ามีเนื้อหาที่เกี่ยวข้อ...

อ่านเพิ่มเติม »

วิธีทำ Automatic Read more ให้บทความบน Blogger

<p>ถ้าสังเกตจากหน้าบล็อกของผมก็จะเห็นว่าทุกบทความจะไม่ถูกแสดงให้เห็นทั้งหมดแต่จะแสดงอย่างย่อเท่านั้น การทำแบบนี้จะเป็นการช่วยให้เปิดหน้าแรกบล็อกได้เร็วขึ้น อีกทั้งยังเป็นช่วยให้ผู้อ่านค้นหาสิ่งที่ต้องการได้เร็วขึ้น และในกรณีที่บทความของเรามีภาพประกอบ วิธีการที่จะกล่าวถึงต่อไปนี้สามารถแสดงรูปภาพให้เห็นในบทความแบบย่อได้ด้วย</p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBTFYabR0yHzSChUIbrwr98cUm8aP2zb0pBIWTuoEPV8rlJXkcPb6YT16SNyXn9mh2qdSG9LT0arVzG-1jZXfLv1S3lXAlb2ZE-c_KPyvO_760wDBYSLetfJ0zl3Hqx79aD9F228MQJ5f2/s1600-h/readmore.png"><img alt="สอนใช้งาน blogger" border="0" height="261" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBTFYabR0yHzSChUIbrwr98cUm8aP2zb0pBIWTuoEPV8rlJXkcPb6YT16SNyXn9mh2qdSG9LT0arVzG-1jZXfLv1S3lXAlb2ZE-c_KPyvO_760wDBYSLetfJ0zl3Hqx79aD9F228MQJ5f2/s400/readmore.png" width="400" /></a></p> <p><b>ขั้นที่ 1</b> ไปที่ แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ขยายแม่แบบเครื่องมือ</p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWO5x0T1xzGt1M_3P79JKybBudSt631-VyZ6F4E8miRm5A5pbsjd07xutZiyvklK579Cv5k8WqfSyOzrwC0VZfR4F4sIysh4FiRzVv6UnEZIqemMT1HariMyVoHBkQQ6FAUUc4Vb-8bslS/s1600-h/%E0%B8%82%E0%B8%A2%E0%B8%B2%E0%B8%A2%E0%B9%81%E0%B8%A1%E0%B9%88%E0%B9%81%E0%B8%9A%E0%B8%9A.png"><img alt="blogger template" border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWO5x0T1xzGt1M_3P79JKybBudSt631-VyZ6F4E8miRm5A5pbsjd07xutZiyvklK579Cv5k8WqfSyOzrwC0VZfR4F4sIysh4FiRzVv6UnEZIqemMT1HariMyVoHBkQQ6FAUUc4Vb-8bslS/s400/%E0%B8%82%E0%B8%A2%E0%B8%B2%E0%B8%A2%E0%B9%81%E0%B8%A1%E0%B9%88%E0%B9%81%E0%B8%9A%E0%B8%9A.png" width="400" /></a></p> <p>ในขั้นที่ 1 นี้เราจะ back up แม่แบบ ไว้ก่อนก็ได้นะครับ (กันพลาด) <br /><b>ขั้นที่ 2</b> มองหาโค้ด </head> (ถ้าหาไม่เจอใช้ Ctrl+F ช่วยค้นหา) แล้ว<b>แทนที่</b>ด้วยโค้ดด้านล่างนี้ <br /><code><script type='text/javascript'> <br />var thumbnail_mode = "float" ; <br />summary_noimg = 230; <br />summary_img = 140; <br />img_thumb_height = 100; <br />img_thumb_width = 100; <br />< /script> <br />< script src='http://siiam.bravehost.com/excerpt.js' type='text/javascript'/> <br />< /head></code> <br /><b>การปรับแต่ง :</b> <br />summary_noimg = 230; คือจำนวนอักษรที่จะแสดงเป็นตัวอย่าง เมื่อบทความนั้นไม่มีรูปประกอบเลย <br />summary_img = 140; คือจำนวนอักษรที่จะแสดงเป็นตัวอย่าง เมื่อบทความนั้นมีรูปประกอบ <br />img_thumb_height = 100; และ img_thumb_width = 100; คือความกว้างและความยาวของรูปตัวอย่าง <br /><b>ขั้นที่ 3</b> ค้นหาโค้ด <data:post.body/> (ถ้าหาไม่เจอใช้ Ctrl+F ช่วยค้นหา) แล้ว<b>แทนที่</b>ด้วยโค้ดด้านล่างนี้ <br /><code><b:if cond='data:blog.pageType == "item"'> <br />< data:post.body/> <br />< b:else/> <br />< div expr:id='"summary" + data:post.id'> <br />< data:post.body/> <br />< /div> <br />< script type='text/javascript'> <br />createSummaryAndThumb("summary<data:post.id/>"); <br />< /script> <br />< div style='clear: both;'/> <br />< span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span> <br />< /b:if></code> <br />เป็นอันจบขั้นตอนครับ คราวนี้บล็อกของเราก็ดูสบายตาขึ้นไม่ต้องลากยาวไปอ่านด้านล่างอีกแล้วครับ <br /><b>หมายเหตุ :</b> คำว่า Read more >> สามารถแทนด้วยภาพหรือ เปลี่ยนเป็นข้อความอื่น ๆ ก็ได้ตามใจคุณ <br /><b>เช่น </b>บล็อกของผมใช้ภาพแทน ถ้าอยากเอาไปใช้บ้างก็ใช้โค้ดด้านล่างนี้ครับ</p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL4u0RX56eF541ECBeSOdE__PVzXr4wMZxMrjqyfv-yKijZ6kSjtPmZsjcRDx9QITqr776xgums2ZG0vwfKlslO9nhDiKq2sI_BhbfQB2VtHghFVZKIlce5XSWrEeq47wZNyvFGCQYwLiL/s1600-h/indexpostbutton2.png"><img border="0" alt="สอนทำ blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL4u0RX56eF541ECBeSOdE__PVzXr4wMZxMrjqyfv-yKijZ6kSjtPmZsjcRDx9QITqr776xgums2ZG0vwfKlslO9nhDiKq2sI_BhbfQB2VtHghFVZKIlce5XSWrEeq47wZNyvFGCQYwLiL/s1600/indexpostbutton2.png" /></a></p> <p><code><img title="readmore" src="http://upic.me/i/co/indexpostbutton2.gif" /></code></p>

วิธีทำ Automatic Read more ให้บทความบน Blogger

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

อ่านเพิ่มเติม »

การแสดงข่าวสารล่าสุดด้วย Gadget ฟีด

<br />ความหมายของคำว่า ฟีดโดยสรุปก็คือเป็นสิ่งที่แพร่กระจายจากบล็อกของเราบนโลก Internet เทียบได้กับคลื่นสัญญาณวิทยุหรือโทรทัศน์ ถ้ามีตัวรับทุกคนก็สามารถมองเห็นข่าวสารที่ต้องการเลือกรับได้ นอกจากนี้ถ้ามีตัวช่วยส่งให้ฟีดแพร่ได้แรงขึ้น ข่าวสารก็ย่อมจะแพร่กระจายได้เร็วด้วย<br /> <br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2OG-kY1vUBs5pt7_WgciiqQo1YF2tGQhdmKrPNT2enQ9rstqfnwgImnclT2MPFhKnvmSobGnjenXWJB1AGZCir4KDuMXVjMhqHn0PEbEpzumL1DsMK4WrEjVErNGLa9D89usiZwfdSfSC/s1600-h/FEEDGADGET%5B6%5D.gif"><img alt="สอนทำบล็อก" border="0" height="255" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO4ixJGvS63COerWEH7SlMVUjVwbpNzWNrygYyGCtK2MNznYcQr8mMHoNiNE9a7tgWI-uEYdE4Zhyo_GpHSUEUDTU81tf5j3tLVe73u2nZfxqUPuwX7Eaj_o4Q2sy9qwBrhbdYiA3JO4Z3/?imgmax=800" style="border-width: 0px; display: inline;" title="สอนทำบล็อก" width="424" /></a> <br /> <br />ดังนั้นถ้าคุณสนใจข่าวสารจากบล็อกใดบล็อกหนึ่งคุณก็สามารถที่จะเปิดรับข่าวสารจากบล็อกนั้นๆ โดยใช้ Gadget ฟีด ซึ่งเป็น Gadget ที่สามารถเพิ่มได้อย่างไม่จำกัด ดังนั้นถ้าคุณต้องการรับข่าวจาก 10 บล็อกก็สามารถทำได้โดยการเพิ่ม gadget ฟีดเข้าไปในบล็อก 10 ครั้ง ในขณะเดียวกันถ้าคุณใส่ชื่อบล็อกของตัวเองใน Gadget ฟีด Gadget ชนิดนี้จะกลายเป็น Gadget ที่ใช้แสดง บทความล่าสุดนั่นเองครับ<br /> <br /><strong>การแสดงข่าวสารล่าสุดโดยการใช้ Gadget ฟีด</strong> <br /> <br />1. ไปที่องค์ประกอบของหน้า >> เพิ่มฟีด Gadget <br /> <br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvQl4IlXAwo-DnjjDnFMTgJ-uu6Oa_TA_mmldfpyRTEO4Eu4lakDoqo5zvYGrQGvJXaKdpSsQpCiJXQP1tiGYuFoQHAPanGllhmFP0f7y-KF579GCi5lgYIJxxNy7cKP5_MoKh91-_Kx9Q/s1600-h/2010-06-13_015557%5B6%5D.png"><img alt="สอนสร้าง blogger" border="0" height="92" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfwoKX16l_idiF-C1VdxFYneNhU4wSmg4mIoqJ6EL6BsZv3ariVnWprHaLmV0m9AvLkElm90cdyUHRsxgNumqyb2e3Fbolc6L5Erl0q1OBygB6Y9stM79GJ53Rt5kSyQ6wlhlUktmFdrMg/?imgmax=800" style="border-width: 0px; display: inline;" title="สอนสร้าง blogger" width="362" /></a> <br /> <br />2. ใส่โค้ดต่อไปนี้ลงไปใน Gadget ฟีด<br /><blockquote>http://<strong><span style="color: #ff0080;">ชื่อบล็อก</span></strong>.blogspot.com/feeds/posts/default<br /> </blockquote>โดยจะต้องเปลี่ยน<strong><span style="color: #ff0080;">ชื่อบล็อก</span></strong>เป็นชื่อบล็อกของของคุณเองหรือชื่อบล็อกที่คุณต้องการรับข่าวสารที่ update<br /> <br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT8Q-BTed3yq5a-I01Q-5zhPDuNpBR06Mjq0Whxg_q0HYmGthFv8pD7Njw6vObZ1jrq-n_gYUEVGBWyCK5Ncoiv-50J2vAMGnEawlZhqQHgao3dKmbuxP5zmT3iWNfSDcg-qoIk-_wTdh1/s1600-h/2010-06-13_015323%5B4%5D.png"><img alt="สอนทำ blogspot" border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6HsmW2csG3HO8yfpy-rZewSWBTXc7KiYbmATWsa_jF0NQePGp0qu8PnbrI11j5CqbZnArmilaCSgq9oa0rHYZHuxdusnKvH9m7Te_OdwmX8KLBD5CPDtsYb8QuQuXLl0I2aytTds3FxP_/?imgmax=800" style="border-width: 0px; display: inline;" title="สอนทำ blogspot" width="481" /></a> <br /> <br />ตั้งค่าที่ต้องการเพิ่มเติมและบันทึกก็จะได้ feeds ข่าวสารมาปรากฎที่บล็อกของคุณ<br /> <br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZcegYvavCujY-Jgdp8XLOU7d3zPCGhmdMDzsy71Cyvx-i6BXCMXFKWU6KTWq7gxsxc9gW5KsgSOOgzlhyphenhyphenJNdz7dqILh_5aowoOtVcvP_eiD6tkO7e8G0iJMb6oppjkwDNGq11WNV5i0zw/s1600-h/2010-06-13_015407%5B4%5D.png"><img alt="สอนแต่งบล็อก" border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhou0TAKKZDmns4yGi3oyG89LVsKAxD-HllkrHeGgp6pJPTnfrr-FvnOiRJ5id7OmuvwGia8eVNPEoglvPeHPHGaG-qkJxOuYOhICULyeiOauyh0fWwsjH0iVsMuc_W1lUGtFO-94xcWi-R/?imgmax=800" style="border-width: 0px; display: inline;" title="สอนแต่งบล็อก" width="485" /></a> <br /><br />3. ถ้าต้องการเพิ่มบล้อกอื่นอีกก็ทำซ้ำข้อ 1 และ 2 แต่ต้องเปลี่ยน<strong><span style="color: #ff0080;">ชื่อบล็อก</span></strong>ใหม่ <br />4. กรณีที่คุณต้องการเรียก Comments มาจากบล็อกของคุณหรือบล็อกที่ต้องการให้ใช้โค้ดด้านล่างนี้แทนโค้ดในข้อ 2<br /><blockquote>http://<strong><span style="color: #ff0080;">ชื่อบล็อก</span></strong>.blogspot.com/feeds/comments/default<br /> </blockquote>สุดท้ายของบทความนี้ผมขอแนะนำให้อ่านบทความ 2 บทความเกี่ยวกับเรื่องฟีดบน blogger เพิ่มเติมดังนี้ครับ<br />

การแสดงข่าวสารล่าสุดด้วย Gadget ฟีด

ความหมายของคำว่า ฟีดโดยสรุปก็คือเป็นสิ่งที่แพร่กระจายจากบล็อกของเราบนโลก Internet เทียบได้กับคลื่นสัญญาณวิทยุหรือโทรทัศน์ ถ้ามีตัวรับทุกคนก็...

อ่านเพิ่มเติม »

Gadget สุ่มบทความอัตโนมัติแบบ Headline News

<br />Gadget นี้มีข้อดีตรงที่จะทำให้ทุกบทความของเราถูกสุ่มขึ้นมาให้ผู้อ่านเห็นในหน้าแรกอยู่เสมอ ซึ่งแนวคิดก็เหมือนกับการแสดงข้อความวิ่งตามท้องถนนหรือ หน้าจอทีวี ทำนองนั้นครับ วิธีติดตั้งไม่ซับซ้อนครับ แต่โค้ดออกจะยาวหน่อยนะครับ อดทนแก้นิดหน่อยก็ได้ Gadget นี้ไปครอบครองแล้วครับ ส่วนตัวอย่างก็ชมได้ที่ด้านบทของบทความนี้ หรือดูจากรูปด้านล่างได้เลยครับ<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJpg62Qm4ZXgxhJbpcl7Sh4TSyNjodZYetVJgZW6ZmCJn7OF32qZEbWgenBFtrz4S3SG3MuglgAdb-HfwhrqxesF8HGQ7bF9-JGwr4-Mdx16bFLnbVm02IiBQi8PMJVyqpBiaDclUMpJ8T/s1600-h/2009-11-26_222526%5B2%5D.png"><img alt="2009-11-26_222526" border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw5_oGw3sqBseBapGar-4uvxbrZjhmnPEYH_0L-dOwPHdFLsO8zET9S3e-SF9IafHdKXxvTmnjq_Az9GYNIKUPMziKZGiTe2_ZPrTpecp7y-mXkcW-mDtSRLJiVqIsQx0Hhe-ve82RZmr6/?imgmax=800" style="border: 0px currentColor; display: block; float: none; margin-left: auto; margin-right: auto;" title="2009-11-26_222526" width="244" /></a> <br /><strong><span style="color: #400000; font-size: x-small;">วิธีการติดตั้ง</span></strong><br />ไปที่แผงควบคุม >> รูปแบบ Add Gadget ในตำแหน่งที่ต้องการ >> เลือก Gadget ชนิด HTML/จาวาสคริปต์ >> วางโค้ดด้านล่างนี้ลงไปแก้ไขตามต้องการ โดยไม่ต้องตั้งชื่อแล้วทำกับบันทึก<br /><code><br /><style type="text/css"> <br />.gfg-root { <br />width : 100%; <br />height : auto; <br />position : relative; <br />overflow : hidden; <br />text-align : center; <br />font-family: "Arial", sans-serif; <br />font-size: 8px; <br />border: 1px solid #AAAA8A; <br />} <br />.gfg-title { <br />font-size: <strong><span style="color: red;">16</span></strong>px; /* ขนาดอักษรที่หัว */ <br />font-weight : bold; <br />color : #EDECEC; <br />background-color: <strong><span style="color: red;">#8F8383</span></strong>; /* สีพื้นหลังที่หัว */ <br />line-height : 1.4em; <br />overflow : hidden; <br />white-space : nowrap; <br />} <br />.gfg-title a { <br />color : #360000; <br />} <br />.gfg-subtitle { <br />font-size: 12px; <br />font-weight : bold; <br />color : #E5A835; <br />background-color: #9DA278; <br />line-height : 1.4em; <br />overflow : hidden; <br />white-space : nowrap; <br />margin-bottom : 0px; <br />} <br />.gfg-subtitle a { <br />color : #DDB06F; <br />display:none !important; <br />} <br />.gfg-entry { <br />background-color : white; <br />width : 100%; <br />height : 6.9em; <br />position : relative; <br />overflow : hidden; <br />text-align : left; <br />margin-top : 3px; <br />} <br />/* To allow correct behavior for overlay */ <br />.gfg-root .gfg-entry .gf-result { <br />position : relative; <br />background-color : white; <br />width : auto; <br />height : 100%; <br />padding-left : 20px; <br />padding-right : 5px; <br />}<br />.gfg-list { <br />position : relative; <br />overflow : hidden; <br />text-align : left; <br />margin-bottom : 5px; <br />display:none !important; <br />} <br />.gfg-listentry { <br />line-height : 1.5em; <br />overflow : hidden; <br />white-space : nowrap; <br />text-overflow : ellipsis; <br />-o-text-overflow : ellipsis; <br />padding-left : 15px; <br />padding-right : 5px; <br />margin-left : 5px; <br />margin-right : 5px; <br />} <br />.gfg-listentry-odd { <br />background-color : #F6F6F6; <br />} <br />.gfg-listentry-even { <br />} <br />.gfg-listentry-highlight { <br />background-image : url('garrow.gif'); <br />background-repeat: no-repeat; <br />background-position : center left; <br />} <br /><br />/* FeedControl customizations.*/ <br />.gfg-root .gfg-entry .gf-result .gf-title { <br />font-size: <strong><span style="color: red;">12</span></strong>px; /* ขนาดอักษรหัวข้อบทความ */ <br />line-height : 1.2em; <br />overflow : hidden; <br />white-space : nowrap; <br />text-overflow : ellipsis; <br />-o-text-overflow : ellipsis; <br />margin-bottom : 2px; <br />} <br />.gfg-root .gfg-entry .gf-result .gf-snippet { <br />height : 3.8em; <br />color: #ACACAC; <br />margin-top : 3px; <br />} <br /><br />/*Easy way to get horizontal mode, applicable via js options to gadget.*/ <br /><br />.gfg-horizontal-container { <br />position : relative; <br />} <br />.gfg-horizontal-root { <br />height : 1.5em; <br />_height : 100%; <br />position : relative; <br />white-space : nowrap; <br />overflow : hidden; <br /> text-align : center; <br />font-family: "Arial", sans-serif; <br />font-size: 10px; <br />border: 1px solid #AAAAAA; <br />padding : 5px; <br />margin-right : 80px; <br />} <br />.gfg-horizontal-root .gfg-title { <br />font-weight : bold; <br />background-color: #FFFFFF; <br />line-height : 1.5em; <br />overflow : hidden; <br />white-space : nowrap; <br />float : left; <br />padding-left : 10px; <br />padding-right : 12px; <br />border-right: 1px solid #AAAAAA; <br />} <br />.gfg-horizontal-root .gfg-title a { <br />color : #444444; <br />text-decoration : none; <br />}<br />.gfg-horizontal-root .gfg-entry { <br />width : auto; <br />height : 1.5em; <br />position : relative; <br />overflow : hidden; <br />text-align : left; <br />margin-top : 0px; <br />margin-left : 0px; <br />padding-left : 10px; <br />} <br /><br />/* To allow correct behavior for overlay */ <br /><br />.gfg-horizontal-root .gfg-entry .gf-result { <br />position : relative; <br />background-color : white; <br />width : 100%; <br />height : 100%; <br />line-height : 1em; <br />overflow : hidden; <br />white-space : nowrap; <br />} <br />.gfg-horizontal-root .gfg-list { <br />display : none; <br />} <br /><br />/* FeedControl customizations.*/ <br /><br />.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet, <br />.gfg-horizontal-root .gfg-entry .gf-result .gf-author { <br />display : none; <br />} <br />.gfg-horizontal-root .gfg-entry .gf-result .gf-title { <br />color: #0000cc; <br />margin-right : 3px; <br />float : left; <br />}<br />.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer { <br />float : left; <br />} <br />.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer, <br />.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate { <br />display : block; <br />color: #AAAAAA; <br />} <br />.gfg-branding { <br />white-space : nowrap; <br />overflow : hidden; <br />text-align : left; <br />position : absolute; <br />right : 0px; <br />top : 0px; <br />width : 80px; <br />} <br />.gfg-collapse-open, .gfg-collapse-closed { <br />background-repeat : no-repeat; <br />background-position : center; <br />cursor : pointer; <br />float : right; <br />width : 17px; <br />height : 20px; <br />}<br />.gfg-collapse-open { <br />background-image : url('arrow_open.gif'); <br />} <br />.gfg-collapse-closed { <br />background-image : url('arrow_close.gif'); <br />} <br />.gfg-collapse-href { <br />float : left; <br />} <br />.clearFloat { <br />clear : both; <br />} <br />#feedGadget { <br />margin-top : 5px; <br />margin-left: auto; <br />margin-right: auto; <br />width : <strong><span style="color: red;">500</span></strong> px; /* ขนาดของ Gadget */ <br />font-size: 10px; <br />color: <strong><span style="color: red;">#920000</span></strong>; /* สีของอักษรขณะรอโหลด */ <br />} <br />< /style> <br />< noscript><a href=http://<strong><span style="color: red;">ใส่ชื่อบล็อกของคุณ</span></strong>.blogspot.com target="_blank">Blogger Hacks</a></noscript> <br />< script src="http://www.google.com/jsapi/?key=internal-sample" <br />type="text/javascript"></script> <br />< script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script> <br /><br />< script type="text/javascript"> <br /><br />function showGadget() { <br />var feeds = [ <br />{title:'title', <br /><a href="http://www.hackublog.com/2009/11/'http://%E0%B9%83%E0%B8%AA%E0%B9%88%E0%B8%8A%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%9A%E0%B8%A5%E0%B9%87%E0%B8%AD%E0%B8%81%E0%B8%82%E0%B8%AD%E0%B8%87%E0%B8%84%E0%B8%B8%E0%B8%93.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'">url:'http://<strong><span style="color: red;">ใส่ชื่อบล็อกของคุณ</span></strong>.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'</a>},<br /><br />]; <br /><br />new GFdynamicFeedControl(feeds, 'feedGadget', <br />{numResults : 1000, stacked : true, <br />title: "<strong><span style="color: red;">ใส่หัวเรื่องของคุณ</span></strong>"}); <br />} <br />google.load("feeds", "1"); <br />google.setOnLoadCallback(showGadget); <br />< /script> <br />< noscript><a href="http://<strong><span style="color: red;">ใส่ชื่อบล็อกของคุณ</span></strong>.blogspot.com" target="_blank">Blogger Hacks</a></noscript> <br />< div id="feedGadget"><strong><span style="color: red;">ใส่ข้อความขณะรอดาวน์โหลดครับ</span></strong></div></code><br /><br />แก้ไขค่า/ข้อความสีแดงให้ครบถ้วนตามความพอใจ และบันทึกก็จบขั้นตอนครับ <br /><br />หากมีข้อสงสัยเชิญสอบถามได้เลยครับ

Gadget สุ่มบทความอัตโนมัติแบบ Headline News

Gadget นี้มีข้อดีตรงที่จะทำให้ทุกบทความของเราถูกสุ่มขึ้นมาให้ผู้อ่านเห็นในหน้าแรกอยู่เสมอ ซึ่งแนวคิดก็เหมือนกับการแสดงข้อความวิ่งตามท้องถนนห...

อ่านเพิ่มเติม »

วิธีทำให้ URL ของบทความใน Blogger เป็นมิตรกับ SEO

<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaX_3SDHlYBsML3jwO96Ll84r-u1UIMQIVSDQ0E7ICwqLcQDoZpdduqGOHPz6oQCBudsUvUma5tqq_JmZ44KkkO-vMmN4evWg49C7gHQa5AF8cZmewsKuvXhs-aoEatJp2R2ZdAapAyaeq/s1600-h/3%5B3%5D.png"><img alt="สอนทำบล็อก" border="0" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh00pJH5yRaqgFhlzsb1trqpt7vpqM-rxjV7va6Y_-ew3GK_PbsTLRF9_uTNGhPk8Aes2W36NKZj7K5zMKcKeGaLtNtW5QlnHq1bantP4iHbIv3LY1IKT35SxMbFywmM3lnG60VKaQLubaa/?imgmax=800" style="border: 0px currentColor; display: block; float: none; margin-left: auto; margin-right: auto;" title="สอนทำบล็อก" width="260" /></a> <br /><br />ถ้าคุณเคยค้นหาบทความใน Google จะเห็นว่าผลลัพธ์ในการค้นหาบาง URL นั้นจะมีชื่อตรงกับสิ่งที่คุณต้องการ หรือสื่อได้ว่ามีเนื้อหาที่เกี่ยวข้องกับสิ่งที่คุณต้องการ ซึ่งทำให้คุณตัดสินใจที่จะเลือกอ่านเนื้อหานั้น ๆ ได้ง่ายขึ้น<br /><br />ในทำนองเดียวกันลองมาสังเกต URL ของบล็อกของคุณดูบ้างว่า มันสื่อความหมายดีหรือไม่ ในที่นี้ผมยกตัวอย่างบทความในบล็อกของตนเองให้ดูดังนี้ : <br /><br /><div align="center">โดยใช้วิธีการง่าย ๆ คือเอาชื่อบทความในบล็อกของผม(ของคุณ) ไปค้นหาใน Google ซึ่งได้ผลลัพธ์ดังนี้</div><br /><div align="center"><b>ตัวอย่างที่ 1</b></div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibOmjfuyrIh-8z7GOf0CY4ZYc78bb67ogxpD73TwO5wYU27t7oQJR_JmPeS-corusLcLTwUryTxCqitIB_-ad0zUgO2DuPEK68ReO6OCHQOil0KB2sp8l-r3RffL1j03w0SmoD2Vq7gMKW/s1600-h/image%5B6%5D.png"><img alt="สอน blogger" border="0" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1K99uRjfMs7OeNFXVT91kQIsbyN-eHefpBDWKJh000pJUMZ_CV4Ma9r5u4jtxGh6M-eS1Ir7ciuBjHHeG3pDK9w4364p3iwC7V5xtyOmAQ6-Q3ZlQEAH9wGgppCHaYpLQ5aEwLNqaQn52/?imgmax=800" style="border: 0px currentColor; display: block; float: none; margin-left: auto; margin-right: auto;" title="สอน blogger" width="503" /></a> <br /><br /><div align="center"><b>ตัวอย่างที่ 2</b></div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMQK0l_aZazrEVabMOO4CEABMelrmPfyPCx4v2YEHnSpeHEEqyEJvgamw7lw_jTlqVLyjYxm2tQDWYg06NA-08jqMTIdpGtQJFimxPS-iK9XBUarfjRtK-poHMg4oIUEVHy8FsD-JuBrqp/s1600-h/image%5B11%5D.png"><img alt="วิธีสร้าง blog" border="0" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhykg5IvvmTS8IePGKmAHVJptk7TbVcDu3cNwRTEQ-CSCiHjpJ9dxT-u94xHrZ2RKe4RgNsOWaP2IgLQYlbP2JteD499Qrw8sK3mZvmQJEYWFP7BxpQTfQ6ZDdcdMWOotnzMzzADQ5zgUz9/?imgmax=800" style="border: 0px currentColor; display: block; float: none; margin-left: auto; margin-right: auto;" title="วิธีสร้าง blog" width="519" /></a> <br /><div align="left">จะเห็นได้ว่า URL ของบทความในตัวอย่างที่ 1 นั้นไม่สัมพันธ์กับเนื้อหาเลย สาเหตุที่เป็นเช่นนี้เพราะว่า โปรแกรมของ Blogger ยังไม่สร้าง URL ที่เป็นภาษาไทยได้ แต่สำหรับบทความที่ 2 ที่ใช้ชื่อเป็นภาษาอังกฤษกลับมี URL ที่สื่อความหมายถึงเนื่อหาของบทความมาก ๆ </div><br /><div align="left">หลังจากที่ผมได้สังเกตเห็นจึงได้ทำการทดลองในการเขียนบทความถัดมา ก็เลยพบเทคนิคในการสร้าง Post URL ใน Blogger ให้มีความหมายและตรงกับที่เราต้องการได้ตามใจชอบ</div><br /><br /><div align="left"><b>ขั้นตอนการทำให้ Blog URL เป็นมิตรกับ SEO</b></div><br /><br /><div align="left"><b>ขั้นที่ 1</b> เขียนบทความตามปกติ โดยให้<u><span style="color: maroon;">ตั้งชื่อเป็นภาษาอังกฤษ</span></u>ที่สามารถสื่อความหมายถึงเนื้อหาในบทความนั้น ๆ ได้</div><br /><div align="left"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuSNSbuoVsTfAKc5ZFb97YJnsIpNDtezFGmW2tQEoOKd-sh0_h8M8v6-DPk1av9ABi842sYNwFaWMUUJ_LibQONKVjhcdrAYN4wWpis09ZA5to6tOWffJJ5SD0HN668QGcBJLGQFIwGHdW/s1600-h/5%5B4%5D.png"><img alt="สอนทำ blogger" border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqVyjETwatzay-nxBweqVhRUnWBmFv41u_G0FP2lDbl9hf4B46O1fQDELn_nnXQu01tqfnYZeUKiZxYwX0pDCv8VN9Z01FKGLpPN0z7u3Dyo_4nAKgWV2C-UIM09XLxERBPMcmX17AuD_/?imgmax=800" style="border: 0px currentColor; display: block; float: none; margin-left: auto; margin-right: auto;" title="สอนทำ blogger" width="462" /></a> </div><br /><div align="left"><b>ขั้นที่ 2</b> เมื่อเขียนเสร็จแล้วก็ให้โพสบทความตามปกติ</div><br /><div align="left"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqp3mcIxpIBMLKkerTK6Ko1bp6_mxPuTJwhgVIxfi7Wm6JmmQX0wpGgy7_HPv_CqV6XmnZi75W-SxIilUso1gz1Y4AMtB87Tr71tB41N4l13Qc8z921q8OLtCMsMrutkhEq7ffZ96gN0HV/s1600-h/4%5B5%5D.png"><img alt="ทำ blogger SEO" border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3TxxafqKodxsD2_JSfH7EFGNTJNY5D3A0XMkGNsHPwGOPEBCNJOk-tRcHeuxCRse8kCvctF5F2ZdH81XRC1GmtAeiA_FrttLVmVVrt6daALdgechzOcdB-Let-h5zWpg5DrHyAPMlKmc-/?imgmax=800" style="border: 0px currentColor; display: block; float: none; margin-left: auto; margin-right: auto;" title="ทำ blogger SEO" width="461" /></a> </div><br /><div align="left"><b>ขั้นที่ 3</b> ไปที่แผงควบคุม >> แก้ไขบทความ >> เปลี่ยนชื่อบทความใหม่ให้เป็นชื่อภาษาไทยหรือชื่อใด ๆ ก็ได้ที่คุณต้องการ <b><u>แต่</u></b>ถ้าหากคุณชอบชื่อของบทความที่เป็นภาษาอังกฤษอยู่แล้วก็ไม่ต้องแก้ไขใด ๆ ในขั้นตอนที่ 3 นี้</div><br /><div align="left"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYEpoPK29-7AWnFsiAgUk2LIJNvh-Fi565J9AQ9NV8a5-vbVVRdAyUXYPUOGKD7kTtUalJXyJllwXDEuIgcfc874tUD7lal0aqPxjTyuxG_w7AUDLn9RbPjacAl47Bt2ONGoXhqJlx7D0Z/s1600-h/image%5B16%5D.png"><img alt="สอน blogspot" border="0" height="291" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV94o7hSgDAwAOwxfTE_yHegkkM3A3TeR-SJQu1FXuLGpqo36aFNmN9lIVQuMcflWYsyBPq4_1erDpLu_vDPBHD3nySHo8eCfvA2sKc1R9jo4646vEqkd0PNwvKCIND0IQ4zs7rZn9g8uy/?imgmax=800" style="border: 0px currentColor; display: block; float: none; margin-left: auto; margin-right: auto;" title="สอน blogspot" width="459" /></a></div><br />เมื่อดำเนินการตามขั้นตอนตามข้างต้นแล้วลองดูผลลัพธ์ที่ URL ของบทความในบล็อกของคุณดุว่ามีผลอย่างไร สุดท้ายหวังว่าบทความนี้จะเป็นประโยชน์กับ blogger ทุกท่าน ขอบคุณครับ

วิธีทำให้ URL ของบทความใน Blogger เป็นมิตรกับ SEO

ถ้าคุณเคยค้นหาบทความใน Google จะเห็นว่าผลลัพธ์ในการค้นหาบาง URL นั้นจะมีชื่อตรงกับสิ่งที่คุณต้องการ หรือสื่อได้ว่ามีเนื้อหาที่เกี่ยวข้องกับ...

อ่านเพิ่มเติม »