วิธีแทนที่ Blogger Title ด้วยรูปภาพ Logo

สอนทำบล็อก วิธีเปลี่ยน blogger header เป็นรูปภาพ
บทความนี้เป็นอีกวิธีง่าย ๆ ในการแต่ง Blogger โดยการแทนที่ Header Title ด้วย Logo Image หรือกล่าวง่าย ๆ ก็คือการแทนข้อความบน Header ของบล็อกให้เป็นรูปภาพที่คุณสามารถออกแบบได้เองตามใจชอบ

ซึ่งวิธีการนั้นสามารถทำได้ง่ายมาก และใช้โค้ด CSS เพียงบรรทัดเดียวเท่านั้น  


วิธีแทน Blog Title ด้วย Logo Image

ขั้นเตรียมการ

1. วัดค่าความกว้าง และความสูงของพื้นที่ Header Title ว่ามีความกว้างและสูงเท่าใด

วิธีทำ blogger 

ในส่วนนี้คุณสามารถใช้ Software ไม้บรรทัดช่วยวัดได้
http://www.soft.tahionic.com/download-ruler/index.html

2. ออกแบบ Logo ในส่วนนี้ให้ออกแบบขนาดเดียวกับที่ได้วัดไว้ในข้อ 1

สอนวิธีทำและวิธีแต่ง blogspot


ขั้นลงมือติดตั้งและปรับแต่ง

Log in เข้าไปที่ blogger >> การออกแบบ >>  แก้ไข HTML
จากนั้นค้นหาโค้ด ]]></b:skin> แล้วทำการวางโค้ดต่อไปนี้ลงไปก่อนหน้าโค้ดดังกล่าวและบันทึกแม่แบบ


#Header1{background:url(http://upic.me/i/ql/headlogo.png) 10px 0px no-repeat;text-indent:-9999px;overflow:hidden;}

ให้คุณปรับเปลี่ยน URL ของภาพ http://upic.me/i/ql/headlogo.png เป็น URL ของภาพของคุณเอง  ซึ่งควรมีขนาดไม่ใหญ่มาก เช่น ภาพที่ผมใช้มีขนาด 240 x 80 px (ผมเองออกแบบใน Logo ใน Photoshop ครับ)

ส่วนถ้าแทรกภาพลงไปแล้วตำแหน่งภาพไม่ตรงตำแหน่งคุณสามารถปรับค่าได้ที่ตัวเลข 10px 0px โดยตัวเลขนี้มีหมายถึงระยะห่างของภาพจากด้านซ้าย และด้านบนตามลำดับ

แต่งบล็อก ทำ blog    

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

ตอนนี้มีความคิดเห็น : 13 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. หากต้องการให้รูปโลโกเป็นสไลด์โชว์ล่ะขะรับ?

  1. @คุณธุลีดิน: กรณีนี้เป็นการใช้ภาพ ดังนั้นคุณอาจจะสร้างภาพเคลื่อนไหวใน Photoshop แล้วทำตามขั้นตอนที่แนะไว้ครับ
    สำหรับทางเลือกอื่น ๆ คือการแทน Background Header ด้วย Flash ไฟล์ก็ได้ แต่ไม่แนะนำเพราะไฟล์มีขนาดใหญ่ทำให้บล็อกโหลดช้าขึ้น ถ้าต้องการสไลด์โชว์จริง ๆ ผมแนะนำให้แยกออกมาจากโลโก้จะดีกว่าครับ ส่วนวิธีสร้างสไลด์โชว์ผมได้กล่าวไว้ในบล็อกนี้ลองค้นดูครับ

  1. ยังออกแบบไม่เป็น แต่ถ้าต้องการหาภาพมาเป็นbackground มีวิธีอย่างไร แล้วภาพที่หามา(ภาพฟรี)จะต้องมาแก้ไขความกว้างยาว อะไร ยังงัยคะ เพิ่งหัดทำค่ะ

  1. @ natty70 : http://www.hackublog.com/2009/12/background-blogger.html

  1. ลองทำตามข้างบนแล้วครับ logo มันขึ้นและจัดตำแหน่งได้แต่ blog Title มันบังคับให้เราต้องใส่ ถ้าเราไม่เอา blog title จะเอาแต่ Blog Description ได้มั้ยครับ http://pajonprai.blogspot.com

  1. @ คุณอ้น : ใส่ Title ลงไปเถอะครับ ยังไงก็มองไม่เห็นอยู่แล้ว

    เรื่องใส่ได้หรือไม่ได้น่าจะทดลองเอาเองได้ขอไม่ตอบนะครับ

    ส่วนการปรับไม่ให้ title มาโผล่มาเป็นชื่อในหน้าอื่น ๆ แทนที่โค้ด

    <title><data:blog.pageTitle/></title>

    ด้วย

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <title><data:blog.pageName/></title>
    <b:else/>
    <title><data:blog.pageTitle/></title>
    </b:if>

  1. ขอบคุณมากครับ...เดี๋ยวจะลองไปทำดู.....

  1. หวัดดีครับ คือ ผมมีปัญหาในส่วนของ header ผมใส่รูปไแล้วมัน แสดงใน Firefox แบบเนี้ยอ่ะครับ

    http://karajanclassical-books.blogspot.com/

    แต่ถ้าเปิดใน IE มันไม่เป็น ครับ แสดงเต็ม
    ต้องแก้ไขยังไงครับ

    ขอบคุณครับ

  1. รูปที่คุณใช้ขนาดใหญ่กว่าพื้นที่ที่ถูกกำหนดไว้ firefox แสดงผลถูกต้องแล้ว แต่ IE แสดงผิดพลาดครับ แนะนำว่าควรใช้รูปขนาดให้พอดีกับพื้นที่ครับคือ 780 x 180 px ครับ

  1. หวัดดีครับ เอ่อ ขอบคุณครับที่ให้ความกรุณาตอบข้อสงสัยครับ

    ผมมีคำถามอีกครับ คือ ผมจะทำ Blogger เป็น ทางการค้า คือ ผม ทำเมนู แล้ว ผมจะเอารายการหนังสือ มาอยู่ใน เมนูที่เป็นหน้าของ Store แต่ ผมทำไม่ได้อ่ะครับ มันให้ไปอยู่หน้า Home อย่างเดียวเลยครับ แต่ลองไปลองมา ผมทำได้อยู่ แต่มันไม่อิสระเท่า เราเพิ่ม บทความ ในหน้า Home เพราะเราสามารถ กำหนดบทความ (รายการหนังสือ) ให้อยู่ใน Label ได้ครับ แล้วก็ ความห่าง ของรายการที่ผมได้ Add เข้าไป มันห่างมากครับ อยากจะ ลดให้มัน ใกล้ๆ กันอ่ะครับ

    สุดท้าย เว็บของคุณ คือ ที่พึ่งสุดท้ายครับ ที่ผมจะหาคำตอยในการทำ Blogger ผม ขอเป็นกำลังใจให้ คุณ ทำต่อไปครับ
    ขอบคุณครับผม

  1. อยากลองใส่แฟล็ชเล็กๆตรงส่วนหัวเพื่อความสวยงามบ้างต้องทำอย่างไรบ้างครับ ในที่นี้ผมมีแฟรซ .swf แล้ว
    ขอบคุณล่วงหน้าครับ

  1. ทำแบบมีลิ้งแล้ว สามารภคลิ๊กที่โล้งๆ ได้ด้วย เหมือนเว็บนี้่าครับ ต้องทำแบบไหนครับ ขอบคุณครับ
    http://itunes-btemplates.blogspot.com

  1. ได้แล้ว ขอบคุณครับ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel