มือใหม่มาหัดแต่ง 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



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 (เพิ่มเติม)

บันทึกนี้เขียนที่ GotoKnow โดย  ใน Theme For You = บล็อกสวยด้วยธีม =



ความเห็น (19)

เขียนเมื่อ 

ขอเอาไปใช้บ้างนะ อิอิ

คนขี้เกียจทำใหม่นะ

เขียนเมื่อ 
ตามสบายเลยค่ะ อิอิ
ko
IP: xxx.137.48.4
เขียนเมื่อ 
ขอบคุณมากครับ
เขียนเมื่อ 

สบายอยู่ไกลมั้ยครับ จะได้ตามไม่แพง

.

แอบมากวน อิอิ

ว่าแต่ ฝึกงานเป็นงัยบ้าง

เขียนเมื่อ 
ช่วงนี้มีงานให้ทำอย่างต่อเนื่องเลยค่ะ คุณตาหยู แบ่งๆ กันไปค่ะ สัปดาห์นี้สะสางงานเก่าแล้วก็ทำงานใหม่ด้วย เหอๆ
เขียนเมื่อ 

สวัสดีค่ะน้องP

  • ขอบคุณนะคะแล้วจะลองทำดูค่ะ 
ผม กำลังศึกษา css เลยครับ งงมาก เพราะทุกทีใช้แต่ jawa กับ html เท่านั้นครับ  เป็นไปได้ ช่วงลงเกี่ยวกับ css บ้างก็ดีนะครับผม  จะได้ให้คนไม่รู้อย่างผม  แต่ง บล็อกได้  สวย ๆ มั่ง ครับ
เขียนเมื่อ 
จะพยายามมาลงให้เรื่อยๆ นะคะ
  • ขอบคุณค่ะ ... สวยมากเลย
เขียนเมื่อ 
ขอบคุณสำหรับคำชมค่ะ
เขียนเมื่อ 

ดีมากครับ

     ได้ความรู้ดีครับ  แต่มือใหม่สำหรับบวกับความไม่ค่อยรู้เรื่องพวกนี้ บางประโยคอาจยังดูงง  แต่จะพยายามศึกษาครับ  ต้องขอขอบคุณมาดเลยครับ

 

เขียนเมื่อ 

ขอบคุณ สำหรับคำแนะนำครับ มีประโยชน์สำหรับ blogger ทุกคน

ว่าแต่ว่า ทำไงครับ ถ้าไม่อยากให้ มี ชื่อblog กับรูป การ์ตูนสมุด ที่ Title bar ช่วยแนะนำด้วยนะครับ ขอบคุณล่วงหน้าครับ

เขียนเมื่อ 

ตอบ คุณหมอจิ้น ค่ะ
ที่หน้าตกแต่งบล็อกจะมีส่วน"ปรับแต่ง" อยู่ค่ะ อยู่ด้านล่าง กล่องข้อความของส่วน css ที่ตกแต่งมาเอง จะมีข้อความ
Show title with your modified theme
ให้เอาเครื่องหมายถูกในช่องสี่เหลี่ยมออกค่ะ แล้วชื่อบล็อกและสมุดจะถูกซ่อนไว้ค่ะ

เขียนเมื่อ 
ขอบคุณ หลาย ๆ เด้อคับ
เขียนเมื่อ 
ไม่เป็นไรค่ะ ยินดีให้คำแนะนำ

สวัสดีค่ะ

       ขอบคุณมากนะ จะลองทำดูค่ะ

เขียนเมื่อ 
เสร็จแล้วเอามาโชว์บ้างนะคะ
เขียนเมื่อ 

ผมเอาวิธีการที่เรียนรู้จากน้องสุ ไปใช้ พอจะใช้ได้บ้างแล้วครับ ขอบคุณครับ

เขียนเมื่อ 
ไม่เป็นไรค่ะ มีปัญหาเกี่ยวกับการตกแต่งบล็อกก็ถามได้เลยนะคะ

คำสำคัญ (Tags)

#banner#title#ตกแต่งบล็อก

หมายเลขบันทึก

93658

เขียน

01 May 2007 @ 14:55
()

แก้ไข

22 Jun 2012 @ 09:49
()

สัญญาอนุญาต

สงวนสิทธิ์ทุกประการ
ความเห็น: 19, อ่าน: คลิก