Sunday, November 14, 2010

Cara Mudah Tukar Favicon Blog

Anda sudah bosan dengan favicon Blogger.com yang berwarna oren? Mahukan kelainan dan identiti blog yang tersendiri? Favicon (favourite icon) adalah ikon kecil yang terdapat pada URL blog atau website anda. Apabila anda membuat blog di Blogger.com, favicon yang berada pada URL anda adalah berupa favicon blogger.

Baru-baru ini saya terjumpa tutorial yang yang mudah difahami untuk menukarkan favicon Blogger.com kepada apa-apa gambar yang kita ingini. Kemudian saya telah mengedit tutorial tersebut supaya lebih praktikal dan mudah diikuti. Contoh icon favicon yang telah di tukar tersebut boleh anda lihat pada gambar yang di tunjukkan di bawah.



YANG INI BERTUKAR MENJADI >>




DAN YANG INI PULA ...



BERTUKAR MENJADI >>



Untuk menukar ikon tersebut, sila ikut beberapa langkah yang di tunjukkan di bawah.

Langkah 1


Untuk menggantikan favicon asal kepada favicon anda sendiri, anda perlulah membina satu gambar. Ianya terpulang kepada kreativiti anda untuk membina gambar tersebut. Untuk mendapatkan hasil yang terbaik, saiz bagi gambar mestilah sama ukurannya. Sebagai contoh, 100px x 100px. Anda juga boleh menggunakan gambar muka anda sendiri jika mahu.

Cara mudah untuk menjadikan gambar yang sama ukurannya adalah dengan menggunakan Microsoft Office Picture Manager.

Right Click The Picture >> Open With >> Microsoft Office Picture Manager >> Edit Pictures >> Crop >> Refer Picture Dimension.

Langkah 2

Upload image tersebut pada file hosting. Anda juga boleh upload image tersebut pada post dan klik Saved. Seterusnya, salin URL image tersebut (lebih senang jika upload image pada post).


Bagi anda yang upload image tersebut pada post, URL yang di highlightkan pada contoh gambar di bawah adalah URL bagi image yang di upload itu.


Langkah 3

Paste URL image( rujuk langkah 2) dan paste pada teks Masukkan URL image di sini pada kod berwarna biru di bawah.

<link href='Masukkan URL image di sini' rel='shortcut icon'/>

Contoh kod yang telah di edit:

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI9y9Q4e1WoJdE8_UcxZ-7wxT00zjsv2TlLS2EuA2Gg0BL9FJCMrX-wt_rL5kHO7JJW49hcjjHoUadEvXSySI_NIu9U_NCX9kwn6_WuPET9T3c_nzeJWxGC3icA23vyEUEKtZzxP5kUFw/s1600/Copy+of+kartun.jpg ' rel='shortcut icon' type='image/x-icon'/>

Langkah 4

Log in blog >> Dashboard >> Design >> Edit HTML >> Tick pada kotak Expand Widget Templates.

Langkah 5

Dengan menggunakan keyboard, tekan kekunci Ctrl + F dan taip atau paste kod ]]></b:skin> pada ruang Find. Seterusnya tekan kekunci Enter.

Langkah 6 

Salin kod yang telah siap di edit tadi( rujuk langkah 3) dan paste kod tersebut di bawah atau selepas kod ]]></b:skin>


Contoh:


Akhir sekali, klik Preview dan jika tiada mesej Error yang terpapar, klik saja Save.


Siap. Lihatlah hasilnya pada blog anda. Sila post komen-komen anda di sini jika ada persoalan mengenai tutorial ini.

4 comments:

  1. @red hoodie
    afwan.. so far ade pe2 masalah dgn tutorial ni.. sumer ok??

    ReplyDelete
  2. kamu gune yang saya punye atau yg Tutorial Asal??
    at first, saya gne yang kat tutorial asal tu.. tapi xjadi..
    so bile sy wat macam yg totorial saya lak,baru jadi..
    kalo xjadi gak, saya rase mungkin salah copy URL.
    mungkin juga kmu paste kat tempat yg salah..

    ReplyDelete