Show Colorize Address bar on Android Device for Blogger Template

How to show match color of your Blogger template in Android device on chrome browser?

blogger tricks

Matching header color is a new feature of latest Android OS. It works mainly on Android Lollipop and updated version of Android OS. The main function is if your Blogger template color is red then mobile browser’s header will turn into same color. But this will work only on Google chrome browse of any latest Androind devices. However I have tested this trick on Android kitkat and there is also working fine.

There are many popular sites like BBC, Facebook and other social media site using this feature for branding their site. Mainly it helps to create a strong color brand. E.g. my Blog’s main color theme is Royal Blue so you will see blue color in my Blog logo, post’s images, social media page cover. I just tried to brand my page with Royal Blue color.

But when my Blog readers open my site on android device then it will visible like opening something third party site, because color is not matching with mobile browsers. We know Google chrome browser is remain simply white and there is slide red combination around browser’s address bar. So if browser’s address bar color is red and your blogger template color is blue then it won’t match. As a result, visitors won’t feel as a part of smart phone. When we open any android apps then it seems to us that this is a part of Smartphone so to give similar experience to the users colorize chrome header trick is necessary.

How to add this feature on Blogger Template?

Basically to implement this feature on Blogger template I have used a simple META tag. After applying this META tag my Blogger template color start changing on Google chrome browser while I open it in Android device.

This trick first works on WordPress site but I have tested in Blogger template and there is also working very smoothly. I know you are also looking for this trick, don’t worry I will show you how to make it work on Blogger template. Please follow the below steps-

color chrome header

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on -> Template -> Edit HTML->

Step 3 Now find the ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)  

Step 4 Copy the script from below and Paste it above/before ]]></b:skin>

<meta name="theme-color" content="#08C6FD"/>


  • Please alter the # 08C6FD with different hex color.
Step 5 Finally hit the Publish button to apply this feature on Blogger template.

Congratulation you have successfully added META tag for colorize chrome header on Android Mobile Browser.

It’s time to test the trick. Simply open your Blogger site on Android device and see its browser header color also changing. In case of my site I have added Blue color code so on Android device you will see Royal Blue color. However your template may have different color so you need to add different color code. Don’t worry you can use colorpicker to get hex color code and alternatively you can use any Photo editing tools like Photoshop to get the color code.

I hope you have easily applied this trick on your Blogger template. But if you need any further help or you have any feedback then please feel free to leave a comment below. Thank You. 
Show Colorize Address bar on Android Device for Blogger Template
4 Stars stars - "Show Colorize Address bar on Android Device for Blogger Template" Matching header color is a new feature of latest Android OS. It works mainly on Android Lollipo...

Post a Comment

You r right. But not working in my template.

it work best on Android phone with Lollipop OS. But in case of my Blog it works on Android kitkat. :dn

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *