Blogger: สารบัญของฃื่อบทความจากป้ายกำกับอันใดอันหนึ่งโดยจัดเรียงตามตัวอักษร

วิธีสร้างเครื่องมือแสดงลิงก์รายชื่อบทความ "จากป้ายกำกับอันใดอันหนึ่ง" ให้เป็นลักษณะของสารบัญหรือ Site Map โดยจัดเรียงตามตัวอักษร
โดยเครื่องมือดังกล่าวจะมีลักษณะคล้ายกับในลิงก์ข้างล่างนี้แต่จะแสดงแค่เพียงหัวข้อป้ายกำกับเดัยวเท่านั้น
http://tip.maxlayout.com/2013/02/directory.html
หรืออาจลองดูตัวอย่างที่ท้ายบทความนี้ก็ได้ ซึ่งมีวิธีสร้างดังนี้

อธิบายเพิ่มเติม
บทความที่ถูกนำมาจัดเรียงตามวิธีนี้มีเงื่อนไขก็คือ จะต้องมีเพียงป้ายกำกับที่ถูกเลือกไว้เพียงป้ายเดียวเท่านั้นโดยต้องไม่มีป้ายกำกับอื่นติดอยู่ด้วย

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'การออกแบบ > องค์ประกอบของหน้า'

ขั้นตอนที่ 2. ให้เลือกเพิ่ม Gadget แบบ 'HTML/จาวาสคริปต์'

ขั้นตอนที่ 3. คัดลอกโค้ดด้านล่างนี้ใส่ลงไปในช่อง 'เนื้อหา' และกดปุ่ม 'บันทึก' ก็เสร็จแล้ว

<script type="text/javascript">
var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function loadtoc(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postMp3[ii]=o;if(h<10){postBaru[ii]=true}else{postBaru[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><a href="http://www.maxlayout.com" style="font-size: 10px; text-decoration:none; color: #000000;">Widget by Maxlayout.com</a>')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postMp3[e];postMp3[e]=postMp3[g];postMp3[g]=f;var f=postBaru[e];postBaru[e]=postBaru[g];postBaru[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postMp3[f];postMp3[f]=postMp3[h];postMp3[h]=g;var g=postBaru[f];postBaru[f]=postBaru[h];postBaru[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Judul Artikel";var m="Klik untuk sortir berdasarkan judul";var d="Tanggal";var k="Klik untuk Sortir bedasarkan tanggal";var c="Kategori";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Klik untuk menampilkan semua"}h+="<table>";h+="<tr>";h+='<td class="toc-header-col1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="toc-header-col2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="toc-header-col3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="toc-header-col4">';h+="Download MP3";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="toc-entry-col1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="toc-entry-col2">'+postDate[g]+'</td><td class="toc-entry-col3">'+postLabels[g]+'</td><td class="toc-entry-col4"><a href="'+postMp3[g]+'">Download</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="toc-entry-col1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="toc-entry-col2">'+postDate[g]+'</td><td class="toc-entry-col3">'+postLabels[g]+'</td><td class="toc-entry-col4"><a href="'+postMp3[g]+'">Download</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Menampilkan Semua '+postTitle.length+" Artikel<br/></span>"}else{var f='<span class="toc-note">Menampilkan '+l+" artikel dengan kategori '";f+=postFilter+"' dari "+postTitle.length+" Total Artikel<br/></span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p><h3>'+temp1+"</h3></p><ol>");firsti=a;do{document.write("<li>");document.write('<a href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postBaru[a]==true){document.write(' - <strong><em><span style="color: rgb(255, 0, 0);">New !!</span> </em></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Please wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Menampilkan Daftar Isi</a> <img src="http://3.bp.blogspot.com/-igF2iDKKqNw/TyVmWE5G8_I/AAAAAAAACjM/mbQX5Bc6pn4/s1600/new_1.gif.png"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link    : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Download mp3  : <a href="'+postMp3[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};
</script>
<script src="http://tip.maxlayout.com/feeds/posts/default/-/Window XP?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>


อธิบายเพิ่มเติม
โดยตอนนำไปใช้เองอย่าลืมแก้โค้ดในบรรทัดที่ 2 จากข้างล่างสุดที่เดิมเขียนเอาไว้ว่า
tip.maxlayout.com
ให้เป็น URL ของบล็อกของคุณเองด้วยครับ
และนอกจากนี้ให้เลือกป้ายกำกับขึ้นมาหนึ่งอัน โดยให้คัดลอกชื่อของป้ายกำกับที่ต้องการนั้นให้ถูกต้องทั้งตัวพิมพ์เล็กพิมพ์ใหญ่และการเว้นวรรค จากนั้นนำไปแทนที่โค้ดในบรรทัดที่ 2 จากข้างล่างซึ่งเดิมถูกเขียนไว้ว่า
Window XP

ตัวอย่าง

Post Status




14 ความคิดเห็น:

Unknown กล่าวว่า...

แล้วจะเลขที่มันเรียง 1 2 3 4 5 ออกได้ไหมครับ

Max กล่าวว่า...

ในส่วนนั้นต้องเข้าไปแก้ไขที่ตัวสคริปต์จากลิงก์ต้นทางซึ่งค่อนข้างยากครับ

Unknown กล่าวว่า...

มีสคริปต์อื่นมั้ยครับที่มันเมื่อเอาเมาส์ไปชี้ัที่หัวข้อความแล้วภาพมันจะขึ้นอะครับ แต่ขอให้เป้นสารบัญแบบแยกป้ายกำกับแบบนี้นะครับ มันมีมั้ยครับ ขอบคุณครับ

Max กล่าวว่า...

เท่าที่ผมรู้ในตอนนี้ก็พบแต่แบบแสดงเพียงภาพเดียวครับ เหมือนในลิงก์นี้
http://tip.maxlayout.com/2013/02/blogger-show-picture-on-mouseover-with-javascript.html
ซึ่งเมื่อลองใช้ทั้งโค้ดสองแบบร่วมกันก็พบว่าผลที่ได้นั้นผิดไปจากที่ต้องการครับ

Unknown กล่าวว่า...

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

Unknown กล่าวว่า...

สามารถเอาบทความล่าสุดขึ้นก่อนได้ป่าวครับ

Max กล่าวว่า...

ถึงคุณ Pung popu
ถ้าผมเข้าใจสิ่งที่คุณต้องการไม่ผิดละก็คงจะเหมือนกับตัวอย่างในลิงก์นี้
http://test.maxlayout.com/
โดยให้ลองกดที่ป้ายกำกับอันใดอันหนึ่งดู
(ลิงก์ตัวอย่างอันนี้อาจเปลี่ยนแปลงภายใน 3 วัน)

ซึ่งสามารถทำได้ตามวิธีนี้ครับ
http://tip.maxlayout.com/2012/09/blogger-crop-thumbnail-link-to-post.html

แต่ว่าต้องเปลี่ยนโค้ดสำหรับแทนที่ซึ่งอยู่ในขั้นตอนที่ 3 เป็นแบบใหม่ดังนี้
โดยไม่ว่าคุณจะเลือกใช้ชนิดที่ 1 หรือชนิดที่ 2 ก็ตามโค้ดอันนี้จะถูกเขียนอยู่ในบรรทัดที่ 2 ซึ่งของเดิมจะเขียนไว้ว่า
<b:if cond='data:blog.url != data:post.url'>

โดยให้เปลี่ยนใหม่กลายเป็น
<b:if cond='data:blog.searchLabel'>

จากนั้นก็ทำตามขั้นตอนอื่นๆ ในบทความได้ตามปกติครับ

Max กล่าวว่า...

ถึงคุณ เจ้าชายดอกหญ้า สายลม
คงหมายถึงการทำ Recent Posts ซึ่งในปัจจุบันเขียนไว้ 4 แบบดังนี้ครับ

แบบที่ 1
http://tip.maxlayout.com/2012/12/blogger-horizontal-recent-posts-thumbnails.html

แบบที่ 2
http://tip.maxlayout.com/2012/01/blogger-recent-posts-using-feed-widget.html

แบบที่ 3
http://tip.maxlayout.com/2012/08/blogger-recent-posts-with-thumbnails.html

แบบที่ 4
http://tip.maxlayout.com/2010/02/blogger-recent-post-with-thumbnails.html

ไม่ระบุชื่อ กล่าวว่า...

ถ้าจะใส่ ป้ายกำกับ 2 อัน เพิ่มเติมตรงไหนคับ

Max กล่าวว่า...

ถ้าต้องการให้แสดงทุกป้ายกำกับพร้อมกันเหมือนในตัวอย่างนี้
http://tip.maxlayout.com/2013/02/directory.html

ก็สามารถทำได้ตามลิงก์อันนี้ครับ
http://tip.maxlayout.com/2013/02/blogger-table-of-content-or-sitemap-for-all-post.html

ส่วนถ้าหากต้องการแสดงป้ายกำกับเพิ่มอีกหนึ่งอันก็สามารถทำได้แต่ว่าอาจเกิดปัญหามีลิงก์ Credit แสดงผลออกมาซ้ำซ้อนกัน
ซึ่งวิธีนั้นทำได้โดยให้สั่งคัดลอกโค้ดส่วนล่างที่ใช้กำหนดป้ายกำกับซึ่งก็คือ
<script src="http://tip.maxlayout.com/feeds/posts/default/-/Window XP?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

จากนั้นนำโค้ดดังกล่าวไปแทนที่ด้วยชื่อป้ายกำกับอีกอัน แล้วค่อยเอามาวางต่อท้ายอีกครั้งเช่น

ถ้าต้องการเพิ่มป้าย Lightwave ไว้ต่อจากป้าย Window XP ก็จะเขียนว่า
<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>

<script src="http://tip.maxlayout.com/feeds/posts/default/-/Window XP?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script src="http://tip.maxlayout.com/feeds/posts/default/-/Lightwave?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Unknown กล่าวว่า...

ของผมมันไม่ยอมเรียงตามตัวอักษรอะครับงงมากเลย ทำมาเป็นอาทิตย์แล้วช่วยทีครับ
ที่นี่ครับ

http://nozoki-ana.blogspot.com/2013/04/nozo-x-kimi.html

Max กล่าวว่า...

กรณีที่ดึงข้อมูลมาจากบทความในบล็อกของคุณ แบบลิงก์นี้
http://test.maxlayout.com/2013/07/nozoki-ana-blog.html
ก็จะมีปัญหาแบบเดียวกันเกิดขึ้นในการจัดเรียงชื่อของตอนที่ 4 ครับ

แต่เท่าที่ลองทดสอบดูโดยการสร้างบทความบล็อกที่คล้ายกันแบบลิงก์นี้
http://test.maxlayout.com/2013/07/test-nozo-x-kimi.html
ก็พบว่าสามารถทำงานจัดเรียงชื่อได้ตามปกติครับ

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

นอกจากนี้เท่าที่ดูการจัดเรียงป้ายกำกับอื่นในของบล็อกของคุณจากลิงก์นี้
http://nozoki-ana.blogspot.com/2013/04/nozoki-ana-1.html
ก็พบว่าสามารถนำข้อมูลชื่อมาจัดเรียงตามลำดับได้ครับ แต่ว่าอาจจะมีข้อผิดพลาดอยู่บ้างจากการตั้งชื่อบทความในส่วนของตัวเลขชื่อตอนและคำว่า "ที่"

ปล. ทำบล็อกการ์ตูนได้น่าอ่านดีครับ จากนี้คงจะไปเยื่ยมชมบ่อยๆ

Unknown กล่าวว่า...

สุดยอดเลยครับผมแก้ได้แล้ว แล้วก็ขอบคุณครับที่แก้ไขปัญหาให้และก็ยังจะมาเยื่อมชมบล็อกผมอีก ขอบคุณมากๆครับ

Unknown กล่าวว่า...

สอบถามหน่อยครับ ตอนนี้ผมทำได้มากสุด 500 อ่ะครับ ทั้งที่ set max-results=9999 แล้ว พอจะมีวิธีเพิ่ม Max ของการทำแบบนี้ไหมครับ พอดีบทความผมเยอะครับ

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

หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น