orange melody ♪

RULES

• ช่วยลงคอมเม้นท์ไว้ด้วย หากจะเอา css นี้ไปใช้ หรือถึงไม่ได้เอาไปใช้ก็ยังเม้นได้นะ
• เรื่องเครดิต เราไม่บังคับว่าต้องลง
• แต่ถ้าลงไว้ด้วย ก็จะเหมือนเป็นกำลังใจให้ทำเพิ่มและเอามาแจก (ฮา)
• สามารถแก้ไขโค้ดได้ (แล้วแต่สมควร)

PREVIEWS

ส่วน header กับ neck
อันพื้นหลังสีขาวคือเวลาเอาเม้าส์ไปวางทับ อันที่เหลือคือปกติ

ส่วน sidebar
ตัวหนังสือสีเข้มคือเวลาเอาเม้าส์วางทับ

แอบเลือกคอมเม้นท์ของจขบ. ท่านนี้ เพราะข้อความยาวดี แหะๆ

ส่วน ท้ายเอนทรี่แล้วก็ leg กับ footer (กดเพื่อดูรูปเต็ม)
[ ส่วน leg ดัดแปลงจาก [Exteen CSS] วิธีแต่งส่วน leg ของบล็อกแบบสามกล่อง ]

Twitter widget

วิธีวาง widgets (กดดูขนาดเต็มได้)

• ในส่วน bottom menu นั้น เรามี Previous, Archives และ Catogories ถ้าอยากให้มันออกมาสวยๆ ควรจะตั้งให้โชว์จำนวนเดียวกัน -- สมมุติเรามี 5 catogories ก็ให้เลือกจำนวนเอนทรี่ย้อนหลังที่จะโชว์กับจำนวน archives เลขเดียวกัน นั่นก็คือ 5 (กดที่รูปดินสอ)
• ไม่ได้ทดสอบว่าถ้าใส่หลายๆ อย่างตรง top menu แล้วหน้าตาจะเป็นยังไง แนะนำว่าแค่ใส่ page ก็พอ ^^"
• แนะนำว่าให้ย้าย widget จาก sidebar#1 ไปยัง sidebar#2
• จำนวน widget ใน bottom เมนู ไม่ควรเกิน 3
• ไม่จำเป็นต้องจัดให้เหมือนกับในรูป ลองทดลองดูว่าแบบไหนถูกใจกว่ากัน

CODE

• ไปที่ Theme > CSS Editor
• กด ctrl + C ตัวโค้ดและ Paste โค้ดลงไปเลย ( กด ctrl + V )
• ไปโหลดไฟล์ที่ [mediafire] (จะได้เช็คจำนวนโหลดได้ หึๆ)
  

NOTES

• ถ้าอยากจะโชว์ Blog Description ข้างใต้ Blog Title ให้หา #header h2 แล้วลบบรรทัด display:none;
• สำหรับ profile widget เราเซ็ตให้รูปมีความกว้างได้ไม่เกิน 180px และความสูงไม่เกิน 100px หากไม่ชอบค่าพวกนี้ก็สามารถไปแก้ได้ หรือจะลบออกก็ได้เช่นกัน
      #profile img{
          max-width:180px; <-- ค่าความกว้าง
          max-height:100px <-- ค่าความสูง
      }
• ถ้าอยากใส่ภาพเฮดเดอร์ ให้หา
      #coverimage{
          background:url(ใส่ url ภาพตรงนี้) no-repeat;
          height:15px; <-- เปลี่ยนเป็นค่าความสูงของภาพ
          width:900px; <-- เปลี่ยนเป็นค่าความกว้างของภาพ
          margin-left:0px !important; <-- สามารถเปลี่ยนเพื่อจัดภาพให้อยู่ตรงกลางได้
          margin-left:0px; /*Fix IE Bug*/
          margin-top:20px;
          เติมสามบรรทัดที่เป็นตัวหนา รูปจะได้ไม่ติดกับส่วนไตเติ้ลเกินไป
          (อย่าลืมลบตัวอักษรหลัง ; ด้วยนะ)
    }
• ถ้ามีคำถาม/ปัญหาเกี่ยวกับตัว CSS ก็สามารถถามผ่าน EMS เน้อ
• ถ้าอยากเห็นธีมอื่นๆ ที่เคยแจกไว้ สามารถไปดูได้ที่ Recommend

พีเอส.
- โทนสีเขียวๆ หวังว่าหลายๆ ท่านคงจะชอบกัน ^_^
- เริ่มหมดไอเดีย เสนอโทนสีเข้ามากันได้นะ~ (ขอโทนสีที่ยังไม่ทำ และไม่ฉูดฉาดเกินไป)
- EDIT: ตอนนี้เพิ่ม page สำหรับรวบรวมธีมโดยเฉพาะ มีภาพ preview ด้วย

RULES

• ช่วยลงคอมเม้นท์ไว้ด้วย หากจะเอา css นี้ไปใช้ หรือถึงไม่ได้เอาไปใช้ก็ยังเม้นได้นะ
• เรื่องเครดิต เราไม่บังคับว่าต้องลง
• แต่ถ้าลงไว้ด้วย ก็จะเหมือนเป็นกำลังใจให้ทำเพิ่มและเอามาแจก (ฮา)
• สามารถแก้ไขโค้ดได้ (แล้วแต่สมควร)

PREVIEWS

 งวดนี้มาสองสี สองแบบ ~

ส่วนบน: header, neck, entry
(จริงๆ scrollbar ของตัว neck จะกลืนไปกับกล่องถ้าใช้ IE)

 


หน้าตาคอมเม้นท์

หน้าตาตัว sidebar

 


ส่วนล่างสุด (leg) --- มี tutorial สำหรับส่วนนี้โดยเฉพาะ
โปรดคลิก: [Exteen CSS] วิธีแต่งส่วน leg ของบล็อกแบบสามกล่อง

 
ส่วนทวิตเตอร์

วิธีวาง widgets (กดดูขนาดเต็มได้)

• ในส่วน bottom menu นั้น เรามี Previous, Archives และ Catogories ถ้าอยากให้มันออกมาสวยๆ ควรจะตั้งให้โชว์จำนวนเดียวกัน -- สมมุติเรามี 5 catogories ก็ให้เลือกจำนวนเอนทรี่ย้อนหลังที่จะโชว์กับจำนวน archives เลขเดียวกัน นั่นก็คือ 5 (กดที่รูปดินสอ)
• แนะนำว่าให้ย้าย widget จาก sidebar#1 ไปยัง sidebar#2
• จำนวน widget ใน bottom เมนู ไม่ควรเกิน 3
• ไม่จำเป็นต้องจัดให้เหมือนกับในรูป ลองทดลองดูว่าแบบไหนถูกใจกว่ากัน

CODE

• ไปที่ Theme > CSS Editor
• กด ctrl + C ตัวโค้ดและ Paste โค้ดลงไปเลย ( กด ctrl + V )
• งวดนี้มีสองแบบ เลยลงเป็นไฟล์แทน ให้ไปดาวน์โหลดตามลิงค์ด้านล่างได้
  (ไม่อย่างงั้นได้โหลดบล็อกกันนานแน่)
• แบบสีชมพู [mediafire] | แบบสีฟ้า [mediafire]
  
• @ Esnips: เวลาเข้าไปที่หน้าเว็บ มันจะบอกว่า error ตรงด้าน applet บน อย่าไปสนใจมัน ให้ข้ามไปด้านล่าง แล้วกด Download
  
  

NOTES

• ถ้าอยากจะโชว์ Blog Description ข้างใต้ Blog Title ให้หา #header h2 แล้วลบบรรทัด display:none;
• สำหรับ profile widget เราเซ็ตให้รูปมีความกว้างได้ไม่เกิน 180px และความสูงไม่เกิน 100px หากไม่ชอบค่าพวกนี้ก็สามารถไปแก้ได้ หรือจะลบออกก็ได้เช่นกัน
      #profile img{
          max-width:180px; <-- ค่าความกว้าง
          max-height:100px <-- ค่าความสูง
      }
• ถ้าอยากใส่ภาพเฮดเดอร์ ให้หา
      #coverimage{
          background:url(ใส่ url ภาพตรงนี้) no-repeat;
          height:15px; <-- เปลี่ยนเป็นค่าความสูงของภาพ
          width:900px; <-- เปลี่ยนเป็นค่าความกว้างของภาพ
          margin-left:0px !important; <-- สามารถเปลี่ยนเพื่อจัดภาพให้อยู่ตรงกลางได้
          margin-left:0px; /*Fix IE Bug*/
          margin-top:20px;
          margin-bottom:20px;
          เติมสองบรรทัดที่เป็นตัวหนา รูปจะได้ไม่ติดกับส่วนไตเติ้ลและ neck เกินไป
    }
• ถ้ามีคำถาม/ปัญหาเกี่ยวกับตัว CSS ก็สามารถถามผ่าน EMS เน้อ
• ถ้าอยากเห็นธีมอื่นๆ ที่เคยแจกไว้ สามารถไปดูได้ที่ Recommend
• 2009-10-10: เพิ่มลิงค์สำรองสำหรับโหลดโค้ด