สวัสดีครับพ่อแม่พี่น้อง
     เหอะๆๆๆ หลังจากที่ได้ไปหลอกลวง และมอมเมาชาวบ้านในงานของนิตยสาร  Foto Info ที่ผ่านมา ผมเองได้เผลอให้คำมั่นว่าจะเขียนบทความโน่นนี่หลายอย่างมากมาย  เหอะๆๆ รวมทั้งเรื่อง css ด้วย.. แต่ด้วยความรู้เรื่อง css เท่าหางอึ่ง ไม่รู้เหมือนกันว่าจะเขียนได้ถูกต้องตามหลักมาตรฐานของ W3C ไหม๊ เอาเป็นว่าถ้าเซียน css ผ่านไปผ่านมาก็รบกวนช่วยชี้แนะด้วยก็จักขอบพระคุณมากมายก่ายกองเลยขอรับ บทความของผมคงไม่ตรงตามมาตรฐานเด๊ะๆ แต่รับรองผลครับ ไม่พอใจ..เรื่องอะไรจะคืนเงิน อิอิ... แต่ผมก็หาทางออกให้ตัวเองไว้เเล้วว่าจะเขียนยังไงให้เซียน css ด่าผมน้อยที่สุด ผมก็เลยจะตั้งชื่อหัวข้อว่า "css สำหรับการตกแต่งเว็บบล็อก" อิอิอิ .. คือ เอาแค่มันเเสดงผลได้ก็พอว่ายังงั้นเลยทีเดียว

     และก่อนที่ผมจะเขียนบทความต่างๆที่เกี่ยวกับ css ในอนาคตกาลอันใกลนี้ ผมจะขอใช้บล็อกนี้เป็น into. ปูพื้นฐานความเข้าใจกันแบบง่ายๆสบายๆสไตล์ซิมเปิ้ลซะก่อน  เพื่อความสบายของทั้งสองฝ่ายในภายภาคหน้า ของทั้งผมคนเขียน และคุณคนอ่าน...
     อีกนิดนึง  ในบทความนี้ ใช้ได้กับเว็บไซต์ที่ให้บริการ จำพวก Social Network ทั้งหลายทั้งแหล่ะได้เกือบหมด เช่น  Multiply , Hi5 , WordPress , Exteen , Myspace เป็นต้น เว็บเหล่านี้จะให้เราไปสมัครสมาชิกแล้วก็จะให้พื้นที่เว็บแก่เรา รวมทั้ง sub domain เป็น ชื่อเราตามด้วยเว็็บนั้นๆ  ส่วนหลักการทำงาน,โครงสร้าง และการให้บริการจะคล้ายๆกัน  อาจจะแตกต่างก็แค่ขั้นตอนและรูปแบบที่จะกำหนดให้เราปรับแต่งเว็บของเรา


เริ่มกันเถอะ...

- css คืออะไร .. css ไม่ใช่รองเท้านะครับ อย่าไปจำสับสนกับ scs นะพี่น้อง ฮิฮิฮิ....แต่ความหมายของมันก็ช่างมันเหอะเนอะ ไม่รู้จะรู้ไปทำไมนะจริงๆอ่ะ  5555+

โอเคๆๆๆงั้นนิดนึงละกันนะครับ....

    + ความหมายแบบปวดกะบาล :  CSS ย่อมาจากคำว่า Cascading Style Sheets ความหมายภาษาไทยผมยังไม่เคยเจอความหมายที่โดนใจเลย เอาเป็นว่าใครเก่งภาษาอังกฤษก็ไปดูกับ wikpediaได้ที่ ความหมายของ css

    + ความหมายแบบสบายหน่อย (เข้าใจหรือไม่ก็อีกเรื่องนึง เพราะผมจำกัดความเอง อิอิ) : css เป็นโค๊ดที่จะไปผนึกกำลังกับ (x)Html* เพื่อทำให้เว็บของเรางดงามตระการตา มหึมา อร้าอะร่าง.... เพราะฉะนั้นเนี่ยถ้ามองอีกทางนึงก็จะได้ว่า  ถ้าเราเขียน css ไม่สัมพันธ์กับ (x)Html* ที่มีอยู่ก็ไร้ความหมาย ....


Note!!
     (x)Html* ผมหมายถึง ทั้ง xhtml และ html เลยไง 5555+  จริงๆเเล้วเนี่ยควรจะเลือกอย่างใดอย่างนึ่ง แต่มัลติพลายของพวกเราช่างวิเศษล้ำ ใช้มันทั้งคู่เลย แล้ว xhtml ต่างกับ html ยังไง  ผมไม่ใช่ผู้รู้จริง ดังนั้น ดังเดิม ตามไปดูที่ wikpediaได้ที่ ความหมายของ XHTML ผมเลือกที่จะไม่อธิบาย เพราะเดี๋ยวมันยาวเกินไป ครับ แห่ะๆๆ อ่าาา...และต่อไปนี้ผมจะขอเขียนเป็น XHTML ละกันนะครับ

    คือเว็บเราเนี่ย(มัลติพลายเนี่ย) ยกตัวอย่างง่ายๆคือหน้าแรกของเว็บเรา(Homepage) รู้ไหม๊ว่ามันมีโค๊ดภาษาอะไรบ้าง เยอะแยะครับ หลักๆก็จะมี XHTML, Java Script , AJAX และ css  พระเอกของเราในวันนี้ แต่จริงๆแล้ว css เป็นแค่ตัวประกอบดีดีนี่เอง เพราะถ้าไม่มี css เว็บก็สามารถเกิดขึ้นได้ เพียงแต่จะไม่งามงดก็เท่านั้น
    ผมจะขออนุญาตยกตัวอย่างความสัมพันธ์อันดีของพวกเค้าเหล่านี้ดังต่อไปนี้ครับ (ความคาดหวังว่าจะเข้าใจ: 50%) ผมจะเปรียบว่า.....เว็บเราคือตัวเรานี่แหล่ะครับ  ส่วน XHTML เปรียบดังอวัยวะต่างๆ ไม่ว่าจะเป็น แขน ขา ไหปลาร้า ปาก หู ฯลฯ และ CSS คือ เสื้อผ้าเครื่องแต่งกายที่จำเป็น เช่น เสื้อ กางเกง (ไม่มี 2 อย่างนี้ก็น่าจะลำบากพอแล้วนะผมว่า) ส่วนพวก  Java Script , AJAX และอื่นๆ ก็เหมือนเครื่องประดับ นาฬิกา หมวก กำไร เป็นต้น  ..... จะเห็นว่า

        - ถ้าคุณมีเสื้อผ้ากางเกง แต่คุณไม่มีอวัยวะ  ไม่มีแขนไว้ใส่เสื้อ ไม่มีขาไว้ใส่กางเกง ... ผมว่าคุณไม่น่าจะใช่คนนะ ..น่าจะเป็นหุ่นไล่กามากกว่า...(ความหมายคือ : เว็บคุณจะมีแค่ css ไม่ได้ คุณต้องมี XHTML ด้วย ฉันใดก็ฉันนั้น...)

        - ถึงคุณจะมีแค่อวัยวะ ไม่ใส่เสื้อผ้าเครื่องประดับ ... คุณก็ยังเป็นคนได้... แต่คงอุจาดตาไม่น่ามอง (ความหมายคือ : มีแค่ XHTML ก็เป็นเว็บได้  แต่เว็บคุณคงจะจืดๆ ไม่ชวนให้น่ามองเท่าใดนัก ฉันใดก็ฉันนั้น)

        - ถ้าคุณมีอวัยวะครบ มีเสื้อผ้าใส่ แถมยังมี Accessory ครบครัน เต็มตัว แบบนี้ล่ะครับ งามงดสะกดสายตา (ความหมายคือ : ถ้าเว็บคุณมีครบทุกอย่าง เว็บคุณก็จะสวยงามเหมือนมัลติพลายของพวกเรานี้แล แต่ติดอยู่อย่างก็ตรงที่เอา XHTML มารวมกับ html นี่แหล่ะ ผสมได้ไม่มีใครด่า แต่แค่ไม่ถูกหลักการ  ฉันใดก็ฉันนั้น )




*** ภาพข้างล่างนี่คือ ภาพของเว็บผมปัจจุบัน มีทั้ง HTML+CSS+และอื่นๆ







***ส่วนภาพข้างล่างนี่คือ ภาพของเว็บผมเวลาไมได้่ใส่เสื้อผ้า เอ๊ย ไม่มี CSS ครับ...




    แล้วยังไงครับทีนี้.....เค้าอนุญาตให้เราทำไรได้บ้าง?? ส่วนใหญ่หรือแทบทั้งหมดเลยเนี่ย เค้าจะให้เราแก้ไข หรือปรับปรุงได้เฉพาะ CSS ครับ  ถ้าเป็นมัลติพลายก็คือกล่อง css ที่เค้าให้มานั่นแหล่ะครับ เราก็มีหน้าที่สรรหาโค้ด css ไปแปะให้ถูกต้อง  ส่วน XHTML ใจจริงเค้าไม่อยากให้เราไปยุ่งหรอกครับ เพราะมันเป็นเรื่องของโครงสร้าง และ Layout ของเว็บ ถ้าเราไปยุ่งเดี๋ยวเว็บเค้าจะบูดๆเบี้ยวๆหรือพังไปในที่สุด แต่.. ก็ใช่ว่าเราจะเล่นกับ XHTML ไม่ได้เลย  โดยเฉพาะคนที่มีความรู้ความเข้าใจเกี่ยวกับ XHML  รับรองว่าต้องคันไม้คันมืออยากเล่นแน่ๆ ถึงจะไม่มีความรู้ แต่ถ้าอยากเล่นก็เล่นได้ครับ ถ้า copy อย่างถูกวิธี อิอิอิ...




- วิธี copy โค้ด CSS ชาวบ้านอย่างถูกวิธี
    ผมไม่สามารถบอกได้ว่า โค้ด css ที่ท่านไปเจอมา เจ้าของเค้าจะเขียนยังไง เจ้าของเค้าจะไป copy ใครมา ซึ่งหน้าตาของมันในตอนที่คุณพบ อาจจะมอมแมม ผิดเพี้ยน วางระเกะระกะ นานาลักษณะแตกต่างกันไป เช่น
    
    h3 {
        color: red;
        text-align: left;
        font-size: 8pt;
    }
    
หรือ

    h3 {color: red;text-align: left;font-size: 8pt;}

หรือ

    h3 {color: red;text-align: left;
font-size: 8pt;}

หรือ อื่นๆ

     ซึ่งทั้ง 3 ก้อนข้างบนมันก็ใช้ได้หมดแหล่ะ แต่อาจจะเว้นวรรคจัดระเบียบไม่สวยงามเท่านั้น เพราะอาจจะเกิดจากการ copy มาแล้ว วางไม่ดี มือไปโดยคีย์บอร์ด ง่วงนอนรีบ copy อะไรก็ว่าไป เพราะฉะนั้น ถ้าเรารู้ว่าอะไรเป็นอะไร(แบบคร่าวๆพอ) ก็จะสามารถ copy โค้ดได้อย่างสมบูรณ์ไม่ตกหล่น

วิธีสังเกตมีดังนี้ครับ
    *** ให้สังเกตปีกกาเปิดปิด {...} ผมจะให้มองเป็นก้อนๆนะครับโดยใช้ปีกกาเปิดปิดเป็นมีดอีโต้หั่นโค้ดเป็นส่วนๆ  เช่น

     h3 {color: red;text-align: left;font-size: 8pt;}
     body{
            color: black;
              }

     คำอธิบาย : ข้างบนนี่คือโค้ด 2 ชุด (เพราะมีปีกกาเปิด-ปิด 2 ชุดไงครับ) คนที่เเจกโค้ดเค้าจะบอกเองว่าโค้ดทั้ง 2 คือโค้ดเกี่ยวกับอะไร เอาไปแปะแล้วจะเกิดอะไรขึ้น  แต่บังเอิญว่าท่านอยากจะได้แค่ชุดเดียว สมมุติอยากได้ชุดล่าง(สีเขียว) 

     วิธี copy : เวลา copy ต้องเอามาให้หมดนะครับพี่น้อง ไม่ต้องไปสนใจว่าโค้ดมันเป็นยังไง(ถ้าไม่มีความรู้เกี่ยวกับ css อ่ะนะครับ) ขาดส่วนไหนไป แน่นอนว่าจะไม่แสดงผลดั่งใจทุกท่านแน่
         เอาหล่ะ  วิธี copy  ก็คือ copy เอา พร้อมด้วยโค้ดที่อยู่ในปีกกามาให้หมด + ก้อนที่อยู่หน้าปีกกาเปิดด้วย ครับ  แค่นี้เลยง่ายๆ  เวลาจะลบโค้ดชุดไหนทิ้งก็ใช้วิธีเลือกลบเหมือนวิธีเลือก copy นั้่นแหล่ะครับ



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


*** บทความทั้งหมดนี้ขอสงวนสิทธิ์ในการเผยเเพร่ก่อนได้รับอนุญาตครับ
ขอบคุณครับ
/ jojobaoil

Thanks พิเศษ(เพิ่มลูกชิ้น) :
    - www.thaicss.com

เห็นหลายท่านกระซิบบอกมาว่าอยากเลี้ยงสัตว์ในกล่อง comment เหมือนบ้านของผมบ้าง วันนี้ฤกษ์งามยามดีก็เลยมาแนะนำพิธีกรรมกัน


ขั้นตอน :
001 : ออกตามล่าหาบรรดาสรรพสัตว์ หรือจะเป็นตัวการ์ตูนอะไรก็ได้ เอาแบบเล็กๆนะครับผม(ถ้าตัวโตมากเดี๋ยวมันอึกอัดเพราะกล่อง comment ของพวกเราเล็กนิ๊ดเดียว) แล้วเอาที่อยู่ภาพนะ มาเพื่อใช้งาน(***วิธีเอาที่อยู่ของภาพคือ คลิกขวาที่ภาพนั้นเเล้วเลือก properties แล้วไป copy ที่อยู่ภาพตรง location)
    - ผมมีมาแนะนำอ่ะถ้าหากันไม่เจอมาทางนี้เลย
        01 : เจ้าลิงน้อย YoYo...(Emoticon)
        02 : กระต่ายน้อยขาแด๊น(Emoticon)
        03 : เจ้าหัวหอม...(Emoticon)
        04 : รวม Emoticon น้องหมาทั่วสารทิศ (emoticon)
        05 : รวม emo นู๋ใหญ่-นู๋น้อยเบบี้ออยทั่วทั้งโลกา
        06 : เจ้าหัวเห็ด(Emoticon)
        07 : รวม Emoticon ทั่วทั้งสากลโลกนี้ vol.001

    - แต่ถ้าคุณอยากได้ภาพที่คุณมีอยู่ในเครื่องคอมพิวเตอร์ของคุณเองก็ต้องเอาไฟล์ไปฝากก่อนนะครับ ไปที่นี่ก็ได้ http://imageshack.us/ หรือ http://upload.sanook.com ตอนที่คุณเอาไฟล์ไปฝาก เวลาจะเอาที่อยู่ของภาพมาใช้งานต้องเอาลิ้งที่เค้าเขียนว่า Direct link มาใช้นะครับ
    
002 : เปิดกล่อง css ของเว็บคุณขึ้นมา (คลิกนี่ก็ได้)
003 : Copy โค้ดข้างล่างนี้ไปแปะต่อท้ายโค้ดเก่าของคุณได้เลยครับ

textarea{  
        background: url('ที่อยู่ภาพ');   
        background-repeat:no-repeat;   
        background-position:bottom right;   
        background-attachment:inherit;
}

    *****แต่สำหรับใครที่ไม่อยากเข้าใจ css อะไรทั้งนั้น ประมาณว่าชั้นขี้เกียจอ่านวิธีของแก ชั้นจะเอาน้องหมาเลียกล่อง ก็ Copy โค้ดข้างล่างนี้เลยครับ

textarea{               background:url('http://widget.sanook.com/static_content/full/graphic/17f08d90f34541d63865ca7812de9b8f_1204127724.gif');    background-repeat:no-repeat;   
background-position:bottom right;   
background-attachment:inherit;}

ผลลัพธ์ก็เหมือนเจ้าตัวข้างล่างเนี่ยอ่ะขอรับ



โอเคร ติดตรงไหนถามได้ครับ
ขอบคุณครับ
/ JOJOBAOIL


+ : มีคนมาแอบดู :  ครั้ง
+ : บทความอื่นๆที่เกี่ยวกับ : วิธีตกแต่งมัลติพลาย | ของเล่นใส่มัลติพลาย | บาบ้า Themes | ข้อมูลเพิ่มเติมเกี่ยวกับการแต่งกล่อง comment
+ : ถามปัญหาอื่นๆทางนี้ครับ : คลิกนี่

* Tuzki Theme : เจ้ากระต่ายจอมป่วน

สวัสดีคับพ่อแม่พี่น้อง....วันนี้มี theme มาให้ลองใช้กันครับ..
ใครที่สนใจก็โหลดใช้กันได้ตามสะดวกนะฮะ....แต่ก่อนที่คิดจะเปลี่ยน กรุณาอ่านขั้นตอนให้ละเอียดก่อนนะ เดี๋ยวบ้านท่านจะพังเอา เหอะๆ...

สิ่งที่ท่านจะได้คือ..
1. Header เจ้า Tuzki ตามภาพด้านบน.. พร้อมบ้านที่หน้ากว้างงงงงงงงงงก่าเดิม อิอิ
2. กล่องคอมเม้นสุดเดิ้ล...

3. ระบบไอคอนด้านขวา ดังภาพข้างล่างนี้...

4. เอาชื่อเว็บทิ้งให้ด้วย...
5*. แถมๆๆๆๆๆ แถมบาร์ด้านบนสีดำด้วยอ่ะ...




เริ่มกันเลย..
01. ก่อนอื่นต้องบอกก่อนว่า Theme พื้นฐานที่เราจะใช้คือ shadow box นะครับ... เพราะฉะนั้น ก่อนคุณจะเอาโค้ดต่างๆเหล่านี้ไปแปะต้องเปลี่ยน Theme พื้นฐานก่อน ดังนี้...
ตั้งจิตอธิฐาน คิดตัดสินใจดีดีว่าจะใช้ theme นี้แน่ๆ....เมื่อคิดได้แล้ว กดเลย....รอจนโหลดเสร็จ แล้วปิด...
02. เปิดหน้าต่างแก้ไข css มา.... (กดนี่ได้)แล้ว โค้ดข้างล่างนี้.. มาวางใน กล่องข้อความในหน้าที่เปิดขึ้นมา
(จะให้ดี ลบโค้ดเก่าๆทิ้งไปก่อนนะครับ...หรือไม่ก็ก๊อบไปแปะไว้ในโปรแกรม notepad แล้ว save ไว้ในเครื่องของคุณก่อนก็ได้ เผื่ออยากเปลี่ยนกลับไปใช้ theme เดิมของท่าน...)
.......................................................................................................................................

div.owner_nav {border: none;
margin: 0 auto;
width: 870px;
border-bottom: none;
padding: 268px 0 0 0;
background: url(http://img520.imageshack.us/img520/8015/head001rt2.gif) no-repeat top left;
background-color: #c7c3ba;
}
div#page_start_wrapper {
width: 870px;
margin: 0 auto;
background: url(http://img225.imageshack.us/img225/2656/midpb6.jpg);
}
div#ownedfooterc {
background: url(http://img225.imageshack.us/img225/2656/midpb6.jpg);
width: 870px;
height: 40px;
margin: 0 auto;
}
body {
scrollbar-base-color:#000000;
background-color:#000000;
}
a.topt, a:visited.topt, a:link.topt {
line-height: 1.2em;
display: block;
float: left;
height: auto;
text-align: center;
background: none;
color: #686767;
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: #000000;
background: none;
/*background-color: #FF3399;*/
border: none;
padding: 1px 0px 1px 7px;
width: auto;
}
td.rail { border: none; }
textarea{
color: gray;
backround-color :#ffffff;
background: url(http://img186.imageshack.us/img186/308/bgmentvy6.gif);background-repeat:no-repeat;background-position:bottom right;background-attachment: inherit;
}
input{
background-color: #FFFFFF;
color:#666666;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
border: none;
border: dotted #E4E4E4 1px;
}
.itemsubsub {
padding-right: 10px;
}
h1{text-indent: -99999px;}
.header{
background-color: #000000;
border-bottom: 1px solid #595959;
}
.......................................................................................................................................
เสร็จเเล้ว กด Preview เพื่อดูตัวอย่างก่อนก็ได้.... ถ้าพอใจเเล้วก็กด save เลยครับ...



ok ครับ....
มีปัญหาตรงไหนทิ้งข้อความไว้เลยครับ...
หรือจะเข้าไปพูดคุยกันได้ที่ http://sawasdeemultiply.multiply.com/


ขอบคุณครับ
JOJOBAOIL
13.09.2007


+ มีคนมาแอบดู : ครั้ง

*เปลี่ยนสี Header Bar กันแม๊ะ..

เฮ๊ดสะเด้อบาร์ (Header Bar) ก็คือสิ่งนี้...

โอเครนะฮะ....

ต่อไปก็วิธีการเปลี่ยนสีมัน...
01. เปิด css มาแก้ไข (คลิกนี่ก็ด่ะ)
02. ก๊อบโค้ดข้างล่างนี้ไปแปะต่อท้ายได้เลยฮะ..
.......................................................................................................
.header{background-color: #000000;}
.......................................................................................................
03. กด save เป็นอันเสร็จกิจ...

***** เหม็ตหาย - หมายเหตุ...
+ ตรงรหัสสี #000000 คือสีที่เราอยากให้มันเป็น ในที่นี้ผมเลือกสีดำ รหัส #000000 ส่วนใครที่อยากได้สีอื่นก็เลือกได้ตามสบายครับ... แต่ถ้าไม่รู้ว่ารหัสสีอะไรเป็นอะไรก็ตามไปดูได้ที่นี่ครับhttp://sawasdeemultiply.multiply.com/links/item/91

ปล.
+ ไม่เข้าใจตรงหนายถามได้คับผม
+ น่าจะ support ทุก theme นะครับ... ลองดุ

ขอบคุณครับ
JOOBAOIL

+ มีคนมาแอบดู : ครั้ง

อีก 1 โครงการในเครือ สวัสดีมัลติพายของพวกเรางับ...อิอิอิอิ...
รวมเทคนิคในการตกแต่งเว็บมัลติพายเบื้องต้น สำหรับมือใหม่ที่พึ่งหัดเล่นมัลติพายจ้า
...มีครบเลย โย่วๆๆ
สำหรับท่านที่ไม่ได้เป้นสมาชิกของสวัสดีมัลติพายครับ

ใครที่เข้าไปแล้วไม่เจอเนื้อหาก็ เข้าไป join ที่หน้าแรกของ http://sawasdeemultiply.multiply.com ก่อนนะจ๊ะ โย่วๆ

ปล. ผมแปะทางเข้ากระทู้นี้ไว้ที่หน้าเว็บผมแล้วด้วยนะครับ อิอิ....

แบบนี้ครับ

ก่อนใช้



หลังใช้

วิธีใช้ :
- เข้าไปที่ http://ชื่อเว็บของท่าน.multiply.com/edit/title
- ใส่ข้อความแบบนี้เข้าไป.....
...........................................................................................................
<title> ข้อความที่คุณอยากให้มันไปขึ้นตรง title bar </title>
...........................................................................................................

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

ตัวอย่าง


- แล้วก็กด save/Ok ไปเลยครับ
เป็นอันเสร็จครับ...

แค่นี้เลยครับ ง่ายๆๆ

Trick : Title bar คือ
thank :
- http://notbirth.multiply.com
- http://diew.multiply.com

มีคนมาแอบดู : ครั้ง



ตามไปโน่นนะครับทุกท่าน...
แห่ะๆๆ

งงๆหน่อยนะ เพราะตอนนี้ผมเขียนบทความอยู่ 2 ที่ แต่ต่อไปนี้คงเขียนไว้ที่เว็บผมที่เดียวเเล้วครับ แล้วค่อยแปะลิ้งไว้ที่ sm...

แห่ะๆๆๆ.....ขออภัยที่ช้าขอรับ....

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



    จริงๆแล้วไม่มีอะไรยุ่งยากเลยครับ ผมแค่ทำ Background ใหญ่ๆเท่าหน้าจอขึ้นมาเลย 1 ภาพใหญ่ๆ.....แล้วก็ใช้เป็น Background แล้วก็กำหนดให้มันอยู่กับที่(ไม่เลือนตามเมาส์)  ด้วยคำสั่ง 

background-attachment: fixed; 


*CSS ของ BG ...

--------------------------------------------------------------------------------------------------------------------------
body {
     background-image:url(http://www.bfll.net/jojobaoil/bg.gif);
     background-attachment: fixed;
     background-color:#FFFFFF;
     background-repeat: no-repeat;
     background-position: top center;
     cursor:url("http://www.yoyocici.com/teppei/new.cur");
    
}
--------------------------------------------------------------------------------------------------------------------------

ใครที่นึกภาพว่า bg ผมที่แท้จริงเป็นยังไง คลิกดูที่นี่เลยครับ...

ปล. สงสัยตรงไหนถามได้เลยขอรับ...
โย่วๆ


  :

+ :

Demo : http://jojobaoil.multiply.com/
วิธีทำ
- Login ก่อนคับ...คิดดีดีแล้ว คลิ๊กตรงนี้ รอจนโหลดเสร็จ แล้วปิด
- แล้ว คลิ๊กตรงนี้ แล้วก็เอาโค้ดข้างล่างนี้.. มาวางใน
   กล่องข้อความในหน้าที่เปิดขึ้นมา
*******************************************************************
div.owner_nav {border: none;
     margin: 0 auto;
     width: 770px;
     border-bottom: none;
     padding: 268px 0 0 0;
     background: url(http://img134.imageshack.us/img134/2088/hpjgw0.jpg) no-repeat top left;
     background-color: #c7c3ba;
}
div#page_start_wrapper {
 width: 770px;
 margin: 0 auto;
 background: url(http://img151.imageshack.us/img151/6950/bbbgggse6.gif);
}
div#ownedfooterc {
 background: url(http://img151.imageshack.us/img151/6950/bbbgggse6.gif);
 width: 770px;
 height: 40px;
 margin: 0 auto;
}
body {
     scrollbar-base-color:#e7e5ce;
     background-color:#323232;
     background-attachment: fixed;
     cursor:url('http://www.yoyocici.com/teppei/new.cur');
    
}
a:hover {color: #0066CC;cursor:url('http://www.yoyocici.com/teppei/new2.cur');}
}
A:link {COLOR: #009191; TEXT-DECORATION: none}
A:visited {COLOR: #0066CC; TEXT-DECORATION: none}
A:active {}

*******************************************************************
- กด Save แล้วนั่งดูผลงานซะหน่อย...งืมๆๆ

 

Thank :
- www.sanook.com  สำหรับภาพสวยๆ
- http://imageshack.us/  สำหรับที่ฝากภาพ

สำนักแต่งเว็บ Multiply

เหมือนเว็บผมอ่ะครับ...

ลอง Refresh ดูครับ จะเห็นว่าภาพมันจะถูก random มาแสดงเรื่อยๆครับ...ลองดูครับ....

Love Season Theme...
ม่ายมีเหตุผลครับ แค่คนมันว่าง หุหุ

Demo :http://jojobaoil.multiply.com/
วิธีทำ
- Login ก่อนคับ...คิดดีดีแล้ว คลิ๊กตรงนี้ รอจนโหลดเสร็จ แล้วปิด
- แล้ว คลิ๊กตรงนี้ แล้วก็เอาโค้ดข้างล่างนี้.. มาวางใน
กล่องข้อความในหน้าที่เปิดขึ้นมา
*******************************************************************
a, a:visited, a:link { color: #f11087; }
h1#page_owner_title {
color: #ffffff;
}
body {
background: url(http://jojobaoil.exteen.com/images/bg_pink.gif);
background-attachment: fixed;
}
.railstart {
margin-top: 0px;
height: 41px;
width: 159px;
background: url(http://jojobaoil.exteen.com/images/search.gif) no-repeat top left;
position: relative;
}
div#subnavc {
width: auto;
background-color: #d2d0d0;
border-top: 6px solid #fff;
padding: 4px;
}
div.owner_nav {
border: none;
margin: 0 auto;
margin-top: 20px;
height: 400px;
height: 130px;
width: 760px;
border: 10px solid #fff;
border-bottom: none;
padding: 113px 0 0 0;
background: url(http://jojobaoil.exteen.com/images/toplove.jpg) no-repeat top left;
background-color: #fff;
background-position: 0 -10px;
}

*******************************************************************
- กด Save แล้วนั่งดูผลงานซะหน่อย...งืมๆๆ

+ มีคนมาแอบดู : ครั้ง

หุหุหุ....เหตุเกิดจากการว่างจัดๆ....

Onion Theme...
ไปเจอ emoticon เจ้าหัวหอมน่ารักตัวนี้เมื่อ 4-5 เดือนที่แล้ว เกิดหลงรักครับ...เลยขอยื๊ม Character มาทำเป็น Theme ธีมแรกของผมที่ลองทำเล่นดู...เพื่อนๆพี่ๆน้องๆท่านใดชอบก็เชิญเลยครับ งานนี้ฟรีจ้า...

Demo : http://jojobaoil.multiply.com/
วิธีทำ
- Login ก่อน แล้ว คลิ๊กตรงนี้ รอจนโหลดเสร็จ แล้วปิด
- คลิ๊กตรงนี้ แล้ว โค้ดข้างล่างนี้.. มาวางใน
   กล่องข้อความในหน้าที่เปิดขึ้นมา
*******************************************************************
div.owner_nav {
     border: none;
     margin: 0 auto;
     width: 770px;
     border-bottom: none;
     padding: 140px 0 0 0;
     background: url(http://img166.imageshack.us/img166/1205/toponionya7.jpg);
}
h1#page_owner_title {
 color: #ffffff;
}
body {
background:#f1f1f1;
}
a, a:visited, a:link { color: #8e7821; }*******************************************************************
- กด Save แล้วนั่งดูผลงานซะหน่อย...งืมๆๆ

ปล. ถ้าไม่ชอบก็กลับไปเลือกแบบเดิมได้งับ งืมๆๆๆ...คลิกนี่ ครับ
ปล. ขอนุญาติ เพื่อนเอิบ ก๊อบวิธีทำครับ เหอะๆๆ...
ปล. มีอีก 2 Themes โดย เพื่อนเอิบ คั๊บผม..ตามไปดูละกาน...

:

ตัวนี้เพื่อนผม คุณDSCI เขียนขึ้นเองครับ แจกฟรี พร้อมวิธีเซตค่าต่างๆ เชิญชมครับ อิอิ...เดี๋ยวว่างๆผมจะลองทำมาแจกเหมือนกัน หุหุ

วิธีใส่ Background ให้กับเว็บเรา (Multiply)...

1. เลือกภาพที่ต้องการ
2. Upload ขึ้นไปไว้บนโฮสซักโฮส......ที่นี่ก็ได้คับ)
3. เอา url ที่เก็บภาพเมื่อตะกี้มา...เช่น http://test.com/bg
4. แปะโค้ดนี้ลงไปใน css (ตาม link นี้)
-----------------------------------------------------------------------------------------------------------
body {
           background-image:url(http://test.com/bg);
}
----------------------------------------------------------------------------------------------------------

ปล.
+ 1.1 รูปภาพที่จะเอามาเป็นแบคกราวน์ต้องมีขนาดเท่าไหร่ แล้วมีข้อจำกัดอะไรบ้าง เช่น รูปเล็กแต่มันจะซ้ำให้เองโดยอัตโนมัติ หรือว่าต้องทำมาเป็นแผ่นใหญ่ให้พอดีขนาดเลย
ภาพที่จะเอามาทำ bg ควรเป็นภาพที่มีขนาดเล็กเพื่อความรวดเร็วในการโหลดครับ และควรจะเป็นภาพที่เป็น pattern คือภาพที่เมื่อนำมาต่อกันแล้วลวดลายจะต้องสมบูรณ์ไม่ขาด หรือหยัก... แนะนำ...ถ้าไปเจอ bg ที่ชอบตามเว็บไหน ก็ให้คลิกขวา save as backgrotnd มาครับ อิอิ...

Thanks : DSci

มีคนมาแอบดู : ครั้ง

อ่ะ .. ใครอยากรุ ตามไปเลยครับ คนนี้เทพ..55+