★• KasawaAi's •★

 

How to พื้นหลังใสใส่บล๊อค >w<

 

 

   จากที่เคยทำ “How to พื้นหลังใส” ไปแล้วนะคะ

ตอนนี้ก็มาสอนวิธีนำพวกนั้นมาใส่บล็อกกัน >A< ~!!!!

 

 

 

ปล.เนื้อหาส่วนใหญ่เน้นการใส่ BG แต่ละส่วนของบล็อกพื้นฐาน

มากกว่าจะเป็นการสอนตกแต่งบล็อกให้สวยงามเน้อ =w=b

 

 

ดูรูปอย่างเดียวอาจไม่เข้าใจ ควรจะอ่านคำอธิบายประกอบอย่างละเอียดดีกว่าเน้อ

 

 

 

❤•❤•❤•❤•❤•❤•❤•❤•❤

 

 

ขั้นแรกเราต้องเข้าไปแก้ไขธีมให้เป็นแบบ CSS ก่อนนะคะ

 

 

 

 

Original size *จิ้ม*

 

 

 

1.      ไปที่หน้าเวป Exteen แล้วเลือก Manage จัดการบล็อกค่ะ

 

 

❤•❤•❤•❤•❤•❤•❤•❤•❤

 

 

 

 

Original size *จิ้ม*

 

 

 

2.      ต่อมาก็เลือกเมนู Theme แล้วคลิกที่ Copy to my slot ค่ะ

ทีนี้เราก็จะได้ธีมเพิ่มใน Slot อีกหนึ่งธีมจ้ะ

 

 

❤•❤•❤•❤•❤•❤•❤•❤•❤

 

 

 

 

รูปไม่ขึ้น *จริ้มเลย*

 

 

3.      คลิกที่ปุ่ม Edit.. เพื่อแก้ไขธีม

 

 

 

❤•❤•❤•❤•❤•❤•❤•❤•❤

 

 

 

Original size *กระทืบค่ะ*

 

 

 

4. คลิกที่ CSS Editor เพื่อเปลี่ยนไปแก้ไขธีมแบบ CSS ค่ะ

*จำไว้ว่าเมื่อคลิกไปแล้วจะกลับมาแก้ไขธีมแบบธรรมดาไม่ได้อีกนะคะ >A< ~!

 

 

ต่อไปก็เป็นการแก้ไขพื้นหลังกันทีละส่วนจ้า

 

 

Let’s Go !!!!!

 

 

❤•❤•❤•❤•❤•❤•❤•❤•❤

 

 

นี่เป็นหน้าตาของส่วนแก้ไขธีมแบบ CSS นะคะ

 

 

 

 

Original Size *CLICK*

 

 

 

❤•❤•❤•❤•❤•❤•❤•❤•❤

 

 

 

เราจะค่อยๆ อธิบายส่วนที่ต้องใส่พื้นหลังทีละส่วนนะ

เริ่มจากนี่....เลื่อนลงมาหน่อยจะเจอส่วนนี้

 

 

 

 

 

Original Size *จริ้มเคอะ*

 

 

 

ส่วนของ /* General */ ค่ะ

มาเริ่มที่พื้นหลังสุดละกันนะ

 

 

 

 

Original Size *คลิกค่ะ*

 

 

 

มีสองแบบคือ ใส่สี กับ ทำเป็นรูปภาพนะคะ

ให้ดูที่โค้ดตรง background:#c7e1e9 url(http://g.exteen.com/t/apollo/bck.gif)

#c7e1e9 คือโค้ดสีนะคะ สามารถเปลี่ยนเป็นสีอื่นได้ตามใจชอบ

โดยการก๊อบโค้ดจากที่อื่นมาใส่ทับแทนอันเดิม

*โค้ดสีสามารถหาได้จาก Google พิมพ์คีย์เวิร์ดว่า “โค้ดสี” แค่นี้ก็เจอแล้วเคอะ*

 

 

ตัวอย่าง

ยกตัวอย่างป๊อบใส่โค้ด background: #FF9933 จากนั้นก็ลบตรง

url(http://g.exteen.com/t/apollo/bck.gif) ออก แล้วกด Preview ดู

 

 

 

Original Size *CLICK*

 

 

พื้นหลังบล็อกจะกลายเป็นสีส้มที่ป๊อบเลือกไว้เป๊ะ =A=!

 

 

ส่วนใครที่จะทำเป็นรูปภาพล่ะก็ให้แก้ตรง

url(http://g.exteen.com/t/apollo/bck.gif) ซึ่งให้เปลี่ยนคำในวงเล็บ

เป็น Url รูปที่เราต้องการ

 

 

ตัวอย่าง

ป๊อบแก้โค้ดเป็น url(http://i60.photobucket.com/albums/h8/kaowpoon/b10.jpg)

แล้วตั้งค่า repeat-x top left; ลบ –x ออก

 

กด Preview ดูก็จะได้แบบนี้ค่ะ

 

 

 

Original Size *จุ่ม*

 

 

 

*ชี้แจงเพิ่มเติม* repeat-x top left คือการตั้งค่าว่าจะให้รูปอยู่ส่วนไหนของบล็อก

-x คือเรียงรูปกันให้เป็นแนวนอน ถ้าอยากให้เรียงเป็นแนวตั้งก็เปลี่ยนเป็น –y

ส่วนถ้าต้องการให้แสดงรูปเต็มหน้าจอก็ลบ –x หรือ –y ออกซะ

ส่วน top left คือตำแหน่งรูป left = ซ้าย Right = ขวา Center = กลาง

เปลี่ยนได้ตามชอบ

(( ถ้ามีพื้นฐานภาษาอังกฤษเรื่องพวกนี้คงเดาไม่ยากนะ ))

 

 

❤•❤•❤•❤•❤•❤•❤•❤•❤

 

 

มาต่อกันที่ส่วนนี้เลย เลื่อนลงมาหน่อยจะเจอ

 

 

 

Original Size Image *จริ้ม!!*

 

 

 

#page จร้า

ตรง width:780px; คือความกว้างของบล็อกค่ะ

เปลี่ยนตัวเลขได้ตามใจชอบเลย อันที่ป๊อบใช้ประมาณ 880px นะคะ

(( แต่คนอื่นจะปรับให้มากกว่านี้ก็ได้   ))

 

 

 

Original Size *CLICK*

 

 

 

อย่าลืมปรับตรงส่วน

 #header, #neck, #belly, #leg, #footer

แก้ตัวเลขตรง width:780px; ให้เท่ากับส่วน #page ด้วยนะจ๊ะ

 

เสร็จแล้วลองกด Preview ดู จะเห็นได้ว่าบล็อกมันกว้างขึ้น

แต่จะยังเบี้ยวๆ  ไม่สมส่วนกับอันอื่น กด Save ไว้ก่อนนะคะ แล้วมาต่อกันเลย

 

 

 

❤•❤•❤•❤•❤•❤•❤•❤•❤

 

 

เลื่อนลงมาจนกว่าจะเจอส่วนนี้....

 

 

 

Original Size *ClicK*

 

 

 

#header ตรงนี้จะเป็นส่วนหัวของบล็อกนะคะ

 

 ตย.

 

 

Original Size *MaX*

 

 

ขั้นแรกให้เราทำพื้นหลังใสที่ต้องการมาก่อนค่ะ

(( วิธีทำก็อยู่ในหมวด How to แหละค่ะ หาไม่ยากหรอก^^ ))

โดยทำขนาดตามที่เราตั้งค่าไว้ในส่วน #page (( จำไม่ได้ย้อนขึ้นไปดู ))

 

เสร็จแล้วก็ไปเวปฝากรูป Imageshack.us (( จะเอาเวปอื่นที่ชอบก็ได้แล้วแต่ค่ะ ))

 

ยัดไฟล์เสร็จก็เอา Url ของรูปมาใส่ในวงเล็บตามนี้ค่ะ

background:url(http://img42.imageshack.us/img42/7127/headerwws.png)  

 

 

แล้วกด Preview ดูจะเห็นได้ว่าตรงหัวบล็อกมันเป็นพื้นหลังใสแล้ววว >w<

 

 

 

Original Size *Duo!!*

 

 

 

พอได้พื้นหลังใสแล้วก็มาใส่รูปเฮดบล็อกกัน

 

 

 

Original Size *จริ้มแรงๆ*

 

 

ตรง background:url(http://g.exteen.com/t/apollo/cover.jpg) คือรูปเฮดบล็อกค่ะ

 

 

ตย.

 

 

 

Original Size *ตู้ม*

 

 

 

ซึ่งสามารถเปลี่ยนเป็นรูปที่เราต้องการได้โดยใส่ Url

ของรูปลงไปในวงเล็บแทนอันเดิม

 

ตย.

background:url(http://img514.imageshack.us/img514/752/headexteenblog.jpg)

 

แล้วเปลี่ยนขนาดความสูงกับความกว้างตรง

 

            height:400px;

            width:830px;

 

 

เปลี่ยนตัวเลขให้เท่ากับขนาดรูปนะคะ และตรง Width ให้ลบออก 20 px ด้วย

 เช่น   รูปเฮดของป๊อบมีขนาด 400x850

ก็ให้เปลี่ยนเป็น

            height:400px;

            width:830px

 

*สังเกตว่าป๊อบลบออกไป 20 px จาก 850 ก็จะเหลือ 830 ค่ะ =w=b

และถ้าอยากให้รูปอยู่ตรงกลางให้ใส่คำว่า center หลัง no-repeat

 

 

 

Original Size *คลิก~*

 

 

 

จากนั้นกด Save แล้วกด Preview ดูได้เลยค่ะ >w<

รูปเฮดจะเปลี่ยนไป

 

 

 

Original Size *BOMB*

 

 

 

❤•❤•❤•❤•❤•❤•❤•❤•❤

 

 

เดี๋ยวในส่วนต่อๆ ไปจะมาสอนกันอีกเสต็ปนะคะ

ขอตัวไปพักผ่อนก่อนงิ ;w;