วิธีที่รวบรวมมาให้ลองทำดูแล้ว ทำตามได้ค่ะ เหมาะสำหรับมือใหม่จ้ะ
จากคุณ RO_NUQA แนะนำเรื่องคำอธิบายและวิธีการจัดทำการทำรูปใน PhotoShop สำหรับนำมาใช้เป็น Title blog(หัวบล็อค)
(มีทั้งหมด 11 หน้า เนื่องจากไฟล์มีขนาดใหญ่จึงแบ่งเป็น 3 ไฟล์)
จากคุณnutim แนะนำความหมายของภาษาใน css
div#title{padding: 15px 4px 75px; font-size: xx-small;color:#EE9058; background:#000099; background-image:url("/file/nutubtim/1156480964[1].gif"); background-repeat:no-repeat; background-position:center center; height:15px;}div#title span {display:none;}
div#container {width: 860px;}
div#content2 { width: 600px;}
div#sidebar2 { width: 260;}
div#container {width: 860px;} (พื้นที่ตรงกลาง +พื้นที่บล็อกขวามือ)
div#content2 { width: 590px;} (พื้นที่ตรงกลาง)(อันนี้เวลานำภาพต่างๆมาใส่ในบันทึกความกว้างไม่ควรเกิน580px ไม่งั้นจะเบียดพื้นที่บล็อกขวามือตกไปข้างล่างได้ค่ะ)
div#sidebar2 { width: 270;} (พื้นที่บล็อกขวามือ)(อันนี้เวลานำสไลด์หรือนาฬิกามาใส่ ขนาดของสไลด์ และนาฬิกาไม่ควรเกิน 230x230ไม่งั้นพื้นที่บล็อกทางขวามือจะตกไปอยู่ด้านล่าง ไม่สวยค่ะ)
ต่อไปรูปหัวบล็อกต้องตกแต่ง(Photoshop)ให้มีขนาด width=860 ,height=110 นะคะ(ถ้าต้องการให้หัวบล็อกพอดีกับพื้นที่ตรงกลาง+พื้นที่บล็อกขวามือ แต่ถ้าต้องการให้เล็กกว่าหัวบล็อกก็ Resize ให้เล็กลงได้ค่ะ)
หลังจากนั้นก็นำลิ้งที่อยู่ของหัวบล็อกที่เตรียมไว้แล้วมาใส่ในโค้ดแทนบริเวณตัวหนังสือสีชมพูที่ทำแถบไว้ค่ะ
จากคุณ feriona อธิบายตัวภาษาใน css อีกมุมหนึ่งค่ะ
div#title{padding: 10px 4px 35px;
font-size: big; color:#9b2542;
background:#9b2542;
font-size: big; คือ ขนาดของตัวอักษรค่ะ ซึ่งสามารถแก้ไขได้หลายรูปแบบในที่นี้ จะขอยกตัวอย่างที่นิยมใช้กันนะคะ ได้แก่
font-size: big;
font-size: medium;
font-size: small;
color:#9b2542; คือ สีของภาพที่เราจะใช้เป็นพื้นหลังค่ะ ในที่นี้เป็นสีแดง ก็ใช้รหัสสีนี้ค่ะ ที่ใช้รหัสสีเนื่องจากว่า เราจะได้ให้สีของ "ชื่อบล็อก"กลมกลืนไปกับสีของพื้นหลังที่เราจะใช้เป็น"หัวบล็อก"ค่ะ
background:#9b2542; คือ สีของพื้นหลัง อาจจะให้เหมือนกันกับสีของรูปภาพที่เป็นหัวบล็อกก็จะดูกลมกลืนค่ะ
สรุปขั้นตอนการทำหัวบล็อค
1. สร้างภาพขนาด 860x110 px.
2.นำรูปขึ้นเก็บใน blog โดยเลือก ไฟล์อัลบั้ม แล้วทำตามขั้นตอน
3. copy ที่อยู่ของภาพไว้
4. เลือกบล็อคที่ต้องการแก้ไขหัวบล็อค เลือกตกแต่งบล็อค แล้ว copy ข้อความข้างล่างนี้ไป pasteในช่อง css ที่ตกแต่งมาเอง
div#title{padding: 15px 4px 75px; font-size: xx-small;color:#EE9058; background:#000099; background-image:url("/file/nutubtim/1156480964[1].gif"); background-repeat:no-repeat; background-position:center center; height:15px;}div#title span {display:none;}
div#container {width: 860px;}
div#content2 { width: 600px;}
div#sidebar2 { width: 260;}
5. แก้ไขเพื่อนำรูปหัวบล็อคที่เราทำมาลงแทนรูปเดิม ให้แก้ไข<h4>file/nutubtim/1156480964[1].gif โดยใช้คำสั่ง paste ที่เรา copy ที่อยู่ของรูปเราวางได้เลย</h4><p>6. บันทึกก็ เรียบร้อยจบ</p>