Blogger: ซ่อนเครื่องมือบางตัวขณะอยู่ในหน้าที่กำหนดไว้


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

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

นอกจากนี้สามารถดูวิธีตรงข้ามกับบทความนี้ซึ่งก็คือ 'แสดงเครื่องมือเฉพาะในหน้าที่กำหนดไว้เท่านั้น' ได้ตามลิงก์นี้ครับ
http://tip.maxlayout.com/2012/02/display-blogger-widget-only-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>
<!-- hide widgets start -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
[HIDE_WIDGET_ID] {
  display:none;
}
</style>
</b:if>
</b:if>
<!-- hide widgets end -->


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

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

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


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


อธิบายเพิ่มเติม
ถ้าต้องการให้ครื่องมือ (Widget) ถูกซ่อนก็ต่อเมื่อเลือกเข้าไปอ่านที่บทความแต่ ในหน้าแรกก็ให้แสดงตามปกติ ทำได้ด้วยการเปลี่ยนโค้ด 4 บรรทัดแรกในขั้นตอนที่ 3 และ 4 ซึ่งจากเดิมเขียนเอาไว้ว่า

]]></b:skin>
<!-- hide widgets start -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

โดยให้นำโค้ด 3 บรรทัดด้านล่างนี้ใส่ลงไปแทน
]]></b:skin>
<!-- hide widgets start -->
<b:if cond='data:blog.pageType == "item"'>

Post Status




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

PALINA KINDERGARTEN กล่าวว่า...

ทำเป็นขั้นตอน อ่านเข้าใจง่ายมาก เว็บก็ดูสะอาดน่าใช้มากๆ ขอบคุณครับ
แต่ไม่เห็นอับเดตเฟซบุ๊คเลยครับ รอติดตามอยู่นะครับ

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

ขอบคุณครับ ในส่วนของเฟซบุ๊คแฟนเพจคงมีการอัพเดทเร็วๆ นี้ครับ

YaKUzA กล่าวว่า...

งง ตรง อธิบายเพิ่มเติม อะ 555+
ไห้เอา

]]>



ไปทับ












หลอครับ

YaKUzA กล่าวว่า...

อ้าวโค้ดไปไหน หว่า

YaKUzA กล่าวว่า...

ผมว่าพีเขียน ตรง อธิบายเพิ่มเติม ผิดแล้ว พี่
จาเอา ไปทับ ขั้นตอนที่ 2 ได้ยังไง อะ
ขั้นตอนที่ 2 มันวิธีหา id widget มะใช่หลอ T^T

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

โอ้ ผมพิมพ์เลขขั้นตอนผิดจริงด้วย แก้ไขใหม่แล้วครับ

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

เราสามารถ กำหนดไม่ให้โชว์เมื่อเข้าดู หน้าเว็บ บางหน้าได้มั๊ยคับ

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

ทำได้ครับ โดยวิธีกำหนดเงื่อนไขว่าทำงานในหน้านั้นหรือไม่จะเขียนต่างกันตรง
== และ !=

ตัวอย่างเช่น
ถ้าต้องการให้เงื่อนไขทำงานเมื่อเข้าสู่บทความแบบเต็มก็เขียนว่า
<b:if cond='data:blog.pageType == &quot;item&quot;'>

แต่หากจะให้เงื่อนไขทำงานในหน้าอื่นยกเว้นหน้าบทความแบบเต็มก็เขียนว่า
<b:if cond='data:blog.pageType != &quot;item&quot;'>

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

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