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

 

 

 

1. เริ่มด้วยการออกแบบธีมก่อนนะครับ สำหรับธีมของผม ผมออกแบบโดยมีความกว้างที่ 870 พิกเซล คือเพิ่มความกว้างให้มากขึ้นกว่าเดิมที่มัลติพลายให้มา จะทำให้แสดงรูปภาพแนวนอนได้ 3 อัน แบบของผมครับ





2. เมื่อออกแบบเสร็จแล้ว ก็เริ่มตัดภาพกันได้เลยครับ ก็ลากเส้นสไลด์มาแบ่งเป็นส่วนๆ ตามภาพเลยครับ จากนั้นก็ตัดด้วยมีดหมอ อิๆ ในภาพเห็นเปล่าครับ แต่ผมถนัดใช้ Selection มากกว่าครับ โดยเลือกส่วนที่ต้องการแล้วก็ Edit > Copy Merged ก็ทำได้เหมือนมีดหมอเช่นกันครับ


3. จำนวนภาพที่ได้ ก็จะได้ 5 อันตามที่ผมพิมพ์ไว้นะครับ ส่วนที่เป็นปัญหาที่สุดสำหรับการนำไปใช้ที่เพื่อนๆ ถามกันคือการทำพื้นหลัง  เนื่องจากพื้นหลังมีการไล่เฉดสี การใส่พื้นหลังจึงต้องใช้คำสั่งพิเศษกว่าปกติหน่อยครับ มาดูกันเลยครับ

พื้นหลังก็คือคำสั่งตรง


body {

          background: url(รูปภาพ) fixed repeat top center;
          background-color:#FFFFFF; 
       }

พื้นหลังเราตัดให้มีความกว้าง 1 พิกเซลก็พอครับ ความสูงให้สูงจนสุดเฉดสีที่ทำการไล่เฉดครับ แล้วตรวจดูว่าสีสุดท้ายที่ปลายพื้นหลังด้านล่างนะครับเป็นสีอะไร ก็เอามาใส่ในบรรทัด background-color:#FFFFFF; นี้นะครับ

 

สงสัยตรงไหนถามเข้ามาได้เลยนะครับ......
ขอบคุณทุกๆ คนที่ชอบธีมของผมนะครับ..


56 CommentsChronological   Reverse   Threaded
radanaka wrote on Feb 4
คุงค๊า ที่เอาความรู้มาแบ่งกัน
miyasubaru wrote on Feb 4
ขอบคุณคับ
kotchaporn wrote on Feb 4
ขอบคุณมากค่ะ ว่าแต่จะทำได้ป่าวน๊า..เด๋วลองดูค่ะ อิอิ
lion1st wrote on Feb 4
งง อะอิอิ
guntaro wrote on Feb 4
ธีมสวยมากกกกกกกกกกจ๊ะ...แต่รูปประกอบมันไม่โชว์เด้อ..
neomercy wrote on Feb 4
ขอเรื่องพื้นหลังโดยละเอียดอีกรอบเด้อ

อ้อ! อักอย่าง Footer น่ะครับ ที่มีดอกไม้แลบออกมาน่ะ
ก็แค่สร้างไฟล์ .png ก็พอรึปล่าวครับ
jajazy wrote on Feb 4
อิอิสวยเชียวค่ะ
isari9 wrote on Feb 4
ขอบคุณค่ะ เดี๋ยวลองเล่นมั่ง
samarn wrote on Feb 4
ขอเรื่องพื้นหลังโดยละเอียดอีกรอบเด้อ

อ้อ! อักอย่าง Footer น่ะครับ ที่มีดอกไม้แลบออกมาน่ะ
ก็แค่สร้างไฟล์ .png ก็พอรึปล่าวครับ
ถ้าดูดีๆ จะเห็นเส้นสไลด์ที่ผมลากไว้อยู่ด้านบนดอกไม้ครับ คือ ผมตัดภาพ footer แค่ชิ้นเดียวครับตามเส้นเลยครับ
filmgus wrote on Feb 4
ว้าว สวยจังค่ะ
neomercy wrote on Feb 4
samarn said
ถ้าดูดีๆ จะเห็นเส้นสไลด์ที่ผมลากไว้อยู่ด้านบนดอกไม้ครับ คือ ผมตัดภาพ footer แค่ชิ้นเดียวครับตามเส้นเลยครับ
เห็นครับ แต่สงสัยว่า ภาพที่ใช้ เป็น dot อะไรครับ
nutty07k wrote on Feb 4
ต้องลองซะแล้วครับ..สวยดี
neomercy wrote on Feb 5, edited on Feb 5
ว่าแล้วก็ถามอีกเรื่องนะครับ




samarn wrote on Feb 5
เห็นครับ แต่สงสัยว่า ภาพที่ใช้ เป็น dot อะไรครับ
ตรงไหนครับ
neomercy wrote on Feb 5
samarn said
ตรงไหนครับ
ภาพที่ footer น่ะครับ เป็น file สกุลอะไรครับ Jpeg รึปล่าว
หรือว่า เป็น png
sunanya wrote on Feb 5
เดี๋ยวจะลองดู ขอบคุณครับ
samarn wrote on Feb 5
ว่าแล้วก็ถามอีกเรื่องนะครับ




แก้ตรงนี้นะครับ



div#subnavc {
padding: 0px 0 0 0;
background-color: none;
border: none;
width: 870px;
background: url(MENU) no-repeat bottom center;
position: absolute;
margin-top: 82px;
margin-left: 13px;
}



ขนาดตัวอักษี หรือสีแก้ที่นี้ครับ



a.topt, a:visited.topt, a:link.topt {
line-height: 1.2em;
display: block;
float: left;
height: auto;
text-align: center;
background: none;
color: #82C75D;
padding: 1px 0px 1px 7px;
font-weight: bold;
width: auto;
border: none;
}
a.toptsel, a:visited.toptsel, a:link.toptsel {
line-height: 1.2em;
display: block;
float: left;
height: auto;
text-align: center;
background: none;
font-weight: bold;
color: #43AD96;
background: none;
/*background-color: #FF3399;*/
border: none;
padding: 1px 0px 1px 7px;
width: auto;
}
neomercy wrote on Feb 5
แจ่ม! ขอบคุณครับ เดี๋ยวจะลองดู

อ้อ! ว่าแต่พอจะแนะนำว่าจะไปหา CSS code ต่างๆได้ที่ไหนมั้ยครับ
แบบพวก...
บนสุด ใช้ code นี้นะ
ต่อมา แก้ด้วย code นี้
ตัวอักษรในกรอบนี้ ใช้ codeนี้
...
...
...

แบบนี้น่ะครับ มีมั้ยครับ ^ ^
monokung wrote on Feb 5
ขอบคุนคร่า
thejojobaoil wrote on Feb 5
ใจดีเจงๆวุ้ยยยย
ขอบคุงค๊าบบ อิอิ
samarn wrote on Feb 5
แจ่ม! ขอบคุณครับ เดี๋ยวจะลองดู

อ้อ! ว่าแต่พอจะแนะนำว่าจะไปหา CSS code ต่างๆได้ที่ไหนมั้ยครับ
แบบพวก...
บนสุด ใช้ code นี้นะ
ต่อมา แก้ด้วย code นี้
ตัวอักษรในกรอบนี้ ใช้ codeนี้
...
...
...

แบบนี้น่ะครับ มีมั้ยครับ ^ ^
เข้าไปโหลดธีม แลเวลองดู CSS นะครับ

http://samarn.multiply.com/photos/album/76/Free_Multiply_Theme
mytj wrote on Feb 5
มีสอนทำด้วยขอบคุณคร้าบบ
neomercy wrote on Feb 5
samarn said
เข้าไปโหลดธีม แลเวลองดู CSS นะครับ

http://samarn.multiply.com/photos/album/76/Free_Multiply_Theme
จริงๆก็ทำแบบนี้อยู่แหละครับ
ปรับ CSS แล้วดูว่า มันของอะไร
แต่อยากทราบว่า จะมีแบบ อธิบาย code ต่อ code บ้างมั้ย ^ ^
terkira wrote on Feb 5
จะลองทำดูนะคะ ขอบคุณค่ะ
neomercy wrote on Feb 5
ตอนนี้ย้ายตำแหน่งบาร์เมนูได้แล้วครับ
แต่จริงๆ อยากให้ไม่มีแถบสีดำเลย ให้เหลือไว้แต่ตัวหนังสือ
ต้องทำไงครับ? ^ ^
hari2003 wrote on Feb 5
ขอลองทำบ้างนะครับ ขอบคุณมากครับ
samarn wrote on Feb 5
ตอนนี้ย้ายตำแหน่งบาร์เมนูได้แล้วครับ
แต่จริงๆ อยากให้ไม่มีแถบสีดำเลย ให้เหลือไว้แต่ตัวหนังสือ
ต้องทำไงครับ? ^ ^
padding: 0px 0 0 0;
background-color: none;
beautycats wrote on Feb 5
ยากจัง - -*
neomercy wrote on Feb 5
samarn said
padding: 0px 0 0 0;
background-color: none;
ไม่หายครับ -__-!!
adnagus wrote on Feb 5
ขอบคุณสำหรับความรู้ที่แบ่งปัน
ขอบคุณค่ะ
sl12884 wrote on Feb 5
ว้าววววว ดีเลยค่ะ เดี๋ยวไว้ว่างๆจะลองทำดูบ้างนะคะ :)

ขอบคุณๆ
neomercy wrote on Feb 5
หายแล้วครับ แต่หายเฉพาะส่วนที่ไม่มีตัวหนังสือ
มันทำเป็นตัวหนังสือลอยๆไม่ได้เหรอครับ T___T
zeryu69 wrote on Feb 5
ขบอคุณค่ะ จะลองทำดูนะคะ
klimaechen wrote on Feb 6
เริ่ดสะแมนแตน เด๋ววันนี้กลับไปลองที่บ้านดีก่า

ขอบคุณมากๆค่า
mugust wrote on Feb 6
ขอลองทำมั่ง
aorengja wrote on Feb 7
ขอบคุณมากค่ะ แต่ท่าทางจะยากเกินไปสำหรับเรา แต่ธีมอันล่าสุดที่ใช้ในบ้านตอนนี้สวยมากมั่กเลยอะคะ อยากนำไปใช้ที่บ้านมั่งจังเลยอะคะ เก่งจังค่ะ ^_^
itassetmanagement wrote on Feb 8
น่าลองจัง
jipata03 wrote on Feb 8
มาอ่าน ผมพอเห็นภาษาปะกิต ก็ละลายแว้ววว
แต่มาศึกษาครับ ชอบ และขอบคุณครับ
jipata03 wrote on Feb 8
ฝากดูหน้าบ้านผมหน่อยดิครับ
จะลดแถบลงนะครับ ผมเดาๆๆ ยังลากมันไม่ลงครับ
cherryjuicy wrote on Feb 9
ตามมาเก็บความรู้งับ.....แต่ยางทามม่ายเปงอยู่ดี...อิอิ >_<
eisluv wrote on Feb 9
ยอดๆๆๆ
kadejung wrote on Feb 11
เดี๋ยวลองทำดูบ้าง เซฟก่อน
jackkorat wrote on Feb 12
ใจดีจริงๆเลย ขอบคุณครับ
cim077 wrote on Feb 12
เยี่ยมมากเลยครับ แต่ถ้าจะกรุณา ถ้าผมขอ .psd จะน่าเกียจไหมครับพี่ เพราะลองทำแล้ว มันไม่ได้ขนาด แบบนี้ ซักที อ่ะครับ
samarn wrote on Feb 13
cim077 said
เยี่ยมมากเลยครับ แต่ถ้าจะกรุณา ถ้าผมขอ .psd จะน่าเกียจไหมครับพี่ เพราะลองทำแล้ว มันไม่ได้ขนาด แบบนี้ ซักที อ่ะครับ
จะเอา .psd ธีมไหนครับ...
cim077 wrote on Feb 13
samarn said

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

 

 

 

1. เริ่มด้วยการออกแบบธีมก่อนนะครับ สำหรับธีมของผม ผมออกแบบโดยมีความกว้างที่ 870 พิกเซล คือเพิ่มความกว้างให้มากขึ้นกว่าเดิมที่มัลติพลายให้มา จะทำให้แสดงรูปภาพแนวนอนได้ 3 อัน แบบของผมครับ





2. เมื่อออกแบบเสร็จแล้ว ก็เริ่มตัดภาพกันได้เลยครับ ก็ลากเส้นสไลด์มาแบ่งเป็นส่วนๆ ตามภาพเลยครับ จากนั้นก็ตัดด้วยมีดหมอ อิๆ ในภาพเห็นเปล่าครับ แต่ผมถนัดใช้ Selection มากกว่าครับ โดยเลือกส่วนที่ต้องการแล้วก็ Edit > Copy Merged ก็ทำได้เหมือนมีดหมอเช่นกันครับ


3. จำนวนภาพที่ได้ ก็จะได้ 5 อันตามที่ผมพิมพ์ไว้นะครับ ส่วนที่เป็นปัญหาที่สุดสำหรับการนำไปใช้ที่เพื่อนๆ ถามกันคือการทำพื้นหลัง  เนื่องจากพื้นหลังมีการไล่เฉดสี การใส่พื้นหลังจึงต้องใช้คำสั่งพิเศษกว่าปกติหน่อยครับ มาดูกันเลยครับ

พื้นหลังก็คือคำสั่งตรง


body {

          background: url(รูปภาพ) fixed repeat top center;
          background-color:#FFFFFF; 
       }

พื้นหลังเราตัดให้มีความกว้าง 1 พิกเซลก็พอครับ ความสูงให้สูงจนสุดเฉดสีที่ทำการไล่เฉดครับ แล้วตรวจดูว่าสีสุดท้ายที่ปลายพื้นหลังด้านล่างนะครับเป็นสีอะไร ก็เอามาใส่ในบรรทัด background-color:#FFFFFF; นี้นะครับ

 

สงสัยตรงไหนถามเข้ามาได้เลยนะครับ......
ขอบคุณทุกๆ คนที่ชอบธีมของผมนะครับ..

ธีมไหนก็ได้ครับ แต่ถ้าได้ธีม boykung ก็ดีครับ ขอบคุณมากครับผม
samarn wrote on Feb 16
ติดลิงค์ให้โหลดแล้วครับ แต่ถ้าเป็นธีม Boykung คงมะได้ทำเฉพาะอิๆ...
http://boykung.multiply.com
tuckiez wrote on Feb 18
อยากได้ ธีมของตัวเองบ้างงง

จะลองทำดูค่ะ..

ยากเหมือนกานนะเนี่ยยย T___T
photomann wrote on Feb 18
แจ๋วครับ ว่างจะลองดู
ninnunun wrote on Feb 27
งง อ่ะครับ ไม่ค่อยเข้าใจ มาขอ *.psd อันไหนก้ได้สักอันครับ

ขอบคุณครับ
mumew wrote on Mar 10
บ้านนี้เก่งจังเลยค่ะ ขอบคุณน๊า
ranunanetc3 wrote on May 16
พอตัดเสดแล้วทำไงต่ออ่ะคะ แล้วจะเอามาใช้ยังไง save ไรไง งงอ่ะคะ ช่วยอธบายให้ละเอียดหน่อยได้มะคะ อยากทำเป็นมากมายคะ
samarn wrote on May 16
พอตัดเสดแล้วทำไงต่ออ่ะคะ แล้วจะเอามาใช้ยังไง save ไรไง งงอ่ะคะ ช่วยอธบายให้ละเอียดหน่อยได้มะคะ อยากทำเป็นมากมายคะ
พอตัดเสร็จแล้วก้เขียน CSS ดูตัวอย่างใน blog เก่าๆ หรือไปหัวข้อฟรีธีมก็ได้ครับ
thisismangpong wrote on Jun 21
สงสัยมาตั้งนาน ขอบคุณนะคะ
oatite wrote on Jun 24
พี่ครับ ผมลองทำแล้ว สงสัยนิดนึงครับว่า เวลากด custom my site ก็จะมีกรอบขึ้นมาให้ move หรือ edit แต่มันเล็กไปน่ะครับ แบบนี้ผมต้องแก้ไขยังไงครับ อยากขยาย ให้มันกว้างขึ้นน่ะครับ edit theme
billangel007 wrote on Jul 3
Cool
Add a Comment
   
© 2008 Multiply, Inc.    About · Blog · Terms · Privacy · Corp Info · Contact Us · Help