SAHABAT SAHABAT MAYA

Saturday, November 15, 2008

CARA MASUKKAN FAVICON UNTUK BLOG

Salam to all readers,

Ini adalah post pertama regarding to blog tips.Saya teruja untuk berkongsi dengan pembaca semua mengenai cara masukkan favicon (short for favorites icon) di address bar seperti dibawah.Icon gambar itu dipanggil favicon.Also known as a website icon, shortcut icon, url icon, or bookmark icon.








Saya dah try and error beberapa kali setelah belajar daripada blog -blog tertentu dan last sekali saya berjaya hasilkan favicon daripada sifu Muhammad Ihsan (Syukran)

Ok,tanpa membuang masa saya akan tunjukkan step by step.Ini untuk favicon yg biasa ajer.Untuk animated favicon,anda boleh cuba sendiri jer.


1) Sediakan satu gambar contohnya (format jpeg,png ke ) untuk dijadikan favicon,Size lebih kurang 16X16.Tapi saya tak ikut size pun.

2) Convert image untuk menjadi favicon.Ada banyak favicon generator .Saya gunakan generator ini.http://www.htmlkit.com/services/favicon/.Upload gambar anda.













3) Generate butang favicon dan anda akan mendapat paparan seperti dibawah.














4) Download favicon.

5)Upload favicon seperti di photobucket ,geocities dan sebagainya yg bersesuaian.Saya upload di geocities.

6) Setelah upload favicon di geocities right click kat View dan copy url image.

7) Seperti biasa log in ke blogger, kemudian klik layout>edit html.


8) Cari
Nak senang tekan Ctr+F


9)Sebelum
copy kod ini.

<link href='http://gantidenganurlanda/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>

9) Save dan cuba cuba lihat kat address bar .Kalau ada maksudnya menjadi ler tu.Kalau tak jadi anda boleh check kat sini samaada wujud atau tidak favicon anda.


*Sila gantikan perkataan yang di warnakan dengan merah dengan URL icon anda.

Ok yer.Panjang sangat dah ni explaination .Selamat mencuba.




1 comment:

AlmansuQie™ said...

salam ustazah...bagus tutorial ni..Ana ada tutorial yg sm tp lebih ringkas dan mudah..Moga boleh dikongsi http://almansuqie-tips.blogspot.com/2008/11/cara-mengganti-icon-pada-address-bar.html