Cara Memasang Meta Tag Theme Color di Blogspot

Cara Memasang Meta Tag Theme Color di Blogspot

Cara memasang meta tag theme color di blogspot. Cara memasang template color blogspot. Cara memasang meta tag warna tema di blogspot. Cara memasang tag meta template.

 - Halo sobat mazfauzirizal.com, pernahkah sobat mengunjungi suatu website atau blog melalui mobile browser, lalu warna tampilan address bar seketika mengikuti warna utama dari tampilan blog?. Jika sobat mengunjungi blog ini menggunakan mobile browser seperti chrome atau ucbrowser android, maka secara otomatis address bar chrome tersebut berubah warna menjadi mengikuti warna utama dari blog ini. Padahal seperti kita ketahui, warna default address bar dari browser chrome adalah putih. Nah mengganti warna ini bisa diterapkan baik untuk wordpress maupun untuk blogger. Jadi jika sobat tertarik membuatnya, simak tutorial berikut.

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

Untuk mengubah warna address bar sebenarnya cukup mudah, sobat hanya perlu menambahkan beberapa baris script meta tag dibawah kode  <head>  yang ada dalam template website. Nah berhubung mobile browser ini jenisnya bermacam-macam, baik itu Chrome, Firefox, Safari iOS, Opera, dll. Jadi scriptnya juga berbeda-beda.

1. Cara Memasang Meta Tag Theme Color pada Browser Chrome dan Opera
Untuk mengubah atau mengganti warna pada mobile browser Chrome dan Opera, kodenya seperti dibawah ini. Jangan lupa ganti kode warna yang saya tandai dengan warna utama blog sobat. Gunakan tools Color Picker untuk mempermudah mendapatkan kode warna yang sobat inginkan.

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

2. Cara Memasang Meta Tag Theme Color pada Browser Windows Phone
Untuk mengubah atau mengganti warna pada mobile browser Windows Phone, kodenya seperti dibawah ini. Jangan lupa ganti kode warna yang aku tandai dengan warna utama blog sobat.

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

3. Memasang Meta Tag Theme Color pada Browser Safari iOS
Untuk mengubah atau mengganti warna pada mobile browser Windows Phone, kodenya seperti dibawah ini. Jangan lupa ganti kode warna yang aku 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. Memasang Meta Tag Theme Color pada Semua Browser
Nah jika sobat ingin warnanya berubah unutk semua browser, baik Google Chrome Android, browser Windows Phone maupun Safari iOS maka gunakan script kode meta tag berikut.

<!-- Untuk Google Chrome, Firefox & Opera -->
<metaname="theme-color"content="#000000">

<!-- Untuk Windows Phone -->
<metaname="msapplication-navbutton-color"content="#000000">

<!-- Untuk Safari iOS -->
<metaname="apple-mobile-web-app-capable"content="yes">
<metaname="apple-mobile-web-app-status-bar-style"content="#000000">


5. Memasang Meta Tag Theme Color pada WordPress
#1. Pilih menu appearance »  

#2. Pilih editor.  

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


6. Memasang Meta Tag Theme Color pada Blogspot
Nah karena kode dari wordpress diatas akan mengakibatkan eror jika digunakan pada blogger, sehingga perlu diberi “/” diakhir kode. Sehingga kode pengganti warna pada blogger akan menjadi seperti ini.

<!-- Untuk Google Chrome, Firefox & Opera -->
<metaname="theme-color"content="#cf2f1e"/>

<!-- Untuk Windows Phone -->
<metaname="msapplication-navbutton-color"content="#cf2f1e"/>

<!-- Untuk Safari iOS -->
<metaname="apple-mobile-web-app-capable"content="yes"/>
<metaname="apple-mobile-web-app-status-bar-style"content="#cf2f1e"/>

#1. Masuk ke blogger.

#2. Pilih tema> pilih edit html

#3. Copy dan pastekan kode ini tepat DIATAS </head>, atau letakkan tepat DIBAWAH kode <head>.



#4. Jika sudah, silahkan buka blog sobat di chrome browser. coba refresh atau buka kembali blog sobat dan lihat perubahannya.

#5. Selesai.



Nah itu baru part 1 ya, sobat bisa lakukan juga part 2 jika masih bingung dan lakukan cara dibawah dengan mengurutkan satu per satu agar sobat bisa. Ayo semangat !!!

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

#1. Masuk ke blogger.

#2. Pilih tema> pilih edit html



#3. Copy dan pastekan kode ini tepat DIATAS </head>, atau letakkan tepat DIBAWAH kode <head>.

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

#4. Jika sudah, pilih simpan tema 

#5. Kemudian lihat hasilnya di tampilan handphone sobat.

#6. Selesai

Oiyah hampir lupa hehehe, saya kasih keterangan ya supaya sobat dapat mengetahuinya.

Keterangan:
                 Kode                                                                          Keterangan

#000000                                                    Ubah kode warna sesuai dengan keinginan sobat
msapplication-navbutton-color                     Warna untuk tampilan windows phone
apple-mobile-web-app-status-bar-style         Wana untuk tampilan browser safari ios
theme-color                                                    Warna untuk address bar chrome dan opera

Sekian dari saya tutorial cara memasang meta tag theme color di blogspot, Cara memasang tag meta template, Cara memasang tag meta warna tema di blogspot. Semoga Tutorial Singkat Ini bermanfaat bagi kalian. Jika ada yang perlu ditanyakan atau ingin berdiskusi, saya sudah siapkan di kolom komentar.

2 Responses to "Cara Memasang Meta Tag Theme Color di Blogspot"

- Harap berkomentar sesuai topik/judul
- Tidak diperbolehkan mempromosikan barang
- Gunakan kolom komentar dengan bijak
Selamat Berkomentar......... :)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel