สวัสดีครับ หลังจากที่แวะไปดูหลาย ๆ บลอคก็เห็นว่าดีไซน์แบบใหม่ ๆ มีการเอา Widgets ไปวางไว้ใต้ Header บ้าง หรือตรง Footer บ้าง โดยทำให้ Widgets เหล่านั้นเรียงกันเป็น 3 คอลัมน์

คิดว่าหลาย ๆ คนคงอยากรู้ว่ามันทำยังไง... เลยเอามาสอนกันครับ

^ เสร็จแล้วจะมีหน้าตาแบบนี้ครับ

อันนี้จะสอนทำ Widget 3 คอลัมน์ใต้ Header ก่อนนะครับ (วิธีใส่ใต้ Header กับใส่ตรง Footer จะคล้าย ๆ กัน)

ธีมที่ผมใช้แก้ครั้งนี้คือ Apollo Black ครับ

ขั้นแรก... ไปที Theme > Widgets

แดร็ก Widget ที่เราต้องการโชว์ใต้ Header ไปใส่ในส่วน Top Menu 3 อัน

 เสร็จแล้วก็ได้เวลาแก้ CSS กันแล้ว เปิด Theme > CSS Editor ขึ้นมาเลย!

ส่วนที่เรียกว่า Top Menu ในหน้า Widget นั้น ใน CSS มันมีชื่อเรียกว่า #neck ครับ ให้หาโค้ดส่วนนี้:

#neck .module{
    ... (จะมีโค้ดเยอะ ๆ ตรงนี้)
}

แล้วเอาโค้ดนี้ลงไปทับอันเก่าเลย:

#neck .module{
 display:inline;
 float:left;
 overflow: auto;
 background: #473e3c; /* สีพื้นหลัง */
 margin: 10px 10px 10px 10px; /* พื้นที่ว่างก่อนถึง Element นี้ (บน ซ้าย ล่าง ขวา) */
 padding: 5px 5px 5px 5px; /* พื้นที่ว่างวัดเข้ามาจากขอบ (บน ซ้าย ล่าง ขวา) */
 width: 230px; /* ความกว้าง */
 height: 160px; /* ความสูง */
}

 บรรทัดที่แก้ไขได้ ผมก็คอมเม้นท์ไว้ด้านหลังบรรทัดนั้นให้แล้วนะครับ สงสัยตรงส่วนไหนถามได้ครับ

 สำหรับค่า height นี่ลองปรับให้พอดี ๆ นะครับ จะเห็นว่าในโค้ดนี้ผมเพิ่ม overflow: auto; เข้าไปเพื่อให้แสดง scroll bar ในกรณีที่ความสูงของเนื้อหามันเกินความสูงกล่องของเราครับ จะเป็นแบบนี้:

ถ้าลองพรีวิวดูจะเห็นว่าลิงค์ต่าง ๆ มันเรียงต่อกันหมดเลย วิธีที่จะทำให้มันแสดง 1 บรรทัดต่อ 1 ลิงค์เหมือนกับที่ Sidebar ก็คือ:

หาโค้ด CSS อันนี้:

#neck .module li{
  border-right:1px solid #CCC;
  display:inline;
  ... (อาจมีโค้ดอื่น ๆ อีก แล้วแต่ธีม)
}

 แล้วลบบรรทัด border-right ออก และเปลี่ยน display: inline; เป็น display: block;

ลองพรีวิวดูอีกที จะเห็นลิงค์แสดงแบบ 1 ลิงค์ 1 บรรทัดแล้วครับ

แต่... มันจะมีแต่ลิสต์ของลิงค์ ซึ่งไม่เห็นส่วนหัวข้อที่เขียนว่า Previously, Latest Comments, Links อะไรพวกนี้ สาเหตุก็คือ มันถูกซ่อนอยู่ครับ วิธีเอามันกลับมาก็คือ:

หา CSS ส่วนนี้:

#neck .module h2{
  display:none;
}

ลบทิ้งเลยครับ บรรทัด display: none; อันนี้ จะเห็นว่าพอลบแล้วเราก็จะเห็นหัวข้อแล้ว ตามภาพเลย

สำหรับคนที่อยากแต่งตัวอักษรหัวข้อเอง ก็ใส่ CSS แต่งตัวอักษรไปตามสบายครับ โดยใส่ไปต่อจากบรรทัด display: none; ที่เราเพิ่งลบได้เลย

(ใครจะไปแต่งตัวอักษรเองก็ไม่จำเป็นต้องอ่านต่อแล้วครับ ถ้ามีปัญหาทิ้งคอมเม้นท์ไว้ได้ครับ ถ้าชอบกดดาวให้ด้วยน้า ^^)

วิธีใช้รูปแทนหัวข้อ:

ส่วนสำหรับคนที่อยากใช้รูปแทน ก็ให้ไปหาโค้ดใต้บรรทัดนี้ครับ:

/* Sidebar Header image */

มันจะเป็นโค้ดบรรทัดยาว ๆ ประมาณ 9 บรรทัดติด ๆ กัน ซึ่งจะขึ้นต้นด้วยอะไรแบบนี้:

#sidebar #recommend h2, #sidebar2 #recommend h2{ บลาๆ }

ให้แก้ทุกบรรทัดเหลือแต่...

#recommend h2{ บลาๆ }

ตรงคำว่า #recommend นี่ ในบรรทัดอื่นจะเป็นคำอื่นครับ เช่น #links, #tags, #previous ก็ให้ใช้คำนั้น ๆ แทนตอนแก้บรรทัดอื่น (วิธีลบแบบเร็ว ๆ คือ ลบตั้งแต่คำว่า #sidebar จนถึง #sidebar2 มันก็จะเหลือแค่ [คำเฉพาะ] h2 { ... } )

ขั้นตอนสุดท้าย... ถ้าพรีวิวตอนนี้จะเห็นว่าตัวอักษรหัวข้อเรามันทับกับรูปอยู่ครับ วิธีแก้ก็คือให้ไปหาโค้ด:

#neck .module h2{

 แล้วใส่บรรทัดนี้ลงไปด้านล่าง

text-indent: -9999px;

โค้ดด้านบนนี้จะเตะตัวอักษรออกไปไกล ๆ ครับ เราจะมองเห็นแต่รูปภาพเท่านั้น

เท่านี้ก็เสร็จแล้วครับ กับการทำ Widget 3 คอลัมน์!

ถ้ามีปัญหาทิ้งคอมเม้นท์ไว้ได้ครับ ถ้าชอบกดดาวให้ด้วยน้า ^^

อยากอ่านเรื่องอะไรอีกก็บอกกันได้ครับ!

Comment

Comment:

Tweet

http://narak-dee.exteen.com/ ใส่ Widget ไม่ได้ พอ save ก็ดีดกลับมาที่เดิม พอทำได้ก็ไม่แสดงผล หมดปัญหาแระ (ก่อนนั้นก็แสดงอยู่ พอเปลี่ยน บีจี Widgetก็หายไปเลย ทีนี้ไปแล้วไม่กลับมาเลย)ไม่รู้จะแก้ตรงไหนดีembarrassed

#31 By thonpai on 2013-11-28 11:39

ขอบคุณมากเลยค่าา :D Hot! Hot! Hot!

#30 By BPPBPP8 on 2013-05-06 01:35

ขอบคุณค้้าบบบบcry

#29 By 7_z_DragoN on 2013-03-25 16:15

ทำยังไงให้พวกหัวข้อ Favourite อะไรแบบนี้เป็นฟ้อนต์แบบในตัวอย่างคะ พอพรีวิวออกมามันเป็นฟ้อนต์ตัวหนาอ่ะ - -" แล้วสีพื้นหลังกล่องข้อความไม่เอาเป็นสีน้ำตาลจะเปลี่ยนยังไงคะ

#28 By _yjysmmirotic on 2012-11-07 18:28

Hot!

#27 By hy92h on 2012-01-01 23:00

มีปัญหาคือมันไม่ขึ้นรูปภาพที่หัวข้อน่ะค่ะ ทำไงดี

#25 By TataRo' on 2011-11-13 15:38

Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!
ขอบคุณจ้าาา

#24 By Kiseki Sora on 2011-11-06 13:50

ขอบคุณมากๆๆๆๆเลยนะคะ
เข้าใจมากขึ้นเพราะบล๊อคนี้เลยค่ะHot! Hot! Hot! Hot! Hot!

#23 By warasis on 2011-10-20 09:50

อ่าๆ ไม่รู้ว่าทำถูกรึเปล่า เลยลองเอามาให้ดูอ่าค่ะ
http://upic.me/show/28798496

#22 By punkungstrom on 2011-10-06 11:24

ไม่รู้ว่าถูกรึเปล่า แต่มันขึ้นอย่างนี้อ่าค่ะ

[url=http://upic.me/show/28798496][img]http://upic.me/i/oj/t5555.jpg[/img][/url]

#21 By punkungstrom on 2011-10-06 11:21

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

#20 By takarin' on 2011-07-24 19:20

Hot! Hot! Hot! Hot!

#19 By จุด on 2011-05-08 13:04

กำลังหาพอดีเลย

ขอบคุณมากคะ open-mounthed smile

#18 By ✿ Jidako on 2011-05-04 11:39

Hot! Hot! Hot! Hot!

เยี่ยมมากๆ เลยค่ะ ขอบคุณที่แบ่งปันสิ่งดีๆ นะคะ ^^

#17 By B&W on 2011-04-06 22:27

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

cry Hot! cry Hot! cry

#16 By Aka-I on 2011-03-28 13:04

ขอบคุณมากๆเลยค่ะ
ถามหลายคนมากๆ
เเต่ไม่มีใครตอบเลย
ดีใจจริงๆที่มีคนทำฮาวทูดีดีเเบบนี้
ขอบคุณมากนะคะ

Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!

#15 By hameii on 2011-03-23 01:10

ขอบคุณค่ะ~
Hot! Hot! Hot! Hot! Hot!
Hot! Hot! Hot!
very good

#13 By i-tose on 2011-03-15 11:07

ขอบคุณค่ะ

#12 By bling bling on 2011-03-11 20:51

ขอบคุณมากๆ เลยค่ะ เขียนได้ดีจริงๆ

ขออนุญาตนำไปใช้นะคะ

css พวกนี้มันหายากจริงๆ เลย /ปาดเหงื่อ

#11 By Firo on 2011-02-25 03:41

it's good to see this information in your post, i was looking the same but there was not any proper resource, thanx now i have the link which i was looking for my research.

#10 By Dissertation (119.155.51.113) on 2011-02-14 04:12

ขอบคุณมากครับ หัดแก้ธีม wp อยู่พอดีครับ เจอบทความนี้เข้าไป ทำให้เอาธีมฟรีมาแก้ได้สวยมากกว่าเดิมเยอะเลย

#9 By promotion (58.9.8.62) on 2010-10-28 02:50

Excellent & remarkable post!
I have been visiting various blogs for my Dissertation writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information....... Regards

#8 By Dissertation writing (182.178.0.2) on 2010-10-04 13:06

เป็นประโยชน์มากๆเลย ขอบคุณมากค่า XD

#7 By .:: Milo Studio ::. on 2010-10-01 21:38

แล้วถ้าจะทำให้มันอยูข้างล่างต้องเปลี่ยนตรงไหนบ้างค่ะ?

#6 By zilkliz on 2010-08-26 19:37

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

#5 By Rapbitan on 2010-07-25 19:29

ขอบคุณค่า

กำลังอยากทำแบบนี้พอดีเลย ^^

#4 By FunGus on 2010-06-20 16:11

ขอเอาไปลองนะครับHot! Hot! Hot! Hot!

#3 By Dogเตอร์นน on 2010-05-17 21:58

ขอบคุณคร้าบ ^^

อยากให้เขียนเรื่องอะไรบอกได้นะครับ

#2 By Woratana N. on 2010-04-08 23:30

เอาไปลองทำแล้วค่ะ

ขอบคุณสำหรับเทคนิคดีๆนะคะ

Hot! Hot! Hot! Hot! Hot!

#1 By Ahiruly ♠ on 2010-04-08 18:35

Code Here.