วิธีเริ่มสร้างปุ่ม
ทำได้โดยคัดลอกโค้ดแบบใดแบบหนึ่งด้านล่างนี้ไปวางในช่อง HTML ของโพสต์หรือของ Gadget ก็ได้แบบที่หนึ่งมีเนื้อหาแสดงออกมาด้านบนของปุ่ม
<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 />
Credit:
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
0 ความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น