๏ palermos cafe ๏

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

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

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

เป็น 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 เอา เรื่องมันยาว...

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

แบบง่ายๆเลยคือไปเล่นใน 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 หลุด...

สนใจแค่ 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 ค่า คือ บน-ขวา-ล่าง-ซ้าย ตามเข็มนาฬิกา อธิบายไม่เถิกเหมือนกัน เป็นค่ากั้นขอบนอก ส่วน padding bottom จะเป้นการกำหนดช่องว่างของตัวข้อความกับขอบล่างดันขึ้นมา 5px width ก็ความกว้างของกล่องแสดงข้อความคอมเมนต์

แล้วก็ตรงนี้ เลื่อน css ลงมาอีกหน่อยไม่กี่บรรทัด แสดงข้อมูลคนคอมเมนต์

ซึ่งจะไปตรงกับ css code ตรงนี้

.comment .info{
float:left;
font-size:ขนาดตัวอักษร;
color:รหัสสีข้อความตัวอักษรที่ไม่ใช่ลิงค์;
width:150px;
margin-right:10px;
}

ที่น่าสนใจตรงส่วนนี้คือ.. font-size กับ สีข้อความ เลือกให้เหมาะสมและตัดกับพื้นหลังก็พอ

เท้าอยู่ตรงนี้....แปลซะตรงเผง (พ่อเถรตรง)

ทำคล้ายๆ แต่ง neck ย้อนกลับไปดูขั้นที่สี่

โค้ดมันอยู่แถวๆนี้

แบบของกระผม

#footer p{
background:#สีพื้นหลังกรณีภาพงอแง url(ที่ฝากฟายย) no-repeat top left;
border-top:1px solid #cccccc;
font-size:10px;
color:#5a5b5b;
text-align:center;
margin:5px 25px 0px 25px;
padding:5px;	
}

กระผมใช้ภาพพื้นหลัง 730 ก็เลยเซทให้มันไม่กระดิก ไม่ซ้ำ แล้วถมเส้นขอบบนด้วยสีเทา

ส่วน font-size กับ color ก็เป็นสีของคำว่า power by อะไรนั่น ไม่ใช่ลิงค์นะ

text-align เป็นการเซทให้ข้อความไปขวา ซ้าย หรือ กลาง แต่อยู่ตรงกลางแหละสวยสุดแล้ว หมาจิ้นกับแพดดิ้งไม่ต้องไปแก้ เดี๋ยวเท้าเน่า...........

หลักๆ มีแค่นี้ แต่ต่อไปนี้สอนเพิ่ม.....เก็บค่าชมคนละ10บาท

ตรงนี้นะ...

เบื่อสีฟ้า... จะเปลี่ยนเป็นสีอื่น แกะโค้ดตรงนี้

/* Profile */
#profile{
width:95%;
height:64px; ตรงนี้ขยายความสูง(รูป)ได้ โดยไม่ง้อแคลเซียมจากนม
font-size:12px;
color:#รหัสสีตัวอักษร; ไม่มีบรรทัดนี้ก็พิมพ์เพิ่มเอา.......
}

สมมติจะเปลี่ยนเป็นสีชมพูก็ไปจุ่มค่าสีชมพูมา เช่น f4b2ef แปะไปเป็น color:#f4b2ef ก็จะได้

หรือจะเอาเขียวสะท้อนแสง จ๊าบดี..จุ่มสีในโฟโตจอบ มาได้ค่ามั่วๆ เป็น color: #90f77f ก็จะได้

เลือกตามความมันส์......... มันไม่ใช่ไสยศาสตร์ งานนี้สวยเลือกได้

ในส่วนนี้จะนำเสนอการยัดเพลงลงบลอกแล้วให้เล่นด้วยตัวเล่นแบบแฟลช ซึ่งมีข้อดีตรงที่ว่าเล่นได้ทุกบราวเซอร์ ก่อนอื่นก็ต้องเป็นสมาชิกของเวบที่มีบริการฝากเล่นก่อน ซึ่งช่วงนี้ ตอนนี้จะแนะนำ 2เจ้า คือ

www.imeem.com

หน้าตาตัวเล่นเพลงจะเป็นแบบนี้

และ

www.ijigg.com

มันมีหน้าตาตัวเล่นแบบนี้

ถามว่าตัวไหนดีกว่า ถ้าเป็นผมจะตอบว่าัตัวบนดีกว่า ได้ลุ้นรางวัลที่หนึ่งด้วย ฮ่าๆ ไม่เกี่ยว... คือ imeem ไม่ค่อยล่ม ตัวล่างนี่บางทีก็งอแง วันไหนซวยๆ เซิร์ฟก็ล่มซะงั้น

สมัครสมาชิกฟรี!!!! ทั้งสองที่

จากนั้นไปขโมยโค้ดเพลง หรือ จะอัพโหลดเพลงลงไปเองก็ได้ (รวมถึงวิดิโอ) สำหรับ imeem ให้กอปปี้โค้ดดังภาพมา

ของ imeem

ส่วนของ ijigg

พอได้โค้ดมาก็แปะในหน้าเขียนบล็อก แล้ว เลือกhtml editor ตามภาพปลากรอบ

เอาหนูจิ้มปุ่มนั้นซะ มันจะเปลี่ยนมุมมองแมว แล้วก็แปะโค้ดที่กอปปี้มา

แล้วก็กดปุ่ม Update

จึ๊กทีนึง...

และถ้าไม่พลาดต้องได้แบบนี้

ง่ายๆ (แล้วทำไมเอ็งไม่ทำละ)... ที่ไม่ทำเพราะลงในบางอารมณ์อัพบล็อกทีนึงก็ใส่เพลงนึง เดี๋ยวเกิดประสานเสียงระหว่างเพลงประจำบล็อกกับ เพลงในเอนทรี่ขึ้นมาจะยิ่งงงกันใหญ่...ต่างหาก

ว่าแล้วก้ทำพิมพ์โค้ดลักษณะนี้

ที่ฝากไฟล์อย่าแง๊ว มันคือ url address นะจ๊ะ อย่าลิงค์จากในเครื่อง เดี๋ยวคนอื่นไม่ได้ยินเพลง แล้วก็กอปไปแปะใน link ตามตัวอย่างข้างล่าง

ไปดูมาจากบล็อกที่หนึ่งนะ แก้ไปสองรอบ... บล็อกไหนไม่รู้ ฮ่าๆ

ตรงนั้น คำว่า edit @ เอาออกได้นะ เข้าตามนี้ ไป SETTING ก่อน

แล้วก็

จากนั้นก็มองลงมาล่างๆ

จบ...ข่าว

อืมดูรูปเองละกัน สมมติอยากแรด อย่างแต่งสีของตัวอักษรในบางจุดให้ไฉไล เก๋ย์ไก๋ไฮโซโอเด้ง ดูทีละส่วนเลยละกัน ตัวหัวเรื่อง กับ ตรงที่แสดงให้เห็นว่าสู...อัพบล็อกตอนไหน

ตรงหัวข้อที่หนึ่งสามารถแต่งแต้มสีสันโดยไปแก้ไขโค้ดในส่วนนี้ อันนี้ของเดิมๆนะ

แล้วถ้าจะเปลี่ยนสีก็ไปมั่วๆ ค่าสีใหม่มา ส่วนในส่วนหมายเลขสองนั้นไปแก้แถวๆนี้

ตัวอย่าง...สมมติจะเอาสีหัวข้อเป็นสีส้ม แล้วพอเอาเมาส์วางเป็นสีชมพูชอกกิ้งพิงค์ (FF66FF) และตรง span เป็นสีเขียวสะท้อนแสง(66FF33) เพื่อสะท้อนความเป็นกู ก็ใส่โค้ด แก้เป็น

ก็จะสำแดงเดชออกมาเป็น

และ

ต่อไปก็ตรงนี้ตรงคำว่า tag

แก้เป็นสีม่วง....เพื่อความเก๋ย์ส แก้โค้ดเป็น

ออกมาเป็น

สวยด้วยมือกู ไม่ต้องพึ่งหมอ กิกิ ....

กรณีที่อยากเปลี่ยนสีตัวอักษรหลักดูตัวอย่าง

เดิมๆนะ

แล้วถ้าเกิดว่าอยากใช้สีอินเตอร์ๆ อย่างเช่นสี Tong-On ออกเสียงลำบากหน่อยนะ มันต้องคนหน้าตาดี และสำเนียงดีๆ ถึงจะอ่านได้ถูกต้อง จะบอกให้เอาบุญ มันอ่านว่า ตอง-อ่อน เยส ตอง-อ่อน อะเกน พลีส..

ไปแก้ใน css editor เช่นเดิม

ต้องพิมพ์เพิ่ม.....ไปบรรทัดนึงว่ะ แล้วตรงนี้สมมติอยากแร่ด ฮี่ๆ ก็เซทฟอนท์ เซทขนาดไว้ก็ได้นะ

ทีนี้ก็ได้แล้ว สีตองอ่อน...

มันคือไอ้พวกนี้นะดูรูปเลยละกัน ...

ทำเท่าที่ใช้ อันไหนไม่ได้ใช้ไม่ต้องรีบทำ ก่อนอื่นก็ต้องสร้างภาพก่อน...แล้วก็อัพลงโฮสต์ จากนั้นก็กอปปี้ url address มา

สมมติว่าทำรูปแบบนี้

ขนาด 200*30 px

ก็มองหาบรรทัดประมาณนี้

เอา url ไปแปะ แล้วก็ใส่ขนาดความสูงกว้างให้แม่นๆ ไม่งั้นภาพจะเบี้ยว

แก้ให้ถูกต้องเป็น

แล้วก็จะได้แบบนี้

ทำแบบเดิม ให้ครบทุกๆ หัวข้อ อันนี้ไม่ยากนะ...

ใครจะเอาอะไรอีก ก็ช่วยคอมเมนต์ที..

หากว่า..ถ้าแมวอยากจะศึกษาเกี่ยว css เพิ่มเติมก็ไปดูเวบนี้เอาก่อน สองเวบนี้โอเชสุดแระ มีเกือบครบและครบ

หรือขุดเอาจากบล็อกของคุณ Jennessa ก็ได้ ข้างๆมีลิงค์ไป หาเองเน้อ..

ทำไปเนทดาวน์ไป เครียด..... หิว........ รักเธอ.......

จะเอาอะไรเพิ่ม ครูแมวเมนต์มานะ.. กิงวิสกัสยังนี่คุณ ว่าแต่แบบเพาช์กับแบบเม็ดอันไหนอร่อยกว่ากันละ