หน้าเว็บ

วันพุธที่ 8 กุมภาพันธ์ พ.ศ. 2555

วิธีสร้าง Category Page ที่รวม Label (Tag) สำหรับ Blogger เวอร์ชันใหม่


หลายๆคนคงอยากทำหน้า blog ที่มีการแบ่ง Category ของ post ต่างๆขึ้นมาเป็น Tab ด้านบนเฉพาะ โดยในแต่ละ Tab ก็รวมรวม post ต่างๆที่ถูกแปะ Label ที่เกี่ยวข้องมาแสดงไว้

จริงๆแล้ว Blogger ไม่ได้มีฟังก์ชันให้ทำแบบนี้โดยตรง แต่เราก็มี workaround ให้สามารถทำได้อยู่เหมือนกันครับ

ใน Blogger เวอร์ชันใหม่ (กันยา 2011+) จะมีปุ่มสร้าง Page มาให้โดยอัตโนมัติ (อยู่ใน Dashboard จะมีให้เลือก Pages อยู่)



ซึ่งเราจะใช้หน้า Page นี่ล่ะมาทำเป็น Category Page ที่รวบรวม Post ที่ถูกแปะ Label ที่ตรงกับ Category

Page ของ Blogger ถูกออกแบบมาไว้ให้ทำได้ 2 อย่าง คือ 1. Static (Blank) Page หรือหน้าเพจนิ่งที่เราสร้างขึ้นมาเอง (โดยใช้ HTML หรือ Editor ของ Blogger ก็ได้) และ 2. Web Address หรือทำไว้สำหรับ link ไปยังหน้าเว็บอื่น วิธีของเรานั้นจะใช้ Web Address นี่ล่ะครับมาทำหน้า Category กัน

มาเริ่มกันเลย
1. เริ่มจากดูก่อนว่า Label ที่เราอยากนำไปสร้างเป็น Category นั้นมี URL อะไร วิธีง่ายๆคือไปกดที่ Label ที่ต้องการแล้วมันจะพาเราไปหน้าค้นหา Label นั้น โดย URL จะอยู่ในรูป
http://yourdomain/search/label/yourlabel
โดย yourdomain แทนด้วยชื่อเว็บของคุณ ส่วน yourlabel ก็แทนด้วยชื่อ Label ที่ต้องการ
เช่น หน้า TinyOS ของผมก็จะเป็น http://ping2p.blogspot.com/search/label/tinyos
* สังเกตว่าชื่อ Label มีตัวอักษรใหญ่เล็ก แต่ใน URL จะเป็นเล็กหมด ให้ยึดตาม URL ครับ

ให้ทำการ copy URL นี้เก็บไว้ก่อน เดี๋ยวจะเอาไปใช้





2. ทำการเพิ่มหน้า Page โดยไปที่ Dashboard -> Pages -> New page -> Web address
ส่วน Page Title ให้ใส่ชื่อ Category ที่ต้องการ เช่น ผมใส่ว่า TinyOS
ส่วน Web address (URL) ให้ใส่ URL จากหน้าค้นหา Label ที่ได้มาในข้อหนึ่ง เช่น http://ping2p.blogspot.com/search/label/tinyos
เสร็จแล้วกด Save จะมีรายการที่เราเพิ่มขึ้นมาเรียบร้อย อย่าลืมสั่งให้แสดงผลโดยเลือก Show pages as เป็น Top tabs (หรือถ้าชอบไว้ด้านข้างก็เป็น Side links) เสร็จแล้วให้เลือก Save arrangement ทางขวาบน





จริงๆถึงขั้นตอนคือเสร็จเรียบร้อยแล้ว ให้ลองกลับไปดูหน้าเว็บหลักของคุณดูจะพบว่ามี Tab เพิ่มขึ้นโดยเป็น Category ที่เราตั้งไว้ ถ้าคลิกปุ๊ปก็จะไปหน้าที่รวบรวม Post ที่ตรงกับ Label ไว้ให้ แต่ว่ามันยังมีความไม่สวยอยู่คือมันจะขึ้นว่า "แสดงบทความที่มีป้ายกำกับ yourlabel แสดงบทความทั้งหมด" หรือ "Showing posts with label yourlabel Show all posts"  ตรงด้านบนติดมาด้วย ดังนั้นเราจะมาลบมาออกกัน



3. กลับไปที่ Dashboard แล้วไปที่ Template จะแสดงหน้า Template ที่เราใช้อยู่ปัจจุบัน ให้เราเลือก "Backup / Restore" ทางขวาบน แล้วกด "Download full template" เพื่อดาวน์โหลดไฟล์ template นามสกุล .xml มาเก็บไว้ในเครื่องเรา


4. ให้ทำการ copy ไฟล์นี้เพิ่มเก็บไว้เป็น backup ก่อน เผื่อมีอะไรผิดพลาดจะได้ใช้ไฟล์นี้กู้คืนกลับมาได้

5. เมื่อมั่นใจว่ามี backup แล้ว เราจะแก้ไขไฟล์นี้กัน โดยใช้ text editor ที่ชอบอะไรก็ได้ เปิดมันขึ้นมา
ค้นหาเนื้อหาในไฟล์ที่เป็นรูปแบบดังนี้

<code>
<b:includable id='status-message'>
  <b:if cond='data:navMessage'>
    <div class='status-msg-wrap'>
      <div class='status-msg-body'>
        <data:navMessage/>
      </div>
      <div class='status-msg-border'>
        <div class='status-msg-bg'>
          <div class='status-msg-hidden'><data:navMessage/></div>
        </div>
      </div>
    </div>
    <div style='clear: both;'/>
  </b:if>
</b:includable>
</code>

ให้แก้เป็นดังนี้

<b:includable id='status-message'>
  <b:if cond='data:navMessage'>
    <div>
    </div>
    <div style='clear: both;'/>
  </b:if>
</b:includable>

(คือทำให้ส่วน div ใน if cond เหลือเป็น div เปล่าๆ ใครอยากเก็บโค้ดไว้ดูก็ใช้ !-- เพื่อคอมเมนต์ของเก่าไว้ก็ได้)
เสร็จแล้วบันทึกไฟล์

6. ในหน้า Backup / Restore เดิม ตรงส่วน Upload a template ก็ให้ browse เลือกไฟล์ที่ได้แก้ไขเรียบร้อยแล้ว upload กลับขึ้นไป ก็เรียบร้อย (ในกรณีที่อยากจะ restore ไฟล์เดิมที่ copy เก็บไว้ก็ทำเหมือนกัน)



ลองกลับไปที่หน้าเว็บเราจะพบว่าในแต่ละหน้า Category จะไม่มีคำขึ้นมาด้านบนอีกแล้ว คราวนี้อยากเพิ่ม Category อื่นๆก็ไปเพ่ิมที่ Pages ตามต้องการ (แต่มากสุดได้แค่ 10 pages)



อ้างอิง
http://blogger-hints-and-tips.blogspot.com/2010/12/how-to-put-put-posts-into-your-pages-in.html
http://www.spiceupyourblog.com/2010/01/remove-showing-posts-with-label-message.html