อันนี้ เป็นแบบธีม Simple นะครับ แบบอื่น ไม่ได้ลอง


ก่อนอื่น ขอชี้ก่อน ว่าโครงสร้างบลอกมีส่วนต่างๆ อย่างในรูป

 

 

บลอคนี้ ขอบอกวิธีปรับลักษณะของแต่ละส่วน ที่เขียนไว้ข้างบนนะครับ (ถ้ามีมากกว่านั้น แต่ไม่เขียนไว้แสดงว่าไม่รู้)

 

Body

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

 

/* General */
body
{
background:#(รหัสสี) url(urlภาพ) repeat top left;
color:#333;
font:12px Tahoma, "MS Sans Serif";
line-height:1.5em;
text-align:center;
background-attachment : fixed << ถ้าไม่อยากให้ภาพเลื่อนตาม ให้ใส่บรรทัดนี้เข้าไป

 

Cover Image คือภาพหัวบลอค หลายบลอคจะขาดไม่ได้เลย เพราะมันเหมือนตัวเอกของบลอค (ยิ่งกว่าเนื้อหาเสียอีก) ปรับได้ตรงที่

 

#coverimage{
background:url(url ของภาพ ที่จะลง) no-repeat;
height:180px; << ใส่ความสูงของภาพหัวบลอกแทนเข้าไป
width:730px;
<< ใส่ความกว้างของภาพหัวบลอกแทนเข้าไป
margin-left:25px !important;
margin-left:0px; /*Fix IE Bug*/

 

Header เป็นส่วนที่ Cover Image อาศัยอยู่ (ในภาพ ไม่ได้ชี้ไว้ ลืม)

 

ถ้าอยากใส่สี Background ของ ส่วน เฮดเดอร์ ใส่ได้ตรงที่

 

#header{
background:(#รหัสสี);
padding:20px 0px 0px 0px;
text-align:center;
position:relative;

 

ถ้าอยากใส่เป็นภาพ ก็

 

background:(#รหัสสี) url(urlภาพ) repeat top left;
padding:20px 0px 0px 0px;
text-align:center;
position:relative;

รหัสสี ไม่ใส่ก็ได้ เพราะสีมันจะโดนภาพทับ ยกเว้นภาพไม่ขึ้น มันจะขึ้นเป็นสีที่เราใส่แทน

 

neck

 

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

#neck{
background:#FFF;

อยากให้เป็นภาพ ก็

#neck{
background:(#รหัสสี) url(urlภาพ) repeat top left;

รหัสสี ไม่ใส่ก็ได้ เพราะสีมันจะโดนภาพทับ ยกเว้นภาพไม่ขึ้น มันจะขึ้นเป็นสีที่เราใส่แทน

 

1 เป็นแถบที่อยู่ใน ส่วน neckไม่รู้จะเรียกไรดี เลยตั้งเป็นตัวเลข แถบที่มันมี ลิงค์ Home กลับไปหน้าหลักอ่ะ

ถ้าอยากเปลี่ยนสี Background ก็

#neck .module{
background:#(รหัสสี);
display:inline;
float:left;
margin:0px 0px 0px 25px;
padding:2px 0px 5px 0px;
width:730px;

จะเอาเป็น ภาพก็

#neck .module{
background:#(รหัสสี) url(urlภาพ) repeat top left;
display:inline;
float:left;
margin:0px 0px 0px 25px;
padding:2px 0px 5px 0px;
width:730px;

 

content ส่วนที่เป็น เนื้อหาของบลอค นะครับ

เหมือนกับ ส่วนที่ผ่านมา ขอไม่เขียนซ้ำ

 


#belly
{
background:#(รหัสสี) url(urlภาพ) repeat top left;

 

เปลี่ยนสีชื่อหัวข้อ

 

.entry .title h2 a{
color:#(รหัสสี);

 

เปลี่ยนสีเส้น ขีดเส้นใต้จบ 1เรื่อง (ที่ของฉันเป็นสีส้ม)

.entry{
float:left;
margin-bottom:15px;
border-bottom:1px solid #(รหัสสี); << 1px น่าจะเป็นระบุความหนาของเส้น

 

Sidebar เป็นส่วนที่มี Rec Fav Link ของเรา ปรับเหมือนเดิม ไม่เขียนซ้ำ

 

#sidebar, #sidebar2{
background:#(รหัสสี) url(urlภาพ) repeat top left;
display:inline;
float:right;
margin:5px 25px 0px 0px;
width:225px;

 

ปรับสีเส้นใน ไซด์บาร์

#sidebar .module h2, #sidebar2 .module h2{
border-bottom:1px solid #(รหัสสี);
<< 1px น่าจะเป็นระบุความหนาของเส้น
font-size:18px

 

footer ส่วนล่างสุด (เท้าไง)

#footer{
background:(#รหัสสี) url(urlภาพ) repeat top left;
height:60px; << น่าจะไว้ระบุความสูงของส่วน ฟุตเตอร์ (px ย่อมาจาก pixel)

 

2 เป็นแถบ ที่อยู่ในส่วน footer เหมือน1 ไม่รู้จะเรียกไงดี ในแถบจะมีคำว่า Powered by exteen blog. You may view this blog RSS or ATOM.

 

#footer p{


background:(#รหัสสี) url(urlภาพ) repeat top left;
border-top:1px solid #(รหัสสี); <<กำหนดสีเส้นบน
border-bottom:1px solid #(รหัสสี);
<<กำหนดสีเส้นล่าง
font-size:10px;
text-align:center;
margin:5px 25px 0px 25px;
padding:5px;

 

 

แถม

 

ใครที่อยากเอาชื่อบลอคออก ที่อยู่ header ก็

#header h1 a{
color:#666;<<สีฟอนท์
font-size:24px;<<ขนาดฟอนท์
display:none; <<ใส่บรรทัดนี้เพิ่มเข้าไป

 

แล้วก็ ปรับสีลิงค์ อยู่แถวๆข้างบนเลย

a:link, a:visited{
color:#(รหัสสี);
text-decoration:none; << หมายความว่า ต้องการให้ลิงค์เป็นตัวอักษรธรรมดา

 

ปรับสีลิงค์เวลาไปจิ้ม

a:hover, a:active{
color:#(รหัสสี);
border-bottom:1px solid #(รหัสสี); <<หมายความว่า ถ้าต้องการให้ลิงค์เวลาไปจิ้ม มีการขีดเส้นใต้สีที่เราระบุลงไปบรรทัดนี้
บรรทัดนี้ไม่มีนะครับ ฉันเสริมมา

 

แล้วก็ส่วนเขียนคอมเมนท์ สามารถใส่ภาพได้ด้วย

 

/* Comment Form */

#commentform
{
width:100%;
background:(#รหัสสี) url(urlภาพ) repeat top left;
float:left;

แล้วก็ ถ้าจะปรับเส้น ที่อยู่ในส่วนเขียนคอมเมนท์

 

#commentform .formrow{
border-top:1px solid #(รหัสสี);
padding:2px;

 

 

Leg

เป็นส่วนที่อยู่่เหนือ footer ซึ่ง ผมเพิ่งไปเจอมันมาเมื่อคืน พบว่า ใช้ Firefox แล้วแถบนี้จะไม่ขึ้น แต่ใน IE7 กลับมี (ใครที่ดูเมื่อวาน จะเห็นแถบนี้ของผมเป็นสีแดงนะครับ)

ส่วน leg ก็เหมือนแถบอื่นทั่วๆไป ปรับตรงที่

/* Leg Menu */
#leg
{
background:#(รหัสสี);

 

 

no-repeat repeat top left

สองตัวนี้ จะเจออยู่ข้างหลัง ลิงค์ url ภาพ ที่เราใส่ไป สองตัวเนี่ย มันมีไว้กำหนดการลงภาพ ครับ อย่าง ภาพ หัวบลอคเนี่ย จะขึ่้นให้ใส่ no-repeat เพราะว่า เราทำภาพหัวบลอค มาขนาดพอดี

ส่วน repeat top left เนี่ย จะเป็นการลงภาพ เรียงไปเรื่อยๆ ให้มันเต็มช่องพอดี อย่างพื้นสีเขียวของฉันเนี่ย ฉันลงเพียงภาพเดียว

แล้วใส่ repeat top left เข้าไป มันก็จะเป็นอย่างที่เห็น

 

 

 

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

 

ตอนนี้ใช้ Firefox ดูๆไปแล้ว ก็ไม่เห็น มีจุดผิดปกติอะไร แต่ใช้ IE7 แล้วธีมมันเบี้ยวๆนะครับ

 

Comment

Comment:

Tweet

cool

#1050 By sthepakul on 2016-04-25 04:29

#1048 By (123.200.12.18|148.251.91.38, 192.168.1.114, 123.200.12.18) on 2014-09-18 18:30

#1047 By (115.124.74.14|148.251.91.38, 115.124.74.14) on 2014-07-15 04:55

อยากทราบว่าจะทำยังไงให้ ส่วนหัวของเราใหญ่หรือว่าเล็ก ตามขนาดของ browser ครับ ขอบคุณล่วงหน้าครับ

#1046 By malangmo (103.7.57.18|122.155.44.255) on 2013-05-27 21:05

เอา url รูปภาพใส่แล้วมันไม่ขึ้นอะค่ะ มีแต่สีที่เปลี่ยนไป ลองใส่สีมันก็เปลี่ยนนะคะ แต่ภาพไม่ขึ้นเลย มันเป็นเพราะอะไรคะ??

#1045 By CHICZZ on 2012-06-19 12:36

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

#1044 By Evava on 2012-03-31 00:51

ข ขอบคุณคับ *^*Hot! Hot! Hot! Hot!

#1043 By #PM on 2012-03-07 01:03

เขียนได้ละเอียด สุดยอดดดมากค่ะHot! Hot! Hot! Hot! Hot!

#1042 By gngganniga on 2012-01-11 22:51

ขอบคุณนะคะ ได้ความรู้มากๆเลยค่ะ Hot!

#1041 By Moohun Design on 2011-10-11 14:31

ทำไมพิมพ์ตรงCSS Editorไม่ได้อะคะ

#1040 By Saschan on 2011-09-18 15:35

ทำไมพิมพ์ตรงCSS Editorไม่ได้อะคะ

#1039 By Saschan on 2011-09-18 15:32

งงอ่าครับ

#1038 By Kintoki Kinsan on 2011-09-17 11:44

Thank big smile

#1037 By หวานใจ on 2011-08-27 13:07

งงอ่าsad smile

#1036 By Kintoki Kinsan on 2011-08-05 14:34

งงอ่าsad smile

#1035 By Kintoki Kinsan on 2011-08-05 14:33

ทำไมเข้าไปตรงส่วนของ CSS Editor แล้วพิมหรือแก้ไขอะไรไม่ได้เลยอ่ะคะ = ="

เหมือนสภาพมันล็อคไว้ ทำอะไรไม่ได้เลย ได้แค่ไฮไลท์อ่ะ.. เกิดอะไรขึ้น..??

รบกวนด้วยนะคะ = ="

#1034 By Mr.DejaVu on 2011-06-15 02:26

น่าลอง

#1033 By ก. วันทะมาศ on 2011-05-30 00:24

ขอบคุณมากๆ ค้า พอดีเพิ่งหัดเล่น ยัง งงๆ ยุ
จะพยายามค่ะ ^^

#1032 By A-Miiz on 2011-05-14 13:05

อ๊าาา..ขอบคุณมากๆเลยค่ะ =..=
(เพิ่งลองเล่นบล็อกนี้ ต้องศึกษาอีกนาน)
>< ขอบคุณจริงๆค่ะ

#1031 By G.zonyx on 2011-05-07 21:02

งงอ่ะครับ
T^T

#1030 By _มี่จัง_ =w= on 2011-03-25 19:58

งงอ่ะครับ
T^T

#1029 By _มี่จัง_ =w= on 2011-03-25 19:58

ขอบคุณจ้า จะนำไปใช้น้าาา

#1028 By ✿ Jidako on 2011-03-19 00:41

Hot! Hot! Hot! ขอบคุณค่ะconfused smile

#1027 By Pollta Fechie on 2011-03-17 16:38

open-mounthed smile

#1026 By kap on 2010-12-28 22:10

ขอบคุณค่า

#1025 By ColorfulCanvas* on 2010-12-26 15:18

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

กำลังงงกับวิธีการใช้ของมันอยู่เลย 55sad smile sad smile

#1023 By extitleremee~ on 2010-10-22 20:02

I continued to position, <a href= http://nicolettebennin.co.cc/kachestvennoe-porno-onlajn.html > </a> i do some of.

#1022 By 0 (93.166.121.106) on 2010-10-20 14:15

<a href= http://dkrs.se/stallbloggen/entry.php?w=vincenzaoreill&e_id=472918 >the worlds best boobs</a>

#1021 By 0 (217.21.116.234) on 2010-10-20 12:13

comment4, cymbalta side affect, anxiety propranolol dosage, clomid.com, deralin, buy diazepam, propranolol, reductil australia, zolpidem cost, female viagra.com, pastillas cytotec, elimite, diazepam, allopurinol, benicar, lorazepam, paroxetine and side effects, tadalafil fluoxetine, fibromyalgia and drug cymbalta, benicar, alprazolam, fluoxetine glaucoma, glucophage, paxil, zolpidem tablets, diaformin, approved fda hcl oxytetracycline, allopurinol 300 mg, diazepam cheap, cytotechnology school, liquid diazepam, bactrim ds effects side, bactrim.com, smz-tmp, brasilia cytotec, how to take clomid, klonopin, buy cymbalta, alprazolam no membership, clomid progesterone, propranolol, baclofen intrathecal pump, cymbalta elavil taken together, bactrim ds keyword, propranolol 60 pills,

#1020 By allopurinol (90.46.252.124) on 2010-10-19 21:47

She laid perfectly still not for a pulsating pleasure <a href= http://perryaltavilla.co.cc/besplatnoe-onlajn-porno.html > </a> withoutsaying.

#1019 By 0 (41.204.170.173) on 2010-10-19 21:24

comment1, ultram and darvocet, clonazepam, asian dating sites, dunhill, tramadol, ultram tablets, tramadol.com, davidoff, vogue.com, cigarette discount, jewish online dating, south asian dating, tramadol canine dose, potato not prozac, ativan usage, dunhill, prozac facts, gay bear dating login, free phone dating trials, dating tips for asian, jewish single dating service, internet dating demographics, winston cigarettes, dunhill international cigarettes,

#1018 By soma (125.138.27.219) on 2010-10-19 18:54

<a href= http://www.phraeksriracha.go.th/forum/index.php?topic=35450.0 > PORN TUBE ZZOO </a>,
<a href= http://www.csucssa.org/index.php/CSUCSSA-Announcement/2529-animalsex-tube.html#2529 > animalsex tube </a>,
[url= http://www.csucssa.org/index.php/CSUCSSA-Announcement/2535-ZOO-SEX.html#2535 ] ZOO SEX [/url],
[url= http://www.csucssa.org/index.php/CSUCSSA-Announcement/2533-zoosex-tube.html#2533 ] zoosex tube [/url],

#1017 By xdsMbbTptoGEjHjHL (93.174.93.58) on 2010-10-19 16:07

comment3, vicodin viagra cialis, Viagra, usa discount cigarettes, Acomplia, adult california dating, Dating Sites, real adipex, vancouver dating services, actress in levitra commercial, Phentermine, gay professional dating,

#1016 By gay dating services (180.149.49.114) on 2010-10-19 14:25

comment3, Viagra, Adult Dating, free online dating sites, Cialis, viagra pill, low price cigarettes, cialis cheap price, acomplia weight loss, adipex 37.5mg without prescription nc, Viagra, michigan dating sex, Dating Services,

#1015 By phentermine (211.219.125.99) on 2010-10-19 13:16

comment5, viagra retail discount, adult dating site, cialis levitra vs, Online Dating, newport cigarettes website, newport cigarettes, Cialis, cheap acomplia, adult dating au, dating sites, adipex, Cialis, viagra pill cutter, dating and sex romance, Dating Services, phentermine 37 5mg, levitra, gay dating,

#1014 By Gay Dating (195.229.241.178) on 2010-10-19 12:52

comment3, adult dating site hotel, free online dating, adult dating services, straight singles dating sites, viagra, free adult sex dating,

#1013 By adult dating service (140.147.6.203) on 2010-10-19 11:19

I havent set this up his cheeks of hisdick. Well, leaving <a href= http://isaiasgilman.blogs-blogs.com/69369/Little+Teen+Boobs.html >little teen boobs</a> behind.

#1012 By 0 (119.70.40.102) on 2010-10-19 10:09

ขอบคุณมากค่า
กำลังงงๆอยู่เลย ต้องขอบคุณทั่นมากก-(^^)-_(^^)_
แอดบล็กท่านแล้วนะเจ้าครับ
และอีกที ขอบคุณท่านมากก

#1011 By neruyaki on 2010-10-19 08:48

comment3, cialis, Cigarettes, buy cialis, free adult dating, generic adipex-p 37.5 identification, viagra soft tabs 10 pills, Rimonabant, Phentermine, asian gay dating,

#1010 By Viagra (99.192.183.88) on 2010-10-19 07:08

comment3, newest adult dating site, Cialis, free online dating sites, newport cigarettes online, Adult Dating, Dating Sites, Adipex, cialis, Rimonabant, sample viagra, Sex Dating, Dating Services, levitra online,

#1009 By cialis sample (140.147.6.203) on 2010-10-19 05:17

comment6, cialis.com, bravo cigarettes, buy viagra, acomplia mexico, adult sim dating games, Dating Sites, cialis 2 doses, viagra information, Rimonabant, adult sex chat dating, free phone dating services, levitra, Phentermine, gay dating,

#1008 By adult dating online services (140.147.6.203) on 2010-10-19 04:11

<a href= http://juliussullivant.co.cc/besplatnyj-seks-s-parnem.html > </a>

#1007 By 0 (119.70.40.102) on 2010-10-18 23:32

<a href= http://netblogg.eu/karenhulsey/12918/Super+Natural+Boobs.html >super natural boobs</a>

#1006 By 0 (216.109.73.21) on 2010-10-18 23:23

<a href= http://natnit.net/warnet/lakishabonnell/5240/ >black huge boobs</a>

#1005 By 0 (91.204.184.101) on 2010-10-18 13:26

<a href= http://blog.gojini.com/dariuschristia/34561/Large+Tube+Top+Latex+Boobs.html >large tube top latex boobs</a>

#1004 By 0 (216.109.73.21) on 2010-10-18 11:35

Theplan of a vienna sausage or so, but we sat back. She did. <a href= http://natnit.net/warnet/lakishabonnell/5249/ >big black boobs youtube</a> Now.

#1003 By 0 (173.212.231.100) on 2010-10-18 11:18

3P4tIf <a href="http://fizwqdbrxmta.com/">fizwqdbrxmta</a>, [url=http://ucvcvglsxzmp.com/]ucvcvglsxzmp[/url], [link=http://isqrjqxxiwla.com/]isqrjqxxiwla[/link], http://pjbmgirzfurd.com/

#1002 By rkzzuxy (61.155.108.214) on 2010-10-18 06:54

8snDsG <a href="http://uoxwwmbutddp.com/">uoxwwmbutddp</a>, [url=http://xorivkortyrs.com/]xorivkortyrs[/url], [link=http://sslsfuiugyxd.com/]sslsfuiugyxd[/link], http://vpstqqingfyl.com/

#1001 By lzswblcfyq (119.255.12.86) on 2010-10-18 02:44