• ใช้ไฟร์ฟอกซ์กันเถอะ
  • คำแนะนำ24ข้อที่บล็อกเกอร์ควรรู้

กลับมาอัพบล็อกกันต่อดีกว่า... ในเอนทรี่ที่แล้ว (คำแนะนำ 24ข้อ ที่บล็อกเกอร์ควรรู้)เป็นเอนทรี่แรกที่ผมได้คอมเมนต์เกิน 100 โอ้ว...  ตอนเขียนเอนทรี่นั้นคิดว่าได้เกิน50ก็ถือว่าสุดยอดแล้วสำหรับผม ขอบคุณทุกท่านที่เข้ามาชมเอนทรี่นั้น และเข้ามาคอมเมนต์นะครับ หวังว่าทุกท่านคงจะได้ประโยชน์ไปไม่มากก็น้อย...

มาเอนทรี้นี้ผมจะมาแนะนำการแปลงธีมแจกฟรีใน Wordpress ซึ่งเป็น Weblog Engine ที่ได้รับความนิยมอย่างสูง จากผู้ใช้ และบรรดาสแปมเมอร์ (จริงป่ะละ) เนื่องจากใช้งานง่าย มีทีมงานพัฒนาอย่างต่อเนื่อง ปลั๊กอินเสริมเพียบทั้งดีๆ และที่กากๆ ก็มีเยอะ (บางตัวก็ติดตั้งยาก เหมือนไม่อยากให้เราใช้) และที่สำคัญที่สุด คือ ธีมเยอะมากๆครับ

มาลองดูธีมตัวอย่างที่โดนใจผม สัก 3ธีมกัน

1. Coffee Desk ผู้ออกแบบคือ  Roam2Rome

 ภาพตัวอย่างธีม Coffee Desk

หน้าตาไฮโซผมชอบไอเดียที่เขาเอาคีย์บอร์ดของMac มาวางประดับบล็อกนั่นแหละ มันสวยดี (ถึงจะไม่มีประโยชน์เลยก็ตามที) น่าลอกมาใช้มากๆ

 

2. Desk Mess ผู้ออกแบบคือ Geek With Laptop

 ภาพตัวอย่างธีม Desk Mess

หน้าตาคล้ายๆตัวบนนะ สงสัยว่าฝรั่งจะลอกกันมามั้ง...

 

3. Pink Sunset ผู้ออกแบบคือ Viktor Persson

ภาพตัวอย่างธีม Pink Sunset

ธีมนี้ผมชอบพื้นหลังของเขา และออกแบบได้เรียบง่ายแต่เต็มไปด้วยจิตวิญญาณ...

เอามาให้ดู 3 ธีมนี้ก่อนนะครับ

แหล่งแจกธีมฟรีสำหรับ wordpress นอกเหนือไปจากนี้ที่ผมเข้าไปส่องประจำก็มี

ลองเข้าไปหาแรงบันดาลใจในการออกแบบธีมกันดูนะครับ

ผมจะสาธิตการขโมยธีม เอ้ย..แปลงธีมไว้ใช้ใน Exteen กัน แม้ว่าเขาออกแบบมาเพื่อใช้บน Wordpressก็ตามที งานนี้ไม่ยากนะครับ ต้อง 1.อาศัยพื้นฐาน CSS เล็กน้อย 2.ความเข้าใจในโครงสร้างของธีม exteen ... และ ตัวช่วยโกง(ไม่มีก็ได้)

จะขอแนะนำเว็บเพื่อการปูพื้นการเขียน cssไว้สักสามเว็บนะครับ

1.  w3schools   2. Tizag Tutorials   3.  Divland.com

เอนทรี่เก่าๆของเพื่อนสมาชิกที่ทำการชำแหละโครงสร้างธีม exteen

ยังมีคนชำแหละมากกว่านี้ด้วยมั้ง แต่ผมจำไม่ได้ ถ้าใครจำได้ช่วยบอกเสริมด้วยเน้อ

และจะให้ดีต้องมีเครื่องมือช่วยโกงการแต่งธีมอย่าง Web Developer (บล็อกผมมีสอน: ใช้ Web Developer แต่งบล็อกอย่างเทพ) หรือ Firebug ก็ได้ ตัวช่วยทั้งสองตัวนี้เป็น Add-on ของเว็บเบราเซอร์ Mozilla Firefox นะครับ เห็นไหมว่า..หมาไฟนอกจากจะดูเว็บได้มาตรฐานแล้ว ยังมีเครื่องมือช่วยแต่งธีมได้อีกต่างหาก

เมื่อมีทุกอย่างข้างต้นแล้วลุยเลยดีกว่า ผมจะเริ่มจากธีม Simple นะครับ จะสอนการแก้เฉพาะเล็กๆน้อยเอาไว้เป็นไอเดียกัน  อ่อ...ไม่ได้กั๊กหรอก ผมกลัวเอนทรี่จะยาวไป เพราะเพิ่งบอกว่าไม่ควรเขียนบล็อกยาวไปไม่ดี ไปในเอนทรี่ก่อนนี้ไง อิอิ

1.ตรวจของ! เริ่มจากการดาวน์โหลดฟรีธีมมาก่อน แล้วก็แตกไฟล์เพื่อดูของ

ภาพของไฟล์รูปที่โหลดมาฟรี

ลองวางแผนชั่วคร่าวๆ ว่าจะแปลงยังไงนะครับ ว่าตรงไหนเป็น header, content บางครั้งเราอาจจะต้องมีการสร้างภาพ (ในโฟโตชอป) กันบ้างเน้อ

2. เมื่อเห็นว่าของครบ ก็ขอจัดการกับ background ก่อนนะครับ

ภาพพื้นหลังที่ยัดลงไป

ก็เอาไฟล์ของที่เขาแจกมานั่นแหละ ฝากโฮสต์ไว้ แล้วก็ใช้ web developer หรือ firebug ดัดแปลง css แทนที่จะทำบน theme editor ของ exteen

#background {url(ที่ฝากไฟล์)}

 

3. ตามด้วย #header

ในส่วนนี้เราต้องสำรวจก่อนว่าไฟล์รูปที่จะนำมาทำเป็น header  มีขนาดเท่าไหร่ จากที่เขาแจกมามีความกว้าง 980px สูง 340px เราก็ต้องแก้ css ขยายบล็อกรอก่อนเลย

#page{
    margin:auto;
    text-align:left;
    width:1000px;
}

#header, #neck, #belly, #leg, #footer{
    float:left;
    width:1000px;
}

 

และก็แก้ #header  ต่อ

#header{
    background:url(ที่ฝากไฟล์ header);
    margin-left:5px;
    padding:0px;
    width:990px;
    height:340px;}

และก็ซ่อน #coverimage ด้วยนะ

#coverimage{
    background:transparent;
}

Header ที่แก้แล้ว

ส่วน h1 กับ h2 ผมซ่อนไว้ก่อน เพราะจะแปลงเลย์เอาท์ก่อน ซ่อนด้วยการแทรก display:none ไปก่อนแล้วค่อยมาแก้ตอนหลัง

4. ปรับ #neck ในส่วนนี้ผมก็หาทางลงนานอยู่เหมือนกันครับ เพราะมันประกบกันไม่สนิทสักที บร๊ะ.. ก็เลยถึงบางอ้อว่าเขาแยกเป็นสองส่วน ด้วยความขี้เกียจปรับposition ผมเลยเอารูปที่เขาให้ฟรีมาประกบกันซะเลย

#neck{
    background:url(ที่ฝากไฟล์ neck) top no-repeat;
    margin-left:5px;
    width:990px;
    height:75px;
}

 

5.ในส่วนของ belly ที่แปลว่า"พุง" ผมใช้ไฟล์ที่เขาแจกมาสองตัว ตัวแรกเป็นพื้นหลัง

#belly{
    background:url(ที่ฝากไฟล์ desk) repeat-y;     margin-left:5px;
    width:990px;
}

 

และ

#content{
    background:url(ที่ฝากไฟล์ postbg) repeat-y;
    display:inline;
    float:left;
    margin:0px 15px 0px 24px;
    padding:10px 15px;
    width:620px;
    /*Fix too large image makes content drop problem in IE*/
    overflow:visible !important;
    overflow:hidden;
}

 

ธีมนี้ต้องปรับ padding ให้ตัวหนังสืออยู่ในกรอบ postbg (พื้นสีขาวนั่นแหละ) โดยpostbg.jpg ตัวนี้ต้องทำซ้ำในแนวตั้ง  ลองมาดูรวบเลยนะครับ

ภาพโดยรวม1 

ส่วนเอนทรี่

 

ภาพโดยรวม2

ปรับ #sidebar นิดหน่อย

ภาพโดยรวม3

หน้าตาโดยรวม

 

จากwordpressdกลายเป็นธีมexteen

กลายเป็นธีมในบล็อก Exteen แล้ว

และส่วนที่เหลือก็ลองปรับจูนกันเองนะครับ หากถ้ามีเครื่องมือช่วยโกงธีมอย่าง Firebug หรือ Web Developer งานนี้ไม่ยากเลย เพราะผมก็ทำใน Firebug นะ อิอิ... เวลาแต่งธีมผมทำใน Firebug หรือ Web developer ก่อนเสมอครับ ตามแต่อารมณ์ แล้วค่อยเอา โค้ด css ที่แต่งใน Firebug หรือ Web developer ไปแปะใน Theme Editorทีเดียว... ดังนั้นใช้ Firefox กันเถอะ

 

และสำหรับธีมนี้ ตัวที่เกือบเต็ม? (ตอนผมตรวจก่อนปล่อยให้ลองใช้กัน ปรากฏว่าเจอบัคใน IE7 เพียบเลยต้องมานั่งแก้ ทั้งๆที่ส่องบนหมาไฟ กับ Opera ผ่านนะ เฮ้อ I hate IE..)

http://www.mediafire.com/?tx0zztxdrwo

  • ใช้งาน#sidebar ได้ข้างเดียว
  • ไม่รองรับการใส่ module ลงใน #leg  แต่ก็ปรับแก้ได้ไม่ยากครับ
  • มีกรอบให้รูปที่โพสด้วย

ใครลองเอาไปใช้แล้ว ถ้าชอบใจกด 1 ไม่ชอบใจ กด2 ส่งกันเยอะๆ ที่เบอร์....เย้ยย ไม่เกี่ยวนะ

และก่อนจบ.. ผมขอแถมท้ายแนวคิดในการออกแบบบล็อกให้อ่านกันดูเล่นๆนะครับ

Comment

Comment:

Tweet

โหสวยเวอร์ทุกอันเลย >[]<

#51 By H@'zelnuf on 2012-04-29 01:12

ขอบคุณมากเลยค่า เป็นประโยชน์มากจริง ๆ กำลังหัดทำอยู่ อิอิbig smile

#50 By JuicyJewelry on 2011-05-21 15:37

เมพจริง...

แต่ว่าไม่เข้าใจ =*= ทำงายย ยย ยย เนี่ย

#49 By baka pink / rinna desu on 2011-01-28 19:14

ขอหยิบไปใช้ ใน blog ใหม่นะครับ เข้ากันพอดีเลย big smile ขอบคุณมากครับ Hot!

#48 By st.GiZMo on 2010-07-21 15:17

เท่ดีนะครับ น่าลองทำจัง

#47 By Gclub (61.19.66.158) on 2010-07-10 17:04

Hot! Hot! Hot!

#46 By Yoneo on 2010-02-07 15:00

ดูแล้วน่าจะยาก ฝีมือไม่ถึง

#45 By พัดลมไอน้ำ (124.122.236.177) on 2010-01-30 19:56

ขอบคุณมากค่ะที่นำเคล็ดลับมาบอกกัน
จะลองทำดูซักตั้ง (แต่โลว์เทคอย่างเราจะทำได้แค่ไหนกันsad smile )

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

จะลองทำดูนะคะbig smile

Hot! Hot!

#44 By PorChan~support Yunho&Jaejoong on 2010-01-23 22:25

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

มาขอรับธีมไปลองใช้ดูด้วยค่ะ
เดี๋ยวจะพยายามลองทำของตัวเองดู

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

#43 By PurE on 2010-01-18 01:13

ว้าวน่าลองทำจังเลยค่ะ แต่แอบดูยากแฮะ
สุดยอด จะศึกษาดูนะคะ เป็น idol blog จริงๆค่ะ

#41 By Botany-[ KU ] on 2009-08-28 16:59

ขอบคุณสำหรับวิธีการขั้นเทพครับ

... แมพขิงๆ

#40 By Darkmatter on 2009-05-27 18:55

เพิ่งเล่น Exteen ค่ะ จะค่อยๆศึกษาดูนะคะ

#39 By Ranz on 2009-04-25 23:27

- -* สูบโลด

#38 By ลูกชิ้น on 2009-03-24 23:04

น่าลอง

#37 By pla on 2009-03-19 16:47

ขอบคุณมากครับที่สร้างธีมสวยๆ ให้ผู้ยากไร้(ปัญญา) อย่างผมได้หยิบยืมนำไปใช้

มันแหล่มมากเลยครับ แล้วก็ขอบคุณมากครับที่ไปเยี่ยมเป็นเกียรติแก่บล๊อคมากเลย อิอิ ตกใจเลยไม่นึกว่าคนดังจะมาดู big smile question Hot! Hot! Hot! Hot! Hot!

#36 By Kuzaa on 2009-01-25 14:03

เจ๋งเลยค่ะ ถูกใจจริงๆHot!

#35 By (^_^ ) (^_^) on 2008-09-23 08:29

ยังทำไมถนัดมึนมากมาย

#34 By anakmansatrakskul on 2008-09-21 15:24

ของฟรีก็มีในโลก เย่ !!
Hot!
น่าใช้มากเลย เข้าใจดีอย่างแรงsad smile
ไอ้นี่ผมตัวเองไม่เก่งทำสร้างธีม

#32 By eak48 on 2008-09-21 14:39

ทำท่าเกือบจะเข้าใจแล้วค่ะ..
แต่เฮ้อ..

สงสารหัวตัวเองจัง อยากทำได้มั่งง่ะ sad smile

#31 By PunPrai on 2008-09-21 03:49

สาระอีกแล้ว มารออ่านเรื่อยๆครับ
รู้จักcss เพราะบล็อกนี้นี่แหละ ขอบคุณมากครับbig smile

#30 By ۞тнαιgrαff۞™ on 2008-09-20 17:58

เก่งจริงๆ Hot!

#28 By หนึ่ง on 2008-09-20 01:52

ขอเข้าไปสำรวจธีมใน Wordpress ก่อน เดี๋ยวเอามาลอก เอ๊ย เอามาเป็นแนวทาง อิอิ ขอบคุณสำหรับคำแนะนำค่ะ open-mounthed smile

คราวนี้ไม่มีน้องอ้อย question Hot!
แบบที่ 2 คุ้นๆ ...
อย่างนี้นี่เค้าเรียกแนวอะไรเหรอคะ? สงสัยมานานแล้ว O_O"

#26 By หนูพุก on 2008-09-20 00:38

น่าสนใจดีแฮะ surprised smile

เดี๋ยวลองนั่งงมดีกว่า ...

#25 By Cat dreams wanna fly. on 2008-09-19 22:28

ถ้าสอบเสร็จแล้ว
เดี๋ยวจะลองทำดูบ้างนะค่ะ
น่าสนใจดีค่ะHot!

#24 By ~memay~ on 2008-09-19 22:10

Hot! exteen น่าจะมีระบบให้ ชาว exteen ทำธีมแจกจ่ายผ่านระบบกลางเลยนะครับ ท่าทางจะสนุกน่าดู

หรือไม่ก็มีระบบให้นำธีม Wordpress มาใช้ได้ทันที คงเล่นกันเยอะขึ้นแน่เลย

#23 By manop on 2008-09-19 22:01

ขอบคุณค่ะ
เมื่อมีกำลัง+เวลา คงจะได้ลองทำดูบ้าง

บลอกสวยมากค่ะdouble wink
Hot! Hot! Hot!

#22 By fontis on 2008-09-19 21:46

Hot! พยายามศึกษาอยู่ค่ะ ไม่เก่งซะที sad smile

#21 By Lily Pixel on 2008-09-19 21:43

อยากทำบ้างจังไม่ว่างอ่า เดี๋ยวรอเถอะว่างแล้วจะมาลุยบ้าง หุหุ


ขอบคุณสำหรับความรู้ด้านตกแต่งธีมครับ

#20 By • OxyGenYoYo • on 2008-09-19 21:41

เห็นแล้วอยากเปลี่ยนบ้าง big smile

#19 By ไอ้แป้น : i-phan on 2008-09-19 21:35

เจ๋งมากครับ big smile

#18 By ทิว แอด ไฟน์ on 2008-09-19 21:20

น่าลองopen-mounthed smile

#17 By Arun Liz on 2008-09-19 19:47

เสาร์-อาทิตย์นี้ถ้าไม่ขี้เกียจ ลองทำดูมั่งดีกว่า big smile

#16 By Googigg on 2008-09-19 19:08

Hot! เราพยายามลอก อยู่ไม่สําเร็จสักที่ พอหงุดหงิดแล้วก็เลิกพอจะมาเริ่มทําต่อก็sad smile ก็ลืม ว่าทําไปถึงไหน
อยากจะแยก sidebar ออกมา ทําไม่ได้ซักที กลุ้ม

#15 By Pink clouds on 2008-09-19 17:18

โอ้ว มันยอดมากHot!

#14 By Meowzilla Zilla on 2008-09-19 16:34

ชอบอันแรกกก

#13 By (^_^)/nana on 2008-09-19 16:03

ตรง neck ผมใช้วิธีการสร้างภาพครับ แปะภาพที่ยำให้ดูกัน
http://img391.imageshack.us/img391/5791/neckeditob0.jpg

ส่วนกล่องคอมเมนต์ยังไม่ได้แตะ ก็เลยไม่เอามาโชว์
ทำเสร็จเมื่อไหร่ คงจะปล่อยให้เอาไปใช้กันนะครับ

#12 By palermos on 2008-09-19 15:45

น่าจะอัพก่อนหน้านี้นะคะsad smile เพราะก็ก๊อปเขามาเหมือนกันกว่าจะทำเสร็จเล่นเอามึน รู้งี้รอเอนทรีนี้ก่อนก็ดีจะได้ไม่ต้องมานั่งแกะเอง อิอิ

ส่วนตรง neck งมอยู่นานๆๆๆ ก็เลยโมโหตัดมันออกซะเลยไม่ต้องใช้

#11 By ::housewife:: on 2008-09-19 15:17

สว่นตัวผมรู้สึกว่า
แค่แก้ไขแบบธรรมดาก็ยากแล้ว อิอิbig smile
cry หน้าตาไฮโซมากๆ!! /ฮา

#9 By Airin on 2008-09-19 10:54

Hot! มานั่งศึกษา surprised smile

#8 By Lily Pixel on 2008-09-19 10:50

โอ้ว แจ่มมากค่ะ จะลองไปทำดูน่ะค่ะ big smile Hot!
ธีมสวยสุดยอด!!
คารวะสองจอก!!
ว่างๆต้องมานั่งทำมั่ง
ขอบคุณที่เอามาลงให้ชมกันนะคะ

#6 By YUUTSUKI ]] on 2008-09-19 08:35

Hot! ถูกใจมาก

แต่มีเรื่องจะบอกว่าใช้ไอ้ตัว Web Developer กะ Firebug ไม่เป็นเคยลองเองมั่วๆ แล้วมันก็มั่ว sad smile

จะกลับไปอ่านที่สอนอีกรอบ sad smile cry

#5 By ตุ้มเป๊ะ on 2008-09-19 08:32

น่าลองมาทำจังconfused smile

Hot! Hot!

#4 By S.Sasi on 2008-09-19 08:06

เจ๋ง ๆ แปะโป้งไว้ก่อนครับ อ่านผ่านๆแล้ว เดี๋ยวสอบเสร็จ จะมาศึกษาอย่างละเอียดครับ Hot!

#3 By เจ้าชายน้อย on 2008-09-19 08:02

นะ...น่าใช้่มากๆเลยค่ะ!!
การทำธีมสวยๆดีๆ ก็ไม่ใช้เรื่องยากอะไรเนอะsad smile

#2 By on 2008-09-19 07:35

โอ้วว น่าใช้มากๆเลยค่ะ ไว้จะลองทำดู ถึงแม้มันจะดูยากก็ตามที ขอบคุณค่า

#1 By aisawan (80.218.112.57) on 2008-09-19 06:54