ตารางสารบัญรูปแบบใหม่บน blogger สวยงามและซ่อน/แสดงได้

บทความนี้ต้นฉบับเป็นของ abu-farhan ซึ่งเป็นคนเดียวกันกับที่ได้พัฒนาสคริปต์ ตารางสารบัญของบทความบน Blogger  ต่อมาเขาได้พัฒนาสคริปต์ให้ผลลัพธ์ดูสวยงาม  และยังได้นำเทคนิคของ jQuery Accordion มาใช้ให้ดูสวยงามและดูน่าสนใจมากขึ้น ที่สำคัญคือหากท่านใดติดตั้งตารางสารบัญชนิดเก่าอยู่ก็ควรจะติดตั้งสารบัญแบบใหม่ลงไปแทนที่ของเดิม เพราะสารบัญรูปแบบใหม่นี้จะใช้เวลาโหลดเร็วกว่าเดิมมาก และรูปแบบก็สวยงามขึ้นด้วย


สอนทำบล็อก วิธีสร้างบล็อก

โค้ดในการติดตั้งมี 2 รูปแบบให้เลือกดังนี้

แบบที่ 1 ตารางสารบัญแบบปกติที่มีการปรับแต่ง Style

ตัวอย่างตารางสารบัญบน blogger

http://www.xn--22cka7hxbpcb1g.cz.cc/p/table-of-contents.html

วิธีสร้าง blogger วิธีทำ blogspot

โค้ดสำหรับติดตั้ง
<link rel="stylesheet" href="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css" type="text/css" media="screen" />
<script style="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/daftarisiv2.js"></script>
<script src="http://ชื่อบล็อก.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
หรือใช้โค้ด
<link rel="stylesheet" href="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css" type="text/css" media="screen" />
<script style="text/javascript" src="http://hackublox.googlecode.com/files/daftarisiv2.js"></script>
<script src="http://ชื่อบล็อก.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
หรือใช้โค้ด
<style type="text/css">
.gfg-root {
  width : 100%;
  height : auto;
  position : relative;
  overflow : hidden;
  text-align : center;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  border: 1px solid #BCCDF0;
}
.gfg-title {
  font-size: 14px;
  font-weight : bold;
  color : #3366cc;
  background-color: #E5ECF9;
  line-height : 1.4em;
  overflow : hidden;
  white-space : nowrap;
}
.gfg-title a {
  color : #3366cc;
}
.gfg-subtitle {
  font-size: 12px;
  font-weight : bold;
  color : #3366cc;
  background-color: #E5ECF9;
  line-height : 1.4em;
  overflow : hidden;
  white-space : nowrap;
  margin-bottom : 5px;
}
.gfg-subtitle a {
  color : #3366cc;
}
.gfg-entry {
  background-color : white;
  width : 100%;
  height : 6.9em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 3px;
}
/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : auto;
  height : 100%;
  padding-left : 20px;
  padding-right : 5px;
}
.gfg-list {
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-bottom : 5px;
}
.gfg-listentry {
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  padding-left : 15px;
  padding-right : 5px;
  margin-left : 5px;
  margin-right : 5px;
}
.gfg-listentry-odd {
  background-color : #F6F6F6;
}
.gfg-listentry-even {
}
.gfg-listentry-highlight {
  background-image : url('garrow.gif');
  background-repeat: no-repeat;
  background-position : center left;
}
/*
* FeedControl customizations.
*/
.gfg-root .gfg-entry .gf-result .gf-title {
  font-size: 14px;
  line-height : 1.2em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  margin-bottom : 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
  height : 3.8em;
  color: #000000;
  margin-top : 3px;
}
/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/
.gfg-horizontal-container {
  position : relative;
}
.gfg-horizontal-root {
  height : 1.5em;
  _height : 100%;
  position : relative;
  white-space : nowrap;
  overflow : hidden;
  text-align : center;
  font-family: "Arial", sans-serif;
  font-size: 13px;
  border: 1px solid #AAAAAA;
  padding : 5px;
  margin-right : 80px;
}
.gfg-horizontal-root .gfg-title {
  font-weight : bold;
  background-color: #FFFFFF;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  float : left;
  padding-left : 10px;
  padding-right : 12px;
  border-right: 1px solid #AAAAAA;
}
.gfg-horizontal-root .gfg-title a {
  color : #444444;
  text-decoration : none;
}
.gfg-horizontal-root .gfg-entry {
  width : auto;
  height : 1.5em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 0px;
  margin-left : 0px;
  padding-left : 10px;
}
/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : 100%;
  height : 100%;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
}
.gfg-horizontal-root .gfg-list {
  display : none;
}
/*
* FeedControl customizations.
*/
.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
  display : none;
}
.gfg-horizontal-root .gfg-entry  .gf-result .gf-title {
  color: #0000cc;
  margin-right : 3px;
  float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
  float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
  display : block;
  color: #AAAAAA;
}
.gfg-branding {
  white-space : nowrap;
  overflow : hidden;
  text-align : left;
  position : absolute;
  right : 0px;
  top : 0px;
  width : 80px;
}
.gfg-collapse-open, .gfg-collapse-closed {
  background-repeat : no-repeat;
  background-position : center;
  cursor : pointer;
  float : right;
  width : 17px;
  height : 20px;
}
.gfg-collapse-open {
  background-image : url('arrow_open.gif');
}
.gfg-collapse-closed {
  background-image : url('arrow_close.gif');
}
.gfg-collapse-href {
  float : left;
}
.clearFloat {
  clear : both;
}
</style>
<script style="text/javascript" src="http://hackublox.googlecode.com/files/daftarisiv2.js"></script>
<script src="http://ชื่อบล็อก.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
โค้ดทั้ง 3 ชุดเป็นโค้ดเดียวกันต่างกันที่ Server ที่เก็บไฟล์เท่านั้น จะเลือกใช้แบบใดก็ได้  และไม่ว่าจะใช้โค้ดแบบใดคุณจะต้องเปลี่ยน http://ชื่อบล็อก.blogspot.com เป็นบล็อกของคุณเองด้วย




แบบที่ 2 เป็นตารางสารบัญแบบ Accordion

ตัวอย่างสารบัญของบทความแบบ Accordion
http://www.hackublog.com/2009/01/blog-post.html
สอนสร้างบล็อก สอนแต่งบล็อก

โค้ดสำหรับติดตั้ง
<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://ชื่อบล็อก.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>
หรือใช้โค้ด
<style type="text/css">
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top,  #888,  #575757);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
color: #fef4e9;
border: 2px solid white !important;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
</style>
<script src="http://hackublog.googlecode.com/files/daftarisiv2-pack.js"></script>
<script src="http://ชื่อบล็อก.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://hackublog.googlecode.com/files/accordion-pack.js" type="text/javascript"></script>
การนำไปใช้ก็จะต้องเปลี่ยน  http://ชื่อบล็อก.blogspot.com เป็นชื่อบล็อกของคุณเช่นเดียวกับการใช้โค้ดแบบแรก



วิธีติดตั้งโค้ดใน Blogger
เมื่อเลือกได้แล้วว่าจะใช้โค้ดติดตั้งแบบใด ต่อไปคือการติดตั้งโค้ดบน Blogger

การติดตั้งโค้ดที่แนะนำคือ ให้สร้างบทความใหม่ หรือหน้าเว็บใหม่ขึ้นมา แล้ววางโค้ดใดโค้ดหนึ่งที่ได้เลือกไว้จากข้างต้นของและบันทึกบทความหรือหน้าเว็บ

วิธีสร้าง blog วิธีทำบล็อก

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

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

Credit to http://www.abu-farhan.com

ตอนนี้มีความคิดเห็น : 29 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. บทความดีๆ ทั้งนั้นเลยครับ ขอบคุณจริงๆ

  1. @ munjung18 : ขอบคุณครับ แล้วแวะมาเยี่ยมกันบ่อย ๆ นะครับ

  1. พี่ HackBlog คับ คือ Code ทั้งหมด ใช้ไม่ได้ กับ Themes ของBlof ของผมอะคับ หรือว่า Code ไม่สมบูรณ์หรอคับ นี่คือ Blog ทดรอง ของผม คับ http://3kingdoms-teamspek2.blogspot.com/
    ปล.ขอบคุณมากคับพี่
    ด้วยความเคารพและนับถือ

  1. ลองติดตั้งบนหน้าเว็บ หรือในบทความดูหรือยังครับ ส่วนติดตั้งที่ Sidebar พี่จะเช็คให้อีกทีครับ

  1. สุดยอดเสมอๆ

  1. โค๊ดนี้ให้ติดตั้งที่ส่วนไหนอ่ะครับ

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

    อย่างนีเกิดจากอะไร และควรทำยังไงดีคะ??

    รบกวนตอบให้ด้วยนะคะ ขอบคุณมากค่ะ

    http://series-entertain.blogspot.com/p/list-of-series.html

  1. @ STORYGOO

    ขออนุญาติตอบแทนนะคะ โค้ดนี้ ติดได้ที่บทความ / ตรงหน้าเว็บน่ะค่ะ
    แต่ว่าเวลาจะใส่ ต้องกด Html แล้วค่อยเอาโค้ดวางนะคะ แล้วกด บันทึก


    รอคำตอบจากคุณ Hack อยู่นะคะ ขอบคุณอีกครั้งค่ะ

  1. @ MingFC : มี 2 เหตุผลครับ คือ 1 มันอาจจะเกิดจากป้ายกำกับภาษาไทย หรือ 2 บทความยังไม่ indexed คือยังไม่มีในฐานข้อมูลของ Search Engine ครับ แก้โดยการเอาบทความไป Submit กับเว็บ Pligg ก็ได้ครับ

  1. ขอบคุณมากค่ะ คุณ Hackublog

  1. ตอนนี้จาวาสคริปต์มีปัญหา ใครที่ใช้อยู่ หรือต้องการสร้าง ให้แก้โค้ด

    http://hackublog.googlecode.com/files/daftarisiv2-pack.js

    เป็น
    http://sites.google.com/site/hackublogimg/home/server/daftarisiv2-pack.txt



    และแก้โค้ด
    http://hackublog.googlecode.com/files/accordion-pack.js

    เป็น
    https://sites.google.com/site/hackublogscript/home/server/accordion-pack.txt

  1. เข้ามาอ่านประจำเลยครับ

  1. ใช้แล้วนะคะ แจ่มมากค่ะ ว่าแต่มันจะแสดงทุกบทความที่เรามีเลยเหรอคะ

    ขอบคุณ คุณ hackublog และ abu-farhan

  1. เป็นไปได้มั๊ยถ้าจะทำสารบัญเฉพาะบาง tag, label เท่านั้น ไม่ต้องแสดงทั้งหมด เช่น แสดงแค่รายการลิงค์ที่มี "football" label เท่านั้น

  1. @ AMbox : ทำได้ครับ ตามลิงค์ข้างล่างครับ
    http://www.hackublog.com/2010/06/how-to-make-index-for-label-on-blogger.html

  1. เอาไปใช้อีก 1 บทความ ขอบคุณจริงๆๆ

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

  1. ขอบคุณครับ

  1. สุดยอดค่ะ

  1. ถามนิดนึงคัฟ ผมลง โค๊ดที่ว่าแล้ว แต่ทำไมถึงแสดงบทความไม่ครบอ่ะคัฟ

    blogผมตอนนี้มี800+บทความ แต่โค๊ดนี้แสดงบทความทั้งหมดที่498บทความเองคัฟ

    ช่วยตอบด้วยน่ะคัฟ ขอบคุณคัฟ

  1. ไม่ทราบว่าทำไมแบบ Accordion ตั้งแต่เปลี่ยนจาวาสคริปต์ที่มีปัญหาแล้ว ตอนนี้สารบัญมันไม่ซ่อนเลยค่ะ มันแสดงทุกหัวข้อจากป้ายกำกับเลยค่ะ ไม่ทราบว่าต้องแก้ยังไงคะ

  1. สวัสดีค่ะพี่ มีแต่เข้ามาอ่านไม่เคยได้เม้นซะที ขอโทษด้วยค่ะ
    แต่พอดีสาวนุ้ยเอาโค๊ดแบบที่2 ตัวแรกนะคะไปใช้ แต่หลังจากนั้นพอจะเข้าไปดูแม่แบบ สาวนุ้ยก็เข้าไม่ได้อีกเลย มันจะ redirect ไปที่เวป
    http://www1.g2nyzqjg6w.kein.hk/bqjd5fel?vnxov5a4n=mt7l1eCpnpbh2J3j3u2X39CatKulsZ%2BcpcqYq5pYz9vc46e5isKc2uusqGmSWt3ab%2BXv0sGQyZ%2Fbs9DXuLtth6XiyKKr69%2Fd1din3JzR26y4eoed3qRroqeso56Vaqekn7GfnKjVleLcpauf8drOpGqunOLs27OWkmejyGemrrOq0I2q6rOfq6OqaJNtpphjlN3p3svQpLTt5e%2BipKqRmtWeq6bo5umY0pvg5Jzg2pyny53RpJje5e%2Ff4Is%3D

    ทุกครั้งเลยค่ะ ก็เลยสงสัยว่ามันเป็นอะไร ใช่ไวรัสมั๊ยค่ะ รบกวนพี่ช่วยดูให้หน่อยนะคะ ขอบคุณล่วงหน้าค่ะ

  1. กำลังทดลองทำครับ

  1. thx mak ka

  1. ทำไมผมเอาไปลงแล้วตัวเลขมันไม่เป็น 1 2 3 ครับแต่เป็น I II II ล่ะครับ

  1. เยี่ยมจริงๆ

  1. มันทำยังไงอ่ะครับ

  1. มีวิดีโอทำให้ดูไหม

  1. บทความขึ้นไม่ครบผมได้ลองสังเกตแล้วเกิดจาก วันที่บทความ นานกว่า 3 เดือน 15 วัน ครับ

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

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel