จากเอนทรี่แจกธีม เห็นบางคนก็สนใจเจ้าส่วน leg กัน
(ไม่รู้จะเรียกมันว่าอะไรเลยเรียกมันว่า "สามกล่อง" ใครมีชื่อเก๋ๆ เสนอแนะมาได้นะ)

※ ถึงจะบอกว่าเป็นส่วน leg แต่งจริงๆ ก็ปรับไปใช้กับส่วน neck ได้เช่นกัน ※

ทางที่ดีก็ควรจะมีพวก CSS reference ไว้ดูเวลาแก้ไข เพื่อความสะดวก :)
 
ก่อนอื่นก็ควรจะรู้ว่าแต่ละตัวควบคุมส่วนไหนของส่วน leg บ้าง (กดดูขนาดเต็มที่รูปได้เลย)
ถ้ารู้พวกนี้ อะไรๆ ก็ไม่ยากเกินความสามารถแล้ว ~

(กดรูปเพื่อดูรูปเต็มๆ ใหญ่ๆ)
 
ถ้าใช้ Firefox ขอแนะนำให้ลงปลั๊กอินที่ให้เราแก้ CSS และอัพเดทไปพร้อมๆ กัน
(ถ้าใช้ Web Developer ให้กด Ctrl+E เพื่อเรียกตัวแก้ CSS ฮะ)
จะได้ไม่ต้องนั่งกดรีเฟรชในหน้า CSS Editor ตลอดเวลา (เพื่อความสะดวก ว่าอย่างงั้นเถอะ)
 
 ※ ตัวโค้ดแบบไม่มีคอมเม้นท์นั้นอยู่ท้ายเอนทรี่ฮะ สำหรับคนที่อยากก้อปไปใช้เลย ※
 
ตัวนี้ควบคุมกล่องใหญ่ของส่วน leg
#leg {
    background:#FBEC5D;
          ^ ถ้าไม่อยากให้มีสีพื้นหลัง (หรือเป็นพื้นหลังใส) ให้ใส่ none แทน
    text-align: left;
    font-family: 'Verdana'; <-- ชื่อฟ้อนต์
}
 
ตัวนี้ควบคุมกล่องเล็กในกล่องใหญ่
#leg .module{
    background:none; <-- ถ้าใส่ none มันจะใส พื้นหลังจึงกลายเป็นสีที่เราใช้ด้านบน
    display:block; <-- อันนี้สำคัญ ถ้าใส่ inline มันจะแสดงค่าต่างกันนะ
    float:left;
    margin:10px 0px 0px 15px; <-- ไว้จัดระยะห่างระหว่างแต่ละกล่องเล็กในกล่องใหญ่
    padding:2px 0px 5px 20px; <-- ระยะห่างของพวกตัวหนังสือหรือข้อมูลในตัวกล่องเล็ก
    width: 205px;
           ^ ความกว้างของแต่กล่องเล็กที่ต้องการ ขึ้นอยู่กับว่าต้องการกี่กล่อง และความกว้างของบล็อก เช่น ถ้าหากว่าต้องการ 4 กล่องก็ต้องลดความกว้าง หรือถ้าต้องการแค่สองกล่องก็เพิ่มความกว้าง เป็นต้น
}

※ สมมุติว่าเราใส่ background:none; ใน #leg และ background:โค้ดสี; ใน #leg .module
หน้าตาของเจ้าสามกล่องจะเป็นแบบในรูปด้านล่าง ซึ่งก็เป็นอีกแบบหนึ่งที่หลายๆ คนอาจจะสนใจนะ
ก็ต้องลงทดลองปรับเล่นๆ เอง ※


#leg .module ul{
    display:inline; <-- ทิ้งไว้แบบนี้แหละ
    list-style: none; <-- ไว้เลือกว่าต้องการพวกวงกลมด้านหน้าลิสต์หรือเปล่า
    margin:0px;
    padding:0px;
    font:11px 'Verdana';
}

ควบคุมตัวหนังสือหัวข้อจำพวก Page, Categories, Links เป็นต้น
#leg .module h2 {
    font-size:17px; <-- ขนาดฟ้อนต์หัวข้อ
    font-weight:normal;
           ^ เซตให้ตัวฟ้อนต์เป็นแบบธรรมดา ไม่หนา (ถ้าจะเอาหนาเปลี่ยนเป็น bold)
    text-transform:lowercase; <--
           ^ ทำให้มันเป็นตัวพิมพ์เล็กหมดเลย(ตัวเลือก uppercase กับ capitalize)
    font-family:'trebuchet ms';
    text-align:right; <-- การจัดวางตัวอักษร อย่างในตัวอย่างนี้คือวางด้านขวา
    color:#FFCC11; <-- สีตัวหนังสือ
}
 
#leg .module li {
    border-bottom: 1px dotted #FCD116;
           ^ ไว้เซตเส้นใต้ลิสต์ อันนี้จะเป็นจุดๆ ถ้าอยากเป็นเส้นตรงธรรมดาให้ใช้ solid หรือถ้าไม่อยากให้มีเส้นเลย ก็เปลี่ยนตัวเลขเป็น 0px แทน
    padding:3px 4px 3px 5px;
           ^ ไว้เซตความห่างระหว่างตัวอักษรกับเส้นใต้และรอบๆ ตัวหนังสือ
}

อันนี้เป็นสำหรับลิงค์ ถ้าไม่อยากจัดอะไรเป็นพิเศษ ก็น่าจะทิ้งไว้แบบนั้นได้
#leg .module li a{
    padding:2px 10px 2px 5px;
    font-size:10px; <-- ขนาดตัวอักษร
    color:#EEAD0E; <-- สีลิงค์
}

สำหรับลิงค์ที่เราเอาเม้าส์วางทับ
#leg .module li a:hover {
    padding:2px 10px 2px 5px;
    color:#999;
}

ไว้เปลี่ยนพื้นสีทั้งแถบของตัวลิสต์เวลาเอาเม้าส์วางทับ
ถ้าหากว่าเราใส่ค่าในด้านบนแทน มันจะเป็นแค่พื้นหลังของตัวอักษรแต่ไม่ใช่ทั้งบรรทัด
(ถ้าดูจากในรูป มันก็คือจะแถบที่เป็นสีเหลืองที่เข้มกว่าส่วนอื่นๆ นั่นเอง)
#leg .module li:hover {
    background-color:#FFE04F;
    border-color:#FFE04F; <-- สีกรอบ (ถ้าไม่อยากให้มันสีเดียวกับพื้นหลัง)
}

ก็มีแค่นี้ หวังว่าจะเป็นประโยชน์ต่อหลายๆ คนนะ 8D
มีคำถามอะไรก็สามารถทิ้งคอมเม้นต์เอาไว้หรือจะ EMS มาก็ได้

#leg{
  background:#FBEC5D;
  text-align: left;
  font-family: 'Verdana';
}
#leg .module{
  background:none;
  display:block;
  float:left;
  margin:10px 0px 0px 15px;
  padding:2px 0px 5px 20px;
  width: 205px;
}
#leg .module ul{
  display:inline;
  list-style: none;
  margin:0px;
  padding:0px;
  font:11px 'Verdana';
}
#leg .module h2{
  font-size:17px;
  font-weight:normal;
  text-transform:lowercase;
  font-family:'trebuchet ms';
  text-align:right;
  color:#FFCC11;
}
#leg .module li {
  border-bottom: 1px dotted #FCD116;
  padding:3px 4px 3px 5px;
}
#leg .module li a{
  padding:2px 10px 2px 5px;
  font-size:10px;
  color:#EEAD0E;
}
#leg .module li a:hover{
  padding:2px 10px 2px 5px;
  color:#999;
}
#leg .module li:hover{
  background-color:#FFE04F;
  border-color:#FFE04F;
}

Comment

Comment:

Tweet

ขอบคุณมากค่าาา

#77 By J u ★ k i A ` on 2013-09-26 16:15

ขอบคุณมากนะคะ Hot! Hot! Hot!

#76 By Wienczy on 2013-08-13 22:38

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

#75 By Pluster on 2012-02-04 16:35

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

#74 By tsun on 2011-11-23 11:17

Hot! Hot! Hot! Hot!
ขอบคุณค่า~ ในที่สุดก็ได้สามกล่องมา

#73 By By-feurn on 2011-09-16 01:50

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

#72 By antberrytuna;;* on 2011-06-11 08:58

ขอบคุณนะคะ
ขอยืมธีมไปใช้ได้ด้วยค่ะ
//แต่กำลัง งมโคตอย่างเมามันเลย (ฮา)

#71 By カプセル on 2011-05-30 21:34

กะลังจะทำพอดีเลย ขอบคุณมากค่าา Hot! Hot! Hot! Hot! Hot!
cry cry

#70 By ManekiKuma~* on 2011-05-27 10:00

ขออนุญาตนำธีม pastel blue ไปใช้นะคะ โดยแก้ไข blackground ค่ะ ขอบคุณนะคะ แต่สงสัยค่ะ คือ เราพยายามเอา custome code และ profile ไปใส่ด้านขวา แต่มันก็มาอยู่ด้านซ้ายตลอดเลย ไม่ทราบว่าต้องแก้ตรงไหนคะ link ค่ะ http://talingping-fiction.exteen.com/ ไปตอบในเซาท์ปิงก็ได้นะคะ
ขอบคุณอีกครั้งค่ะ

#69 By talingping on 2011-05-08 14:33

ว้าวว ขอบคุณมากๆค่ะ ช่วยได้เยอะเลย ><Hot! Hot! Hot!

#68 By Izumi Fringe on 2011-05-04 20:04

ขอบคุณมากเลยนะค๊าาาาาาา

#67 By SmileLuzMocca [KwonHibari] on 2011-05-01 12:19

ขอบคุณมากเลยนะค๊าาาาาาา

#66 By SmileLuzMocca [KwonHibari] on 2011-05-01 12:19

ขอบคุณมากๆ สำหรับโค้ดนะครับ

ขอรับไปใช้นะครับ

#65 By [ Toon ] on 2011-03-27 13:45

ขอบคุณค่าา า

#64 By 。✖ L i N N i E ✖。 on 2011-03-22 19:03

งงอ่าค่ะ - - แต่ว่าขอบคุณที่สอนHot! Hot!

#63 By ♠KinG♠ on 2011-03-12 16:58

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

#62 By Aeixiah on 2011-02-11 00:25

ขอบคุณมากเลยฮะ *[]*
ไว้จะลองทำดูนะฮะ ได้ความรู้มากๆเลย

#61 By CHIP on 2010-12-25 19:41

บทความเย็นจริงๆ ฉันชอบมัน!

#60 By essay writing (78.31.178.242) on 2010-12-08 17:44

สวยงามมากๆ

#59 By hy92h on 2010-11-27 22:57

ขอบคุณมากครับ

รับไปใช้แล้วconfused smile

#58 By Art Jeeno on 2010-11-02 05:26

ขอบคุณมากมายค่ะ เป็นมือใหม่หัดแต่ง ยังงงๆอยู่เลย ขอจิ้มไปใช้นะึคะ

#57 By PloynieZ on 2010-10-26 20:27

ขอบุคณมากๆเลยนะคะ
มึนเหมือนกัน เเต่จะพยายาม
เก่งจังเล้ย >.<

#56 By fishjunior on 2010-10-20 12:14

ขอบคุณมากๆฮะconfused smile

#55 By `OiLRo Kikkob on 2010-10-14 22:39

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

#54 By Cielo on 2010-10-12 18:24

ขอบคุณมากๆเลยนะครับ ผมเอาไปแต่งแล้วนะ ผมพึ่งเคยเล่นexteenอ่ะ

ขอบคุณมากครับ ว่าแต่บล็อคเนี่ยมันต้องเพิ่มเพื่อนอะไรป่ะครับ

ช่วยemsมาด้วยนะครับ สงสัยมากๆ -..- big smile big smile big smile

#52 By Sol#~ on 2010-09-29 21:37

เข้าใจอะไรมากขึ้นเลยจริงๆ
ขอเอาไปใช้นะฮะ
ขอบคุณฮะ

#51 By `OiLRo Kikkob on 2010-09-28 18:45

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

#50 By G-ROZBER on 2010-07-31 17:06

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

#49 By simon_mm on 2010-07-23 21:32

ขอโทษนะคร้า

พอดีเพิ่งเล่นอะคร้า

ช่วบบอกหน่อยได้มั้ยค่ะว่าต้องเอาโค้ดไปใช่ไว้ที่ไหนอะคร้า

#48 By NUNA love OPAP on 2010-06-13 14:32

ขอบคุณมากมายค่ะ

#47 By Istyle Grand Marnier on 2010-05-13 16:48

ขออนุญาติเอาไปใช้หน่อยนะค้า
ขอบคุณมากๆเลยค่า

#46 By ♥HIDDLESWORTH♥ on 2010-05-10 23:06

ว้าวเจ๋งสุดยอด ! Hot!
ขอบคุณมากนะค่ะ :')

#45 By QUIINESG'♥ on 2010-05-03 19:30

Hot! Hot! Hot! Hot!

ขอบคุณมากค่ะ ><

#44 By ♥...sabai_arom on 2010-04-30 19:13

.ขอบคุณมากๆเลยคะ;)

#43 By Printhorru . on 2010-04-24 20:36

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

#42 By nanmintae . on 2010-04-24 14:08

Hot! Hot! Hot!
ขอบคุณมากมายคะ

#41 By ★ Thiz'BEAM on 2010-04-20 10:38

ขอบคุณมากๆค่ะ
เอาไปทำดูนะคะ ^^

#40 By abc on 2010-04-13 12:29

ขอบคุณค่ะ >/\<

#39 By uneay。 on 2010-04-06 16:13

ขอบคุณมากมว๊ากกกกค่ะ

#38 By thekibkiiw。 on 2010-04-03 17:47

ขอลองไปใช้นะครับ ขอบคุณมากครับ

#37 By Sentai-Thailand on 2010-03-20 13:20

ขอบคุณค่ะ ^ ^

#36 By kimmeesoh on 2010-03-16 18:15

thx มากๆจ้ะ

#35 By pepzewee on 2010-03-16 16:58

ขอบคุณมากค่ะ
ได้เวลางมโค้ดอีกแล้ว ~

#34 By thekibkiiw。 on 2010-03-15 21:26

ขอบคุณมากๆคร้าบ
ขออนุญาตนำไปใช้ปรับนะครับ
ได้บล็อกของคุณtikyon ช่วยมากๆเลยครับ
นอกจากโค้ดแล้วยังมีคำอธิบายเป็นแสงสว่างนำทาง
ขออนุญาตฝากดราก้อนบอลแก่ท่าน
ขอให้เทพเจ้ามังกรมาให้พรท่าน ฮา
Hot! Hot! Hot!
Hot! Hot! Hot!
Hot! Hot! Hot!

#33 By ||•Ritz_DD on 2010-03-07 16:14

ขอบคุณมากๆเลยฮับ ~~~

ปรับแต่งแบบใหม่ชอบมากๆเลยฮะ ขอนำไปใช้นะฮับ>w<

#32 By ~Romano&tsuna27 ~ on 2010-03-05 20:06

ขอนำไปฝึกทำนะคะ

ขอบคุณค่ะ

#31 By iice39quixotic on 2010-03-02 09:17

ขอบคุณค่ะ ~

#30 By shawty on 2010-02-25 00:29

ยังงมโข่งอยู่ดีแต่ก็ขอบคุณมากๆค่ะ

#29 By ald_aruza on 2010-02-06 18:40

อิอิ มาเอาโค้ดกล่องๆ สามอันไปนะคะ ^^

ขอบคุณมากเลยค่ะ !!!
ขอบคุณสำหรับวิธีมาก ๆค่ะ
จะลองนำไปแต่งดูนะคะ <3

ขอบคุณมากๆจ้า :)

#27 By CHUNGNATTE on 2010-01-19 19:31