หลังจากเปลี่ยนลุคใหม่ของบล็อกด้วยการเปลี่ยนสี 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
http://learners.in.th/file/tozusu/title003.jpg
http://learners.in.th/file/tozusu/title004.jpg
http://learners.in.th/file/tozusu/title005.jpg
ถ้ายังเลือกกันไม่จุใจก็ไปดูที่นี่เลยค่ะ
banner สำหรับส่วน title bar (เพิ่มเติม)
ขอเอาไปใช้บ้างนะ อิอิ
คนขี้เกียจทำใหม่นะ
สบายอยู่ไกลมั้ยครับ จะได้ตามไม่แพง
.
แอบมากวน อิอิ
ว่าแต่ ฝึกงานเป็นงัยบ้าง
สวัสดีค่ะน้อง
ดีมากครับ
ได้ความรู้ดีครับ แต่มือใหม่สำหรับบวกับความไม่ค่อยรู้เรื่องพวกนี้ บางประโยคอาจยังดูงง แต่จะพยายามศึกษาครับ ต้องขอขอบคุณมาดเลยครับ
ขอบคุณ สำหรับคำแนะนำครับ มีประโยชน์สำหรับ blogger ทุกคน
ว่าแต่ว่า ทำไงครับ ถ้าไม่อยากให้ มี ชื่อblog กับรูป การ์ตูนสมุด ที่ Title bar ช่วยแนะนำด้วยนะครับ ขอบคุณล่วงหน้าครับ
ตอบ คุณหมอจิ้น ค่ะ
ที่หน้าตกแต่งบล็อกจะมีส่วน"ปรับแต่ง" อยู่ค่ะ อยู่ด้านล่าง กล่องข้อความของส่วน css ที่ตกแต่งมาเอง จะมีข้อความ
Show title with your modified theme
ให้เอาเครื่องหมายถูกในช่องสี่เหลี่ยมออกค่ะ แล้วชื่อบล็อกและสมุดจะถูกซ่อนไว้ค่ะ
สวัสดีค่ะ
ขอบคุณมากนะ จะลองทำดูค่ะ
ผมเอาวิธีการที่เรียนรู้จากน้องสุ ไปใช้ พอจะใช้ได้บ้างแล้วครับ ขอบคุณครับ