วิธีการสร้างกรอบไซด์บาร์แบบแฟนซี
posted on 12 Dec 2008 16:45 by softwareport in Exteen-Guide
วิธีการสร้างกรอบไซด์บาร์แบบแฟนซี
~ by @~Marina~@ softwareport.exteen.com
=====================
** อันดับแรกสร้างกรอบไซด์บาร์แบบที่เราต้องการซะก่อน จะใช้โปรแกรมอะไรก็ตามใจขอให้มันเป็นกรอบออกมาได้ก็พอ ในตัวอย่างของบล็อกนี้ใช้ photoshop ลวก 5วินาทีเสร็จ... (อย่าถามนะว่าทำไมบล็อกเราไม่แต่งแฟนซีบ้าง เราเอาโหลดเร็วเข้าว่าน่ะ บีจงบีจีก็ไม่ต้องมี 555)
** สร้างภาพเสร็จแล้วก็ Trim ภาพส่วนที่เป็นพื้นที่ว่างออกให้หมด ไม่งั้น BG อาจออกอาการ …เบี้ยว... จากนั้นตัดมันเป็นสองส่วนซะ... แยกส่วน Head กับ ส่วนที่จะแสดงเอนทรี่หรือเนื้อหาอะไรก็แล้วแต่ออกจากกัน แล้วเซฟแยกเป็นสองไฟล์ จะตั้งชื่อว่าอะไรก็ตามใจ แล้วอัพไฟล์ให้เรียบร้อย
โค้ดของชิ้นส่วนด้านบน
background:url(ใส่ url ไฟล์รูปส่วนด้านบน) left top no-repeat;
width:ความกว้างของรูป;
height:ความสูงของรูป;
ตำแหน่งที่ต้องใส่ (เลือกใช้กรอบแยกกันได้)
Widget : Recommend (เอนทรี่แนะนำ)
#sidebar #recommend h2 { }
Widget : Previous (เอนทรี่ย้อนหลัง)
#sidebar #previous h2 { }
Widget : Comments (เอนทรี่มีคนตอบใหม่)
#sidebar #commentalert h2 { }
Widget : Archives (เอนทรี่รายเดือน)
#sidebar #archives h2 { }
Widget : Fafourites (บล็อกโปรด)
#sidebar #favourites h2
Widget : Links (ใส่ลิ้งค์)
#sidebar #links h2 { }
Widget : Categories (จัดกลุ่มเอนทรี่)
#sidebar #categories h2 { }
Widget : Tags (แท็ก)
#sidebar #tags { }
Widget : Page (เพจเมนู)
#sidebar #pagemenu h2 { }
**** ถ้าส่วนไหนจะใช้ head แบบเดียวกัน ก็ใส่เครื่องหมาย , คั่นตรงชื่อตำแหน่งเอานะ ****
**** ถ้าใช้ head เดียวกันหมด ใส่โค้ดที่ #sidebar h2{ } ****
** คราวนี้มาดูที่ส่วนล่างกัน หลักการทำไซด์บาร์แบบนี้ก็ง่ายๆ แค่กำหนดให้ส่วน BG แสดงจากด้านล่างขึ้นด้านบน เพื่อให้ภาพต่อกับส่วน Head ได้พอดี (ส่วนสูงของ BG ด้านล่างควรสูงพอสมควร ไม่งั้นพอข้อมูลยาวๆ BG จะขาดเอา)
โค้ดของชิ้นส่วนด้านล่าง (แบบใช้ส่วนล่างรวมกัน)
#sidebar .module ul {
background:url(ใส่ url ไฟล์รูปส่วนด้านบน) left bottom no-repeat;
width:ความกว้างของรูป;
height:ความสูงของรูป;
}
**** กรณีที่จะใช้ BG แยกก็ใส่โค้ดที่อยู่ในเครื่องหมาย { } ใส่ที่ ****
#sidebar widgettag .module .ul { }
**** ตรงส่วนที่เขียนเป็น widgettag สีเทาๆ ให้อ้างอิงจากตำแหน่งที่ใส่โค้ดส่วน head ที่บอกไปแล้วน่ะ อย่าง widget:recommend ก็ให้แทนที่ตัวสีเทาด้วย #recommend …widget:previous ก็ให้แทนที่ด้วย #previous… อันอื่นๆ ก็ทำแบบเดียวกัน
เท่านี้ก็เสร็จแล้ว ได้กรอบแฟนซีสมใจ... แต่เดี๋ยว... มันแต่งสมบ่มิสม... เป็นบางกรณี...
เนื่องจากกรอบแฟนซีสามารถแต่งได้หลายรูปแบบ
ดังนั้นอาจมีกรอบบางแบบที่... ใช้แล้ว... เอนทรี่หรือข้อมูลภายในเบี้ยวบูดบรรลัย
Padding + Margin ช่วยท่านได้
ซึ่งมันก็ปรับได้หลายตำแหน่งอีกแหละนะ… คงบอกวิธีปรับทุกแบบไม่ไหว...
เพราะมันขึ้นอยู่กับว่าเบี้ยวแบบไหนด้วย แต่ยังไงก็อยู่ในขอบเขตของ Sidebar
ลองปรับดูกันเองล่ะกันนะ…
ใครปรับไม่ได้ก็โพสต์ทิ้งไว้ล่ะกัน
เดี๋ยวจะไปช่วย ~