การแบ่งหน้าใน Blogger

พอดีีไปเจอบทความ เรื่องเกี่ยวกับการแบ่งหน้าใน Blog ของ Blogger ความจริงก็ไม่ได้เจอเองหรอก ความต้องการส่วนตัวสั่งให้หาน่ะ จากความพยายามหลายที่ก็ได้วิธีการมาหลายแบบ ใช้ไม่ได้ก็เยอะ แต่อันนี้โอเค ต้องขอขอบคุณแหล่งข้อมูลที่นี่ครับ

หัวข้อ การแบ่งหน้าใน Blogger ต้องขยายความกันก่อนคือ เวลาผู้เขียน Post บทความลง Blogger บทความที่ว่ามันยาวๆๆๆๆๆ เหลือเกิน เมื่อผู้อ่านผ่านเข้ามาอ่านในหน้าแรกหรือหน้าอะไรก็แล้วแต่ที่ไม่ได้เป็นหน้าจำเพาะเจาะจงของบทความนั้นแล้วไซร้ มันก็จะเจอบทความยาวๆ ทั้งบทความนั้นด้วย หากมีบทความอื่นในหน้านั้นอีกก็ไปกันใหญ่เลยท่าน มันน่าจะโชว์เฉพาะบท intro เท่านั้นนิ หากต้องการอ่านทั้งหมดก็คลิ๊ก Readmore นั้นละคือสิ่งที่ผมหามาไว้แล้วจะมานำเสนออีกที

วิธีการ

• Step 0 ท่านต้องเป็นเพื่อนกับ Code ก่อนเพราะต้องแก้ Code น่ะ เช่นว่า style sheet อะไรเทือกนี้ หากไม่เป็นก็ลองๆดูแล้วกันคิดว่าไม่ยากส์



• Step 1 login Blogger แล้วเข้าไปโหมด "รูปแบบ" เลือก "แก้ไข html" คราวนี้ก็จะเจอ โค๊ดเต็มไปหมดครับ ทำเครื่องหมายถูกหน้า option "ขยายแม่แบบเครื่องมือ" ด้วยครับ
  
• Step 2ในcode html หา บรรทัดที่มี tag นี้ครับ "</head>" เสร็จแล้วก็ใส่ Code stylesheet ดังนี้ ก่อน tag ดังกล่าว
  
  

  <style type="text/css">
  
  <b:if cond='data:blog.pageType != "item"'>
  
  .therest {display: none;}
  
  </b:if>
  
  <b:if cond='data:blog.pageType == "item"'>
  
  .readmorelink {display: none;}
  
  </b:if>
  
  </style>

  
  ความหมายของ style sheet ด้านบนก็คือให้ tag พวก <div> หรือ <span> ที่มี class หรือ id ที่มีชื่อว่า "therest" แล้วcode หรือบทความภายใต้ tag พวกนี้ จะไม่ถูกแสดงออกมาในหน้าปกติ แต่ให้แสดงในหน้าจำเพาะเจาะจงน่ะ ส่วน tag ที่มี class ชื่อว่า "readmorelink" ก็แสดงผลสลับกันกับอย่างแรก
  
  
• Step 3 ยังไม่พอครับยังต้องแก้โค๊ดอีก หาโค๊ด ทีมี tag นี้ครับ <data:post.content/> ใช้ Ctrl+F หาก็ได้ครับ แล้วก็แทนที่ด้วยโค๊ดนี้
  

  <data:post.content/>
  
  <span id="readmorelink"><a expr:href='data:post.url' expr:title='data:post.title'>Read More...</a></span>

  
  เท่านี้ก็พร้อมแล้วล่ะครับ สำหรับความหมายของ Step นี้ก็คือ ให้มี คลิ๊ก "Read More..." ใต้บทความที่ยังแสดงไม่หมดน่ะ
  อ้อใช้กับ template ที่เป็นแบบ xml นะครับ ไม่ใช่แบบ classic
  
• Step 4 สุดท้ายแล้วสำคัญสุดๆครับ ก็คือตอน ขั้นตอนการ post น่ะ คือ postแบบ html นะครับ เวลาโพสก็โพสข้อมูลปกติ แต่แบ่งเป็น 2 ช่วงคือ ช่วงแรก และส่วนที่อยากให้ซ่อนไว้ (ควรจะเป็นช่วง เกือบทั้งหมดนะ) ช่วงแรกก็ใส่ปกติ ช่วงที่ 2 ต้องมี tag นี้คลุมไว้ <span class="therest"> </span>

เท่านี้ก็ซ่อนบทความได้แล้วครับจะได้ไม่ยาวมากนิ หวังว่านี่จะเป็น Tip หนึ่ง ได้ใช้ประโยชน์กันนะครับ

by bird

Related Posts by Categories