Berbeda dengan fitur serupa yang ada di browser seperti Google Chrome atau Mozilla Prism, fitur site-specific-window yang ada di IE 9 ini bisa lebih terintegrasi dengan sistem operasi terutama OS Windows 7, salah satunya yaitu memungkinkan sebuah situs web menampilkan JumpList atau daftar Task tambahan tertentu untuk situsnya, pada menu aplikasi desktop.
Sebelumnya, JumpList atau daftar Task tambahan biasanya hanya ada pada aplikasi atau software desktop standar yang compatible dengan Windows 7, yang ditampilkan ketika seorang pengguna melakukan klik kanan pada icon taskbar software tersebut. Namun dengan kehadiran Internet Explorer 9 ini, sebuah website yang dijadikan aplikasi desktop pun dapat menampilkan JumpList, sehingga semakin menyerupai sebuah aplikasi desktop.
Bagi pemilik situs web atau blog yang ingin menyediakan menu JumpList ini pada aplikasi dekstop situsnya, perlu menambahkan kode tertentu pada header halaman webnya sehingga menu tersebut bisa dibaca oleh Windows 7 dan ditampilkan sebagai daftar Task ketika user meng-klik kanan icon aplikasi desktop situsnya.
Caranya adalah sebagai berikut.
1. Set Favicon
Favicon atau favorite icon adalah gambar icon untuk webseite tertentu yang biasa terlihat pada address bar dan juga tab di browser. Sebaiknya pemilik situs atau blog menampilkan atau men-set image favicon ini, agar situs/blognya bisa dengan mudah ditandai atau diidentifikasi oleh pengunjung dan pengguna situsnya.
Untuk membuat sebuah icon sebagai favicon, bisa dilakukan dengan software icon editor, atau bisa juga dengan memanfaatkan layan online, seperti pada situs iConvert (buka di sini) atau layanan lainnya. Icon favicon tersebut kemudian bisa diupload, dan kemudian ditampilkan di situs/blog dengan menambahkan kode seperti berikut ini di antara tag
<head> dan </head> di halaman/template webnya:<link rel="shortcut icon" type="image/x-icon" href="URL-FAVICON" />
<link rel="icon" type="image/ico" href="URL-FAVICON">
Ketika situs web tersebut dijadikan aplikasi desktop, favicon itulah yang ditampilkan sebagai icon desktop-web-application oleh Windows.
*
2. Kode Meta Tag Data Situs
Kode ini adalah data konfigurasi yang digunakan Windows untuk aplikasi desktop dari sebuah website. Tambahkan kode seperti ini di antara tag
<head> dan </head> di halaman/template web:<meta name="application-name" content="Nama Situs" />
<meta name="msapplication-tooltip" content="Teks keterangan tooltip" />
<meta name="msapplication-starturl" content="http://example.com/" />
<meta name="msapplication-window" content="width=1024;height=768" />
<meta name="msapplication-navbutton-color" content="#3366ff" />
Seperti terlihat pada kode di atas, daftar meta tag untuk aplikasi website itu adalah:
application-name: Nama atau judul situs.msapplication-tooltip: Keterangan situs yang akan muncul bila pengguna menempatkan kursor pada icon web application.msapplication-starturl: Halaman awal atau Homepage situs.msapplication-window: Ukuran default window ketika user pertama kali membuka window situs tersebut (widthdanheight).msapplication-navbutton-color: Warna tombol navigasi back dan forward.
*
3. Kode Meta Tag Daftar JumpList
Menampilkan menu pada web aplikasi dektop situs dengan menambahkan daftar kode meta tag berikut ini di antara tag
<head> dan </head> di halaman/template web:<meta name="msapplication-task" content="name=Judul Menu 1;action-uri=http://example.com/menu1.html;icon-uri=http://example.com/favicon-1.ico" />
<meta name="msapplication-task" content="name=Judul Menu 2;action-uri=http://example.com/menu2.html;icon-uri=http://example.com/favicon-2.ico" />
<meta name="msapplication-task" content="name=Judul Menu 3;action-uri=http://example.com/menu3.html;icon-uri=http://example.com/favicon-3.ico" />
Seperti terlihat pada kode di atas, anda perlu memasukkan data
name, action-uri dan icon-uri (nama/judul, url halaman web, dan url icon). Jumlah daftar menu yang bisa dipasang maksimal 5 (lima) alamat.*
*
Contoh Pemasangan Kode Lengkap JumpList
Berikut ini adalah kode lengkap yang saya pasang di situs blog inimu.com ini:
<link rel="shortcut icon" type="image/x-icon" href="http://inimu.com/favicon.ico" />
<link rel="icon" type="image/ico" href="http://inimu.com/favicon.ico">
<meta name="application-name" content="Blog Indonesia - inimu.com" />
<meta name="msapplication-tooltip" content="inimu.com - Blog bebas, berita, komputer" />
<meta name="msapplication-starturl" content="http://inimu.com/" />
<meta name="msapplication-window" content="width=1024;height=768" />
<meta name="msapplication-navbutton-color" content="#3366ff" />
<meta name="msapplication-task" content="name=Blog Bebas;action-uri=http://inimu.com/bebas;icon-uri=http://inimu.com/favicon.ico" />
<meta name="msapplication-task" content="name=Blog Berita;action-uri=http://inimu.com/berita;icon-uri=http://inimu.com/favicon.ico" />
<meta name="msapplication-task" content="name=Blog Komputer;action-uri=http://inimu.com/komputer;icon-uri=http://inimu.com/favicon.ico" />
<meta name="msapplication-task" content="name=Perihal;action-uri=http://inimu.com/perihal;icon-uri=http://inimu.com/favicon.ico" />
<meta name="msapplication-task" content="name=Kontak;action-uri=http://inimu.com/kontak;icon-uri=http://inimu.com/favicon.ico" />
Dan hasilnya, ketika icon web-application inimu.com di desktop diklik kanan, akan muncul tambahan menu Task seperti yang terlihat pada screenshot di awal artikel ini.
Atau, bila aplikasi web di pasang pada Start Menu, tampilannya seperti ini:
Keren juga ya?
Kalau mau coba, bila sedang menggunakan browser Internet Explorer 9 di Windows 7, tarik saja tab halaman artikel ini ke Taskbar Windows 7. Atau bisa juga dengan cara klik tombol Tool (tombol bergambar roda) di pojok kanan atas browser IE 9 => klik File => klik Add site to Start menu. :D
*
Sementara ini, fitur seperti itu hanya ada di IE9. Tapi saya kok sepertinya yakin fitur serupa juga akan diadopsi dan disediakan oleh browser-browser lainnya, mengingat kepopuleran sistem operasi Windows.
.
mantap nih kayaknya...full stylish keliatannya
ReplyDeleteya sungguh mantap layanan situs sekarng...
ReplyDeletelebih lengkap
good information, very helpful. Thanks.. :lol: :wink: Buat info hadir disini :wink:
ReplyDelete