ชี้แจง 

เมื่อเห็นชื่อเอนทรี่แล้ว..ต้องขอออกตัวไว้ก่อนเลยว่า ตัวข้าพเจ้านี้มีความรู้น้อยนิดเท่านั้น

ถ้าไอ้เข้ ไอ้โขง ที่ไหนหลงเข้ามาก็ขอให้รีบปิดไปซะ..

เพราะไม่อยากจะถูกด่าว่า "สอนจระเข้ว่ายน้ำ"นั่นเอง

 

 

ความรู้ทั้งหมดนี่ก็ได้มาจากการอ่านเอนทรี่ที่สอนแต่งบล็อคของ เพื่อนๆในเอ็กทีนนี่แหละค่ะ(ถ้าไปอ่านจากที่อื่นจะเจอสอนแต่งบล็อคของเอ็กที นมะ??)

บางบล็อคเค้าก็สอนดีมากเลยนะคะ แบบว่าเอามาใช้จริงได้

บางบล็อคก็สอนดีมากเช่นกันแต่Guโง่มาก เลยไม่เข้าใจ นำมาใช้จริงไม่ได้(เพราะไม่เข้าใจไง)

สรุป เครดิตทุกบล็อคที่สอนแต่งบล็อคแล้วกันนะคะ (หุ หุ หุ เล่นงี้เลยเรา )
 
 
 

จากเอนทรี่แต่งบล็อคยังไงให้น่ารัก(ฉบับมือใหม่หัดมั่ว)Step1

และ แต่งบล็อคยังไงให้น่ารัก(ฉบับมือใหม่หัดมั่ว)Step2

ล่าสุด แต่งบล็อคยังไงให้น่ารัก(ฉบับมือใหม่หัดมั่ว)Step3

 

วันนี้จะมาแนะนำเรื่องรูปเฮด กับกล่องคอมเม้นแล้วกันเนอะ..

ก่อนอื่นต้องทำขนาดบล็อคให้ได้ดั่งใจก่อนค่ะ..

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

#page{
margin:auto;
padding-top:15px;
text-align:left;
width:780px;

เราสามารถเพิ่มหรือลดได้ตามต้องการค่ะ แต่ถ้าอยากได้แนวน่ารักๆ มันต้องเล็กๆหน่อยเนอะ ^^

แต่ถ้าไม่อยากให้บล็อคเบี้ยว(ใครจะอยากล่ะเนอะ) ต้องปรับส่วนดังต่อไปนี้ให้ตัวเลขเท่ากันด้วยนะคะ

#header, #neck, #belly, #leg, #footer{
float:left;
width:780px;
 

 

 

และส่วนที่แสดงเนื้อหาของเอนทรี่ที่เราเขียนค่ะ

#content{
display:inline;
float:left;
margin:10px 15px 0px 25px;
width:490px;
 

และขนาดของ Sidebars ที่อยู่ด้านข้างค่ะ

#sidebar, #sidebar2{
background:#ebebeb;
display:inline;
float:right;
margin:5px 25px 0px 0px;
width:225px;
 

ตัวเลขของcontent และsidebar รวมกันแล้วต้องไม่กว้างเกิน Pageนะคะ(เหลือไว้เล็กน้อย)

โดยสวยตัว คิดว่าSidebars ใหญ่มากมันจะไม่สวยค่ะ เอาแค่ 200 หรือ170 กำลังสวย(มั้ง) 


หลังจากกำหนดความกว้างของส่วนต่างๆจนพอใจแล้ว เราก็มาลงมือทำรูปเฮดกันค่ะ

#coverimage{
background:url(http://g.exteen.com/t/simple/cover.jpg) no-repeat;
height:100px;
width:730px;

ความกว้างของรูปส่วนนี้ควจจะเล็กกว่า Pageซักเล็กน้อยนะคะ เพื่อไม่ให้เฮดเกินออกไปค่ะ(มันจะดูไม่ดี..)

ทำรูปให้ได้ตามขนาดที่ต้องการนะคะ รูปเฮดอาจจะทำง่ายๆเหมือนของบล็อคเราก็ได้คือ

นำรูปที่สวยๆ ชอบๆ มาตัดให้ได้ตามที่ต้องการ แล้วเขียนข้อความลงไปค่ะ

เป็นวิธีที่ง่ายที่สุดในโลกแล้ว..

เสร็จแล้วก็อัพโหดแล้วเอา url มาใส่แทนตรงที่เป็นสีเขียวนะคะ 

และกำหนดความกว้าง ยาว ตรงที่เป็นสีชมพูค่ะ 

 Trick

ควรหารูปให้สีใกล้เคียงกับสีหลักๆของธีมเรานะคะ 

ถ้าสีตัดกันเกินไป...มันจะ...

 

 

ต่อไปเป็นส่วนคอมเม้นค่ะ

ถ้าอยากเอาสีตรงส่วนที่คอมเม้นออกแก้สีตรงนี้นะคะ

#commentform{
width:100%;
background:#EEE;
float:left;
 

 

หรือจะเปลี่ยนเป็นสีที่ต้องการได้ตามปกติค่ะ..

ในกรณี่ที่อยากให้เป็นรูปก็ใส่แบบนี้นะคะ 

#commentform{
background:url(http://i257.photobucket.com/albums/hh203/mur-mur/box-mur.png) no-repeat;
height:300px;
width:470px;
float:left;
margin-bottom:5px;

ส่วนสีเขียวใส่ Urlของรูป (ในตัวอย่างคือใช้รูปเต็มไม่เรียงซ้ำ)

ส่วนสีชมพู คือความกว้าง และความยาว .....ขนาดประมาณนี้ดูดีสุด(มั้ง?)

เซ็ตรูปให้เป็น no-repeat นะคะ

 

และในกรณีที่อยากให้รูปเล็กๆเรียงซ้ำกันค่ะ

#commentform{
background:url(http://mur-mur.exteen.com/images/BG/w-21.gif) repeat;
float:left;
margin-bottom:5px;
 

นำรูปที่ต้องการอัพโหลด แล้วนำ มาใส่ตรงที่เป็นสีเขียวค่ะ อย่าลืมเซ็ตให้เป็นrepeat ด้วยนะคะ

 

 

วันนี้เอาไปลองทำกันก่อนนะคะ ..แล้วเอนทรี่หน้าจะมาแนะนำStepถัดไปให้ค่ะ..

 

วันนี้ขอตัวไปทำมาหากินก่อนนะคะ

 

 See U เน้อ -^^-

 

edit @ 8 Jul 2009 18:03:46 by MurMur

Comment

Comment:

Tweet

หวัดดีค่ะ ภาพอวาต้าร์น่ารักนะคะ อยากทำมั่ง แต่ลืมไปแล้วว่าเอามาจากเว็บอะไรอ่ะค่ะ รบกวนตอบด้วยนะคะ .,,,.)a

#14 By Dollish khloris on 2011-09-16 16:02

ขอบคุณมากครับ สำหรับบทความดีๆทั้ง 4 ตอน

อ่านแล้วเข้าใจง่ายมากครับbig smile

#13 By :เกรียน-โก๊ะ: on 2010-10-02 00:04

ต้องขอบคุณอย่างแรงเลยนะครับที่ช่วยสอนไม่งั้นผมคงไม่มีวันเข้าใจวิธีปรับบล็อคแน่ครับ m(_ _)m

ปล. Hot! Hot! Hot! Hot!

#12 By Onizuki on 2010-09-15 03:54

แก โค้ด css ไม่ได้อ่าฮะ ??
ทำยังไง sad smile

#11 By 宝儿 baoer ' ~~ on 2010-07-31 09:57

หง่า .. เราลองทำแล้วอ่าค่ะ
แต่ว่าทำทำไมเอ็นทรี่ที่เขียนมันถึงดันลงไปข้างล่างอ่าคะ TT
ช่วยตอบด้วยค่ะ แก้ไม่ได้ซักที..

#10 By ศรีคล้าว. on 2010-07-17 23:47

น่ารักจังบล็อค

#9 By โตสคุง on 2010-05-19 14:24

อ่อ ได้แล้วนะคะ
ตอนนี้ยังไม่กล้าไปเปลี่ยนอะไร กลัวแย่ไปกว่าเดิม แหะๆ
มือใหม่หัดทำอ่าค่ะ open-mounthed smile

Hot!

#8 By on 2009-09-25 18:11

เราใช้โค้ดเฮด ทำไมภาพมันไม่ขึ้นอ่าคะ

กดรีเฟรชก็แล้ว ดูว่าโค้ดมันผิดรึเปล่า ก็ไม่

ยังแปลกใจว่าทำไมภาพมันไม่ขึ้น embarrassed

#7 By on 2009-09-25 17:44

ขอบคุณมากค่ะ แต่คือ อยากถามอ่าค่ะ
พอดีว่าตรงส่วนที่เขียนเนื้อหาของเอนทรี่

อ่าค่ะ มันไม่ยอมอยู่ตรงกลางแบบสวย ๆ
อ่าค่ะ กลางแบบ กึ่งกลางจริง ๆ อ่าค่ะ

ต้องปรับยังงัยอ่าค่ะ ? :)))

#6 By ❀tarach on 2009-08-04 14:12

แด่วรอทำอีกที

แต่เวลาทำแล้ว ทำไมโค้ดระหว่างบรรทัดห่างกันออกไปเรื่อยๆเลยอ่าคะ

กว่าจะหาเจอแต่ละอย่าง เลื่อนสกอบาร์เมื่อยเลย

#5 By m@ma-sUgaI2 bOy on 2009-07-09 10:06

ขอบคุณมากจ้ะ
เข้าใจง่ายดี แต่ตะกี๊เราทำแล้วมั่วไปโดนตรงอื่น
คอมเม้นเละเทะไปเลย กว่าจะงมโข่งกอบกู้ให้มันกลับมาพอดูได้ เล่นเอาจิตตกไปเลย กลัวโค้ดเจ๊ง (มันเจ๊งไปอันนึงแล้ว -*-)

#4 By Present on 2009-07-08 19:23

open-mounthed smile thx ka

#3 By D on 2009-07-08 18:21

บล็อกงามมากเลยค่ะ

ชอบสีเขียว อิอิ

แวะมาเยี่ยม

เดี๋ยวว่าง ๆ จะมาฝากตัวเป็นศิษย์นะคะ

#2 By Da[nger] on 2009-07-08 18:15

ขอบคุณค้ะ

#1 By mayu on 2009-07-08 18:10