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

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

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

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

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

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

โค้ดสำหรับติดตั้ง

<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&alt=json-in-script&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&alt=json-in-script&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

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

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

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

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

Bumau Share

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

Leave a Comment

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

Facebook

บทความยอดนิยม

สารบัญ

บทความในบล็อกนี้"ถูกใจ"คุณไหมครับ

จำนวนการดูหน้าเว็บรวม

Bumau Share

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

Related Posts

Leave a Comment

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

Facebook

บทความยอดนิยม

สารบัญ

บทความในบล็อกนี้"ถูกใจ"คุณไหมครับ

จำนวนการดูหน้าเว็บรวม