Blogging - Favicon bergerak mungkin masih jarang kita temui di dunia maya, terlebih tak semua kawan blogger memperhatikan hal kecil tapi menarik ini. Sebuah ikon kecil yang akan tampil di depan judul atau nama blog yang kita miliki dan umumnya berupa gambar logo atau gambar foto berukuran sangat kecil. Tapi beberapa waktu lalu PS menemukan sesuatu yang unik seputar favicon ini, yaitu kita bisa membuat favicon bergerak dengan mengkombinasikan antara foto dan teks. Nah, coba kawan perhatikan bagian paling atas dari browser kawan-kawan, di depan judul posting ini ada gambar dan teks yang berjalan kan? Ya, itu favicon bergerak yang PS maksud.
Di dalam Wikipedia Indonesia disebutkan bahwa favicon merupakan icon utama yang muncul pada address bar (baris alamat) suatu website dan merupakan logo dari website tersebut. Favicon juga dikenal sebagai shortcut icon, website icon, URL icon, atau bookmark icon. | Sumbernya
Berikut ini coba dibuatkan tata cara membuat favicon bergerak seperti yang telah PS terapkan di blog ;
Silakan kawan blogger siapkan sebuah gambar atau logo blog (usahakan berukuran persegi), lalu buka situs berikut ini <<
Pada halaman situs tersebut, upload gambar atau logo blog yang telah disiapkan tadi dan tuliskan teks yang hendak ditampilkan pada form di bawahnya (biasanya diisi dengan alamat situs blog) | perhatikan gambar 1
Klik tombol Create Favicon, tunggu beberapa saat hingga proses selesai dan geser sedikit ke bawah pada halamat tersebut hingga ketemu tombol Get it Now!
Klik tombol Get it Now dan simpan berkas file terkompresi yang teruduh ditempat yang aman. | Perhatikan gambar 2
Selamat! File untuk favicon bergerak kamu sudah jadi. Lalu bagaimana cara memasangnya di blog? Oke, caranya dijelaskan dibagian bawah gambar-gambar berikut ini ya 
Gambar 1 : Unggah foto atau logo Blog dan isi teks yang ingin dijadikan Favicon Bergerak Blog kamu
Gambar 2 : Tekan tombol Get it Now dan Simpan file Favicon Bergerak dalam file terkompresi
Cara Menampilkan atau Memasang Favicon Bergerak
Nah, setelah kita berhasil membuat dan menyiapkan file favicon bergerak, langkah selanjutnya adalah menempatkan kode icon situs blog di bagian halaman blog yang kita miliki. Berikut ini langkah demi langkah cara memasang favicon bergerak yang dimaksud (gambarnya tetap dibagian bawah lagi):
Pertama ya tentu file hasil download terkompresi di atas tadi di ekstrak dulu, alias kita keluarkan isinya. Lalu klik atau buka tombol readme.txt yang ada disana. Lakukan block pada kode yang ada seperti pada gambar dan klik kanan salin (copy) | Perhatikan gambar 3
Buka dasbor blog kamu dan menuju ke menu Tampilan > Penyunting > header.php(Kepala Halaman). Tempat kode yang kamu sali tadi di bawah kode html untuk titleseperti pada gambar. Lakukan penyesuain kode setelah pada bagian href untuk dua file favicon yang ada menjadi href=”http://situsmu.tld/animated_favicon.gif” dan jugahref=”http://situsmu.tld/favicon.ico” (Nambahin URL blog kamu didepannya kalau masih bingung) dan klik Mutakhirkan Berkas atau Update File | Perhatikan gambar 4
Upload file animated_favicon.gif dan favicon.ico ke root directori blog melalui file manager hosting atau melalui program FTP yang kamu miliki. | Simak lagi gambar 3
Oke, Selamat ya! Blog kamu sekarang sudah memiliki favicon bergerak seperti yang dimiliki Prapto Sragen
Gambar 3 : Hasil Ekstraksi file unduhan untuk Favicon Bergerak. Lalu buka readme.txt
Gambar 4 : Penempatan kode dibagian header.php file theme WordPress agar favicon bergerak muncul
Lokasi Favicon Bergerak tetap sama seperti sedia kala, hanya sekarang seperti Moving Text :-)
Oke deh, sekarang sudah paham kan dan waktunya untuk praktik sendiri ya Oh ya bedawordpress theme mungkin beda juga struktur kode phpnya ya, jadi harap diperhatikan jika kode favicon harus ditempatkan setelah <head> dan sebelum </head>. Kalau masih ada yang bingung dan ingin ditanyakan, silakan tinggalkan pesan pada kolom komentar di bawah ya. Semoga bermanfaat.
Oh ya bedawordpress theme mungkin beda juga struktur kode phpnya ya, jadi harap diperhatikan jika kode favicon harus ditempatkan setelah <head> dan sebelum </head>. Kalau masih ada yang bingung dan ingin ditanyakan, silakan tinggalkan pesan pada kolom komentar di bawah ya. Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar