วิธีซ่อน Widget ในบางหน้าของ Blogger (New Hack!)

นบทความที่ผ่านมาผมเคยได้นำเสนอบทความการเลือกซ่อน/แสดง Widget บน Sidebar ของ Blogger ไปแล้วครั้งหนึ่ง ซึ่งวิธีการในบทความดังกล่าวนั้นจะมีข้อจำกัดคือ

1. เป็นเลือกแสดง Widget ในบางหน้าของ Blogger เท่านั้น เช่น ในหน้าบทความ หรือในหน้าแรก แต่ไม่แสดงในหน้าอื่น ๆ

2. วิธีการที่ได้กล่าวมาแล้วนั้นใช้ได้กับ Widget ชนิด HTML/จาวาสคริปต์เท่านั้น



ต่อมาผมพยายามจะ Hack ให้ 1. ซ่อนในบางหน้า แต่แสดงผลในหน้าอื่น ๆ และ 2. ใช้ได้กับ Widget ทุกชนิดซึ่งก็ได้ผลดีทีเดียวครับ ก็เลยมาเขียนเล่าเอาไว้  นอกจากนี้เทคนิควิธีในบทความนี้สามารถต่อยอดไปปรับใช้กับ hack ในรูปแบบอื่น ๆ ได้ด้วย เช่น

1. ต้องการให้แต่ละ widget มีสีสันและรูปแบบต่างกันก็ทำได้ หรือ

2. จะขยายกล่องบทความให้เต็มจอและซ่อน sidebar ทั้งหมดในหน้าบทความก็ได้ด้วย  หากมีความสนใจผมก็จะค่อย ๆ เขียนบทความมาเล่าให้ฟังต่อไปภาย 2-3 วันนี้ครับ ถ้าเป็นแฟนตัวจริงกนก็อย่าลืมติดตามอ่านนะครับ



วิธีการซ่อน Widget

ขั้นที่ 1 Log in เข้าไปที่ blogger >>  ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML 

แล้วค้นหาโค้ด

<div id='sidebar'>
หรือ
<div id='sidebar-wrapper'>
หรือที่ใกล้เคียงกับโค้ดที่ว่านี้ และเมื่อพบแล้วเราจะเห็นว่ามี widget ที่มี id ต่าง ๆ กันเช่น HTML1, Label1, BlogArchive1 เป็นต้น 

  

ขั้นที่ 2 ต่อไปให้สังเกตุและจำชื่อ id ของ Widget ที่คุณต้องการจะซ่อน เช่นในที่นี้ผมต้องการซ่อน Widget  BlogArchive กับ AdSense ก็จำชื่อ id เป็น  Adsense1 กับ Label1 

ขั้นที่ 3 ในการซ่อน Widget ใช้โค้ดต่อไปนี้


3.1 กรณีต้องการซ่อน Widget ในหน้า Home หรือหน้าหลักใช้โค้ด

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<style type='text/css'> 
#Adsense1 ,#Label1 {display:none;} 
</style> 
</b:if>

3.2 กรณีต้องการซ่อน Widget ในหน้าที่แสดงบทความ (เมื่อคลิกเข้าไปอ่าน) ใช้โค้ด

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<style type='text/css'> 
#Adsense1 ,#Label1 {display:none;} 
</style> 
</b:if>

3.3 กรณีต้องการซ่อน Widget ในหน้าที่แสดงคลังบทความของบล็อกใช้โค้ด

<b:if cond='data:blog.pageType == &quot;archive&quot;'> 
<style type='text/css'> 
#Adsense1 ,#Label1 {display:none;} 
</style> 
</b:if>

3.4 กรณีต้องการซ่อน Widget ในหน้าแรก + หน้า Label + หน้า search ของบล็อกใช้โค้ด

<b:if cond='data:blog.pageType == &quot;index&quot;'> 
<style type='text/css'> 
#Adsense1 ,#Label1 {display:none;} 
</style> 
</b:if>

หมายเหตุ
โค้ดสำหรับซ่อน Widget ทั้ง 2 ที่ได้กล่าวมา ส่วนที่กำหนด Style อาจเขียนเป็น

<style type='text/css'> 
#Adsense1 {display:none;}
#Label1 {display:none;} 
</style>
แต่จะสิ้นเปลืองบรรทัดโดยใช่เหตุ หากมีการกำหนด Style ที่เหมือนกันควรกำหนดร่วมกันเหมือนโค้ดข้างต้นจะดีกว่า



ขั้นที่ 4 หลังจากที่สร้างโค้ดในขั้นที่ 3 ได้แล้วให้นำโค้ดไปวางไว้ใน Template โดย

Log in เข้าไปที่ blogger >>  ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML 

จากนั้นค้นหาโค้ด </head> แล้ววางโค้ดในขั้นที่ 3 เอาไว้ก่อนหน้าโค้ดดังกล่าว เมื่อบันทึกแม่แบบก็จบขั้นตอน 



บทสรุป

ในการซ่อนครั้งนี้เราอาศัยความรู้เดิม ผนวกกับการใช้ display:none เข้ามาช่วยเพื่อไม่ให้แสดงผลในหน้าที่ต้องการนั่นเองครับ ลองทำดูนะครับ เทคนิคง่าย ๆ นี้ยังสามารถปรับใช้ได้อีกมาก อย่างน้อยถ้าในหน้าแรกของคุณมี Widget เป็นจำนวนมาก ก็จะทำให้การโหลดหน้าใช้เวลานาน วิธีนี้ก็ช่วยแก้ปัญหาที่ว่าบน blogger ของคุณได้