Membuat Favicon Bergerak (Animasi) di Blog
Motivation - Kali ini saya akan memberikan Tutorial Blog, yaitu "Membuat Favicon Bergerak (Animasi) di Blog". Anda pernah melihat tidak favicon blog yang bergerak (Animasi)? pernah bukan. lalu anda pernah mencoba hal tersebut dengan mencari caranya di google, namun hasilnya gagal, favicon anda tetap tidak bergerak.
Untuk kali ini saya kan menjelaskan tutorialnya agar favicon anda dapat bergerak. Ikuti Langkah-langkah di bawah ini.
- Siapkan gambar yang hendak anda jadikan favicon, atau anda dapat mencarinya di situs-situs yang menyediakan gambar icon gratis. Anda dapat pula mencari gambar favicon maupun animated favicon gratis. Gunakan keyword "free favicon/animated favicon image" di Google.
- Untuk membuat file ico, anda dapat menggunakan photoshop atau gunakan jasa situs generator ico gratis seperti: www.favicon.cc, www.favicongenerator.com, atau www.favicon.co.uk. Untuk animated favicon anda (gif) anda dapat membuat animasinya di situs www.animatedfavicon.com. Upload file anda ke situs-situs tersebut, ikuti beberapa langkahnya, dan download file hasilnya.
- Upload file favicon anda ke situs hosting gambar yang mensupport gambar ico karena Blogger tidak mensupport upload gambar berformat ico.
- Copy terlebih dahulu direct link dari gambar yang telah diupload.
- Kemudian masukkan url-nya ke script tag berikut ke bagian antara <head> dan </head> di template HTML anda. Saya sarankan untuk dimasukkan setelah meta tag agar cepat termuat oleh browser namun tidak mengganggu meta.
<link href='url gambar .ico anda' rel='shortcut icon' type='image/vnd.microsoft.icon'/>Untuk animated favicon file gif:
<link href='url gambar gif anda' rel='icon' type='image/gif'/>
Untuk menggunakan kedua-duanya dan berjaga apabila file gif gagal dimuat oleh koneksi yang sangat lambat, gunakan kedua file ico dan gif anda. Masukkan kedua tag dengan urutan sebagai berikut:
<link href='url gambar .ico anda' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<link href='url gambar gif anda' rel='icon' type='image/gif'/>
- Klik Preview, kalau udah berhasil, save langsung.
- Done
Nah Itulah Tutorial Blog Kali ini "Membuat Favicon Bergerak (Animasi) di Blog". Semoga Bermanfaat. Terima Kasih.
Motivation_2014Arsip
Pertamaxx...
ReplyDeleteThanks Gan, Tutorialnya Work 100%