Blogger: สลับการแสดงผลแถบด้านข้างในหน้าที่กำหนด

วิธีทำให้หน้าแรกและหน้าดัชนี (Index) ของ Blogger แสดงเฉพาะ Sidebar ข้างซ้ายเท่านั้น แต่ในหน้าอื่นให้แสดง Sidebar ข้างขวาเท่านั้น สามารถทำได้ดังนี้


ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่
'รูปแบบ > เครื่องมือออกแบบเทมเพลต'
แล้วกดสั่งให้บล็อกของคุณแสดง Sidebar ทั้งสองข้างพร้อมกัน

ขั้นตอนที่ 2. กดปุ่ม
'กลับสู่ Blogger'
เพื่อ กลับมาที่หน้ารูปแบบอีกครั้งแล้วเลือกเครื่องมือ Gadget ที่จะแสดงในข้างซ้ายและขวาได้ตามปกติ (จะมาจัดการใส่เพิ่มหรือลบทิ้งภายหลังก็ได้)

ขั้นตอนที่ 3. เข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'
(โดยที่ไม่ต้องกดสั่ง 'ขยายเทมเพลตวิดเจ็ต')

ขั้นตอนที่ 4. สั่งค้นหา
]]></b:skin>

ขั้นตอนที่ 5. แทนที่โค้ดที่หาเจอนั้นด้วย
]]></b:skin>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style>
.main-inner .columns {
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
right: 0px !important;
}
.main-inner .fauxcolumn-right-outer, .main-inner .column-right-outer {
display: none !important;
}
</style>
<b:else/>
<style>
.main-inner .columns {
padding-left: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .column-left-outer {
display: none !important;
}
</style>
</b:if>


ขั้นตอนที่ 6. จากนั้นกดปุ่ม 'บันทึกเทมเพลต' แล้วลองเปิดบล็อกเพื่อดูผลลัพธ์


อธิบายเพิ่มเติม
แต้ถ้าต้องการให้สลับเป็นว่า ในหน้าแรกและหน้าดัชนี (Index) ของบล็อกแสดง Sidebar ข้างขวาเท่านั้น ส่วนหน้าอื่นแสดง Sidebar ข้างซ้ายเท่านั้น แทนก็ให้เปลี่ยนโค้ดในขั้นตอนที่ 5 เป็นโค้ดด้านล่างนี้
]]></b:skin>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style>
.main-inner .columns {
padding-left: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .column-left-outer {
display: none !important;
}
</style>
<b:else/>
<style>
.main-inner .columns {
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
right: 0px !important;
}
.main-inner .fauxcolumn-right-outer, .main-inner .column-right-outer {
display: none !important;
}
</style>
</b:if>


นอกจากนี้สามารถกำหนดเงื่อนไขเปลี่ยนจากหน้าแรก หรือหน้าดัชนีเป็นหน้าอื่นก็ได้ โดยนแทนที่โค้ดในขั้นตอนที่ 5 บรรทัดที่ 2 ด้วยโค้ดกรณีต่างๆ ในลิงก์บทความนี้ครับ
http://tip.maxlayout.com/2012/11/targeting-specific-pages-urls-with-conditional-tags.html

Post Status




2 ความคิดเห็น:

Doraman กล่าวว่า...

ขอบคุณมากๆครับ
ผมกำลังศึกษาเกี่ยวกับ html และ css ส่วนมากบริษัทที่สมัครงานต้องการบุคลากรที่มีความรู้ด้านไหนบ้างครับ ( เกี่ยวกับ web ) เผื่อไม่อยากตกงาน
ขอบคุณอีกครั้ง ขอบคุณที่ชี้แนะมาตลอด ^_^

Max กล่าวว่า...

ไม่ค่อยแน่ใจครับ แต่สำหรับผมแล้วคิดว่าในปัจจุบันนี้ความรู้ที่จำเป็นเกี่ยวกับ Website คงจะเป็น HTML5, CSS, PHP, SQL, Graphic Design
นอกจากนี้ถ้าได้ลองหาข้อมูลเกี่ยวกับประกาศในเว็บไซต์ต่างๆ ดูก็น่าจะดีครับ เช่นที่ลิงก์นี้
http://www.blognone.com/jobs

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