ใส่ icon สวย ๆในช่อง urlให้ blogspot | favicon

Written By Aucharaporn Theemcle on วันเสาร์ที่ 17 เมษายน พ.ศ. 2553 | 06:38

สังเกตไหมคะตอนทีเราเปิดบล็อก จะเห็น icon เป็นรูปสีส้ม สัญลักษณ์เฉพาะของ blogger สัญลักษณ์นี้ เรียก favicon ค่ะมาจากคำว่า favorite+icon
favicon
แต่พอผ่านไปบางบล็อก  อ้าวไหงรูปหน้า favicon ถึงเปลี่ยนไปไม่เป็นสัญลักษณ์ blogger ซะแล้ว   ดูเป็นเอกลักษณ์เฉพาะตัว  บางบล็อกก็ทำสวยเชียว พอเห็นแล้วอยากปรับแต่งบล็อกเราบ้างไหม  วันนี้เอาวิธีปรับแต่งบล็อกด้วยการเพิ่ม
favicon_blogspot
favicon มาฝากค่ะ
ขั้นตอนแรกเพื่อน ๆ ต้องคิดก่อนนะคะ favicon ที่อยากได้เอาแบบไหนดีเลือกรูปภาพที่เป็นสัญลักษณ์โดดเด่นเฉพาะตัวยิ่งดี   เลือกเอารูปที่ตัวเองชอบละกันแต่รูปเหล่านี้เมื่อทำให้ขนาดเล็กแล้วมันยังดูดีอยู่ไหม ?

ขั้นตอนที่ 2 มาทำให้ขนาดไฟล์รูปภาพมีขนาดเล็กลง  ให้ไฟล์มีขนาดสัก 40*40  พิกเซล  กำลังดี บางคนใช้เป็น 150*150 พิกเซล บางคนใช้ 16*16    พิกเซล เอาเป็นว่าให้ไฟล์รูปภาพเหล่านี้ มีขนาดเล็กทำให้โหลดได้เร็ว  สังเกตว่าไฟล์ favicon เหล่านี้มักเป็นไฟล์นามสกุล gif หรือไม่ก็ png ค่ะ  ดิฉันแนะนำโปรแกรมสำหรับทำ favicon ให้ง่ายที่สุดคือ photoscpae ค่ะ  เป็นฟรีแวร์ที่ใช้งานง่าย





 เมื่อเปิด Photoscape ขึ้นมาจะปรากฏหน้าจอดังรูป คลิ๊กเลือกแก้ไข



ลากรูปภาพที่เราต้องการแก้ไขจากเมนูบาร์ขวามือ มาวางตรงกลาง  จะสังเกตเห็นเมนู ย่อ/ขยาย เป็นแถบเมนูอยู่ด้านล่าง  คลิ๊กเลือก ย่อ/ขยาย หลังจากนั้นปรับเปลี่ยนขนาดของไฟล์รูปภาพที่จะเอามาทำ favicon ได้เลยค่ะ


เมื่อปรับเปลี่ยนขนาดให้เล็กลงพอที่จะให้โหลดได้เร็วขึ้นแล้ว   ถึงขั้นตอนบันทึกไฟล์ที่ได้ค่ะ  ขั้นตอนนี้เราสามารถเปลี่ยนชนิดหรือนามสกุลของไฟล์รูปภาพที่ได้ เลือกเป็น png,หรือ gif ค่ะ

ขั้นตอนที่ 3 ให้อัพโหลดไว้ที่เวบฝากไฟล์ หรือที่ picasa โดยใช้ Google account ของเพื่อน ๆอาจจะทดลองใช้  ตัวช่วยอัพโหลดไฟล์ช่วยอีกแรง เสร็จแล้ว copy link ของ ไฟล์รูปภาพ มาวางใน  บล็อกของเราค่ะ โดยให้เพื่อน ๆ login เข้าไปที่ blogger ไปที่ บล็อกที่เราจะปรับแต่ง >รูปแบบ>แก้ไข html>วาง link
image
โดยวาง link ไว้ระหว่าง code ดังกล่าว หากเป็นบล็อกดิฉันก็จะเป็นแบบนี้ค่ะ ก่อนวางก็แปลงให้เป็นcode html ก่อนนะคะ
<link href='url รูปภาพ' rel='shortcut icon' type='image/x-icon'/>
ส่วนชวนเพื่อนเขียนบล็อกก็จะมีรูปแบบดังนี้
<link href='http://4.bp.blogspot.com/_vlgV_WWIepk/StIZhZkaVdI/AAAAAAAAACo/jQoHeNao1FU/s400/beautifuleyes.gif'rel='shortcut icon' type='image/x-icon'/>
favicon_5
หลังวาง link เสร็จแล้วเลือกบันทึกรูปแบบ  หลังจากนั้นไปดูผลกันเถอะเลือกดูบล็อกค่ะ  ต่อท้ายนิดหนึ่งบางคนฝากไว้ที่ picasa แล้วหาลิงค์รูปภาพไม่เจอ  คลิ๊กที่รูปภาพใน picasa แล้วเลือกคัดลอกที่ตั้งภาพนะคะ   สังเกตไฟล์ที่ได้มันจะลงท้าย url เป็นนามสกุลของไฟล์นั้น ๆ  byebye
Related  Posts
ตัวช่วยจับภาพหน้าเวบ fireshot pro capture
เพิ่มความน่าสนใจให้บล็อกด้วยข่าวเด่น |feed
chat ผ่านหน้าบล็อกด้วย shout box



17 comments:

Acc.G-อมยิ้ม กล่าวว่า...

:)) มีประโยชน์ดีค่ะ :))

MeesubandMeesuk กล่าวว่า...

ขอบคุณค่ะ คุณ Acc.G-อมยิ้ม อย่าลืมแวะเวียนมาอีกนะคะ

Cartercho กล่าวว่า...

ใส่ favicon บ่อได้อ่าค่า ไม่รู้เป็นไร มันจะขึ้นว่า
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The value of attribute "href" associated with an element type "null" must not contain the '<' character
และก็ทำไซต์แม็พไม่ได้ด้วยอ่ะค่า http://raufahmedzaystory.blogspot.com/

meesubandmeesuk กล่าวว่า...

อ้าว คุณ Cartercho ดิฉันตอบช้าไปหรือเปล่าเนี่ย :D เห็น สัญลักษณ์ favicon ในบล็อกแล้วนี่คะ แล้ว sitemap ติดตรงไหนเหรอคะ ?

Cartercho กล่าวว่า...

แฮะๆ มั่วจนได้อ่ะค่ะ ขอบคุณนะคะ ตอนนี้ไม่มีปัญหาเรื่องนั้นแล้วค่ะ แต่ว่ามีเรื่องการ ฟีดค่ะ คือว่า ฟีด rss กะ atom เนี่ยะ จำเป็นต้องมีทั้งสองเลยรึเปล่าค่ะ เพราะรู้สึกว่าส่งsitemap ไปแล้ว มันขึ้นกากบาทแดง ได้อยู่สองอันอ่ะค่ะ
/atom.xml?redirect=false&start-index=1&max-results=100
และก็
/feeds/comments/default

เพิ่งเปลี่ยนชื่อ Blog ใหม่ ทราฟฟิกหายเกลี้ยงเลยเสียดายค่ะ บ็อทของกูเกิ้ลก็หายไปด้วย ดูในสแตท มีคนเข้าบล็อกวันละไม่ถึงยี่สิบคนจากทั่วโลก บล็อกเดิมเข้าเยอะกว่าแถม search ใน Google เจออันดับต้นๆเลยอ่ะค่ะ เสียดาย
http://winglessangelstory.blogspot.com/

Sun_pharma กล่าวว่า...

อัพโหลด Favicon ที่ picasa ไม่ได้อ่ะครับ T_T

มันขึ้นคำนี้ "(ถูกปฏิเสธโดยเซิร์ฟเวอร์)"

meesubandmeesuk กล่าวว่า...

บทความนี้เก่าไปแล้ว คงต้องแก้ไขแล้วหล่ะ เอางี้นะคะคุณ Sun_pharma ทำแบบนี้ค่ะ ไม่ต้องแปลงเป็นไฟล์นามสกุล *.ico ให้ใช้ไฟล์ภาพ pngหรือ gif ก็ได้แต่ขนาดของภาพไม่ควรเกิน 40*40 พิกเซลเพราะภาพมันจะใหญ่ไปแล้วค่อยฝากใน picasa ก็ได้ค่ะ ตอนที่ไปเอาลิงค์มาจาก picasa เอาลิงค์ไฟล์ภาพนะคะ มันจะต่อท้ายด้วยนามสกุลภาพเรา หากใช้ firefox คลิ๊กที่รูปภาพแล้วเลือก คัดลอกที่ตั้งภาพค่ะ วิธีการทำให้ไฟล์ภาพเล็กลงใช้ photoscape ก้ได้นะคะ หากไม่ด่วนไปคืนนี้จะแก้ไขบทความให้อ่านใหม่นะคะ กราบขออภัยแบบน้อม ๆ สุด ๆ เลย

meesubandmeesuk กล่าวว่า...

คุณ Sun_pharma คะ แก้ไขบทความแล้วนะคะ ยังติดขัดตรงไหนอยู่หรือเปล่า รอฟังคำตอบนะคะ :) แอบไปอ่านบทความเรื่องทำไมผู้หญิงถึงชอบ post รูปใน facebook เยอะ ๆ ทำให้ไม่กล้า post รูป คงต้องลดความถี่ซะแล้ว ;)

Sun_pharma กล่าวว่า...

555

ได้แล้วครับ คุณ meesubandmeesuk ขอบคุณมากๆอีกครั้ง

meesubandmeesuk กล่าวว่า...

ยินดีค่ะ คุณ Sun_pharma

ซ่อมคอมพิวเตอร์ กล่าวว่า...

ขอบคุณเทคนิคดีๆ ครับ
ขอลองไปติดดูบ้าง

ikidDee กล่าวว่า...

ขอบคุณครับ กำลังหาอยู่เลย

meesubandmeesuk กล่าวว่า...

ยินดีต้อนรับ ช่างซ่อมคอมพิวเตอร์และ ikidDEE ค่ะ

PC update กล่าวว่า...

ได้ความรู้มากครับ..ขอบคุณครับ
แต่มีโค้ดเพิ่ม icon ยิ้มในช่องคอมเม้นทำไงอะครับ

meesubandmeesuk กล่าวว่า...

PC update คะ แว้บไปอ่านบทความเรื่อง ชวนเพื่อนเขียนบล็อก: เติมไอคอนแสดงอารมณ์ใน comment box |blogspot ดูนะคะ

k.man กล่าวว่า...

วัดดีครับ ติดตามอยู่นะครับ

Food Master กล่าวว่า...

มีประโยชน์ ขอบคุณมากๆครับ

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