Pamula merupakan tema personal yang saya desain dengan beberapa referensi, Tema ini dibuat clean dan elegant untuk membuat lebeih fresh serta memaksimalkan fitur dari fungsi blogger agar dapat meminimalisir penggunaan javascript atau json blogger. Tema ini memiliki kecepatan super cepat seperti tema-tema yang saya share sebelumnya, tapi pada tema yang saya buat sekarang terus menggunakan fungsi javascript dan tidak ada jQuery di dalamnya. Kemungkinan kalian tidak akan paham karena terbiasa dengan jQuery. Pada tema ini kalian akan mendapatkan beberapa fitur menarik seperti : Kecepatan Loading Super Ngebut Dengan memiliki loading yang cepat pasti dapat membuat pengunjung menjadi lebih betah sebab tidak perlu cari Artikel serupa meskipun yang disebabkan oleh loading lambat. Saya sudah mencoba untuk mengetest kecepatan dengan bantuan dari GTmetrix dan Pagespeed. Untuk melihat hasilnya bisa cek gambar berikut: Kecepatan loading ini sudah saya test sendiri mengg...
Jika kemarin saya membahas Address Bar maka sekarang adalah Ikon pada Chrome, saya menyebutnya seperti itu... Ohhh sebelumnya saya akan meperlihatkan sesuatu untuk kalian yang belum paham dengan judul yang saya tulis diatas.
Dekstop
Android
Seperti yang bisa kalian lihat pada gambar diatas merupakan Ikon pada Browser Chrome dari Android dan Dekstop terdapat Ikon yang sama yaitu situs saya Pintarsaurus, perlu kalian ketahui seharusnya Ikon tersebut berupa nama "P" bukan "Logo". Mungkin Anda akan bertanya kenapa bisa berubah dari nama "P" menjadi "Logo", seperti yang saya jelaskan bahwa Browser modern memudahkan kita dalam menyesuaikan komponen tertentu.
Menambahkan Ikon di Chrome
Ketika pengguna/pengunjung membuka situs milik kita secara otomatis browser akan mencoba untuk mengambil ikon dari HTML, seperti yang kita ketahui bahwa ikon muncul di banyak tempat, termasuk tab browser, tombol recent app, laman tab yang baru (atau baru saja dikunjungi), tombol subscribe dengan ikon dan lainnya.
<link rel="icon" href="Your Icon">
<link rel="apple-touch-icon" href="Your Icon">
<meta name="msapplication-square310x310logo" content="Your Icon">Untuk menambahkan ikon pada sebuah Browser, kalian harus menambahkan sebuah kode head pada template blog. Lebih tepatnya pada bagian <head> atau diatas kode <b:skin>.
Kalian copy kode diatas dan taruh pada bagian <head> kalau binggung taruh saja pada kode <meta> yang mana saja, terpenting tepat berada di head
Kode diatas terdapat beberapa versi yang harus kalian ketahui seperti pada Browser, Chrome, Opera, Safare, IE (Internet Explorer), dan Windows Phone. Mari saya bahas satu-satu.
Chrome & Opera
Chrome dan Opera menggunakan Icon.png, yang diskalakan ke ukuran yang diperlukan oleh perangkat. Untuk mencegah penskala otomatis, Kalian bisa membuat Icon dengan menetapkan atribut sizes.
Note: Ukuran ikon harus 48px, 96px, 144px dan 192px
Safari
Safari juga menggunakan tag <link> dengan atribut rel: apple-touch-icon.Kalian bisa menetapkan ukuran eksplisit dengan menyediakan tag tautan yang terpisah untuk setiap ikon, mencegah OS dari mengubah ukuran ikon otomatis:
<link rel="apple-touch-icon" href="Your Icon">
<link rel="apple-touch-icon" sizes="76x76" href="Your Icon">
<link rel="apple-touch-icon" sizes="120x120" href="Your Icon">
<link rel="apple-touch-icon" sizes="152x152" href="Your Icon">Chrome & Opera
Layar beranda baru Windows 8 mendukung empat layout berbeda untuk situs yang dipasangi pin, dan membutuhkan empat ikon. Kalian bisa menghilangkan tag meta yang relevan jika kalian ingin mendukung ukuran tertentu.<meta name="msapplication-square70x70logo" content="Your Icon">
<meta name="msapplication-square150x150logo" content="Your Icon">
<meta name="msapplication-wide310x310logo" content="Your Icon">Diatas sudah saya jelaskan meskipun itu juga merupakan Referensi dari Developers Google, kalian bisa sesuaikan setiap kode <link> atau <meta> dengan ukuran yang di inginkan atau jika ingin lebih simple seperti yang saya jelaskan gunakan Icon dengan ukuran yang pas.
Comments
Post a Comment
To insert a code use <i rel="pre">code_here</i>To insert a quote use <b rel="quote">your_qoute</b>To insert a picture use <i rel="image">url_image_here</i>To insert a video use <i rel="video">video</i>Tinggalkan komentar sesuai topik tulisan, komentar dengan link aktif tidak akan ditampilkan. Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim.
thank you
ReplyDeleteoh script nya ditaruh di HTML ya gan...nanti dicoba deh
ReplyDeleteiya di html, dicoba pokonya jadi tambah keren
Delete