Friday, July 15, 2011

[Tutorial 11] Letak 'favicon' di blog

Walaupun aku rasa macam semua orang dah tahu apa itu favicon dan cara letak favicon ni dekat blog, tapi aku still nak kongsikan jugak serba sedikit pasal ni terutamanya kepada blogger-blogger baru.
"A favicon (short for favorites icon), also known as a shortcut icon, Web site icon, URL icon, or bookmark icon, is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page. A web designer can create such an icon and install it into a Web site (or Web page) by several means, and graphical web browsers will then make use of it.Browsers that provide favicon support typically display a page's favicon in the browser's address bar and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as desktop icon."

Jadi dah tahu apa itu favicon? Kalau tak faham lagi, ni ada gambar contoh favicon di blog-blog aku.


Mungkin korang rasa bosan dengan icon blogger/blogspot yang biasa korang nampak di blog. Jadi ini ada cara yang mudah nak letak favicon di blog korang. (Kalau korang pakai wordpress tak perlu susah-susah buat macam ni. Hehe.)


1. Cari atau ambil apa-apa gambar yang korang suka.
2. Kalau gambar tu bersaiz besar, jadi korang boleh edit pakai apa-apa photo editor. Kalau aku, aku suka pakai PhotoScape. Then, edit kepada saiz 16 x 16 pixels.


Contoh gambar.

Resize.

16 x 16 pixels.

Tada! Dah jadik kecik seto'et!
3. Kemudian, uploadkan gambar tersebut ke mana-mana image hosting. Contohnya, Photobucket.



4. Dari situ kita boleh dapatkan link atau IMG code gambar tersebut.
5. Buka Dashboard > Design > Edit HTML
6. Cari (Ctrl + F) " </head> "

7. Copy code dibawah dan gantikan tulisan merah dengan link atau IMG code gambar yang korang dah upload di Photobucket tadi.
<link href='http://i1233.photobucket.com/albums/ff390/Yoyayee/tn-umblr_laqbwqSvL61qcwwnl_testing.jpg' rel='shortcut icon' type='image/gif'/>
8. Kemudian 'paste'kan code di atas selepas atau di bawah code " </head> " 
9. Jangan lupa backup template dulu sebelum SAVE. Ini untuk mengelakkan daripada perkara yang tidak diingini berlaku.
10. Save Template dan View blog.
11. Siap!
Tapi...


...sekarang aku nampak blogger.com dah tambah "favicon" di bahagian Page Elements. Jadi, memang sangat memudahkan. Tak payah nak pening tengok atau edit coding bagai. Korang hanya perlu gunakan gambar yang sudah di'edit' ke saiz 16 x 16 pixels tadi.


...dan uploadkan saja di situ.

Senang! 


*Psss: Tutorial ni hanya untuk newbie blogger yang tak tahu lagi apa itu favicon dan tak tahu nak buat favicon macam mana. Harap membantu ini ya! :)

No comments:

Related Posts with Thumbnails