• ใช้ไฟร์ฟอกซ์กันเถอะ
  • คำแนะนำ24ข้อที่บล็อกเกอร์ควรรู้

 

 

แมวในที่นี้คือ ชื่อเพื่อนผมนะครับ ชื่อ KAT แต่ผมชอบเรียกว่า แมวมากกว่า ผมนะคิดว่าเมื่อก่อนตอนเธอยังไม่เข้ากรุงจะต้องชื่อแมวแน่ๆ เลย แล้วเพิ่งมาเปลี่ยนชื่อเป็น แคท ตอนเรียนมหาลัย (อำซะ หนึ่งดอก) เพื่อความไฮโซ

แมวเพื่อนผมคนนี้ จบ ป.ตรี อักษรศาสตร์ เอก ภาษาเกาหลี โสด ใครอยากได้สาวสวยเป็นครูสอนภาษาเกาหลีน่ารักๆ ก็ยิงไปๆ เบอร์นี้ 089000xxxx สี่ตัวหลังไปมั่วเองละกันครับ ตอนนี้แมวเป็นครูสอนภาษาเกาหลีที่สถาบันแห่งหนึ่ง แถวๆ สยาม ผมชักชวนมาเล่นบลอกที่นี่ แต่บลอกเธอไม่มีความก้าวหน้าเอาเสียเลย ไม่ทันใจผม แล้วแมวชอบออนเอมตอนดึกๆ ซึ่งเป็นเวลาที่ผมจะออกหากิน เอ้ย.. นอน ก็เลยจะสอนแมวแต่งบลอก ใครไม่ใช่แมว หรือ อยากเป็นแมวก็เชิญ เพราะเป้าหมายหลักในการนำเสนอ คือ ครูแมว .... หวงไข่ hyang-ki.exteen.com

 

 

ขั้นแรก แต่งavatar

 

แมวสมัครบลอกแล้วชิมิเคอะ... ก่อนอื่น ทำรูปประจำตัวประกาศความเป็นตัวของตัวกุ

เป็น avatar ก่อน อ่านว่าไรนะ อะวะตะ ฮ่าๆ (ยิ่งเรียนยิงต๊องส์)

 

เปลี่ยนตรงนี้ ดูภาพปลากรอบ

tip นะแมว
-รูปสำหรับมือใหม่ ไม่ไฮโซไป ลดขนาดในโฟโตจอบ ก่อน เอาสูงแค่ 64 px พอ กว้างอย่าให้เกินไป มันจะไม่งาม ลดไม่เป็นก็..เมนต์มา เดี๋ยวจะไปสอนถึงห้อง
-เวลาเซฟชื่อของอะวะตะ เกิดว่าอยากเปลี่ยนรูปให้มันบ้านนอกกว่าเดิม ให้แมวให้ชื่ออื่นซะ อย่าใช้ชื่อเดิม เพราะเวบบราวเซอร์มันจะจำค่าเก่า เข้าใจไหมเนี่ยเฮ้ยย.. ตัวย่าง เดิมแมวใช้ ชื่อ kat1.jpg สมมติจะเปลี่ยนรูปเป็นรูปอื่นก็ เอาชื่อใหม่้ซะ เป็น kat2.jpg จะได้ไม่ต้องล้างท่อ ล้างแคชให้ลำบาก

เปลี่ยนไม่ได้จะโดนล้อมิใช่น้อย.....

 

 

ขั้นที่สอง เปลี่ยนโลโก้บล็อก

 

ก่อนอื่นต้องสร้างภาพก่อนนะแมว เอารูปอะไรก็ได้ สำหรับมือใหม่ หัดทำบล็อก เซทความกว้างไว้ 730px ก็พอ จะได้ไม่ต้องไปแก้อะไรเยอะแยะ เนรมิตโลโก้ให้อันนึง ให้เวลาในการสร้างสรรค์เป็นเวลา 8เดือน ทำออกมายากมากๆ เหนื่อยสุดๆ ภาพโลโก้นี้ถ้าขายคงจะได้ 8ล้าน

อึ้งอ้ะดิ ครูแมว สมมติว่ามันชื่อไฟล์ว่า katlogo.jpg

ครูแมวก็เอาไปแล้วก็อัพโหลดลงโฮสต์ สอนวิธีอัพลงในบล็อคเลยละกัน ทำไม่ได้ เดี๋ยวไปสอนถึงห้อง ก๊ากๆ ดูๆ

เข้า Manage แล้วก็ไปตรงนั้น ตรงฟายย นั่นนะ

 

อาร์ ยู โอเค ? เสร็จแล้ว แมวก็ กดดูแล้วกอป url address มาถ้าใช้ IE7(Internet Explosion)ให้จำแบบนี้

 

แล้วก็เอา url ยูอาร์แอ๋ววว ไปแปะ ใน css editor เข้าตรงนี้

 

หาบรรทัดนี้ให้พบ #coverimage หาไม่พบ บอก... จะไปทำให้ถึงที่ ก๊ากๆ

แล้วก้แปะลงไป

 

#coverimage{
	background: url(ที่อยู่ฟายย) no-repeat;
height:แล้วแต่ความสูงของรูป px;
width:730px;

 

ห้ามพิมพ์แบบนี้นะ อายเขา

 

#coverimage{
	background: url(ในโนตบุคจ๊ะ) no-repeat;
height:แล้วแต่ความสูงของรูป px;
width:730px;

เสร็จแล้วก็เซฟ+ส่องทีนึง ถ้ารูปไม่โชว์ให้เคลียร์แมว เอ้ย เคลียร์แคช ก่อน แบบที่สอนเมื่อวาน กด F5 ถ้าไม่โชว์อีกก้กด Ctrl+F5 (มั้ง) ถ้าไม่ได้อีกแปลว่า url address ผิด

 

 

ขั้นที่สาม แต่ง พื้นหลัง

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

เนี่ยๆ เทสีแบบกะเดี๊ยน (Gradient)เค่อะ

ทำพื้นหลังมาแบบนี้ ขนาดกว้าง 10 px และยาว100 px เทสีแบบ gradient ออกมาเป้นแบบนี้ ก็เอาไฝากไว้ จากนั้นก้ทำแบบเดิม แต่จะมีพิเศษนิดหน่อย แมวหาโค้ดบรรทัดนี้ให้เจอนะ หาไม่ได้ไม่ให้กินปลาทู

body {
background:#สีหลักพื้นหลัง url(ที่อยู่ฟายยพื้นหลัง) top left repeat-x;

 

สีหลักพื้นหลังแนะนำให้แมว ให้ dropper ในโฟโตจอบ ไปขุดดูค่าสีเอา

ดูค่าสี...

 

สมมติดูดดูได้ค่าดังรูปก็กอปปี้ไปใส่ตรงค่าสีในแถวข้างบนเลย

ส่วน

top left คือ วางตำแหน่งรูปพื้นหลังนั้นไล่จากบนซ้าย (ซ้ายหรือขวา อ่อ.. ซ้าย ตกภาษาอังกฤษ ได้เอ..ภาษารัก)

repeat-x คือ มันจะแปะรูปซ้ำตามแนวแกน x แบบอนันต์ (ศัพท์คณิต)

 

รูแบบอื่นๆ แมวไปแอบขโมยอ่านที่บล็อกคุณ Jennessa เอา เรื่องมันยาว...

 

 

ขั้นที่สี่ แต่ง neck


มันอยู่ตรงนี้

 

แบบง่ายๆเลยคือไปเล่นใน css ใช้การไล่พื้นหลังเป็นสีซะ จะได้ไม่ต้องทำรูปแบบบล็อคฉาน...

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

 

#neck .module{
background:#ค่าสี;

 

อันนี้แบบเบสิคๆ ถ้าจะใช้รูปก็ไม่ยากทำแบบเดียวกับการไล่พื้นหลังจากหัวข้อที่3 หรือว่าจะใช้แบบเราแมวก็ทำรูปขนาดกว้าง 730 px ซึ่งมันจะเท่ากับขนาดบล็อกเดิมๆ ให้มันสูงสัก 25px แล้วก็แปะโค้ดแบบนี้

 

#neck .module{
background:#สีพื้นแถบ url(ที่อยู่ไฟล์) no-repeat top left;

 

เหลือๆ Side bar กะ คอมเมนต์ชิมิ... รอแป้บ กิงข้าวก่อน

 

 

ขั้นที่ห้า ลืมสอน..แต่งสีตัวอักษร

 

สอนซะเลย หาบรรทัดนี้นะแมว

 

a:link, a:visited{
color:#ค่าสี;
text-decoration:none;	
}
a:hover, a:active{
color:#ค่าสี7;
}

 

a:link คือ โชว์ว่ามันเป็นข้อความที่แสดงว่าลิงค์ได้

a:visited คือ ไปดูหน้าเวบนั้นมาแล้วว

a:hover คือ สีของตัวอักษรขณะกำลังเอาหนู(เมาส์)แปะบนข้อความนั้น

a:active คือ สีขณะกำลังปฏิบัติกิจ(กด)

ส่วน

text-decoration คือ ลักษณะของตัวอักษร มันมีหลายแบบ ไปดูเองข้างล่างมีเวบสอน

นอกจากนี้ยังสามารถกำหนดสีตัวอักษรเริ่มต้นในส่วนของ content โดยไปเพิ่มบรรทัดนี้ลงไปในบรรทัดนี้

หาโค้ดให้เจอ..

 


#content{
	color : ค่าสี;

 

 

ขั้นที่หก แต่งถล่มไซด์บาร์ให้เละ

เอาข้างเดียวก่อน...ไม่เก่ง หัดใหม่ใช้ข้างเดียวอันเดียวไปก่อน ดูโค้ดเอาสอนตามโค้ด

 

#sidebar, #sidebar2{
background:ค่าสี;
display:inline;
float:right;
margin:5px 25px 0px 0px;
width:ขนาดไซด์บาร์px; 


ตรงbackground สามารถแก้ได้หลายแบบ จะลงรูปก้ได้ คล้ายๆวิธีการทำพื้นหลักหลัก ส่วนขนาดของ sidebar ไม่ควรใหญ่เกินขนาดของ page-content เพราะมันจะดันเนื้อหาหลุด หรือไม่ก็sidebar หลุด...

#sidebar .module ul, #sidebar2 .module ul{
margin:5px 0px 0px 5px;
padding:0;
list-style: circle;
font-size: 10px
}

สนใจแค่ font-size พอ... เลือกความหย่ายตามที่ต้องการ..

ส่วน list-style มีหลายแบบ ไปดูเอาเองที่ w3schools.comมี default circle bulletและใส่รูปเองก็ได้

 

 

ขั้นเจ็ด มั่วกับกล่องคอมเมนต์

มันคือตรงนี้ ตัวอย่างจากของข่อย... ทำเรียบง่าย (ขี้เกียจทำให้มันตระการตามากกว่า)

ตรงส่วนนี้ค่อนข้างจะสนุกหน่อย เพราะมีอะไรให้แต่งเยอะดี... ดูโค้ดเลย ครูแมว หาโค้ดให้เจอละกัน

 

#commentform{
width:100%;
background:#สีกล่องคอมเมนต์ url(รูปแปะ) bottom left no-repeat;
border:1px dashed #bad2fe;
float:left;
font-size:12px;
color:#333333;
}

อธิบายโค้ด

width คือความกว้างของกล่องคอมเมนต์ไม่ใช่ตรงช่องกรอกข้อความนะ อันนั้นอีกที่นึง ใกล้กันนี่แหละ

background คือ การกำหนดว่าจะแต่งกล่องให้มีพื้นหลังยังไง แปะรูปก็ได้

border คือ ขอบของกล่องข้อความ dashed เป็นการกำหนดให้มันมีลักษณธเส้นขอบเป็นรอยขีด มีอีกหลายแบบ ไปดูเองที่เวบข้างล่าง มีสอนอยู่

 

#commentform textarea{
width:310px;
height:150px;
border:1px solid #d3d4d4

ตรงนี้เป็นส่วนของกล่องข้อความที่เราพิมพ์ข้อความไปดัดแปลงโค้ดเอง...

 

 

ขั้นที่แปด วุ่นวายกับช่องแสดงคนคอมเมนต์

ตรงนี้..นะ ลองเลื่อนดูคอมเมนต์ล่างๆ

 

เหมือนเดิมไปวุ่นวายกับ..โค้ด งมหาให้เจอ เอาเท้าหน้าเขี่ยๆหน่อย

 

.comment{
border-bottom:1px solid #ค่าสี;
float:left;
font-size:ขนาดตัวอักษรในข้อความคอมเมนต์;
color:#สีฟอนท์ในช่องแสดงคอมเมนท์;
margin:5px 0px 5px 0px;
padding-bottom:5px;
width:100%;
}

ตรงนี้ก่อน border-bottom คือ ให้มันตีเส้นเฉพาะขอบล่าง ถ้าเปรี้ยวอยากแปลงก็ย่อมได้ เช่นจะให้ตีมัน4ด้าน ก็ใช้ border ส่วน solid คือค่าที่บอกถึงลักษณะเส้น มีหลายแบบศึกษาจากลิงค์ข้างล่างเองละกัน มีตัวอย่าง แล้วก็ตรงส่วนของ color ซึ่งเป็นสีของฟอนท์ควรจะตัดกับพื้นหลัง

หมาจิ้น 4 ค่า คือ บน-ขวา-ล่าง-ซ้าย ตามเข็มนาฬิกา อธิบายไม่เถิกเหมือ