๏ palermos cafe ๏

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

โหมด การวางเลย์เอาท์

ก่อนอื่นมาดูองค์ประกอบโดยรวมของรูปแบบธีมที่ exteen ก่อนนะครับ และในเอนทรี่นี้จากรูปประกอบนะครับ สีฟ้า คือส่วนที่เป็น sidebar ส่วนสีเทาคือ ส่วนอื่นๆ

รูปแบบที่1 เป็นกรณีที่เปิด sidebar 2 ข้าง อาจจะมีคนถามว่า แล้ว #belly ละ? อ่อ มันเป็นส่วนของพื้นหลังที่คลุมตั้งแต่ #content, #sidebar, #sidebar, #commentform และ .comment ลงไปนั่นนะครับ โค้ดใน CSS นั้นเราต้องเปิดใช้งาน sidebar2

ผมจะแนะนำเฉพาะรูปแบบโค้ดหลักๆสำคัญๆ ในส่วนของ margin และ padding เป็นเรื่องเฉพาะแต่ละบล็อกแนะนำไปเดี๋ยวบล็อกจะเบี้ยว ส่วนนี้ต้องลองปรับกันเองนะครับ

#sidebar{
    float:left;
    width:ค่าความกว้างที่กำหนดเอง;
    background: กำหนดพื้นหลัง
}


#sidebar2{
    float:right;
    width:ค่าความกว้างที่กำหนดเอง;
    background: กำหนดพื้นหลัง
}

จากโค้ดข้างบนอธิบายว่าเปิด sidebar ที่ฝั่งซ้ายมือ และ sidebar#2 ที่ฝั่งขวา สลับกันก็ได้นะ แต่ต้องดูค่า margin กับ padding ด้วย

รูปแบบที่2  เป็น Default theme เลย ซึ่งทันทีที่ใช้ธีมเวอร์ชั่นใหม่ก็ไม่ต้องเปลี่ยนอะไรมันจะเซทให้ใช้ #sidebar และปิด #sidebar2 ไว้

โค้ดไม่บอก...นะเออ

รูปแบบที่3  เป็นการเทคนิคที่ช่วยให้หน้าบล็อกอ่านไวขึ้น จริงๆไม่ได้อ่านไวขึ้นอย่างที่เข้าใจกันหรอกครับที่ถูกต้องคือ อ่าน #content ก่อน #sidebar2 โดยเทคนิคนี้เราต้อง ปิด #sidebar แล้วเปิด #sidebar2 ขึ้นมาแทน

โค้ด sidebar รูปแบบที่3

#sidebar{
    display:none
}


#sidebar2{
    float:right;
    display:inline;
    width:ค่าความกว้างที่กำหนดเอง;
    background: กำหนดพื้นหลัง
}

มาดูแบบที่เหมือน หรือดูคล้ายธีม wordpress บ้าง ในแบบที่4 ด้านล่างครับ

รูปแบบที่4 หลายๆบล็อกใช้งาน sidebar แบบนี้ ซึ่งวิธีใช้งานก็ไม่ได้พิศดารอะไร เพียงใส่sidebar ให้ float ไปทางขวาและ content ไปทางซ้าย

จากรูป เราก็มาดูโค้ด...

#content{
    float:left
}

#sidebar{
    float:right
}

#sidebar2{
    float:right;
}

และมาดูแบบที่5 กันต่อด้านล่างครับ

รูปแบบที่ 5 จะเหมือนรูปแบบที่4 เพียงแต่กลับค่า float เป็นซ้ายเท่านั้น (แล้วจะสอนซ้ำไปทำไมหนอ)ดูดค้ดแล้วแกะเอานะจ๊ะ 

โค้ดแบบที่ 5..

#content{
    float:right
}

#sidebar{
    float:left
}

#sidebar2{
    float:left
}

และบางบล็อกที่ไม่ใช้ sidebar ก็มี...

โหมดแต่งสี ลงรูป sidebar

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

รูปแบบที่1 เป็นแบบเบสิคที่สุด โค้ดง่ายๆครับ อยู่ที่การใช้รูปที่เหมาะสมเท่านั้นเอง

โค้ดแบบที่ 1

 #sidebar{
    background: url(ที่ฝากไฟล์รูป);
}

ในส่วนของ properties ต่างๆ ที่เกี่ยวข้องกับ background ท่านสามารถอ่านเพิ่มเติมได้ที่เว็บนี้ครับ w3schools และ tizag

รูปแบบที่2 เป็นแบบที่บล็อกผมใช้อยู่ โดยเป็นการแยกในแต่ละ module ออกจากกัน ซึ่งทำให้ sidebar ดูเป็นระเบียบมากยิ่งขึ้น

ก่อนอืนต้องสร้างรูปก่อนครับ ดังตัวอย่างที่ผมทำใน Photoshop ของจริง กว้าง280px สูง 1587px จากนั้นก็สไลซ์แยกส่วนหัว กับ ส่วนล่าง(ส่วนลิงค์) ออกจากกัน แล้วเอาไปฝากไฟล์ไว้

ดูรูปแบบโค้ด.....

ในส่วนล่าง (ส่วนใส่ข้อความลิงค์)

#sidebar .module ul{
    background: url(ที่ฝากไฟล์รูป); 
}

และส่วนวางข้อความพวก Previously, Comment Alert ส่วนนี้เราต้องทราบความกว้างและความสูงของรูปด้วยนะครับ

#sidebar #recommend h2, #sidebar #previous h2, #sidebar #commentalert h2, #sidebar #archives h2{
background: url(ที่ฝากไฟล์) left top no-repeat;
    width:ความกว้างของรูป;
    height:ความสูงของรูป;
}
 

ถ้าจะเพิ่ม Favourite กับ Link ก็ทำในทำนองเดียวกันครับ ลองดูในโค้ดเดิมว่ามันใช้ค่าตรงนั้นว่าอะไร (โรคขี้เกียจกำเริบ ไว้มีคนถามค่อยตอบแล้วกัน)  รูปแบบนี้เป็นรูปแบบที่บล็อกผมใช้ ณ ปัจจุบัน..

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

รูปแบบที่3 โค้ดจะยุ่งยากขึ้นมาหน่อย โดยที่เราจะต้องใส่โค้ดใน module ที่เราต้องการแก้ไขให้ถูกต้องด้วย แต่ก็ไม่ยากนักนะ ถ้าหากว่าท่านแต่งตามแบบที่2 ได้ ในตัวอย่างรูปแบบที่3นี้ ในแต่ละ module จะใช้คนละสีแยกจากกันไปเลย

โค้ดสำหรับส่วนล่าง (ส่วนข้อความลิงค์)

#sidebar #commentalert.module ul{
    background: url(ที่ฝากไฟล์สีที่1);
}

#sidebar #recommend.module ul{
    background: url(ที่ฝากไฟล์สีที่2);
}

#sidebar #previous.module ul{
    background: url(ที่ฝากไฟล์สีที่3);
}

#sidebar #favourites.module ul{
    background: url(ที่ฝากไฟล์สีที่4);
}

#sidebar #links.module ul{
    background: url(ที่ฝากไฟล์สีที่5);
}

#sidebar #categories.module ul{
    background: url(ที่ฝากไฟล์สีที่6);
}

#sidebar #archives.module ul{
    background: url(ที่ฝากไฟล์สีที่7);
}

และส่วนของหัวข้อต่างๆ ทีนี้ต้องทำแยกแล้ว ไม่เหมือนแบบที่2

#sidebar #commentalert h2{
    background: url(ที่ฝากไฟล์สีที่1); height:ความสูงของรูป; width:ความกว้างของรูป;
}

#sidebar #recommend h2{
    background: url(ที่ฝากไฟล์สีที่2); height:ความสูงของรูป; width:ความกว้างของรูป;
}

#sidebar #previous h2{
    background: url(ที่ฝากไฟล์สีที่3); height:ความสูงของรูป; width:ความกว้างของรูป;
}

#sidebar #favourites h2{
    background: url(ที่ฝากไฟล์สีที่4); height:ความสูงของรูป; width:ความกว้างของรูป;
}

#sidebar #links.module ul{
    background: url(ที่ฝากไฟล์สีที่5); height:ความสูงของรูป; width:ความกว้างของรูป;
}

#sidebar #categories h2{
    background: url(ที่ฝากไฟล์สีที่6); height:ความสูงของรูป; width:ความกว้างของรูป;
}

#sidebar #archives h2{
    background: url(ที่ฝากไฟล์สีที่7); height:ความสูงของรูป; width:ความกว้างของรูป;
} 

เลือกทำเฉพาะเท่าที่ใช้เท่านั้นก็พอนะครับ จะได้ไม่เหนื่อยมากนัก 

โหมด เพิ่มสีสันการเลื่อน sidebar ด้วย hover link

ที่นี้การแต่งลิงค์ให้สวยงาม กลมกลืนกับบล็อกก็มีส่วนช่วยให้บล็อกงามขึ้นมิใช่น้อย เป็นเทคนิคเก่าที่มีในธีมบล็อกแบบเก่า ผมเอามาสอนใหม่ เป็นการใส่ hover ให้กับ list หากท่านยังนึกภาพไม่ออกลองจิ้มๆ sidebar บล็อกผมดูก็ได้ครับ ลักษณะจะเป็นแบบนั้น ที่มีพื้นหลังสีฟ้าๆ วิ่งตามเมาส์ในขณะที่จิ้มบน sidebar

รูปแบบของลิงค์ทั่วๆไป แล้วถ้าวาง hover list ละ จะออกมาในลักษณะนี้

จะเห็นว่าทันทีที่วางเมาส์บนบรรทัดที่มีลิงค์ จะมีพื้นหลังสีน้ำเงินปรากฏ เพิ่มความโดดเด่นให้กับบรรทัดนั้นที่ลากเมาส์ผ่านได้มากเลยทีเดียว ส่วนโค้ด ท่านสามารถวางเพิ่มลงไปได้ในหน้าแต่ง css

#sidebar .module li:hover{
        background: #ค่าสี;
} 

ดูตัวอย่างการใช้ hover list เพื่อเพิ่ม ความโดดเด่นให้กับข้อความที่ลิงค์

 #sidebar {
    background: #eac9fd;
}

#sidebar a{
    color: #474747;
}

#sidebar .module li:hover{
    background: #474747;
    color:#eac9fd;
}

ท่านจะเห็นว่า sidebar ปกติจะเป็นสีชมพู ตัวอักษรสีดำ แต่ในบรรทัดที่เอาเมาส์ไปวางจะสลับสีกันกลายเป็นตัวอักษรสีชมพู และพื้นหลังสีดำ

โหมด ใช้ รูปแทนลิงค์

และเทคนิคการแต้มแต่งลิงค์ที่เป็นของเก่าเอามาเล่าใหม่อีกอันหนึ่งคือ ใส่รูปลงไปแทนข้อความลิงค์ (ใช้กับ Favก็ได้เช่นกัน) 

โดยรูปที่ html code จะเป็น

รูปแบบLinkปกติ

รูปแบบการใช้รูปที่ผมแนะนำจะมีสองแบบนะครับ งานนี้ท่านต้องมีฝีมือในการทำรูปบ้างนะ... โดยใช้โปรแกรมพวก Adobe Photoshop, Adobe Illustratorหรือ The Gimp ก็ได้ตามแต่ความถนัด และความสะดวก

รูปแบบที่1  ใช้รูปที่ขนาดเกินกว่าครึ่งหนึ่งของ sidebar

พอแต่งรูปเสร็จแล้วก็เอาไปฝากไฟล์ จากนั้นก็นำโค้ดไปใส่ในช่อง Description ครับ ถ้าไม่พลาดจะได้ตามตัวอย่างนี้ 

สี่เหลี่ยมสีแดงๆ คือระยะภายใน margin ที่เราตีกรอบไว้ ทางซ้ายมือของรูปลิงค์ไปยัง photobucket จะมีที่ว่างๆ อันเกิดจากการที่เราไปกำหนดค่า padding ไว้นั่นเอง

รูปแบบที่2 ใช้รูปที่กว้างน้อยกว่าครึ่งหนึ่งของขนาด sidebar

ในลักษณะนี้ท่านต้องจัดค่า margin และอาจรวมไปถึงค่า padding ให้ออกมาสวย ถ้าหากใช้เว็บเบราเซอร์ Mozilla Firefox งานนี้หมูเลยครับ เพียงแค่ติดตั้ง add-on ที่ชื่อ Web Developer หรือ Firebug เพื่อส่อง+ลองจัดในหน้าเว็บจริงๆ ได้ทันที สำหรับท่านที่ใช้ Web Developer ผมเคยเขียนเอนทรี่สอนไปคร่าวๆแล้ว

ใช้ Web Developer แต่งบล็อกอย่างเทพ  เสริมด้วย แสดงห้องภาพแบบไม่ง้อตาราง

และหน้าตาของลิงค์ที่ได้

เพิ่มโค้ดสำคัญตัวนี้ลงไปด้วย และก็จัด margin, padding ต่อเลยครับ

 #sidebar #links li{
    display: inline;
}

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

ศึกษาเพิ่มเติมได้จากส่วนของ Palermos :: Blog Decoration Tips ครับ