Blogger: แสดงเครื่องมือเฉพาะในหน้าที่กำหนดไว้เท่านั้น

วิธีทำให้ผู้อ่านมองเห็นเครื่องมือหรือ Widget แค่เฉพาะในหน้าที่เราเลือกไว้ (Display Blogger Widget Only On Specific Page) แต่เมื่อผู้อ่านเข้าไปสู่หน้าอื่นก็จะมองไม่เห็นเครื่องมือเหล่านั้นสามารถทำได้ดังนี้

โดยบทความนี้ในขั้นตอนที่ 1-5 จะเป็นตัวอย่างการสั่งแสดงเครื่องมือที่เลือกไว้ให้ผู้อ่านมองเห็นขณะอยู่ในหน้าแรกของบล็อกเท่านั้น ส่วนการตั่งค่าสำหรับกรณีหน้าอื่นสามารถดูได้ที่ส่วนอธิบายเพิ่มเติม

นอกจากนี้สามารถดูวิธีตรงข้ามกับบทความนี้ซึ่งก็คือ 'ซ่อนเครื่องมือบางตัวขณะอยู่ในหน้าที่กำหนดไว้' ได้ตามลิงก์นี้ครับ
http://tip.maxlayout.com/2012/02/hide-blogger-widget-on-specific-page.html

---

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'การออกแบบ > แก้ไข HTML > ขยายแม่แบบเครื่องมือ'

---

ขั้นตอนที่ 2. ให้คัดลอก Widget ID ของเครื่องมือที่ต้องการซ่อนเอาไว้ ซึ่งจะเขียนอยู่ที่บริเวณส่วนบนของโค้ดเครื่องมือนั้น
โดยให้สังเกตได้ว่าเครื่องมือ (Widget) จะขึ้นต้นด้วยโค้ดแบบนี้
<b:widget id=

ตัวอย่างเช่น
เครื่องมือ 'ข้อความ' จะขึ้นต้นด้วย
<b:widget id='Text1' locked='false' title='your-widget-name' type='Text'>
ก็จะมี Widget ID คือ 'Text1'

เครื่องมือ 'ป้ายกำกับ' จะขึ้นต้นด้วย
<b:widget id='Label1' locked='false' title='your-widget-name' type='Label'>
ก็จะมี Widget ID คือ 'Label1'

เครื่องมือ 'HTML/จาวาสคริปต์' จะขึ้นต้นด้วย
<b:widget id='HTML1' locked='false' title='your-widget-name' type='HTML'>
ก็จะมี Widget ID คือ 'HTML1'

เครื่องมือ 'รายชื่อลิงก์' จะขึ้นต้นด้วย
<b:widget id='LinkList1' locked='false' title='your-widget-name' type='LinkList'>
ก็จะมี Widget ID คือ 'LinkList1'

---

ขั้นตอนที่ 3. กด 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหาคำว่า
]]></b:skin>

จากนั้นให้แทนที่โค้ดที่หาเจอนั้นด้วยโค้ดข้างล่างนี้
]]></b:skin>
<!-- display widget only on specific page start -->
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style>
[WIDGET_ID] {
display:none;
}
</style>
</b:if>
<!-- display widget only on specific page end -->

---

ขั้นตอนที่ 4. ให้เอา Widget ID ของบทความที่เราต้องการซ่อน ซึ่งหาได้มาจากวิธีในขั้นตอนที่ 2 นั้นไปใส่ไว้แทนที่โค้ดในขั้นตอนที่แล้วในบรรทัดที่ 6 ซึ่งเขียนว่า
[WIDGET_ID]

โดยเวลาใส่  Widget ID ลงไปแทนที่นั้นต้องอย่าลืมใส่ # นำหน้าด้วยตัวอย่างเช่น
ถ้าต้องการแสดง 'Text1' ให้มองเห็นเฉพาะในหน้าแรกก็ให้แทนที่ [WIDGET_ID] ด้วย #Text1
ซึ่งพอแก้ไขแล้วก็จะเป็นเหมือนกับข้างล่างนี้
]]></b:skin>
<!-- display widget only on specific page start -->
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style>
#Text1 {
display:none;
}
</style>
</b:if>
<!-- display widget only on specific page end -->

นอกจากนี้ถ้าต้องการแสดงเครื่องมือหลายอันพร้อมกันก็สามารถนำ Widget ID มาเขียนต่อกันได้เลย
โดยต้องอย่าลืมใส่เครื่องหมาย , คั้นไว้ระหว่าง Widget ID แต่ละอันเช่น
ถ้าต้องการแสดง Text1, Label1, HTML1, จนกระทั่งถึง LinkList1 ให้มองเห็นแค่เฉพาะในหน้าแรกก็ให้แทนที่ [WIDGET_ID] ด้วยโค้ดว่า #Text1, #Label1, #HTML1, #LinkList1
ซึ่งพอแก้ไขแล้วก็จะเป็นเหมือนข้างล่างนี้
]]></b:skin>
<!-- display widget only on specific page start -->
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style>
#Text1, #Label1, #HTML1, #LinkList1 {
display:none;
}
</style>
</b:if>
<!-- display widget only on specific page end -->

---

ขั้นตอนที่ 5. เลือกที่ 'บันทึกแม่แบบ' จากนั้นลองเปิดบล็อกดูผลลัพธ์

---

อธิบายเพิ่มเติม
ถ้าต้องการแสดงเครื่องมือเฉพาะในหน้าอื่นที่ไม่ใช่หน้าแรก ก็สามารถแทนที่โค้ดบรรทัดที่ 3 ซึ่งเดิมเขียนไว้ว่า
<b:if cond='data:blog.url != data:blog.homepageUrl'>
ให้เป็นประเภทอื่นได้ตามกรณีต่างๆ ดังข้างล่างนี้

1. Index (list) pages
เมื่อเปิดรายการบทความ รวมทั้งการเปิดหน้าแรก การเข้าใช้ป้ายกำกับและคลังบทความของบล็อก
<b:if cond='data:blog.pageType != "index"'>

2. Post (item) pages
เมื่อเปิดเนื้อหาบทความแบบเต็ม หรือเมื่อเข้าไปอ่านบทความ
<b:if cond='data:blog.pageType != "item"'>

3. Static pages
เมื่อเข้าสู่หน้าเว็บอิสระของบล็อก
<b:if cond='data:blog.pageType != "static_page"'>

4. Archive pages
เมื่อเข้าสู่คลังบทความของบล็อก
<b:if cond='data:blog.pageType != "archive"'>

5. Homepage
เมื่อเปิดหน้าแรก
<b:if cond='data:blog.url != data:blog.homepageUrl'>

6. Specific page/URL
เมื่อ URL ตรงตามระบุ
<b:if cond='data:blog.url != "PUT_URL_HERE"'>

7. Post and static pages
เมื่อเปิดเนื้อหาบทความแบบเต็มหรือเข้าสู่หน้าเว็บอิสระ
<b:if cond='data:blog.url != data:post.url'>