การซ่อนข้อความ spoiler ใน bloger ด้วยโค๊ด HTML

Spoiler คืออะไร ?
Spoiler ก็คือโค๊ดตัวหนึ่งที่เอาไว้ซ่อนข้อความที่เราต้องการไม่ให้แสดงผลออกมา
แต่สามารถแสดงผลได้โดยการคลิกที่คำว่า SHOW เข้าไป 1 ครั้งก็จะแสดงผลออกมา
มีประโยชน์มากในการซ่อนข้อความที่ไม่อยากจะเฉลยให้คนอื่นได้รู้ ยกตัวอย่างเช่น การสปอยเนื้อเรื่องหรือตอนจบของอนิเมะหรือภาพยนต์ สามารถใช้เพื่อซ่อนข้อความไม่ให้แสดงผลยาวเกินไป Code Spoiler มีส่วนช่วยไม่ให้มันยาวจนรกสายตานั้นเอง

และถ้านำ Code Spoiler เข้ามาใช้ในการซ่อนรูปภาพ จะช่วยให้เพื่อน ๆ คนอื่นที่เข้ามาชมกระทู้เรา
ลดอัตราการโหลดรูปภาพลงไปได้ (กรณีที่รูปเยอะ ๆ จะเห็นอย่างผลมาก)

ซึ่งโค๊ด Spoiler เรามักจะพบในเว็บบอร์ดต่างๆซึ่งจะไช้เป็น BBCode ( [spoiler]……[/spoiler] ) แต่ถ้าอยากเอามาไช้ใน blogger ล่ะ ง่ายๆครับแค่ใช้โค๊ดด้านล่างนี้ครับ

<div id="spoiler" style="display:none">
ใส่ข้อความตรงนี้
</div>
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/hide</button>

ไปก๊อป Code ที่นี้ครับ “คลิกที่นี่”

ตรง ใส่ข้อความตรงนี้ เป็นจุดที่เราจะเอาข้อความที่ต้องการซ่อนไปใส่ หรือจะเป็นโค๊ด HTML ของรูปก็ได้นะครับ และตรงคำว่า Show/hide สามาถเปลี่ยนได้เช่นกันครับ

หมายเหตุ!!!!

หากคุณต้องการใส่โค๊ด Spoiler มากกว่า 1 อันในหนึ่งบทความ โค๊ดอันที่ 2 คุณจะต้องเปลี่ยนตรง
<div id="spoiler" style="display:none"> ตรงคำว่า spoiler ให้เป็นอย่างอื่น หรือเติมหมายเลขต่อท้าย เช่น
<div id="spoiler2" style="display:none"> และเปลี่ยนคำว่า spoiler ที่ปรากฏอยู่ในโค๊ดทุกอันไห้เหมือนกัน แบบนี้

<div id="spoiler2" style="display:none">
ใส่ข้อความตรงนี้
</div>
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('spoiler2') .style.display='none'}">Show/hide</button>

ส่วนอันต่อๆก็ทำเหมือนกันเพียงแต่อย่าให้ซ้ำกัน โดยเปลี่ยนเลขเรียงไปเป็น spoiler3 spoiler4