Lesson9 Css:simple

posted on 22 Oct 2007 15:30 by house108 in Make-theme

 

คราวนี้จะสอนแบบรวบรัดเลยนะคะ ไม่เข้าใจใช้ ems. ถามมาได้เลยค่ะ

...เมื่อเราเข้ามาที่หน้า Manage blog แล้ว

ให้เข้าไปที่หัวข้อ Theme ค่ะ

ก็จะพบกับช่อง 4 ช่อง ใน My Theme Slots

ที่จะทำให้เราสามารถ เก็บรูปแบบธีมที่เราเคยทำไว้ได้ค่ะ ...

ถัดลงมา จะเป็นรูปแบบ ธีม3 แบบให้เลือก ซึ่งจะมี

Apollo/Dark apollo/Simple

ซึ่งที่จะทำวันนี้ เป็นรูปแบบของ Simple ค่ะ

ดูที่ช่องของรูปแบบธีม Simple จะมีปุ่ม ปุ่มที่Copy แบบธีมไปที่สลอต

ก็กดตรงนั้นแล้วรูปแบบธีม Simpleที่เลือกไว้

ก็จะไปขึ้นที่ช่องสลอตค่ะ

...

จากนั้น ถ้าเราจะเลือกใช้ธีมนั้นกับหน้าบลอคเรา

ก็กดแอคทีฟตรงสลอตค่ะ

...

ถ้าจะตกแต่งธีมก่อนก็กด ค่ะ แล้วก็จะไปสู่หน้า

Color & Pictures ให้เราไปที่หน้า Css Editor

...

จากนั้นก็จะสู่หน้าแก้ไขCssค่ะ จะมี2ปุ่มด้านล่างคือ

 ใช้ทดลองดูหน้าบลอคก่อนเซฟจริง

 ใช้เซฟเก็บหน้าบลอคที่เราทำไว้..

/* General */
body {
 background:#000000 url(ใส่URLของรูปที่จะเป็นBg) repeat top left; <<ส่วนของสี/รูป Bg
 color:#333;   <<ส่วนของสีตัวหนังสือหลัก รวมถึงหัวข้อด้านข้างเช่นRecommend
 font:12px Tahoma, "MS Sans Serif"; <<ฟ้อนท์ตัวหนังสือ
 line-height:1.5em;
 text-align:center;
}
a:link, a:visited{
 color:#0054a6<<สีของลิ้งค์ตัวหนังสือ
 text-decoration:none; 
}
a:hover, a:active{
 color:#0081ff; <<สีของลิ้งค์เวลาเอาเม้าส์ชี้
}
#page{
 margin:auto;
 padding-top:15px;
 text-align:left<<ถ้าอยากให้แถบเมนู ตัวหนังสือข้างในชิดขวาก็เปลี่ยนเป็นRight
 width:780px; <<ความกว้างของหน้าบลอค
}
#header, #neck, #belly, #leg, #footer{
 float:left;
 width:780px;
}
/*=============*/



/* Header */ <<ส่วนเฮดบลอค
#header{
 background:#000;  << [3] สีทั้งหมดตรงเฮดบลอค
 padding:20px 0px 0px 0px; << [1] ระยะห่างขอบกับตัวหนังสือข้างบน(คือตรงสีม่วงๆขีดๆ)
 text-align:center;
 position:relative;
}
#header h1 a{
 color:#666<< สีของตัวหนังสือ [2]
 font-size:24px; << ขนาดของตัวหนังสือ [2]
}
#header h1 a:hover{
 color:#999; << สีของตัวหนังสือ [2]เมื่อเอาเม้าส์ชี้
}
#header h2{
 font-size:12px; << ขนาดของตัวหนังสือ ที่เป็นหัวรองต่อจาก [2] (แล้วแต่ค่ะบางคนก็ไม่มี)
 margin:5px 0px 5px 0px; << ระยะห่างระหว่าง [2] กับหัวรอง
}
#coverimage{
 background:url(URLของรูปเฮดบลอค) no-repeat;
 height:100px; <<ปรับให้เท่ากับขนาดของเฮด
 width:730px; <<ปรับให้เท่ากับขนาดของเฮด
 margin-left:25px !important;
 margin-left:0px; /*Fix IE Bug*/
}
/*=============*/
/* Neck Menu */ <<ส่วนคอบลอค หรือ ตรงที่ไว้Page เช่น Home |        
#neck{
 background:#FFF;
}
#neck .module{
 background:#d7d7d7; <<สีBgของส่วนนี้
 display:inline;
 float:left;
 margin:0px 0px 0px 25px;
 padding:2px 0px 5px 0px;
 width:730px; <<ความยาวของคอ
}
#neck .module ul{
 display:inline;
 margin:0px;
 padding:0px;
}
#neck .module h2{
 display:none;
}
#neck .module li{
 border-right:1px solid #CCC; <<เส้นที่คั่นแต่ละเรื่องของPage เส้นข้างๆคำว่าHomeค่ะ
 display:inline;
 padding:0px 10px 0px 10px;
}
/*=============*/
/* Content */
#belly{
background:#FFF; <
}
#content{
 display:inline;
 float:left;
 margin:10px 15px 0px 25px;
 width:490px; <<ความกว้างของส่วนEntryที่เราใช้เขียน
 /*Fix too large image makes content drop problem in IE*/
 overflow:visible !important;
 overflow:hidden;
}
.entry{
 float:left;
 margin-bottom:15px;
 border-bottom:1px solid #CCC; <<เส้นยาวๆ ที่อยู่ใต้ลิ้งค์ที่ไปComment
}
.entry .title{
 display:block;
 float:left;
 margin-bottom:10px;
 width:100%;
}
.entry .title h2{
 font-size:18px; <<ขนาดตัวหนังสือของหัวข้อเรื่อง
}
.entry .title h2 a{
 color:#949494; <<สีของตัวหนังสือหัวข้อเรื่อง
}
.entry .title h2 a:hover{
 color:#CCC; <<สีตัวหนังสือหัวข้อเรื่องเมื่อเอาเม้าส์ชี้
}
.entry .title span{
 color:#666; <<ข้อมูลการโพสที่อยู่ใต้หัวข้อเรื่อง
 font-size:10px; <<ขนาดตัวหนังสือ
}
.entry .post{
 float:left;
}
.entry .post p{
 margin-bottom:10px;
}
.entry .info{
 float:left;
 width:100%;
}
.entry .info .tag{ <<การปรับค่าตัวหนังสือตรงคำว่าTags ด้านล่าง
 float:left;
 font-size:10px;
 width:350px;
}
.entry .info .coms{ <<ปรับค่าตัวหนังสือตรงคำว่า Commentsด้านล่าง
 float:right;
}
/* Sidebars */
#sidebar, #sidebar2{
 background:#ebebeb; <<สีBgของเมนูด้านขวา
 display:inline;
 float:right;
 margin:5px 25px 0px 0px;
 width:225px;<<ความกว้างของแถบเมนู
}
#sidebar2{
 display:none;
}
#sidebar .module, #sidebar2 .module{
 margin:5px 5px 15px 5px;
}
#sidebar .module ul, #sidebar2 .module ul{
 margin:5px 0px 0px 5px;
 padding:0;
 list-style: none;
}
#sidebar .module h2, #sidebar2 .module h2{
 border-bottom:1px solid #CCC; <<เส้นใต้หัวข้อ เช่นRecommend
 font-size:18px; <<ขนาดตัวหนังสือหัวข้อ(เจ้าคำว่าRecommendไรแถวนั้นแหละจ้า)
}
a.archive{
 background:url(URL) no-repeat; <<รูปตรงท้ายCategories ""
 width:12px; <<ความกว้างของรูป
 height:12px; <<ความยาวของรูป
 padding-left:15px;
 margin-left:4px;
 width:350px;
}

 

ไว้เท่านี้ก่อนค่ะ เดี๋ยวส่วนคอมเม้นมาอัพต่อ

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

แล้วลองPreview จะรู้ว่ามันเป็นส่วนไหนๆค่ะ

* *เมื่อวานบ้านโดนตัดไฟ(แม่ลืมจ่ายค่าไฟฟ้า)

กันดารเลยต้องอยู่กับแสงเทียนค่ะ ก็ไม่เลว 55

 แต่กลัวปลาทองในกะละมังตาย**

Comment

Comment:

Tweet

ขอบคุณค่า Hot! Hot!

#32 By muayaoi on 2010-12-11 23:57

ขอบคุณมาก ๆ ค่ะ big smile

#31 By (c.) tohtoey on 2010-04-22 17:07

ขอบคุณมากเลยนะคะ >w<

#30 By kimjaeholic on 2010-01-01 02:29

ขอบใจจ้า

#29 By thebestkub on 2009-11-07 17:57

อบพระคุรมากๆเลยค่ะ มีประโยชน์มาก ดีใจจัง
หาบล็อกสอนทำบล็อกของCSSนี้มานานแล้วTwT

เป็นพระคุณมากค่ะ

#28 By ※ BrightSM ※ on 2009-10-12 14:18

อ่า ขอบคุณที่สอนน้ะค๊า

ตอนแร่กโง่มาก

อะไรบ้างก็ไม่รู้ embarrassed

ตอนนี้ โอเคแล้ว ขอบคุณอีกคั้งจ้า big smile

#27 By admongiiz on 2009-07-15 13:02

ขอบคุณค่ะจะลองทำดูนะconfused smile

#26 By yuri on 2009-04-29 11:36

เพิ่งสมัคร exteen ขอบคุณสำหรับคำอธิบายมากๆเลยค่ะ เพราะงมเองคงไม่เสร็จซักทีbig smile

ปล. ชอบธีมมากๆเลยค่ะ สวย

#25 By Natchiiz ナチ on 2009-03-22 22:52

มีประโยชน์ดีจัง ขอบคุณมากๆนะคะ
ทีนี้จะได้ทำตีมสะดวกขึ้น

ขออนุญาตaddนะคะ ^^

#24 By オレンジ 嘘 || orenji-uso on 2009-02-15 13:37

ขอบคุณนะค่ะ

#23 By GINSVIPZ on 2008-11-15 00:55

ขอบคุณมากๆค่ะ
นั่งทำทั้งคืนจนเสร็จ

ทำตามง่ายมากเลย ขอบคุณอีกทีนะคะsurprised smile Hot!

#22 By piaaz on 2008-10-16 13:43

เยี่ยมไปเลยจ้า >__<

Hot!

ในที่สุด บัวก็ทำบล๊อคเป็นซะที .... ~ confused smile

เย้ๆๆ cry

#21 By ใบบัว on 2008-07-27 00:18

อ่าขอบคุณมากๆค้า
THXมากๆๆๆๆๆเลยนะคะ

#19 By AmaRaH on 2008-05-24 17:21

ขอบคุณนะค่ะ ช่วยได้มากเลยค่ะ >3<
Blogสวยมากๆเลยค่ะ
PS.ขอEMSไปหานะค่ะ ^_^
Hot!

#18 By Maya on 2008-04-25 16:10

ขอบคุณสำหรับแนวทางในการปรับแต่งครับ

#17 By hyperman (202.91.19.206) on 2008-04-18 23:29

ขอบคุงงับ

^^b

เด๋วจะมาใช้บริการใหม่

#16 By X ii n g Z ii n g on 2008-04-16 14:42

ขอบคุณมากๆเลยค่ะ
แล้วจะรอตอนต่อไปนะbig smile

#15 By Kay on 2008-03-29 11:52

ช่วยได้เยอะเลยค่ะ เข้าใจง่ายดีด้วย ขอบคุณนะค่ะ

#14 By (119.42.71.239) on 2008-02-09 13:01

ขอบคุณค่ะ อธิบายเข้าใจง่ายดีนะค่ะ แล้วจาลองปรับแต่ง blog ของตัวเองดูค่ะ

#13 By BluE sky on 2008-01-17 00:11

สวัสดีปีใหม่ 2551 ขอให้มีความสุขตลอดปีนี้และสุขยิ่งขึ้นในปีต่อๆไปนะคะ
ขอบคุณมากเลยค่ะ

แต่อยากจาถามอีกอย่างอ่ะค่ะว่า

ทำยังงัยหั้ยมีแถบสกอบาร์ข้างในค่ะ

ช่วยตอบด้วยน้าค่ะ


ขอบคุณมากอีกครั้งค่ะ

confused smile open-mounthed smile big smile
มีข้อสงสัยอ่ะค่ะ คือแล้วเราจะทำไงให้ bg เป็นรูปพื้นหลังแบบเต็ม ๆ บ้างคะ ที่เป็นอยู่ตอนนี้พอใส่รูปตัวการ์ตูนเข้าไปมันจะตัวเล็ก ๆ เรียงกันเต็มไปหมด ไม่ได้ใหญ่เต็มรูปเหมือนที่ต้องการอ่ะ ช่วยหน่อยนะคะ -*-

#10 By jin_davil[ST] on 2007-12-15 13:13

ขอบคุณมากๆๆๆเลยค่า big smile

#9 By *kyu♥~♥min* on 2007-12-14 02:36

วู้ววว
ขอบคุนม๊ากมากเรยคร้าcry

#8 By ฒ่าณณามิ on 2007-12-07 21:27

รอภาคต่อไปอยู่นะคะ ขอบคุณค่ะ กำลังมึนเลยsad smile sad smile sad smile
เริ่สสสมากกกกกกกกกกกกกกกกกก


cry ขอบคุณมากกค่าๆๆๆๆๆ
บล๊อกเปนบล๊อกอยู่ทุกวันนี้เพราะบล๊อกเน้จริงๆ

โฮกกกกกกกกก


,,

#6 By SMILE.K on 2007-11-21 18:33

Thank you very much.
Hot!
ชอบจังเลย ธีมที่คุณใช้อยู่ สวยมากๆ สีฟ้า เราชอบที่สุดเลย...ขอแอดไว้เป็น fav ได้ไหมคะ

#5 By p.k.a on 2007-11-20 22:38

อิอิ เข้ามาแต่ละครั้งไม่เคยผิดหัวง
กลับไปสักที ของคุณนะคะ

#4 By ยูกิจัง on 2007-11-07 01:05

Thx จ้า กำลังเมากับ CSS อยู่พอดี

จะได้เริ่มทำ Theme ใหม่กับเขาซะที cry

#3 By Exile on 2007-10-27 10:17

ประโยดล้นหลาม
ขอบคุณคร้าบ

#2 By L.O.N.R. on 2007-10-25 19:51

คนแรกป่าวอ่า... ชอบคุณสำหรับโค้ดมากๆเลยนะค่ะ
อธิบายที่ละหัวข้อ เข้าขึ้นเยอะเลยค่ะ ขอบคุอีกครั้งค่ะ cry

#1 By Blog's Chocola-Creamy on 2007-10-25 16:11