Cara Membuat dan Memasang Manifest.json Di Blogger, Shortcut URL Web/blog di Layar Beranda Ponsel

Baik Teman - teman, kali saya akan membagikan tutorial Cara Membuat dan Memasang Manifest.json Di Blogger. Langsung saja, Manifest.json atau Manifest Aplikasi Web secara sederhana bisa disebut sebagai shortcut URL blog untuk perangkat mobile. Dengan manifes ini, pengguna mobile dapat menyimpan shortcut URL blog di layar beranda ponsel.

shortcut URL blog di layar beranda ponsel Ferlyando Sandala. 

Dengan shortcut URL di layar beranda ponsel, pengguna dapat dengan mudah menuju website/blog dengan mengklik ikon website/blog di layar beranda ponsel seperti halnya membuka sebuah aplikasi.

Sehingga dengan ini, pengguna tidak perlu membuka browser terlebih dahulu kemudian mengetik URL untuk membuka website/blog kita di ponsel mereka.

Hal ini sama dengan shortcut URL blog pada zamannya sebelum ada ponsel, tapi sekarang masih banyak digunakan oleh website/blog-website/blog download. Biasanya website/blog download akan menyertakan shortcut URL di dalam file agar memudahkan pengguna menuju/masuk kembali ke website/blog mereka.

Namun di zaman sekarang yang serba ponsel ini, sepertinya belum banyak web/blog yang menggunakan manifes ini. Itu karena kurangnya pengetahuan blogger/developer web tentang manifes ini.

Agar lebih mudah memahami apa itu manifest.json pada website/blog, sebagai demo silahkan akses blog pribadi saya Ferlyando Sandala ini.

Dengan ponsel Anda pada browser Google Chrome buka blog saya ferlyandosandala.my.id. Kemudian klik ikon 3 titik di Chrome di kanan atas lalu pilih "Tambahkan ke layar utama". Setelah itu silahkan menuju layar utama ponsel dan temukan ikon FerlyandoSandala. Coba klik ikon tersebut, maka blog pribadi saya Ferlyando Sandala akan terbuka dengan mudah.

Jika Anda ingin membuat manifes seperti itu, silahkan ikuti langkah-langkah berikut:

1. Buat ikon blog segiempat seperti Anda membuat ikon untuk favicon. Buat ikon PNG dengan ukuran 512x512 seperti logo saya diatas.

ini  contoh link logo diatas:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWSYKMktSU0Pxvb-739O4_0ViV51C9uJWKZTx2v6CAx7Q-f-CZlMwodwANTUBUgvif7Ajqyl_CCYJhyphenhyphenyw8mPwUekSpZ5mWPd1qhlrdes_z7pIy2UMUz3uY1tcPvzf3diy2Zwk5iqy7pFHD/s16000/ferlyando%2Bsandala.png

Ukuran yang saya warnai merah yang akan dubah sesuai yang ukuran yang akan saya buat dibawah.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWSYKMktSU0Pxvb-739O4_0ViV51C9uJWKZTx2v6CAx7Q-f-CZlMwodwANTUBUgvif7Ajqyl_CCYJhyphenhyphenyw8mPwUekSpZ5mWPd1qhlrdes_z7pIy2UMUz3uY1tcPvzf3diy2Zwk5iqy7pFHD/s512/ferlyando%2Bsandala.png

2. Buka notepad lalu copy kode dibawah ini dari kode { sampai }:

{

  "name": "NAMA BLOG ANDA",

  "short_name": "NAMA IKON BLOG ANDA",

  "scope": "URL HOMEPAGE",

  "start_url": "URL HOMEPAGE",

  "display": "standalone",

  "background_color": "#000",

  "theme_color": "#000",

  "description": "DESKRIPSI BLOG ANDA",

  "icons": [{

    "src": "https://3.bp.blogspot.com/........./........./s48/logo.png",

    "sizes": "48x48",

    "type": "image/png"

  }, {

    "src": "https://3.bp.blogspot.com/........./........./s72/logo.png",

    "sizes": "72x72",

    "type": "image/png"

  }, {

    "src": "https://3.bp.blogspot.com/........./........./s96/logo.png",

    "sizes": "96x96",

    "type": "image/png"

  }, {

    "src": "https://3.bp.blogspot.com/........./........./s144/logo.png",

    "sizes": "144x144",

    "type": "image/png"

  }, {

    "src": "https://3.bp.blogspot.com/........./........./s168/logo.png",

    "sizes": "168x168",

    "type": "image/png"

  }, {

    "src": "https://3.bp.blogspot.com/........./........./s192/logo.png",

    "sizes": "192x192",

    "type": "image/png"

  }, {

    "src": "https://3.bp.blogspot.com/........./........./s512/logo.png",

    "sizes": "512x512",

    "type": "image/png"

  }]

}

Silahkan sesuaikan poin-poin di atas dengan website/blog Anda. Untuk short_name buat nama maksimal 12 huruf agar nama tidak terpotong ketika tampil di layar utama ponsel.

Untuk URL ikon, silahkan upload ikon yang Anda buat tadi di langkah pertama di postingan Blogger lalu ambil URL image-nya. Sesuaikan kode .../s.../... pada URL image Blogger sesuai size ikon, perhatikan kode yang ditandai.

Setelah semuanya sesuai, silahkan SAVE AS dengan nama manifest.json dengan type All Types. Kemudian silahkan hosting file manifest.json tersebut, bisa menggunakan Github.

Kalau belum punya akun github.com buatlah akun. Setelah masuk di akun github, klik Repositories New.

Habis itu di Repository name, kita buat nama apa yang teman-teman suka, contohnya buat nama "manifest", di Description mau diisi atau dikosongkan tidak masalah.

Kemudian biarkan di Publik, lalu klik Add a README file, lalu klik create repository.

Setelah itu, masuk ke tab baru. klik di Add file, klik upload file, lalu klik choose your files dan upload file yang sudah kita buat tadi.

Setelah selesai upolad filenya, scroll kebawah dan Commit changes.

Setelah itu, klik kanan di file yang sudah di upolad tadi yang sudah dinamakan manifest.json lalu simpan di notepad.

Kita kelangkah berikut.

Buka Statically.io atau jsdelivr.com paste link manifest yang sudah kita copy di notepad tadi biar linknya jadi. Lalu copy link yang sudah di paste tadi ke URL HOSTING FILE manifest.json ANDA di bawah yang sudah saya kasih warna merah.

3. Kemudian silahkan simpan kode berikut di edit HTML blog Anda di bawah kode <head>

<link href='URL HOSTING FILE manifest.json ANDA' rel='manifest'/>

4. Kemudian silahkan simpan kode berikut di edit HTML blog Anda di bawah kode <head> diatas file manifest.json.

<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>

<link href='https://3.bp.blogspot.com/........./........./s32/logo.png' rel='icon' sizes='32x32'/>

<link href='https://3.bp.blogspot.com/........./........./s192/logo.png' rel='icon' sizes='192x192'/>

<link href='https://3.bp.blogspot.com/........./........./s180/logo.png' rel='apple-touch-icon' sizes='180x180'/>

<meta content='https://3.bp.blogspot.com/........./........./s144/logo.png' name='msapplication-TileImage'/>

Sekarang silahkan coba manifes blog Anda di ponsel. Silahkan akses blog Anda dengan ponsel Anda pada browser Google Chrome. Kemudian klik ikon 3 titik di Chrome di kanan atas lalu pilih "Tambahkan ke layar utama". Setelah itu silahkan menuju layar utama ponsel dan temukan ikon blog Anda lalu coba klik ikon tersebut.

Dan perlu diketahui, manifes aplikasi web ini merupakan salah satu unsur SEO blog juga. Dan ini akan berguna juga jika Anda membuat PWA (Progresive Web Apps) untuk blog Anda.

Anda juga bisa menyimak tentang manifes web aplikasi ini di Google Develover https://developers.google.com/web/fundamentals/web-app-manifest/?hl=id

Ok teman-teman, sekian dulu artikel saya tentang bagaimana "Cara Membuat dan Memasang Manifest.json Di Blogger"

Selamat mencoba.

Share this post