• Translate

11/07/2017

How to Change Blog Address Bar Color in Smartphone Browser

Tutorial Blogspot | Tutorial Smartphone |

Advertisement

Surely you've seen the color of a particular blog address bar is not white anymore when accessing the blog from the smartphone browser. For example the address bar tokopedia.com which became green colored to match the theme of the online shopping site.

Like this example;

Blog Address Bar Color in Smartphone Browser

Changing the color of the address bar actually aims to beautify the blog page when accessed through the smartphone browser and also as a marker blog that usually color the address bar to adjust the theme of the blog. Changing the color in the address bar makes it possible since the android-based Lollipop and Chrome versions 39 and up.

This color theme meta setting not only applies to Android OS only, but also on Windows Phone and iOS. As for its own browser, can use Chrome, Firefox, Safari and Opera which if accessed via smartphone. But there are different scripts according to the browser used, I will discuss one by one.

Curious how?

Follow these guidelines :

the way is very, if you want the application of the address bar color on your blog support in all browsers, then you should insert the following complete code below between the <head> </head> tag on your blog.
<!-- URL Theme Color Chrome, Firefox OS, Opera dan Vivaldi Browser -->
<meta name="theme-color" content="#1C8B78" />
<meta name="msapplication-navbutton-color" content="#1C8B78" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="#1C8B78" />
Note:
Replace code #1C8B78 with the color code you want.

How does it apply to blogs?

To change the address bar color of WordPress, please login to Dashboard Admin.

Go to Appearance »Editor;
Select Theme Header (header.php);

change the address bar color of WordPress

Next copy and paste the code above just below the <head> tag.

change the address bar color of WordPress

Next click Update File.
Application of change of address bar color in WordPress is complete.

Changing Address Bar Color On Blogger

The existence of a <head> tag on Blogger is slightly different from WordPress, you can find <head> tags on Blogger by:
  1. Login to Blogger then go to your Dashboard,
  2. Click Menu "Templates",
  3. Then "Edit HTML",
  4. Find the code <head>
  5.  Next copy and paste the above code just below the <head> tag, if it is click Save Template.
Application of change of address bar color on Blogger (Blogspot.com) is complete. If so, now test the change of address bar color by accessing your blog via smartphone ..

Tadaa ...

This is before and after the change of address bar color on my blog;

before and after the change of address bar color

Please try...  💖

Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

1 comment Add Comment

I am kinda stuck working on AInVoice Controlled Home Automation project, which consists of an Arduino and an ESP8266 Wireless Transceiver module. Search Bar Firefox 57 Quantum addon

Reply

Comments not appropriate topic will sign SPAM.