วิธีทำ เทมเพลท Blogspot

วิธีทำ เทมเพลท 2 คอลัมน์ 

ให้มี 3 คอลัมน์ Sidebar ด้านขวา 2 คอลัมน์

วันนี้ผมจะมาพูดถึง วิธี การปรับแต่ง Template จาก 2 คอลัมน์ ให้มี 3 คอลัมน์ นะครับ โดยจะมี 1 คอลัมน์ คือในส่วนของ Content และ 2 คอลัมน์เล็ก ในแถบของ Sidebar โดยจะใช้ธีม Minima เป็นแม่แบบหลัก ตามที่ผมได้เคยกล่าวไว้นะครับ ด้านล่างนี้จะเป็น รูปแบบ ตัวอย่าง ที่จะทำออกมานะครับ (หรือเหมือน หน้าบล็อกของผมในตอนนี้แหละครับ)
















เริ่มแรก ตามเคยนะครับ Login แล้ว ให้ไปที่ รูปแบบ -> แก้ไข HTML และติ๊ก Checkbox ที่ ขยายแม่แบบเครื่องมือ ตามภาพด้านล่างเลยครับ (แล้วอย่าลืม Backup ธีมเก่าไว้ก่อนนะครับ กันพลาด คลิกที่ ดาวน์โหลดแม่แบบฉบับเต็ม)

1.เริ่มจาก แก้ไข CSS ของ Template นะครับ เป็นการปรับขนาดของธีมครับ ให้ลบ 3 บรรทัด ตามภาพด้านล่าง ได้เลยครับ

ลบส่วนที่ 1









ลบส่วนที่ 2











ลบส่วนที่ 3












2.ปรับขนาดของส่วนต่างๆ ใน CSS ตามนี้นะครับ

ในส่วนของ #outer-wrapper ให้ปรับขนาด จาก 660px เป็น 960px
และ ในส่วนของ #main-wrapper ให้ปรับขนาดจาก 410px เป็น 530px และจัดต่ำแหน่ง ไปด้านซ้าย ตามภาพด้านล่างเลยครับ











ส่วนนี้ เพิ่มโค็ดจัด ซ้าย ตามภาพนะครับ







3.ถัดมา ให้ค้นหา โค็ดนี้ครับ #sidebar-wrapper และทำการแก้เป็น #column_wrapper และแก้ขนาดเป็น 410px และจัดชิดขวา ดูตัวอย่างได้ตามภาพด้านล่างเลยครับ 














4.และทำการ เพิ่ม โค็ด CSS สำหรับ สองคอลัมน์ ทางด้านขวา โดยการเพิ่มโค็ด ต่อไปนี้ครับ 

#sidebar-top{
clear:both;
}
#sidebar-right{
width:200px;
float:right;
word-wrap:break-word;
overflow:hidden;
}
#sidebar-left{
width:200px;
float:left;
word-wrap:break-word;
overflow:hidden;
}

จริงๆ จะเอาไปไว้ตรงส่วนไหนของ CSS ก็ได้ครับ แต่ถ้าไม่รู้จะไปวางตรงไหนดี ก็วางตามภาพเลยครับ5.จากนั้นให้ทำการ ค้นหา โค็ดนี้ครับ <div id='sidebar-wrapper'> และทำการแก้ไข ตามภาพด้านล่างครับ


เสร็จแล้วทำการ เพิ่ม โค็ดนี้เข้าไปอีกทีนึงครับ

<b:section class='sidebar' id='sidebar-top'/>
<b:section class='sidebar' id='sidebar-left'/>

โดยการเพิ่มเข้าไปที่ใต้ tag <div id='column_wrapper'> นะครับ ดูตามภาพก็ได้ครับ

เสร็จแล้ว มาทำการเพิ่ม CSS อีกทีนึงครับ โดยการ เพิ่ม โค็ด ด้านล่างไว้ก่อน Tag </head> นะครับ
/* wire frame layout tweaks */
body#layout #outer-wrapper{width:750px;}
body#layout #main-wrapper{width:310px;}

ไม่เข้าใจ ก็ดูภาพด้านล่างเอาครับ

เรียบร้อยแล้วครับ ทำการเซ็ฟ แล้วไปดูในหน้า องค์ประกอบของหน้า ถ้าได้หน้าตาแบบ ด้านล่างก็ โอเค ครับ

เครดิต http://begindesign.blogspot.com