มือใหม่มาหัดแต่ง Title ของบล็อกกันค่ะ

ติดตาม —ผู้ติดตาม

หลังจากเปลี่ยนลุคใหม่ของบล็อกด้วยการเปลี่ยนสี theme กันไปแล้ว เราก็จะมาแต่งส่วนอื่นๆ กันบ้างค่ะ เริ่มจาก ส่วน Title ละกันค่ะ

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

เริ่มแรก เราก็ต้องเตรียมรูปกันก่อนนะคะ โดยใช้โปรแกรมตกแต่งรูปภาพค่ะขนาดของรูปควรจะเป็น ความกว้าง 910 pixels ส่วนความสูงก็ไม่ควรเกิน 150 pixels ค่ะ เพราะถ้าสูงเกินไปมันจะไม่สวย อิอิ เมื่อได้ขนาดของรูปแล้วก็แต่งให้เต็มที่เลยค่ะ ตอน save รูป แนะนำว่า save เป็นไฟล์ .jpg หรือ .gif ค่ะ

ขั้นที่ 2 เราจะต้องอัพโหลดไฟล์รูปภาพ ขึ้นมาไว้ในไฟล์อัลบั้มของเราก่อนค่ะ ดูวิธีการอัพโหลดไฟล์ที่นี่เลยค่ะ วิธีการอัพโหลดไฟล์

ขั้นที่ 3 มาดูโค๊ดที่ใช้กันค่ะ
CSS code ที่ใส่ในการตกแต่ง

div#title {
padding:50px 200px 45px;
background-image:url("/lit/title_04.jpg");
background-repeat:no-repeat;
background-position:center center;
height:110px;}

ส่วนของ
padding คือ การกำหนดตำแหน่งของชื่อบล็อกค่ะ ถ้าไม่ใส่ส่วนนี้ ระบบจะกำหนดให้อยู่ตำแหน่งซ้ายบนค่ะ
background-image คือ ไฟล์รูปภาพที่จะนำมาใส่ค่ะ เราจะต้องเอา url ของไฟล์รูปที่เราอัพโหลดในขั้นที่2 มาใส่ในวงเล็บค่ะ
background-repeat คือ การกำหนดใส่แสดงรูปซ้ำจนเต็มพื้นที่ค่ะ เช่นถ้ารูปเราเล็กกว่าขนาด title ที่เว็บกำหนดไว้ ก็เขียนคำสั่งให้แสดงรูปต่อๆ กันจนเต็มค่ะ
background-position คือ การกำหนดตำแหน่งของรูปที่นำมาใส่ค่ะ
height คือ การกำหนดความสูงของส่วน title เพื่อให้พอดีกับรูปที่เราทำมาค่ะ

ขั้นที่ 4 นำโค๊ดไปใช้งานจริงกันค่ะ โดยการ copy โค๊ดในขั้นที่3 แล้วเปลี่ยนบางส่วนให้เป็นของเราค่ะ จากนั้นก็นำไปวางในหน้า ตกแต่งบล็อก แนะนำการตกแต่งบล็อก, ตกแต่งแพลนเน็ต แนะนำการตกแต่งแพลนเน็ต หรือ ตกแต่งหน้าประวัติ แนะนำการตกแต่งแพลนเน็ต ก็ได้ค่ะ ไว้ในส่วนที่เขียนว่า "CSS ที่ตกแต่งมาเอง" นะคะ

ถ้าอ่านแล้วยังงงๆ มาดูตัวอย่างเลยค่ะ

สุจะเอารูปนี้

ไปใส่เป็นพื้นหลังของ title บล็อกนี้นะคะ http://learners.in.th/blog/zusu

โค๊ดที่ใช้จะเป็นแบบนี้ค่ะ

div#title {
padding:50px 250px 45px;
background-image:url("http://learners.in.th/file/tozusu/title001.jpg");
background-repeat:no-repeat;
background-position:center center;
height:35px;}

ลองเข้าไปดูผลงานกันได้นะคะ ใครชอบก็เอาโค๊ดด้านบนไปแปะได้เลยค่ะ

ปิดท้ายด้วยของฝากค่ะ เป็น title ฝีมือสุเอง อิอิ

http://learners.in.th/file/tozusu/title002.jpg