K a m i -{kun~}-

How To ดันบล๊อคให้ชิดขอบด้านบน(รูปบน)
          เริ่มโดยไปที่ Manage > Theme > CSS Editor
1. เลื่อนลงมาดูที่ส่วนของ Head กันครับ

Code ปกติ

/* Header */

#header{
background:url(http://g.exteen.com/t/apollo/header.png) top left no-repeat;
padding:32px 0px 0px 25px;
}

#header h1 a{
color:#666;
font-size:24px;
}

#header h1 a:hover{
color:#999;
}

#header h2{
font-size:12px;
margin:5px 0px 5px 0px;
}

#coverimage{
background:url(http://g.exteen.com/t/apollo/cover.jpg) no-repeat;
height:180px;
width:730px;
margin-bottom:5px;
}

ส่วนอันนี้คือ Code ที่แก้ไขแล้ว (เป็นตัวเดียวกับที่ผมใช้อยู่ครับ)

/* Header */


#header{
background:#91cac7;
width:860px;
margin-left:10px;
}


#header h1 a{
display:none;
}


#header h1 a:hover{
display:none;
}


#header h2{
display:none;
}


#coverimage{
background:url(http://uc.exteenblog.com/goodfriday/images/head.png) no-repeat;
height:200px;
width:860px;
margin:-65px 0px 0px 0px;;
} 

 **สำหรับใครที่ขี้เกียจอ่าน ก๊อป Code ผมไปแล้วแก้ในส่วนของ

Cover Image ตรง background:url(" ") no-repeat; ได้เลยครับ

Height : กำหนดความสูงของภาพ BG ที่เราต้องการ

Width : กำหนดความกว้างของภาพ BG ที่เราต้องการ

Margin:*px *px *px *px;; กำหนดระยะห่างจากขอบที่เราต้องการ

ในส่วนนี้ -65px คือ ขยับให้มันชิดขอบบน (ต้องไปเปลี่ยนค่าเอาเองตามความเหมาะสมครับ) (นอกนั้นไม่ต้องแก้อะไรก็ใช้ได้ครับ)

!!เนื่องจากว่า ผมเปลี่ยน Blog เป็นแบบขนาด 880 Code จึงแปลกหน่อย ใครที่ใช้ Blog ขนาดปกติ ให้แก้เลข 860 เป็น 760 นะครับ

************

ส่วนตรงนี้ สำหรับคนที่อยากรู้ว่า Code แก้ตรงจุดไหนๆไปเพื่ออะไร อ่านต่อข้างล่างครับ!!

 

 

จากรูป ผมแบ่งออกเป็น 4 ส่วน  สีเขียว  สีส้ม  สีขาว  สีฟ้า เราจะทำการแก้พวกนี้ครับดังนี้

1. ลบส่วนสีเขียวออก อยู่ในส่วนของ

 #header h1 a{
color:#666;
font-size:24px;
}

#header h1 a:hover{
color:#999;
}

#header h2{
font-size:12px;
margin:5px 0px 5px 0px;
}

ให้เราลบค่าข้างในออกให้หมดแล้วใส่เป็น

 #header h1 a{
display:none;
}


#header h1 a:hover{
display:none;
}


#header h2{
display:none;
}

Display:none; [คำสั่งปิดการแสดงผลครับ]

 

2. ต่อมาเราจะทำการปรับพื้นที่ส่วนสีขาว ให้พอดีกับตำแหน่งที่ต้องการ (ซึ่งส่วนนี้จะอยู่หลังพื้นที่สีส้ม จึงปรับแค่ให้มันไม่ล้นออกมาก็พอแล้วครับ ) ดูที่ส่วน

#header{
background:url(http://g.exteen.com/t/apollo/header.png) top left no-repeat;
padding:32px 0px 0px 25px;
}

ให้แก้เป็น

#header{
background:#91cac7; (เปลี่ยนสีพื้นหลังในส่วนของพื้นที่สีขาว)
width:860px; (กำหนดความกว้างของพื้นที่สีขาว (ใครใช้บล๊อกขนาด 780 ให้เปลี่ยนเป็น 760 แทนนะครับ)
margin-left:10px; (กำหนดระยะจากขอบซ้าย ไปขวา 10 (Blog 880px จะมีพื้นที่เหลือ 20px ครับ เราจึงต้องกำหนดขนาดพื้นที่สีขาวเป็น 860px และเลื่อนไปทางขวา 10px (เพื่อจัดให้อยู่ตรงกลางเท่านั้นเอง~))
}

เราลบ background:url ออก เพราะเราไม่ได้ใช้แล้ว (ภาพมันจะล้นกรอบครับ) และลบบรรทัด padding:32px 0px 0px 25px; ออก เพราะเราไม่จำเป็นต้องใช้การจัดตำแหน่งระยะชิดขอบอะไรแล้ว

3. ต่อมาเราจะขยายส่วนของพื้นที่สีส้ม ให้ชิดขอบบน (ปิดพื้นที่สีฟ้า) โดยดูที่

#coverimage{
background:url(http://g.exteen.com/t/apollo/cover.jpg) no-repeat;
height:180px;
width:730px;
margin-bottom:5px;
}

หลังแก้แล้วจะเป็น

#coverimage{
background:url(http://uc.exteenblog.com/goodfriday/images/head.png) no-repeat;
height:200px;
width:860px;
margin:-65px 0px 0px 0px;;
} 

 background:url ให้เปลี่ยนเป็นรูปที่เราต้องการครับ (ขนาดที่เหมาะสมคือ 760 , 860 แล้วแต่ขนาดของ blog) และใส่ no-repeat เพื่อไม่ให้เรียกรูปซ้ำ (ในกรณีที่พื้นที่ใหญ่กว่าขนาดของภาพ)

 height:200px; กำหนดความสูงของภาพ (แล้วแต่ว่าภาพสูงเท่าไหร่ครับ)
width:860px; กำหนดความกว้างของภาพ (blog 880px ใช้ภาพ 860px)

margin:-65px 0px 0px 0px;; ให้แก้ที่ตัวแรก คือ จัดความสูง (-65 เพราะต้องการดึงภาพขึ้น)

เมื่อทำเสร็จ ก็จะได้แบบนี้ครับ~

 

 

เป็นอันเสร็จ

 ...

ไม่เข้าใจตรงไหนถามได้นา

จขบ.ใช้ภาพผิดขนาด ไปใช้ 880px คำว่า .com จึงไม่ครบ 555+ (ขี้เกียจแก้ เดี๋ยวก่อน XD)

มีประโยชน์ก็คอมเมนท์นีสนึงน่อ!!

- Good Friday -