Cara Memasang Meta Tag Theme Color di Blogspot

Cara memasang meta tag theme color di blogspot - Halo semuanya, pernahkah sobat mengunjungi suatu website atau blog melalui mobile browser, dan warna dari tampilan address bar mengikuti warna utama dari tampilan blog? Sama seperti blog www.gapura.net. Coba kunjungi blog ini menggunakan mobile browser seperti chrome android, maka address bar di chrome tersebut berubah warna menjadi merah mengikuti warna utama dari blog ini. Tentu saja seperti yang kita ketahui, warna address bar dari browser chrome adalah putih. Oh iya mengganti warna ini bisa diterapkan untuk wordpress dan blogger. So, jika tertarik untuk membuatnya, silahkan ikuti tutorial berikut

a. Cara Memasang Meta Tag Theme Color di Blogspot Part 1

Sebenarnya mengubah warna address bar itu cukup mudah, kita hanya perlu menambahkan sedikit script meta tag dibawah kode <head> yang ada dalam template blog. Dikarenakan mobile browser ini jenisnya bermacam-macam, ada Google Chrome, Firefox, Safari dari iOS, Opera, dll. Maka scriptnya juga akan berbeda.

1. Meta Tag Theme Color pada Browser Chrome atau Opera

Mengubah atau mengganti warna pada browser Chrome atau Opera, salin kode dibawah ini. Ingat gantilah kode warna yang ditandai dengan warna utama blog sobat. Lebih baik gunakan https://flatuicolors.com/ untuk mempermudah mendapatkan kode warna yang sobat inginkan.

<meta name="theme-color" content="#000000">

2. Meta Tag Theme Color pada Browser Windows Phone

Mengubah atau mengganti warna pada browser Windows Phone, salin kode dibawah ini. Ingat ya ganti kode warna yang saya tandai dengan warna utama blog sobat.

<meta name="msapplication-navbutton-color" content="#000000">

3. Meta Tag Theme Color pada Browser Safari iOS

Mengubah atau mengganti warna pada browser Safari iOS, salin kode dibawah ini. Ingat untuk ganti kode warna yang saya tandai dengan warna utama blog sobat.

<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="#000000">

4. Meta Tag Theme Color pada Semua Browser

Cara peletakan meta tag jika sobat ingin warnanya berubah untuk semua mobile browser, pada Google Chrome Android, browser Windows Phone maupun Safari di iOS/iPhone maka gunakanlah script kode meta tag dibawah seperti ini.

<!-- Untuk Google Chrome, Firefox & Opera --> 
<meta name="theme-color" content="#000000"> 
<!-- Untuk Windows Phone --> 
<meta name="msapplication-navbutton-color" content="#000000"> 
<!-- Untuk Safari iOS --> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="#000000">

5. Meta Tag Theme Color pada WordPress

#1. Pilih menu appearance »

#2. Pilih editor.

#3. Salin dan tempelkan kode meta tag diatas ke header.php, tepatnya DIBAWAH kode <head>

Cara Memasang Meta Tag Theme Color di Blogspot

6. Meta Tag Theme Color pada Blogspot

Nah karena kode dari wordpress diatas akan mengakibatkan error jika digunakan pada blogger, sehingga perlu diberi “/” diakhir kode. Sehingga kode pengganti warna pada blogger akan menjadi seperti ini.

<!-- Untuk Google Chrome, Firefox & Opera -->
 <meta name="theme-color" content="#cf2f1e"/>
<!-- Untuk Windows Phone -->
 <meta name="msapplication-navbutton-color" content="#cf2f1e"/>
<!-- Untuk Safari iOS -->
 <meta name="apple-mobile-web-app-capable" content="yes"/>
 <meta name="apple-mobile-web-app-status-bar-style" content="#cf2f1e"/>

Masuk ke blogger.
Pilih tema > pilih edit html.

Salin dan tempel kodenya tepat DIATAS </head>, atau letakkan tepat DIBAWAH kode <head>.
Coba sekarang silahkan buka blog sobat di chrome browser. Refresh atau buka kembali blog sobat apakah sudah ada perubahan.
Jika sudah, Selesai.

b. Cara Memasang Meta Tag Theme Color di Blogspot Part 2

Masuk ke blogger.
Pilih tema > pilih edit html.

Salin dan tempel kodenay tepat DIATAS </head>, atau tempel tepat DIBAWAH kode <head>.

<!-- Meta Tag Theme Color -->
<meta content='#000000' name='msapplication-navbutton-color'/>
<meta content='#000000' name='apple-mobile-web-app-status-bar-style'/>
<meta content='#000000' name='theme-color'/>


Simpan tema 
Refresh blog sobat untuk melihat hasilnya. 
Selesai.

Ket.:

Kode	Keterangan
#000000	Kode warna bisa diubah dengan keinginan sobat
msapplication-navbutton-color	Meta tag theme color untuk windows phone
apple-mobile-web-app-status-bar-style	Meta tag theme color browser safari ios
theme-color	Meta tag theme color chrome dan opera

Sekian dari saya cara memasang meta tag theme color di blogspot, Apabila ada kesulitan untuk memasang bisa ditanyakan langsung menuju kolom komentar (khusu untuk memulai membuat blog), Terimakasih.