How to Make Different Post Page on Blogger

สอนทำบล็อก วิธีแต่ง blogger
ต่อเนื่องจากบทความ How to Create Different Page on Blogger ในบทความนี้ผมจะสอนวิธีทำให้หน้า Post บางหน้าของ Blogger มีความแตกต่าง Post ในหน้าอื่น ตัวอย่างที่สามารถดูได้จากบล็อกนี้คือหน้า สารบัญบทความของ www.hackublog.com ซึ่งหน้านี้ก็สร้างจากบทความเหมือนกับหน้าอื่น ๆ แต่จะสังเกตว่า Layout ของหน้ามีความแตกต่างจากหน้าอื่น ๆ

วิธีในการทำจะคล้ายกับวิธีในบทความ  How to Create Different Page on Blogger ที่ได้กล่าวมาแล้ว แต่บทความนี้จะมีรายละเอียดเกี่ยวกับการกำหนด Class และ id เพิ่มขึ้น ดังนั้นก่อนจะไปสู่วิธีการขอให้ทำความเข้าใจ สัญลักษณ์ของ Class และ id ดังนี้

 Class และ id

ยกตัวอย่างว่าถ้าเราเห็นแท็กใน HTML เขียนว่า
class='sidebar'
ในการกำหนด CSS จะใช้สัญลักษณ์
.sidebar{
/*กำหนดสมบัติต่าง ๆ ของ Class นี้*/
}
และถ้าเราเห็นแท็กใน HTML เขียนว่า
id='sidebar'
ในการกำหนด CSS จะใช้สัญลักษณ์
#sidebar{
/*กำหนดสมบัติต่าง ๆ ของ id นี้*/
}
ซึ่งจะเห็นว่าใช้สัญลักษณ์ต่างกันคือ ถ้าเป็น class จะใช้ . (จุด) และถ้าเป็น id จะใช้เครื่องหมาย # (ชาร์ป)
และถ้าเราจะใช้ class ในการกำหนดเมื่อ Element นั้นๆ มีได้หลาย Element ส่วนเราจะใช้ id สำหรับกำหนด Element ที่มีเพียง 1 เดียว


วิธีสร้าง Difference Post Page

ขั้นที่ 1 ให้คัดลอก URL ของบทความที่ต้องการ

ทำ blog
สมมติในที่นี้ผมได้ URL เป็น
http://hackudesign.blogspot.com/2010/05/hackublogcom-index.html


ขั้นที่ 2 ใส่เงื่อนไขลงไปว่าในหน้าบทความนี้ต้องการปิดการแสดงผลส่วนใดบ้าง โดยใช้โค้ด
<b:if cond='data:blog.url == &quot;ใส่ URL ของบทความ&quot;'>
<style type='text/css'>
/* ใส่ CSS Style เพื่อทำให้หน้านี้มีความแตกต่าง*/
</style>
</b:if>

สมมติในที่นี้ผมต้องการซ่อนสิ่งเหล่านี้

2.1 กรณีต้องการปิดการแสดงผลกล่อง Comment
เมื่อพิจารณาโค้ดใน Template (ในตัวอย่างนี้ชื่อ Template Minima) พบโค้ดที่กำหนด Commemt box ชื่อว่า ไอดี comments

 สอนทำ blogger

   
ดังนั้นถ้าต้องการซ่อนกล่อง Comment ในหน้าบทความนี้ก็ใช้โค้ด
<b:if cond='data:blog.url == &quot;http://hackudesign.blogspot.com/2010/05/hackublogcom-index.html&quot;'>
<style type='text/css'>
#comments {display:none !important;}
</style>
</b:if>
จากนั้นนำโค้ดข้างบนไปวางใน template โดยวางก่อนหน้าโค้ด </head> ดูรูป

วิธีสร้าง blogspot
ซึ่งผลที่ได้ คือ กล่อง Comment จะหายไปจากบทความ


2.2 ต่อไปถ้าคุณต้องการลบ Post element เช่น post link,post-footer, feed-links ก็ทำได้ทำนองเดียวกับข้อ 2.1 แต่ไม่ต้องสร้างเงื่อนไขขึ้นมาใหม่ แต่ใช้วิธีเพิ่มสิ่งที่ต้องการลงไปในโค้ดข้อ 2.1

ในที่นี้ผมต้องการซ่อนชื่อผู้เขียน เวลาที่เขียน  email-link และป้ายกำกับ

สอนทำ blogger และการปรับแต่ง template
และใน Minima Template มีการกำหนด Class และ id ต่าง ๆ ไว้ดังนี้

<span class='post-author vcard'>
<span class='fn'>
<span class='post-timestamp'>
<span class='item-action'>
<span class='post-labels'>

ดังนั้นถ้าต้องการซ่อน Post Element เหล่านี้ในหน้า ก็ให้เพิ่มโค้ดต่อไปนี้ในโค้ดข้อ 2.1
.post-author vcard,.fn,.post-timestamp,.item-action,.post-labels {display:none !important;}
ซึ่งจะได้โค้ดเป็น
<b:if cond='data:blog.url == &quot;http://hackudesign.blogspot.com/2010/05/hackublogcom-index.html&quot;'>
<style type='text/css'>
#comments {display:none !important;}
.post-author vcard,.fn,.post-timestamp,.item-action,.post-labels {display:none !important;}
</style>
</b:if>

หมายเหตุ
(1) คุณสามารถค้นหาโค้ดเหล่านี้ได้จาก การขยายแม่แบบเครื่องมือ และค้นหาโค้ดที่อยู่ในบริเวณเดียวกับในบริเวณ
<div class='post-footer-line post-footer-line-1'>
หรือ
<div class='post-footer-line post-footer-line-2'>
หรือ
<div class='post-footer-line post-footer-line-3'>
หรือบาง Template อาจจะอยู่บริเวณเดียวกับโค้ด <data:post.title/> ก็ได้

(2) ถ้าต้องการซ่อน Post footer ทั้งหมดให้ใช้โค้ด
<b:if cond='data:blog.url == &quot;http://hackudesign.blogspot.com/2010/05/hackublogcom-index.html&quot;'>
<style type='text/css'>
#comments,.post-footer {display:none !important;}
</style>
</b:if>


2.3 ถ้าต้องการซ่อน Blog Pager ซึ่งเป็นส่วนที่ใช้สำหรับแสดง บทความที่ใหม่กว่า บทความที่เก่ากว่า หรือ กลับไปหน้าแรก

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

สามารถทำได้โดยใช้โค้ด (เพิ่มลงไปในโค้ดเดิมในข้อ 2.2)
<b:if cond='data:blog.url == &quot;http://hackudesign.blogspot.com/2010/05/hackublogcom-index.html&quot;'>
<style type='text/css'>
#comments,.post-footer,.blog-pager {display:none !important;}
</style>
</b:if>

2.4 ถ้าต้องการซ่อน Feed link ของบทความ

สอนแต่งบล็อก 

ก็เพิ่มโค้ดลงไปจากข้อ 2.3 ดังนี้
<b:if cond='data:blog.url == &quot;http://hackudesign.blogspot.com/2010/05/hackublogcom-index.html&quot;'>
<style type='text/css'>
#comments,.post-footer,.blog-pager,.feed-links {display:none !important;}
</style>
</b:if>


2.5 ถ้าต้องการซ่อน Sidebar
ก่อนอื่นคุณต้องต้องค้นหาก่อนว่า Template ของคุณนั้น ใช้รหัส Sidebar ว่าอะไร เช่น ใน Minima Template ใช้รหัสว่า #sidebar-wrapper ดังนั้นถ้าต้องการซ่อน Sidebar ด้วยก็ต้องเพิ่มโค้ดเป็น
<b:if cond='data:blog.url == &quot;http://hackudesign.blogspot.com/2010/05/hackublogcom-index.html&quot;'>
<style type='text/css'>
#comments,.post-footer,.blog-pager,.feed-links,#sidebar-wrapper {display:none !important;}
</style>
</b:if>

แต่ถ้าคุณต้องการซ่อนบาง Widget บน Sidebar เท่านั้นให้ศึกษาเพิ่มจากบทความ วิธี ซ่อน Widget ในบางหน้า แล้วนำมาใช้กับวิธีในบทความนี้

2.6 ถ้าต้องการขยายกล่อง Post
เราสามารถเพิ่ม Style ใด ๆ ลงไปในหน้า Different Post ก็ได้ตามความต้องการ เช่นถ้าต้องการขยายกล่อง Post ให้กว้างขึ้น
ทำได้โดยการใช้โค้ด
#main-wrapper {width: 98% !important;}
หรือระบุความกว้างเป็น
#main-wrapper {width: 960px !important;}
แล้วกำหนดลงไปในโค้ดข้อ 2.4 ซึ่งจะได้โค้ดเป็น
<b:if cond='data:blog.url == &quot;http://hackudesign.blogspot.com/2010/05/hackublogcom-index.html&quot;'>
<style type='text/css'>
#comments,.post-footer,.blog-pager,.feed-links,#sidebar-wrapper{display:none !important;}
#main-wrapper {width:98% !important;}
</style>
</b:if>

ผลที่ได้จะมีบทความเพียงอย่างเดียวและขนาดเกือบเต็มจอ

วิธีสร้างบล็อก


หมายเหตุ ถ้า Template ของคุณใช้รหัสอื่น ๆ ในการกำหนดส่วน main ก็ต้องเปลี่ยนรหัส #main-wrapper เป็น ไอดี ที่ตรงกับ Template ของคุณ

2.7 เปลี่ยนการชิดซ้ายหรือชิดขวา
ในกรณีที่คุณไม่ต้องการซ่อน Sidebar แต่ต้องการให้ส่วนของ main เปลี่ยนการชิดซ้ายไปเป็นชิดขวา (หรือจากชิดขวาเป็นชิดซ้าย) ทำได้โดยใช้ CSS ในการจัด Layout เข้ามาช่วย ซึ่งในที่นี้ใช้ คำสั่ง float (float:left; หรือ float:right;)

ในตัวอย่างนี้ Minima Template จะมีส่วน Main ชิดซ้าย และส่วน Sidebar ชิดขวา

รวยด้วย blog

ถ้าต้องการให้หน้า Different Post ที่เราสร้างเปลี่ยนรูปแบบ สมมติต้องการให้ Main ชิดขวา และส่วน Sidebar ชิดซ้าย   

ใช้โค้ด
<b:if cond='data:blog.url == &quot;http://hackudesign.blogspot.com/2010/05/hackublogcom-index.html&quot;'>
<style type='text/css'>
#comments,.post-footer,.blog-pager,.feed-links {display:none !important;}
#main-wrapper {float:right !important;}
#sidebar-wrapper {float:left !important;}
</style>
</b:if>
ซึ่งผลที่ได้เมื่อเปิดหน้า Different Post ก็จะเห็นว่าหน้านี้แตกต่างจากหน้าอื่น ๆ

สอน blogspot 

2.8 ถ้าต้องการซ่อน Footer ให้ซ่อนไอดี #footer-wrapper โดยเติมลงไปในโค้ดเดิม ซึ่งจะได้โค้ด

<b:if cond='data:blog.url == &quot;http://hackudesign.blogspot.com/2010/05/hackublogcom-index.html&quot;'>
<style type='text/css'>
#comments,.post-footer,.blog-pager,.feed-links,#sidebar-wrapper, #footer-wrapper{display:none !important;}
#main-wrapper {width:98% !important;}
</style>
</b:if>


บทสรุป การทำให้หน้าของ Post ที่ต้องการมีความแตกต่างจากหน้าอื่น ๆ ให้ใช้โค้ด

<b:if cond='data:blog.url == &quot;URL ของบทความ&quot;'>
<style type='text/css'>
/*ใส่รหัสของส่วนที่ต้องการซ่อน และกำหนดสมบัติเป็น {display:none !important;} */
/*ใส่ CSS Style เพิ่มเติมตามความต้องการ*/
</style>
</b:if>
แล้วนำโค้ดต่อไปนี้ไปวางใน Template ดดยวางก่อนโค้ด </head> และบันทึกแม่แบบ
ถ้าหากคุณทำได้ตามที่ได้แนะนแวทางไว้ หน้าบทความแต่ละบทความ ก็เปรียบได้เหมือน หน้าเว็บ 1 หน้านั่นเองครับ

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

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

  1. คุณ hackublog ครับ ผมมีเรื่องจะถามอีกครับ (มีหลายเรื่องเลยแหละ =..=) อยากจะถามว่าในการสร้าง page ขึ้นมา ถ้าเกิดเราอยากจะสร้างหน้า page นั้นให้เป็นเหมือนกับการสร้าง post คือว่า page ที่เราสร้างจะสามารถใส่เนื้อหาได้ แค่ 1 อันถูกไหมครับ ทีนี้ผมเลยจะถามว่า จะทำให้ หน้าpageแต่ละ page นั้น สามารถpost เนื้อหาได้หลายๆ post จะทำได้หรือเปล่าครับ ขอบคุณครับ

  1. น่าจะทำได้ครับ แต่จะไม่เป็นผลดีในเรื่อง SEO เลยครับ เพราะอาจจะถูกมองว่าเป็น Hidden text เนื่องจากมีบทความที่ถูกซ่อนในการแสดงผลอยู่หลายบทความ

    แต่ถ้าจะทำ ก็ใช้ความรู้บทความที่แล้ว >> http://www.hackublog.com/2010/05/how-to-create-difference-pgae-on.html ทำตามขั้นตอนที่ 6 ครับ

    และแทนที่โค้ด

    <b:section class='new-wrapper' id='new-wrapper' preferred='yes'/>

    ด้วยโค้ด

    <b:section class='main1' id='main1' showaddelement='no'>
    <b:widget id='Blog2' locked='true' title='บทความบล็อก' type='Blog'/>
    </b:section>


    ปล.ผมยังไม่ได้ทดสอบนะครับ และไม่แนะนำให้ทำครับ เราน่าจะแก้ปัญหาโดยการใช้หน้าเว็บแล้วทำลิงค์เชื่อมโยง หรือไม่ก็ทำเมนูเชื่อมโยงจะดีกว่าครับ

  1. ทำซ่อนเนื้อหา ไว้สำหรับสมาชิกได้มั้ยคับ
    คือ ใช้โค้ดที่ใช้ซ่อน บทความ

    แล้ว กำหนด css ให้ตรวจหา ID สมาชิก ถ้าใช่ก็ดูได้ ถ้าไม่ใช่ ก็ซ่อนเอาไว้ อะคับ

    ผมก็ไม่รู้เรื่อง เท่าไรคับ ว่าทำได้หรือไม่
    แต่ถ้าทำได้ รบกวน พี่ Hack เขียนเป็นบทความไว้ให้ดูหนอยนะคับ

  1. @ Admin ลั่นล้า : ตอนนี้ที่ blogger ทำได้คือ การกำหนดสิทธิ์ให้สมาชิกเข้าชม โดยการตั้งค่าสิทธิ์ ในเมนูการตั้งค่า และกรอก email ของคนที่เราอนุญาตเข้าไปครับ ส่วนการจำกัดสิทธิ์เหมือนเว็บบอร์ดยังทำไม่ได้ครับ

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

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

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