วิธีเปลี่ยนรูปแบบ Blog Archive ให้เป็นปฏิทินสวยๆ

ทุกคนที่มีบล็อก (blogger) เป็นของตนเองคงจะเคยได้ใช้งาน Gadget ที่ชื่อว่า “คลังบทความของบล็อก

blog archive calender1

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

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

ตัวอย่างของผลงานนี้สามารถดูได้จากด้านข้างของบล็อกนี้ หรือ ดูรูปด้านล่างนี้ครับ

blog archive calender

เตรียมตัวก่อนการติดตั้ง

1. หากใครที่ยังไม่ได้ติดตั้ง gadget “คลังบทความของบล็อก” ก็ให้ทำการติดตั้งเสียก่อน ส่วนใครที่ติดตั้งอยู่แล้วก็ข้ามขั้นนี้ไปเลยครับ

2. Back up แม่แบบเพื่อป้องการความผิดพลาด >> คลิกดูวิธีทำ


ขั้นตอนการติดตั้ง

การติดตั้งผมก็ยังคงแบ่งออกป็น 3 ส่วนคือ ประกอบด้วย CSS + Java script + HTML

ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ไม่ต้องคลิกขยายแม่แบบเครื่องมือ

ขั้นที่ 1 CSS

ให้ค้นหาโค้ด ]]></b:skin> แล้ววางโค้ดต่อไปนี้ไว้ก่อนหน้าโค้ดดังกล่าว

/* BlogArchive Calendar Modifier by Hackublog */

/* div that holds calendar */
#blogger_calendar { margin:5px 0 0 0;width:98%;}
/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:2px solid #BFBFBF;padding:2px;margin:10px 0 0;background:#fff;}
/* The Archive Select Menu */
#bcaption select {border:1px solid #BFBFBF;}
/* The Heading Section */
table#bcalendar thead {}
/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px solid #BFBFBF; font-family:Tahoma; font-weight:normal;color:#000;}
/* The calendar Table */
table#bcalendar {border:1px solid #BFBFBF;border-top:0; margin:0px 0 0px;width:95%;background:#fff;}
/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px solid #BFBFBF;color:#000;}
/* Links in Calendar */
table#bcalendar tbody tr td a {font-weight:bold;color:#BFBFBF;}
/* First Row Empty Cells */
td.firstCell {visibility:visible;}
/* Cells that have a day in them */
td.filledCell {}
/* Cells that are empty, after the first row */
td.emptyCell {}
/* Cells with a Link Entry in them */
td.highlightCell {background: #E0E0E2;border:1px outset #BFBFBF}
/* Table Footer Navigation */
table#bcNavigation  {width:95%;background:#fff;border:1px solid #BFBFBF;border-top:0;}
table#bcNavigation a {text-decoration:none;color:#000;}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a{font-size: 12px;line-height:14px;margin-bottom:5px}


โค้ดข้างต้นสามารถปรับแต่งสีได้โดยการเปลี่ยนโค้ดสีในตำแหน่งต่างๆ ได้ตามใจ

เช่น ถ้าต้องการให้พื้นหลังของวันที่ที่ถูก Hilight เป็นสีฟ้า ก็แก้โค้ด #E0E0E2 เป็น #00C8FF เป็นต้น (ดูโค้ดสีที่นี่)


ขั้นที่ 2 ติดตั้ง Java script

ให้ค้นหาโค้ด  </head> แล้ววางโค้ดต่อไปนี้ไว้ก่อนหน้าโค้ดดังกล่าว

<!-- Start Blogger Archive Calendar -->
<script src='http://hackublox.googlecode.com/files/blogger_archive.js' type='text/javascript'/>
<script src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=timezoneSet'/>
<!-- End Blogger Archive Calendar -->




ขั้นที่ 3 HTML

ค้นหาโค้ด

<b:widget id='BlogArchive1' locked='false' title='Blog Archives' type='BlogArchive'/>

แล้วแทนที่ด้วยโค้ดต่อไปนี้

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <div id='ArchiveList'>
    <div expr:id='data:widget.instanceId + "_ArchiveList"'>
    <b:if cond='data:style == "HIERARCHY"'>
    <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == "FLAT"'>
    <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == "MENU"'>
    <b:include data='data' name='menu'/>
    </b:if>
    </div>
    </div>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    <b:includable id='toggle' var='interval'>
    <!-- Toggle not needed for Calendar -->
    </b:includable>
    <b:includable id='flat' var='data'>
    <div id='bloggerCalendarList'>
    <ul>
    <b:loop values='data:data' var='i'>
    <li class='archivedate'>
    <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
    </li>
    </b:loop>
    </ul>
    </div>
    <div id='blogger_calendar' style='display:none'>
    <table id='bcalendar'><caption id='bcaption'>
    </caption>
    <!-- Table Header -->
    <thead id='bcHead'></thead>
<!-- Table Footer -->
<!-- Table Body -->
<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr>
</tbody>
    </table>
    <table id='bcNavigation'><tr>
    <td id='bcFootPrev'></td>
    <td id='bcFootAll'></td>
    <td id='bcFootNext'></td>
    </tr></table>
    <div id='calLoadingStatus' style='display:none; text-align:center;'>
    <script type='text/javascript'>bcLoadStatus();</script>
    </div>
    <div id='calendarDisplay'/>
    </div>
    <script type='text/javascript'> initCal();</script>
    </b:includable>
    <b:includable id='posts' var='posts'>
    <!-- posts not needed for Calendar -->
    </b:includable>
    <b:includable id='menu' var='data'>
    Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
    </b:includable>
    <b:includable id='interval' var='intervalData'>
    Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
    </b:includable>
    </b:widget>


เมื่อแทนที่แล้วให้บันทึกแม่แบบ


ขั้นที่ 4 ไปที่แผงควบคุม >> รูปแบบ >> องค์ประกอบหน้า >> แล้วแล้วปรับแต่ง BlogArchive ตามภาพข้างล่างนี้ และบันทึก เท่านี้ก็เป็นอันจบขั้นตอนครับ

calender blog archive

หากมีข้อสงสัยประการใดก็สามารถ สอบถามเพิ่มเติมได้เลยครับ

Credit: phydeaux3 + Hackublog

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

  1. ขั้นตอนที่สามต้องเอาไปแทนโค้ดตั้งแต่ ของชุดนั้นเลยอะครับไม่งั้นมันจะแทนไม่ได้

  1. ทำได้แล้วครับ ขอบคุณครับ สวยมาก

  1. @ ภัทรพงษ์ ทำได้แล้วใช่ไหมครับ เยี่ยมเลย

    ขอโทษทีนะครับ ไม่ได้มาตอบตั้งแต่แรกครับ

  1. ใข่นุ้ย

    สุดยอด

  1. ถูกใจมากครับ ขอบคุณครับ สำหรับ โค้ดดี ๆ นะครับ

  1. สวยคร้า ขอบคุนมากๆเลย :)))

  1. พี่ hackublog ครับ
    มีปัญหาอีกแล้วครับ พอดีผมทำตามขั้นตอนที่บอก
    แต่ blogger ว่า We were unable to save your template
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "b:section-contents" must be terminated by the matching end-tag "".

    อยากให้พี่ช่วยไขปัญหาผมด้วยนะครับ
    blog ของผมครับhttp://yummy-yummy-ichiban.blogspot.com

  1. @ ibeeyai: ก่อนติดตั้งโค้ดน้องเพิ่ม Gadget คลังบทความเข้าไปก่อนหรือยังครับ และในการแทนที่โค้ดขั้นที่ 3 แทนถูกที่หรือไม่ ***ที่สำคัญที่สุดไม่ต้องขยายแม่แบบนะครับ
    ส่วนโค้ดทดสอบแล้วทำงานปกติครับ

  1. รบกวนถามหน่อยนะครับ ถ้าเราต้องการให้โชว์ตัวปฏิทินเพียงอย่างเดียว ไม่เอาชื่อบทความ ต้องแก้โค๊ดยังไงหรอครับ ขอบคุณครับ

  1. ได้แล้วครับ เยี่ยมเลย

    อยาก ถามว่า การ ขยายแม่แบบกับไม่ขยาย ต่างยังไงครับ

    ผม ขยายไป ครั้งแรก เลยทำไม่ได้ ครับ

  1. ทำได้แล้ว ขอบคุณมาก ๆ ค่ะ

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

    http://sites.google.com/site/hackublogcodex/home/code/blogger_archive.js

    และทำตามบทความ
    http://www.hackublog.com/2010/10/javascript-hackublog.html

    เมื่อทำแล้วให้นำสคริปต์ที่ได้มาแทนที่โค้ด
    http://hackublox.googlecode.com/files/blogger_archive.js

    ซึ่งอยู่ในขั้นที่ 2 ด้วยครับ

  1. ขอบคุณมากครับ

  1. ปรับขนาดตัวอักษร ของ List บทความล่า่งปฏิทินให้เล็กลง

    ยังไงครับ

  1. ถ้าอยากให้โชว์แต่ ปฏิทิน แต่รายชื่อบทความไม่ต้องโชว์ ต่อท้ายแหละค่ะ
    ต้องเอา code อันไหนออก

  1. ขอบคุณมากครับ

  1. เอาไปใช้กี่ทีก็สวย ขอบคุณค่ะ อิอิ

  1. ทำไม่ได้เลยคับพอบันทึกแม่แบบแล้วก้ขึ้นแบบนี้ เกิดข้อผิดพลาดในการแยกวิเคราะห์ XML บรรทัดที่ 1074 คอลัมน์ 7: The element type "b:section" must be terminated by the matching end-tag "". ต้องแก้ไขอย่างไรคับ

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

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

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

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