Wednesday, November 28, 2007

Membuat Ikon Blog

Setiap situs yang memiliki ikon/logo situs biasanya menampilkan ikon versi kecilnya di bagian kiri address bar dan juga di bagian kiri title situs. Ikon kecil ini disebut favicon (singkatan dari favorites icon). Nah, kita pun bisa menampilkan favicon sesuai kehendak kita sendiri di situs/blog kita. Caranya sangat mudah. Saya pun mendapatkan ilmu ini hanya dengan melihat page source suatu situs. Bagaimana caranya? Pertama, tentu kita harus mempersiapkan sebuah ikon kecil yang nantinya akan ditampilkan di kedua bagian tersebut. Biasanya ikon ini berukuran 16x16 piksel kuadrat atau 32x32 piksel kuadrat. Namun, saya sarankan buatlah yang berukuran 16x16 piksel kuadrat (ikon blog saya ini pun berukuran demikian) karena ruang untuk favicon sangatlah kecil. Untuk membuatnya, gunakanlah penyunting gambar sesuai selera masing-masing (yang penting bisa membuat file .ico), seperti Paint, Paint.NET, dan Visual Studio. Walaupun tidak ada pilihan untuk menyimpan berkas sebagai berkas ikon (.ico), Paint dan Paint.NET tetap bisa membuatnya. Caranya ketikkan nama berkas diikuti .ico di kolom "File name" dan pilihlah tipe gambar JPEG di kolom "Save as type". Untuk membuat ikon blog ini saya menggunakan Visual Studio. Kakas yang sejatinya diperuntukkan untuk pemrograman ini bisa membuat berkas ikon (.ico) -- yang seharusnya untuk membuat ikon program -- dengan latar belakang transparan. Untuk Paint.NET kita bisa menggunakan plugin yang harus diinstalasi terlebih dahulu untuk membuat latar belakang transparan, sedangkan di Paint saya tidak mengerti cara membuat latar belakang transparan (sepengetahuan saya, program ini tidak bisa melakukannya). Sebenarnya ada banyak sekali kakas pembuat ikon. Cobalah googling dengan kata kunci ico creator. Sebelum lanjut ke langkah berikutnya, alangkah baiknya kita terlebih dulu mengecek apakah ikon yang kita buat dapat ditampilkan dengan baik atau tidak. Caranya, buka berkas .ico tersebut dengan menggunakan internet browser. Ada banyak cara untuk melakukannya. Salah satunya dengan klik kanan berkas .ico tersebut kemudian pilih "Open With" dan pilihlah internet browser (misalnya Mozilla Firefox). Saya telah mencobanya di Mozilla Firefox dan berhasil, sedangkan di Internet Explorer tidak bisa (kecuali dibangkitkan dari kode HTML yang akan dijelaskan di bawah ini). Setelah berkas ikon tersebut siap, unggahlah berkas tersebut ke tempat yang bisa diakses oleh semua orang. Sebagai catatan, kita tidak bisa mengunggah berkas .ico ke album web Picasa kita. Oleh karena itu, gunakanlah tempat lain. Kemudian kita beralih ke pengaturan blog kita. Masuklah ke menu "Layout" -> "Template" -> "Edit HTML". Tambahkan kode <link rel='shortcut icon' href='[link gambar .ico]'/> di bagian head (antara <head> dan </head>). Agar lebih mudah, letakkan kode tersebut tepat di bawah tag <head>. Contoh: <head> <link rel='shortcut icon' href='http://students.itb.ac.id/~hafni_syaeful_s/img/favicon.ico'/> Jangan lupa untuk menyimpan template tersebut. Selesai. Sekarang, lihatlah (tampilan) blog tersebut dan berikan komentar kamu di sini. Catatan: Cara ini bisa diaplikasikan untuk semua situs, tidak hanya di Blogger saja, karena kode yang ditambahkan merupakan kode HTML biasa.