8.03.2554

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

13:09  http://patanionlineearnings.blogspot.com  No comments


บทความนี้ต้นฉบับเป็นของ 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  Credit แปลเป็นไทยให้กับ http://www.hackublog.com



Posted in:

0 comments:

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

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More