Assalamu'alaikum. Hari rakan sebet Armaila.com, Kali ini kita akan sharing tentang "Bagaimana Cara Membuat Warna Address Bar Mobile di Blogger Yang Berbeda Beda Warna Di Setiap Halaman dan Postingan". Sehingga setiap halaman yang identik dengan sales page atau landing page akan memiliki warna address bar tersendiri yang disesuaikan dengan warna desainnya.
Demikian juga untuk warna address bar dari artikel/postingan bisa ditentukan sendiri sesuai keinginan bloggernya. Misal untuk halaman About Armaila. Armaila membuat address bar nya berwarna hijau. Sementara untuk halaman SafeLink Armaila. Armaila membuatnya berwarna hitam. Begitu juga dengan artikel "Cara Membuat Warna Address Bar Mobile di Blogger" address bar nya berwarna merah Armaila buat.
Namun dalam langkah Membuat Warna Address Bar Mobile di Blogger terdapat perbedaan antara template bawaan dari blogger dengan template landing page blogger (Template Premium).
Letak perbedaan itu adalah; Jika di template premium landing page blogspot bisa membuat warna address yang bervariasi yang berbeda beda antara halaman satu dengan lainnya atau artikel yang satu dengan yang lainya maka tidak demikian dengan template standar blogger.
Untuk template standar yang disediakan oleh blogger maka hanya memiliki satu opsi dalam membuat warna address bar yang akan muncul baik di home, halaman, dan postingan.
Kode Membuat Warna Address Bar Mobile di Blogger
Sekali diinformasikan bahwa kode yang akan disimpan pada template atau halaman atau artikel blogspot ini hanya akan berjalan pada versi mobile. Sehingga walaupun telah memasukkan kode Membuat Warna Address di blogspot jika dibuka di desktop tidak akan muncul.
Berikut ini adalah Kode Membuat Warna Address Bar Mobile di Blogger
<!-- WARNA Address Bar-->
<!-- Untuk Google Chrome, Firefox & Opera -->
<meta content='#FD1803' name='theme-color'/>
<!-- Untuk Windows Phone -->
<meta content='#FD1803' name='msapplication-navbutton-color'/>
<!-- Untuk Safari iOS -->
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='#FD1803' name='apple-mobile-web-app-status-bar-style'/>
Jika ingin mengganti warna. maka silahkan ganti kode "#FD1803" dengan kode warna yang teman teman inginkan. Untuk mengganti kode warna itu silahkan copas #FD1803 pada pencarian google lalu geser geser sehingga teman teman menemukan kode yang cocok.
Mendapatkan Kode Warna Yang Spesifik
Jika cara diatas agak sulit mendapatkan warna yang spesifik sesuai dengan warn yang diinginkan. Maka teman teman teman bisa menemukan kode warna HEX yang sesuai pilihan. Ada 2 Tools yang dibutuhkan. Yaitu penangkap layar untuk mendapatkan warna sesuai warna objek yang dibutuhkan lalu mendapatkan kode warnanya di PhotoShop.
Untuk langkah langkah silahkan simak video berikut ini.
Menempatkan Kode Warna Address Bar
Setelah mendapatkan kode warna yang cocok. Selanjutnya untuk teman teman yang menggunakan template standar blogger silahkan letakkan kode tersebut dibawa kode <head> lalu simpan template dan lihat hasilnya.
Untuk teman teman yang menggunakan template landing page maka silahkan tempatekan kode tersebut dibagian atas postingan atau halaman.
Catatan:
Khusus untuk pengguna template landing page. Jika kode tersebut diletakkan di bawah <head> maka kode yang telah dimasukkan pada halaman/postingan tidak akan berfungsi dan hanya akan menampilkan warna bar yang sesuai dengan kode yang dibuat di <head>
Selamat mencoba dan semoga berhasil