Cara Memasang Web Clip Icon Shortcut Untuk Blog

Memiliki web clip icon shorcut atau site icon sama penting sepertimana favicon di blog, lebih – lebih lagi pengguna peranti mudah alih semakin hari semakin bertambah. Penggunaan site icon akan memudahkan pelawat atau pembaca untuk mengenal pasti dan seterusnya mengingati laman blog berdasarkan icon atau logo yang dipaparkan. Web Clip Icon juga dikenali dengan pelbagai panggilan, antaranya bookmark icon, icon shortcut, web app icon, site icon, mobile web app dan sebagainya. Ia mula diperkenalkan oleh Apple selepas pengenalan iOS 1.1.3 dan seterusnya.

Penggunaan web clip icon memberi kelebihan kepada pembaca yang melayari laman blog menggunakan peranti mudah alih seperti smartphone dan tablet (Android dan iOS). Mereka boleh memaparkan icon shortcut sesebuah blog atau laman web yang dikehendaki ke homepage peranti masing – masing untuk memudahkan akses.

Web Clip Icon

Cara Memasang Web Clip Icon Shortcut Di Blog

Proses pemasangannya tidaklah rumit memandangkan terdapat beberapa laman web yang menyediakan servis icon generator secara percuma online. Anda hanya perlu sediakan icon atau logo yang mewakili blog dan gunakan servis icon generator yang saya kongsikan di bawah untuk mendapatkan saiz yang diperlukan.

NOTA : Menerusi tutorial ini, saya menggunakan servis dari Pic2icon.
  • Upload imej atau logo anda di Pic2icon dan lakukan beberapa setting yang anda inginkan dan kllik Apply button.
  • Setelah selesai, muat turun kesemua imej (4 imej) yang selesai di generate ke PC / laptop.
PERHATIAN : Jangan ubah sebarang imej name yang di muat turun kecuali anda tahu apa yang anda lakukan.
  • Upload kesemua imej (4 imej) ke file wordpress root anda menerusi cPanel atau FTP. (cPanel -> public_html).
  • Copy HTML code yang disediakan oleh Pic2icon dan Paste di header wordpress blog anda. Cth :-
<link rel=”apple-touch-icon” href=”http://mobilityworlds.com/wp-content/uploads/2013/05/apple-touch-icon-iphone.png” />
<link rel=”apple-touch-icon” sizes=”72×72″ href=”http://mobilityworlds.com/wp-content/uploads/2013/05/apple-touch-icon-ipad.png” />
<link rel=”apple-touch-icon” sizes=”114×114″ href=”http://mobilityworlds.com/wp-content/uploads/2013/05/apple-touch-icon-iphone4.png” />
<link rel=”apple-touch-icon” sizes=”144×144″ href=”http://mobilityworlds.com/wp-content/uploads/2013/05/apple-touch-icon-ipad3.png” />
INFO : Bagi pengguna Genesis theme seperti blog ini, anda boleh simpan HTML code di (Genesis -> Theme Settings -> Header and Footer Script)

Sumber Tambahan : apple.com

Produk Akhir

Site Icon di iOS (iPhone dan iPad)

Untuk memaparkan web clip icon atau site icon di peranti iOS, pengguna hanya perlu browse (stock browser – Safari) ke blog yang dikehendaki dan klik Share button. Pilih Add To Home Screen, dan site icon akan dipaparkan di home screen peranti iOS anda. Rujuk imej di bawah.

iOS

Sumber : apple.com

Site Icon di Android

Di peranti Android, web clip icon atau icon shortcut ini boleh diperolehi menerusi cara berikut. Browse ke blog yang dikehendaki (stock browser), klik Menu dan pilih Add Shortcut to Home Screen. Rujuk imej di bawah.

Android

Final Thought

Personally, saya amat mengesyorkan penggunaan web clip icon bagi pemilik blog memandangkan pengguna peranti mudah alih semakin hari semakin bertambah. Ciri ini mampu memberi nilai tambah dari aspek kualiti dan estetika blog anda di mata pembaca dan pelawat.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current ye@r *