Css tutorial : Tips about css part 1

posted on 08 Sep 2008 14:48 by bbears  in MyDay, TutorialCss

โหมด : อยากกินข้าวเหนียวหมูปิ้งอ้ะ  T________T'''
คำเตือน : ห้ามนำงานของผักออกไปแพร่เองนะคะ  !!!
โปรแกรมที่ควรใช้ดูบลอคนี้ : Firefox  เท่านั้น

-----------------------------------------------------------------------


เรื่องขอทิปส์เล็กๆ น้อยๆ css with exteen กันนะคะ

5555555+  มาชื่อแบบทางการสุดๆ เลยแฮะ .... มาเริ่มกันเลยนะคะ

ก่อนอื่นต้องบอกว่าผักจะอธิบายโค้ดในส่วนที่เป็นสีๆ นะคะ
แล้วก็อ่าน และทำดีดีนะคะ  
อย่าพลาดละน้อ !!!






ในส่วนนี้ให้ไปแก้ส่วนของ .entry .title h2  นะคะ
ตามโค้ดดังนี้คะ

" .entry .title h2{
background: url
(http://i81.photobucket.com/albums/j229/mytheme/exteen/version-14/icon.jpg)<<ตรงนี้ละคะ สำหรับใส่ icon ดังภาพ no-repeat right bottom; <<เป็นการตั้งค่าว่าอยู่ทางขวาสุดคะ
padding-right: 22px;
<<ให้ตั้งค่าตามความกว้างของ icon นะคะ  จะกะให้เลยกว่านี้นิดหน่อยเพื่อความสวยงามได้คะ (แต่ความสูงของ icon ต้องสูงเพียง 21 px เท่านั้นนะคะ)
font-size:16px;
font-family: Georgia;
font-weight:bold;
}




ในส่วนนี้ ให้ไปเพิ่มโค้ด ที่ /* General */ นะคะ
ตามโค้ดดังนี้คะ

" a img{ <<ก่อนที่ภาพจะถูกเอาเมส์มาชี้คะ
border:1px solid #747474;
<<เส้นสีขอบๆ ของภาพคะ
padding:2px;
<<ระยะห่างของภาพ กะเส้นสีขอบๆ ที่ว่าคะ
text-decoration:none;
}
a:hover img{
<<ตอนที่ภาพถูกเอาเมส์มาชี้คะ
border:1px solid #ffffff;
<<เส้นสีขอบๆ ของภาพคะ
padding:2px;
<<ระยะห่างของภาพ กะเส้นสีขอบๆ ที่ว่าคะ
text-decoration:none;
}




ในส่วนนี้ ให้ไปเพิ่มโค้ด ที่ /* Comment (Showing Area) */ นะคะ
ตามโค้ดดังนี้คะ

" .comment .info a.commentno{ <<หมายถึงตัวเลขของลำดับคอมเมนต์คะ
font-size:24px; <<ขนาตัวอักษรของลำดับละคะ
float:right; <<ต้องตั้งให้อยู่คนละข้างของ .comment .info ด้วยนะคะ!!
color:#CCCCCC; <<สีตัวอักษรดังกล่าวคะ
}



ง่ายไหมคะ?

5555+ เอาแบบสั้นๆ ที่ถามบ่อยๆ เลยทำมาให้ลงบลอคอ้ะคะ  เพื่อไว้ทำบลอคแนวๆ กัน
ส่วนเรื่องอื่นก็ถามหลังไมค์ได้นะคะ  อันไหนน่าสนใจจะเอามาลงที่บลอคอีกนะคะ
หรือจะถามลงในคอมเมนต์ได้เลยนะคะ  ไว้จะตอบกลับทันทีคะ!!


วันนี้บ้าพลัง อยากอัพบลอคเพราะไม่มีเรียนเนื่องจากไปพันธมิตรกัน!!?
55555555555+  ว่าเข้าไปนั้น  //โดนฟรีคิกออกนอกโลกทันใด
เปล่าหรอกคะ  แค่ปิดคอร์ส  ปล่อยให้นักศึกษามาเตรียมตัวสอบกันเอง  เพราะยังเหลือการสอบอีก
สอบตั้งแต่วันที่ 22 กันยายน ถึง 14 ตุลาคม เลยละคะ  โหดใช่เล่น !!  
มีสี่วิชาที่ต้องสอบสองครั้ง  หมายถึงมีทั้งภาคปฏิบัติและภาคทฤษฎี  เอาเป็นว่าเหนื่อยกันหน่อย  =___='''
แต่มาอัพบลอคแน่ๆ คะ  5555555555555555555555555555555+


อ้อ  เกือบลืม  --- 
ตอนนี้ที่บลอคทำโครงการ NON-VIOLENCE KEEP PEACE นะคะ
ขอบคุณบลอค  คุณ diyplus และ คุณ palermos  ด้วยนะคะ 
*โค้งงามๆ*  ขอบอกว่าเหมาะกะธีมนีเป็นอย่างดีเลยละคะ  5555555555555555555+  //โดนถีบรอบสอง



ไว้เจอกันเอนทรี่หน้านะคะ !!!

ขอขอบคุณทุกคอมเมนต์เช่นเคยคะ   รักษาสุขภาพกันดีดีน้า ♥

Comment



smilebig smileopen-mounthed smileconfused smilesad smileangry smiletonguequestionembarrassedsurprised smilewinkdouble winkcry

Tweet

ดูตั้งใจทำจริงๆครับ...มีประโยชน์ดีHot!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

#1 By palermos on 2008-09-08 15:14

Hot!

ชอบธีมสไตล์นี้เช่นเดิม ^^ เอาไว้จะดัดแปลงไปใช้เมื่อยามว่างครับ

#2 By on 2008-09-08 15:41

โอ้วว ว .. ขอบคุณมากเลยเจ้าค่ะ
หามานานมาก T v T

#3 By た い や き ★ on 2008-09-08 18:18

จอร์จมากครับผม :]

#4 By kewali on 2008-09-08 19:38

ขอบคุณสำหรับทิปนะคะพี่ผัก
เดี๋ยวไว้ไหมจะลองไปปรับใช้กับธีมต่อๆไป..

#5 By mhaimaiimai on 2008-09-08 19:40

ถ้าพี่ผักว่างแล้วเอา tips มาแจกแบบนี้ ก้อยากให้ว่างบ่อยๆฮะ 5555+
ขอบคุณสำหรับโค้ดด้วยนะฮะ กี้แก้บล้อกแล้ว พอใจแล้วล่ะ xDD

แปะดาวโลดฮะ Hot!

#6 By | saeki on 2008-09-08 19:43

ธีมใหม่งามโคตรรรรรรร
แหวกแนวดีฮะพี่ ชอบบบบบบบ

#7 By ミ'P•PUMPKIN on 2008-09-08 20:48

ขอบคุณมากค่า...พี่ผัก~ XD
ที่เอามาแชร์กันนะคะ

#8 By LUVFE F.CHES de LUNE on 2008-09-08 20:49

ไม่ง่ายอ่ะ นู๋อ่านมะยู้เยื่อง นู๋โง่คอม.
*โดนตบ*

...หรืออันที่จริงคือขี้เกียจจะทำ -..-

แต่ก็ขอบคุณมากนจ๊ะที่เอามาลงไว้ ถ้าเกิดวง่าขยันเมื่อไหร่จะลองทำนะ *หัวเราะ*
ขอนแก่นฝนตกมั่งมั้ยน้า big smile

#9 By ayachan on 2008-09-08 21:07

Hot!
ดีมีประโยชน์ดีครับผม

แต่ส่วนตัวผมอ่าน ๆ ไปแสบตาตัวหนังสือครับ

#10 By ฟ้าใส on 2008-09-08 22:44

โอ้ สุดยอดดด*
confused smile confused smile confused smile Hot!

#11 By ★chocodile. on 2008-09-08 22:46

ตั้งแต่ exteen ปรับปรุงโฉมมาเนี่ยไม่เคยเปลี่ยนไอคอนเอนทรี่เลย
ว่าว่างๆจะทำตามที่พี่ผักสอนมั่งดีกว่า
ขอบคุณมากนะค้า~~~~~~~

PS. all you need is love
พีซ พีซ พีซ ทุกคน อินพีซ กันเถอะ

mwah//

#12 By patti__ on 2008-09-08 23:02

สวยค่ะสวย surprised smile ขอบคุณสำหรับสอนทิปดีๆให้หยิบยืมไปใช้

confused smile

Hot!

#13 By cebo. on 2008-09-09 03:06

ขอถามค่ะ
ว่าทำยังไงถึงทำให้ตรง เนค กับ เลค
แบ่งออกเป็นสามคอลัมภ์ได้อ่ะคะ ?
อยากรู้จะเอาไปเปลี่ยนหน้าตาบ๊อกตัวเองบ้าง open-mounthed smile
อีกอย่างทำยังไงให้ไอคอนมันขึ้นตรงแท๊บ
หรือแอดเดรสบาร์แบบนี้อ่ะคะ
http://i423.photobucket.com/albums/pp320/tairataraban/bipolardisorder/cats.jpg

ขออนุญาตแอดแฟบไว้นะจ้ะ
สาระดีจริงๆ open-mounthed smile
ขอบคุณสำหรับเ อนทรี่นี้ด้วยค่ะ

#14 By { tairataraban } on 2008-09-09 05:24

มีประโยชน์มากมาย..

แล้วเปลี่ยน ตรงจำนวนคอมเมนต์ ทำยังไงคะ?

จริงๆมีเรื่องอยากถามอีกเยอะ...แต่แบบว่าเกรงใจง่ะ..

confused smile confused smile confused smile

#15 By ►Junsh◎ku on 2008-09-09 07:50

อืม....

คือ หมายถึง จำนวนทั้งหมดของคอมเมนต์อะค่ะ

เช่น 16 comments น่ะคะ

แบบว่า สังเกตเห็นว่า ตัวอักษรมัน แปลกและ ใหญ่กว่าปกติ..

แต่ ไม่เป็นไรค่ะ ไม่รบกวนแล้วดีกว่า...

ขอโทษที่รบกวนนะคะ.....

#16 By ►Junsh◎ku on 2008-09-09 10:36

ขอบคุณค่ะ...ที่อุตส่าห์มาตอบให้ รอบสอง

confused smile confused smile confused smile confused smile confused smile

#17 By ►Junsh◎ku on 2008-09-09 11:03

เยี่ยมเลยครับ..ขอบคุณครับdouble wink

#18 By nonworld on 2008-09-09 16:07

โอ้ว รู้สึกจะพลาดอะไรไปนะเนี่ยเรา

ธีมใหม่ก็สวยอีกแล้ววววว ชอบตรงคอมเมนท์อ่ะ สวยมากมายเลย
เลขบอกลำดับก็สวยอ่ะ โอ้ว น้องผัก สุดยอด!!

สู้ ๆ นะจ๊ะ พี่เองก็ใกล้จะตาย (?) เหมือนกัน

ไว้เจอกันจ้า

U.

#19 By ★☆KyuubixUsagi on 2008-09-09 17:46

เดวมาเอาแป๊ปนึง

#20 By Master_Haro on 2008-09-10 09:52

โฮกกกกก ก~!!!

ธีมสวยมากมาย ส้มธีมที่สุดเลยอะ มันแนว + สไตล์มันสวยสุดยอดค่ะพี่สาว !!!

ส้มชอบตรงแท๊บลิงค์ ที่แบ่งมาเป็นล่างสุดกะบนสุดอ่าค่ะ ลักษณะดูเรียบง่ายแบบมีสไตล์ดี แบ่งเป็นสัดส่วน + ตรงที่โชว์คอมเม้นของคนอื่นอ่าค่ะ มันเป็นลายของ..แพตเทิ้นน ชอบโฮกกกกเลยอันเนี่ย >___<''

อิอิ....ส้มก้กะจะเลปี่ยนธีมเหมือนกัน ไว้ส้มจะลองทำดู - -''' บางทีที่เสียเวลาที่สุดก้คือพิมโค้ตนี่แหละ ส้มพักนี้ห่างไปนานเลยสงสัยต้องมาทวนๆ ดู

คิดถึง + ขอให้คะแนนสอบได้ เอๆๆๆทุกตัวๆเลยเน่อ รักษาสุขภาพด้วยนะค่ะ อย่าหักโหมจนเกินไป สู้ๆค่าพี่สาววว ~!!

#21 By so:indy on 2008-09-10 10:04

อ๊า มาแล้วจ้า น๊วฟฟฟ
บล็อกเปี๊ยนไป๋อีกแล้วที่เลิฟ 55 เข้ามาทีไรไม่ทันเหตุการณ์ทุกทีเล๊ย 55+

ชอบๆหน้าเพจกับเมนูที่มันไปอยู่ข้างบนกะข้างล่างมากๆเลยค่ะ อร๊างง แนว!! 55+

ขอบคุณที่เลิฟมาๆเลยค่า โหยย เค้าว่าจะลองใส่เลขตรงคอมเม้นบ้าง แหระค่ะ ฮิ้วว ว่าแต่ลำดับคอมเม้นของผักจัง มันใหญ่ได้ใจมาก (หมายถึงขนาดตัวเลข 555+)

ปล. ขอบคุณนะค๊าแวะไปเยี่ยมเยียน ฮือๆ นึกว่าจะลืมกันหมดแล๊ เจ้าของยังลืมบล็อกตัวเอง ก๊ากๆ sad smile

#22 By Revamp on 2008-09-11 13:11

ขอบคุณนะคะพี่ผัก
ขออนุญาติเอาโค้ดลิ้งเส้นขอบไปใช้นะคะ



ดาวๆๆ Hot! Hot! Hot! Hot! Hot!

ขอบคุณนะคะ ^^

#23 By c о ι о υ я ғ υ ι ♥ on 2008-10-27 21:33