[How to] ใส่จาว่าสคริป+มารื้อCSSขั้นพื้นฐานกันเถอะ!#2

ต่อจากเอนทรี่ก่อนที่ภาพเต็มลิมิตนะครับ ดองไว้นานแล้วมันจะขี้เกียจ^^




บทที่3 การเล่นแกตเจ็ต


3.1 การลงเพลงประจำบล็อค



1. ก่อนอื่นต้องหาโค้ดเพลงมาครับ แนะนำให้สร้างเองจากเว็บ Mixpod เพราะเว็บมิกพอตนั้นซับพอร์ดกับเว็บบล็อคเกอร์โดยตรง ดังนั้นใช้ได้ไม่มีเจ๊งชัวร์^^


2. พอได้โค้ดมาเเล้ว ก็ไปที่หน้าต่างการออกแบบเหมือนเดิมครับ


3.จากนั้นก็ทำตามภาพเล๊ยยยย

อย่าลืมจิ้มดูรูปชัดๆใหญ่น๊าา

3.พอกดแล้ว ก็จะได้แบบนี้ขึ้นมา

4. ให้เลื่อนลงมา เลือกจาว่าแบบภาพครับ(อันอื่นก็ลองเล่นได้นะ แต่สำหรับแปะเพลงใช้จาว่าเท่านั้นน่อ>.<)

5. พอได้แล้วก็แปะโค้ดตามที่อธิบายในภาพซ้าาา

6. เสร็จแล้วก็ได้แบบนี้ อู่วอ่า ไฮโซวววว*0*

(ผมใช้โึค้ดของมิกพอตนะคร้าบบ)



3.2 มาแปะนาฬิกากันบ้างงงง


1. แน่ล่ะ ไปหาโค้ดนาฬิกามา= =


2.เข้าแบบเดิมเหมือนตอนแปะเพลง แต่เปลี่ยนเป็นใส่โค้ดนาฬิกาแทน (ง่ายมะ 555)


3. เสร็จแล้วก็ได้แบบนี้*0*

ต่อไป เป็นการแก้ไขCSS


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



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

เผินๆคงดูเหมือนกัน แต่เมื่อเราเลื่อนลงมาเรื่อยๆ

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

เทียบกับแบบทำด้วยCSS

ต่อให้เลื่อนจนสุดพื้นจะล็อคอยู่กับที่ ไม่มีหายคร้าบบบ~~~~~

เอาล่ะ  ต่อไปมาดูวิธีใส่พื้นหลังแบบนี้กัน

1.ไปที่การออกแบบแม่แบบที่สอนไปเมื่อเอนทรี่ก่อน(ทำไม่เป็นย้อนกลับไปอ่านเลยบคร้าบบ)

2. พอเข้าไป ก็คลิ๊กตรงขั้นสูง ตามภาพ

3. กดเข้าไปยังCSS ตามรูป

4. จากนั้นก็ใช้โค้ดนี้เลยครับ

/* General */

body {

background:#080808 url(http://www.uppicweb.com/x/i/iq/r1lsk.jpg) center fixed no-repeat;

ตัวแดง คือUrl ของรูปที่ต้องการจะให้เป็นพื้นหลังครับ ไปเปลี่ยนกันเองนะ

อธิบายก่อน ในโค้ดนี้ center= กึ่งกลาง หมายถึง รูปให้อยู่ตรงกลางบล็อคเรา

                            fixed= ล็อคภาพให้อยู่กับที่    

                            no-repeat= ไม่ซ้ำรูป

5. นำโค้ดที่เปลี่ยนUrlภาพที่ต้องการแล้ว ไปใส่ตามภาพครับ

แค่นี้ก็เรียบร้อย!!!

CSS เป็นอะไรที่ละเอียดอ่อน เข้าใจยากนิดนึง แต่ถ้าลองแกะๆแงะๆดูก็สนุกดีนะครับ ลองเอาไปเล่นกันดูละกัน^^

ไปล่ะคร้าบบบบ

ปล. แปะคลิปยูทูปลงเอนทรี่กันเป็นมั้ยครับ ไม่เป็น อาจจะสอนในโอกาศถัดไป พร้อมความรู้ในการงัดแงะแกะบล็อคเล็กน้อย *หัวเราะ*

ของคอมเม้นท์ด้วยนะครับ^^

เพื่อคะแนนของผมเนอะ เดี๋ยวผมเม้นท์คืนให้นะเพื่อนๆที่น่ารัก>w<

หวังว่าจะได้รับความรู้กันบ้างสักเล็กน้อยนะครับ

ขอบคุณคร้าบบบบบบบบบบบบบบบบ