ปรับแต่ง blog ให้ดูดีง่ายๆ

       หลังจากปั่นบล็อกมาได้เกือบปี ก็พบว่า การจะสร้างสรรค์บทความให้เป็นที่น่าสนใจและสะดวกต่อการอ่านนั้นช่างยากยิ่ง ด้วยความขี้เกียจเลยตัดสินใจ เอามายำรวมกันไว้จะได้หาเจอ code ได้ง่ายๆ สะดวกต่อการ post เรื่องใหม่ๆ ใครมี tips อะไรเพิ่มเติมช่วยบอกต่อกันด้วยนะ จะขอบคุณมากๆจ้า

คำอธิบาย หมึกแดง คือ แก้ไขได้
                 original link คือ ต้นฉบับบทความนี้ ใครถนัดอ่าน Eng ก็คลิ๊กโลด ^ ^

1. How to create a spoiler or show-hide effect by Greenlava => original link
   วิธีการซ่อน "รูป,ข้อความ,คลิป"ง่ายๆ เหมาะแก่การทำ spoiler
    Code :


VISIBLE CONTENT HERE
<div id="spoiler" style="display:none">
HIDDEN CONTENT HERE 
</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>

=> VISIBLE CONTENT HERE = ข้อความที่เห็นตอนยังไม่คลิกกด Show/hide
     HIDDEN CONTENT HERE = ข้อความที่ต้องการให้เห็นตอนคลิก Show/hide แล้ว


 2. How Do I Link to Different Sections on the Same Page? (HTML Editor) by coffeecup.com => original link

    วิธีการกด link เพื่อไปยังข้อความที่ต้องการ ในหน้าเดียวกัน

   Code :
1.
<a name="targetname"></a>  

  targetname คือ คำ/ประโยค ที่ต้องการจะ link ไป

  ให้เอา Code ไปวางตรงตำแหน่งที่ต้องการ link ไปนะ (ปลายทาง)
2.
<a href="#targetname">Your Link Text</a>

  #targetname จะต้องเหมือนกับ targetname แรก
  Your Link Text  => เป็นประโยค ที่ไว้สำหรับเรากด link

 ให้เอา code นี้ไปวาง ณ ตำแหน่งที่ต้องการกด link ไปจ้า (ต้นทาง)

*ในกรณีที่มันไป link หน้าอื่นแทน ให้ปรับ ที่อยู่เว็บ ไปที่ เขียน=> กด link (code2) แล้ว แปลงที่อยู่เว็บที่ต้องการ โดยให้มี  #targetname ต่อท้าย นะ

3. Jump to top of page  by Greenlava => original link 
    Code :

<a href="#">Back to top</a>

4. More.. ซ่อนข้อความไว้อ่านเพิ่มเติม..
    Code :
<!--more-->