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'>

Post Status




2 ความคิดเห็น:

Unknown กล่าวว่า...

ไม่ซ่อนไม่เปลี่ยนแปลงเลยครับ งงมาก

Max กล่าวว่า...

ถ้ารู้สึกงงละก็ อาจทดสอบการซ่อนด้วยตัวอย่างแบบง่ายๆ ตามลิงก์นี้ดูก็ได้ครับ
http://tip.maxlayout.com/2012/02/hide-all-posts-from-blogger-homepage.html

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

หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น