การแบ่ง Header ของ Blogger ออกเป็นสองส่วน
ใน Template มาตรฐานของ Blogger ที่มีให้เลือก (ไม่รวมที่ Download จากเว็บไซต์อื่นๆ) จะมีเพียง 1 Section หรือ 1 แถบยาวเท่านั้น แต่ถ้าต้องการแบ่ง Header ออกเป็น 2 Section ก็ต้องทำการใส่โค้ด Html และ Css เพิ่มเติมครับ
เริ่มต้นด้วยการเพิ่ม Section ให้ส่วน Header ก่อน หลังจาก Login เข้าสู่ Blogger ของเราแล้วให้ไปที่แท๊บ Design > Edit HTML แล้วคลิกปุ่ม Download Full Template เพื่อเก็บโค้ดเทมเพลตไว้เพื่อเกิดความผิดพลาด
ไม่ต้องติ๊กถูกหน้า Expand Widget Templates นะครับ ต่อไปให้กดปุ่ม Ctrl + F เพื่อเปิดกล่องค้นหา Find แล้วพิมพ์หรือก็อปปี้คำว่า </b:section> แล้วคลิกปุ่ม Next เพื่อค้นคำนี้
จากนั้นก็อปปี้หรือพิมพ์โค้ดข้างล่างนี้และนำไป Paste ลงไปใต้บรรทัด </b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
ซึ่งผลลัพธ์เมื่อวางโค้ดเพิ่มเติม (ที่ไฮไลต์สีเหลือง) จะต้องเป็นแบบข้างล่างนี้
เสร็จแล้วอย่าเพิ่งออกจากหน้า Edit HTML นะครับ เพราะยังคงต้องทำงานต่อในขั้นต่อไปซึ่งเป็นการใส่โค้ด CSS เพื่อกำหนดสไลต์
กดปุ่ม Ctrl + F แล้วก็อปปี้หรือพิมพ์คำว่า ]]></b:skin> ลงไปในช่อง Find เพื่อค้นหา จากนั้นก็อปปี้โค้ดข้างล่างแล้วนำไป Paste ลงข้างบนคำนี้
#header, body#layout #header {width:35%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:50%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}
ผลลัพธ์ต้องเหมือนกับรูปข้างล่าง
หมายเหตุ - ค่า Width ของ #header และ #header-right ให้ทดลองปรับเปลี่ยนดูนะครับ เช่นเดียวกับค่า padding: 15px (บรรทัดที่ 2 จากล่าง อาจปรับเป็น 0 - 15 ก็ได้ถ้าต้องการให้ตำแหน่งการจัดวางถูกใจมากที่สุด)
เสร็จแล้วคลิกปุ่ม Save Template ได้เลย ต่อจากนั้นคลิกแท๊บ Page Element
ตอนนี้จะเห็นแถบ Add a Gadget เพิ่มขึ้นมา เมื่อต้องการเพิ่ม Widget ใดๆ ก็ตามที่ด้านขวาของ Header ก็ให้คลิกลิงค์ Add a Gadget นี้แล้วทำการเพิ่ม Widget ที่ต้องการได้เลย
เช่นตัวอย่างของบล๊อกนี้เป็นการเพิ่ม Widget แบบ Search Bar ส่วนข้างล่างนี้คือตัวอย่างการใส่ Gadget แล้ว Text ครับ
ที่มา : http://step2do.blogspot.com/2012/01/header-blogger.html
เริ่มต้นด้วยการเพิ่ม Section ให้ส่วน Header ก่อน หลังจาก Login เข้าสู่ Blogger ของเราแล้วให้ไปที่แท๊บ Design > Edit HTML แล้วคลิกปุ่ม Download Full Template เพื่อเก็บโค้ดเทมเพลตไว้เพื่อเกิดความผิดพลาด
ไม่ต้องติ๊กถูกหน้า Expand Widget Templates นะครับ ต่อไปให้กดปุ่ม Ctrl + F เพื่อเปิดกล่องค้นหา Find แล้วพิมพ์หรือก็อปปี้คำว่า </b:section> แล้วคลิกปุ่ม Next เพื่อค้นคำนี้
จากนั้นก็อปปี้หรือพิมพ์โค้ดข้างล่างนี้และนำไป Paste ลงไปใต้บรรทัด </b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
ซึ่งผลลัพธ์เมื่อวางโค้ดเพิ่มเติม (ที่ไฮไลต์สีเหลือง) จะต้องเป็นแบบข้างล่างนี้
เสร็จแล้วอย่าเพิ่งออกจากหน้า Edit HTML นะครับ เพราะยังคงต้องทำงานต่อในขั้นต่อไปซึ่งเป็นการใส่โค้ด CSS เพื่อกำหนดสไลต์
กดปุ่ม Ctrl + F แล้วก็อปปี้หรือพิมพ์คำว่า ]]></b:skin> ลงไปในช่อง Find เพื่อค้นหา จากนั้นก็อปปี้โค้ดข้างล่างแล้วนำไป Paste ลงข้างบนคำนี้
#header, body#layout #header {width:35%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:50%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}
ผลลัพธ์ต้องเหมือนกับรูปข้างล่าง
หมายเหตุ - ค่า Width ของ #header และ #header-right ให้ทดลองปรับเปลี่ยนดูนะครับ เช่นเดียวกับค่า padding: 15px (บรรทัดที่ 2 จากล่าง อาจปรับเป็น 0 - 15 ก็ได้ถ้าต้องการให้ตำแหน่งการจัดวางถูกใจมากที่สุด)
เสร็จแล้วคลิกปุ่ม Save Template ได้เลย ต่อจากนั้นคลิกแท๊บ Page Element
ตอนนี้จะเห็นแถบ Add a Gadget เพิ่มขึ้นมา เมื่อต้องการเพิ่ม Widget ใดๆ ก็ตามที่ด้านขวาของ Header ก็ให้คลิกลิงค์ Add a Gadget นี้แล้วทำการเพิ่ม Widget ที่ต้องการได้เลย
เช่นตัวอย่างของบล๊อกนี้เป็นการเพิ่ม Widget แบบ Search Bar ส่วนข้างล่างนี้คือตัวอย่างการใส่ Gadget แล้ว Text ครับ
ที่มา : http://step2do.blogspot.com/2012/01/header-blogger.html
ไม่มีความคิดเห็น:
แสดงความคิดเห็น