วิธีการซ่อนข้อความในBlogให้กดออกมาอ่านได้

วิธีการทำปุ่มซ่อนในข้อความของ Blog แต่ไม่มาสามารถให้มันซ่อนในบรรทัดเดียวกันได้

Credit:
http://tip.maxlayout.com/2014/05/blogger-spoiler-button-show-or-hide-
http://www.bloggersentral.com/2009/12/create-show-hide-or-peek-boo.html                 http://www.allbloggertricks.com/2013/05/how-to-add-openclose-button-to-blogger.html 

แบบที่หนึ่งมีเนื้อหาแสดงออกมาด้านบนของปุ่ม

<div id="spoiler" style="display: none;"> ADD YOUR HIDDEN CONTENT HERE. </div> <button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="Click to show/hide" type="button">Open/Close</button> <br />

แบบที่สองมีเนื้อหาแสดงออกมาด้านล่างของปุ่ม

<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="Click to show/hide" type="button">Open/Close</button> <div id="spoiler" style="display: none;"> ADD YOUR HIDDEN CONTENT HERE. </div> <br />

วิธีปรับแต่งเนื่อหา

โครงสร้างของปุ่มมีดังนี้ เนื้อหาที่ถูกซ่อนไว้ก็คือ ADD YOUR HIDDEN CONTENT HERE. ข้อความที่แสดงอยู่บนปุ่มคือ Open/Close ข้อความไตเติ้ลที่แสดงออกมาเมื่อเอาเมาส์วางเหนือปุ่มคือ Click to show/hide

วิธีทำปุ่มนี้หลายอันไว้ในหน้าเว็บเดียวกัน

ทำได้โดยให้เพิ่มเลขลงไปที่ด้านหลังคำว่า spoiler ซึ่งในแต่ละปุ่มจะมีกำหนดไว้อยู่ 4 จุดเช่นเดียวกับตัวอย่างข้างล่างนี้ เช่นถ้าโค้ดปุ่มแรกคือ

---

<div id="spoiler" style="display: none;"> ADD YOUR HIDDEN CONTENT HERE. </div> <button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="Click to show/hide" type="button">Open/Close</button> <br />

---

ดังนั้นปุ่มที่สองจะเขียนได้โดยแทนที่คำว่า spoiler ด้วย spoiler1 ก็จะเป็นดังนี้

---

<div id="spoiler1" style="display: none;"> ADD YOUR HIDDEN CONTENT HERE. </div> <button onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''}else{document.getElementById('spoiler1') .style.display='none'}" title="Click to show/hide" type="button">Open/Close</button> <br />

---

ดังนั้นปุ่มที่สามก็จะเขียนได้โดยแทนที่คำว่า spoiler ด้วย spoiler2 ก็จะเป็นดังนี้

---

<div id="spoiler2" style="display: none;"> ADD YOUR HIDDEN CONTENT HERE. </div> <button onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('spoiler2') .style.display='none'}" title="Click to show/hide" type="button">Open/Close</button> <br />