How to Create Different Page on Blogger

สอนทำบล็อก วิธีทำ blogger ปกติแล้ว Layout ของ Blogger ในทุกหน้าจะมีความเหมือนกันหมด ซึ่งบางครั้งก็อาจจะไม่ตรงกับความต้องการของเราที่ต้องการให้บางหน้ามีความแตกต่างจากหน้าอื่น ๆ เช่น อาจจะต้องการให้บางหน้าไม่มี Sidebar ปรากฎขึ้นมา หรือต้องการให้หน้านั้นเป็นหน้าเปล่า ๆ หรือต้องการให้แสดงองค์ประกอบที่สร้างขึ้นมาให้แสดงผลในหน้านั้น ๆ โดยเฉพาะ ที่กล่าวมาทั้งหมดนี้เราสามารถทำได้ด้วยการใช้โค้ดเพียงไม่กี่บรรทัดเท่านั้น

ตัวอย่างของหน้าที่สร้างขึ้นมาในบล็อกของผมแล้วมีความแตกต่างจากหน้าอื่น ๆ ได้แก่ หน้า Hackublog forums หรือหน้า สารบัญ ซึ่งถ้าคุณคลิกไปดูก็จะเห็นว่ามีความแตกต่างจากหน้าอื่น ๆ (ลืมบอกครับว่า www.hackublog.com สร้างจาก blogger ครับ เพียงแค่จดโดเมนเป็น dot com เท่านั้น)

เอาล่ะครับ เมื่อพอเข้าใจแนวคิดและไอเดียของบทความนี้แล้ว และถ้าบทความนี้โดนใจคุณอยู่พอดี ก็ดำเนินการตามขั้นตอนด้านล่างเลย


ขั้นตอนการสร้าง Different Page บน Blogger

ในที่นี้ผมขอยกตัวอย่างการสร้างโดยใช้ Minima Template

วิธีสร้าง blogger


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

ทำ blog

ขั้นที่ 1 เริ่มต้น Log in เข้าไปที่ blogger.com >> รูปแบบ >> การส่งบทความ >> แก้ไขหน้าเว็บ

 วิธีทำ blospot 
แล้วสร้างหน้าเว็บใหม่ขึ้นมา 1 หน้า โดยตั้งชื่อหน้าเว็บนั้นสั้น ๆ เพราะชื่อที่ตั้งนี้จะเป็น Keyword ใน URL ด้วย >> จากนั้นคลิกเผยแพร่บทความโดยไม่ต้องเขียนบทความใด ๆ (ต่อไปผมจะเรียกหน้านี้ว่า Different Page  )

  

ขั้นที่ 2 เมื่อสร้างหน้าเว็บในขั้นที่ 1 เสร็จแล้ว คลิกดูหน้า Different Page >> จากนั้นคัดลอก URL เก็บเอาไว้

สอนแต่ง blog
เช่น ในที่นี้ได้ URL เป็น
http://hackudesign.blogspot.com/p/difference-page.html
โปรดสังเกตว่าในหน้า Different Page ที่สรางขึ้นมาใหม่ยังมี Page element อื่น ๆ ปรากฎอยู่ ซึ่งหมายความว่าหน้าเว็บนี้ ยังไม่แตกต่างจากหน้าอื่น

สอนสร้างบล็อก

ขั้นที่ 3 ขั้นต่อมาวิเคราะห์ id หรือ Class ใน Template ของคุณ
    (ว่าต้องการซ่อน/แสดงส่วนใด ในหน้า Different Page )

ในขั้นนี้จะต้องใช้ความละเอียดแลเวลาในการค้นหาโค้ดพอสมควร เพราะเราจะต้องทราบว่า id หรือ Class ที่กำหนดส่วนต่าง ๆ ใน Template มีชื่อว่าอะไรบ้าง 


สำหรับ Template Minima ผมพบโค้ดที่ระบุองค์ประกอบต่าง ๆ ดังนี้

ทำblogspot

และรายละเอียดของ Page element ที่พบ ใน Minima template คือ

CSS
HTML

แต่ง blogger

วิธีสร้าง blog

ทำบล็อก 

blogger layout

ใน Minima template  ไม่มีการกำหนด CSS ของ
id footer wrapper

blogger Template

เราไม่ต้องปรับแก้โค้ดใด ๆ ในของเดิมทั้งสิ้น แต่การยกโค้ดข้างต้นมาให้ดูนั้น เพื่อให้เป็นการแนวทางในการค้นหาโค้ดต่าง ๆ ใน Template ของคุณได้ด้วยตัวเอง (ถ้าค้นหาไม่เป็นจริง ๆ ให้ตั้งกระทู้ถามเพิ่มเติม)




ขั้นที่ 4 ในขั้นนี้เราจะทำให้หน้า Different Page แตกต่างกับกับหน้าอื่น

สมมติว่าในหน้า Different Page ที่ผมสร้างขึ้นนั้น ไม่ต้องการให้แสดงผล  #main-wrapper (อ่านว่า ไอดี-เมนเรปเปอร์) , #sidebar-wrapper และ #footer-wrapper ผมก็ใช้โค้ดดังนี้

โค้ดที่ 1
#main-wrapper,#sidebar-wrapper ,#footer-wrapper{display:none !important;}
แต่การเติมโค้ดข้างบนลงไปใน Template จะทำให้ #main-wrapper , #sidebar-wrapper และ #footer-wrapper  ถูกซ่อนในทุกหน้า ดังนั้นเราจะต้องเติมเงื่อนไขบางอย่างลงไป ดังนั้นโค้ดที่ถูกต้องคือ

โค้ดที่ 2
<b:if cond='data:blog.url == &quot;http://hackudesign.blogspot.com/p/difference-page.html&quot;'>
<style type='text/css'>
#main-wrapper,#sidebar-wrapper ,#footer-wrapper{display:none !important;}
</style>
</b:if>
โดยเป็นเงื่อนไขที่ระบุว่า ถ้าเปิด หน้า Different Page ที่มี URL เป็น http://hackudesign.blogspot.com/p/difference-page.html องค์ประกอบของหน้า ได้แก่  #main-wrapper , #sidebar-wrapper และ #footer-wrapper จะไม่แสดงผล ซึ่งในกรณีที่คุณทำตามอยู่ก็ต้องใช้ URL ของคุณเองนะครับ 

ตำแหน่งในการวางโค้ด
ให้ค้นหาโค้ด </head> แล้วนำโค้ดที่ 2 วางลงใน Template ก่อนหน้าโค้ดดังกล่าว

สอนทำบล็อก
เมื่อผมบันทึกแม่แบบ และกลับไปดูที่หน้า Different Page  ก็พบว่าองค์ประกอบของหน้าที่ต้องการซ่อนได้ถูกซ่อนแล้ว

สอนแต่ง blog
แต่เป้าหมายของเราไม่ได้ต้องการสร้างหน้าโล่ง ๆ ขึ้นมาเท่านั้น  ดังนั้นในขั้นต่อไปเป็นการเพิ่มองค์ประกอบของหน้าที่ต้องการให้แสดงผลเฉพาะในหน้า Different Page 




ขั้นที่ 5 ขั้นนี้เป็นการเพิ่มองค์ประกอบของหน้าให้กับหน้า Different Page 

5.1 ถ้าต้องการใส่ AdSense หรือ Iframe ของ Amazon ที่ปรากฎเฉพาะหน้า Different Page  เท่านั้นให้ใช้โค้ด

<b:if cond='data:blog.url == &quot;http://hackudesign.blogspot.com/p/difference-page.html&quot;'>
<!--ใส่โค้ด AdSense หรือ Amazon ตรงนี้ แล้วนำไปวางในตำแหน่งที่ต้องการ-->
</b:if>
แล้วนำโค้ดไปวางในตำแหน่งที่ต้องการ ซึ่งในตัวอย่างนี้ผมวางถัดจากโค้ด <div id='content-wrapper'>

5.2 ถ้าต้องการใส่ Forums ลงไปในหน้า Different Page  เท่านั้น คุณจะต้องสร้าง Forums ขึ้นมาก่อน >> ติดตั้ง Forum

ตัวอย่างโค้ด
<b:if cond='data:blog.url == &quot;http://hackudesign.blogspot.com/p/difference-page.html&quot;'>
<style type='text/css'>
#nabble{width:968px;height:390px;overflow:auto;margin-left:10px;}
</style>
<div id='nabble'>
<!--ใส่โค้ด Forums ตรงนี้-->
</div><div class='clear'/>
</b:if>
เมื่อสร้างโค้ดเสร็จแล้วนำไปวางถัดจากโค้ดข้อ 5.1 หรือถัดจากโค้ดที่ต้องการในตำแหน่งอื่นก็ได้



หมายเหตุ โค้ดในขั้นที่ 5.1 และ 5.2 สามารถเขียนรวมกันได้ดังนี้
<b:if cond='data:blog.url == &quot;http://hackudesign.blogspot.com/p/difference-page.html&quot;'>
<style type='text/css'>
#nabble{width:968px;height:390px;overflow:auto;margin-left:10px;}
</style>
<div align='center' style='margin:10px;'>
<!--ใส่โค้ด AdSense ที่ Covert แล้ว ขนาด 728 x 90 -->
</div>

<div id='nabble'>
<!--ใส่โค้ด Forums ตรงนี้-->
</div><div class='clear'/>

<div style='float:left;margin:10px 0px 10px 20px;'>
<!--ใส่โค้ด AdSense ที่ Covert แล้ว ขนาด 468 x 60 --> 
</div>
<div style='float:left;margin:10px 0px 10px 20px;'>
 <!--ใส่โค้ด AdSense ที่ Covert แล้ว ขนาด 468 x 60 -->
</div><div class='clear'/>

</b:if>

เมื่อนำโค้ดที่แก้ไขแล้วไปวางถัดจากโค้ด <div id='content-wrapper'> และบันทึกแม่แบบ ได้ผลดังรูป

วิธีทำ AdSense

และผลลัพธ์ที่แสดงที่แสดงผลในหน้า Different Page  เท่านั้น ส่วนในหน้าอื่น ๆ ยังคงแสดงผลตามปกติ

ตัวอย่างของผลลัพธ์ หน้าหลัก+หน้าอื่น ๆ
http://hackudesign.blogspot.com
หน้าที่แตกต่างจากหน้าอื่น ๆ
http://hackudesign.blogspot.com/p/difference-page.html



ขั้นที่ 6 เพิ่มเติมสำหรับคนที่ต้องการเพิ่มพื้นที่สำหรับ Add Gadget (เป็นขั้นสูง คุณอาจจะทำหรือไม่ทำก็ได้)

ในกรณีต้องการสร้างพื้นที่สำหรับ Add Gadget และให้ Gagdget นี้ก็จะแสดงผลเฉพาะหน้า Different Page  เท่านั้น  สามารถกำหนดได้ด้วยขั้นตอนต่อไปนี้

ค้นหาโค้ด <div id='content-wrapper'> และวางโค้ดต่อไปนี้ถัดจากโค้ดดังกล่าว

<style type='text/css'>
#new-wrapper{width:100%;margin:10px 0 10px 0;}
</style>
<div id='new-wrapper'>
<b:section class='new-wrapper' id='new-wrapper' preferred='yes'/>
</div>


เราก็จะเห็นว่ามีพื้นที่สำหรับเพิ่ม Gadget แล้ว

สอนทำ AdSense 
คุณสามารถเพิ่ม Gadget ที่เหมาะสมได้ในตำแหน่งนี้ ในที่นี้ผมจะเพิ่ม HTML/จาวาสคริปต์ Gadget และวางโค้ด Adsense ลงไป ผลที่ได้ก็จะมี AdSense ปรากฎขึ้นมาในหน้า Different Page  แล้ว

สร้าง blog
แต่ Gadget นี้ยังแสดงผลในทุกหน้าอยู่ ถ้าต้องการให้แสดงผลเฉพาะหน้า Different Page  เราจะต้องเติมเงื่อนไขให้กับ ไอดี new-wrapper โดยเพื่อให้มีการแสดงผลเฉพาะหน้า Different Page เท่านั้นดังรูป

ทำ blogspot
หมายเหตุ หลังจากที่เติมเงื่อนไขลงไปแล้วคุณจะไม่สามารถ เพิ่มหรือแก้ไข Gadget ได้ (ถ้าจะแก้ให้ลบเงื่อนไขออกแล้วแก้)


บทสรุป

การสร้างหน้าให้แตกต่างจากหน้าอื่น ๆ ทำได้โดยการ กำหนดสไตล์ และ เพิ่มองค์ประกอบ ภายใต้เงื่อนไขของ URL ของหน้าที่ต้องการ

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

สุดท้ายถ้าคุณคิดว่าเนื้อหาของบล็อกนี้มีประโยชน์ก็วานบอกต่อ ๆ คนที่ต้องการความรู้ในการทำ Blogger ด้วยนะครับ สวัสดีครับ

ตอนนี้มีความคิดเห็น : 14 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. ขอบคุณมากนะครับ สำหรับบทความ ผมได้ลองไปเอาไปประยุกต์ใช้แล้ว ผลลัพธ์ดีทีเดียวเลยครับ อิอิ
    ถ้าไม่ว่าอะไร จะรบกวนแวะไปดูที่เว็บ http://thai-hotels-resorts.blogspot.com น่ะครับถ้ามีอะไรก็ติชมกันด้วยนะครับ

    ปล. ผมลองทดสอบกับ template ของ draft.blogspot.com รู้สึกว่า css มันจะไม่เหมือนกับ template ทั่วไป เลยยังหาไม่เจอ แต่เด๋วยังไง ได้แล้ว ผมจะมาเม้นบอกนะครับ ขอบคุณอีกครั้งครับ ^^~

  1. + คุณ Hasekawa Masato : ผมไปเยี่ยมชม thai-hotels-resorts มาแล้วครับ หน้า Hotels&Resorts booking สวยมากครับ
    แต่หน้าแรก ผมคิดว่าปรับ Sidebar ทางซ้ายให้เนียนกว่านี้อีกนิด ให้ดูเป็นมืออาชีพ จะได้น่าเชื่อถือครับ รับรองงาม ออร์เดอร์ตรึมครับ

  1. พอจะมีคำแนะนำไหม ครับ คุณ hackublog
    ผมศึกษาจากเว็บนี้จนตนเอง อยากทำตามเหมือนเว็บนี้ไปซะทุกอย่าง จนเริ่มมึนเลยแหละครับ

    ขอบคุณครับ
    ปล. ผมขออนุญาตเอาลิ้งนี้ไป โปรโมทที่ เว็บ forums.thaisem.com นะครับ (รออนุมัติ) อิอิ

  1. + คุณ Hasekawa Masato: ที่เขียนไว้หลายอย่าง แต่อยากให้เลือกทำเท่าที่จำเป็นครับ ทำให้หน้าบล็อก เบา ๆ โหลดได้เร็ว ๆ และทำ SEO Onpage ก็โอเคครับ

    ส่วนถ้าคุณ Hasekawa Masato จะช่วยโปรโมทให้ก็ขอบคุณในน้ำใจมากเลยครับ ช่วงนี้ผมเขียนบทความอย่างเดียวไม่ได้ไปโปรโมทข้างนอกเลยครับ T_Y

  1. @Mr.Hackublog
    เข้าใจอย่างแจ่มแจ้ง เลยครับ ปฏิทิน นี่เองที่ทำให้ โหลด ช้า ที่จริงหน้าแรกจะเร็วอยู่ แต่คลิกไปหน้า อื่นๆ ช้าเป็นเต่า =..= ขอบคุณที่แนะนำครับ เด๋วยังไงพรุ่งนี้ ผมจะไปโปรโมทให้นะครับ รบกวนถามชื่อเล่นด้วยได้ ไหมครับ
    ผมชื่อหนุ่ย นะครับ ยินดีที่ได้ รู้จัก กับคนที่ทำเว็บสอนทำบล๊อก แบบนี้ ^^

  1. มดก็ติดตามผลงานของคุณทุกวันคะ...และเห็นด้วยกับคุณ Hasekawa Masato คืออยากทำตามไปซะทุกอย่าง แต่ผลสุดท้ายคืองงคะ เพราะว่าไม่มีความรู้มาก่อน ตอนนี้บล๊อกของมดก็แลดูอึดอัด(รกๆ) แต่มดจะค่อยๆ แก้ไขไปทีละนิดคะ

    ขอบคุณสำหรับบทความดีๆทุกบทความนะคะ

  1. + คุณ Hasekawa Masato : พยายามติดตั้งจาวาสคริปต์ให้น้อยที่สุดที่จะเป็นไปได้ครับ เพราะเวลาในการโหลดจาวาสคริปต์บางตัวก็ใช้เวลานานพอสมควร จึงเป็นเหตุให้โหลดได้ช้าลง ไม่เป็นผลดีกับการทำ SEO เท่าไรครับ

    + คุณมด : ขอบคุณที่ติดตามผลงานครับ

  1. ผมเป็นคนหนึ่งที่ปลื้มคุณสุดๆ

  1. มี keyword ง่ายๆที่พอจะใช้ค้นหา class ของ page เรามั้ยครับ ของผมมันเป้นอะไรก็ไม่รู้ไม่ใช่ wrapper อะครับ ขอบคุณครับ

  1. @ Chainarong บทความนี้ผมเขียนเป็นแนวทางเท่านั้นครับ และตอนที่เขียน blogger ยังไม่ได้ออกแบบแม่แบบรุ่นใหม่ออกมา โค้ดในตัวอย่างจึงเป็นแบบนี้ ถ้าจะทดลองปรับแต่งแม่แบบแนะนำให้ใช้ Firebug ให้เป็น

    http://www.hackublog.com/2010/06/using-firebug-tweak-blogger-layout.html

  1. แล้วธีมใหม่ของบล็อกเกอร์ ต้องใช้คำอะไรคะ สำหรับมาแทนคำว่า #main-wrapper,#sidebar-wrapper เพราะหา 2 คำนี้ในโค้ดธีมแล้วไม่เจอคะ

  1. ผมใช้่ template simple ลองทำตามวิธีที่บอกแล้วครับ แต่ยังไม่ได้เลยครับ

    widget html ที่ติด ads มันไม่ยอมหายครับ ทำยังไงดี รบกวนด้วยครับ

    ขอบคุณครับ

  1. เยี่ยมครับ...ทำให้เข้าใจ code template ของ blogspot ได้เยอะ

  1. ความคิดเห็นนี้ถูกผู้เขียนลบ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel