More people now loves reading on the go, be it a news article or a travel blog, almost everyone's first choice for reading blogs and browsing social media sites are smartphones. Same goes for your readers, many may love reading on their smartphones, and setting a theme color would make your Blogger blog stand out in the crowd.
The major browsers even on smartphones are very advanced and it provides a lot of options for websites to personalize how their website looks on a readers phone, they can control the icon they see in the browser as well as the color of the browser's address-bar in mobile Chrome, Opera and Firefox OS.
If you use Chrome you might have noticed that upon visiting some websites the top bar of Chrome changes color and mostly according to theme of the website. It is not something that Chrome does magically, the website developers can set a specific color for Chrome to be themed with and that is very simple.
Bloggers on the Blogger.com platform has transitioned to a mobile-first approach, and it is a wise thing to do as the readers are more comfortable on mobile phones than on a laptop or a PC.
Doing this is very simple, it requires you to add a line of code in your template and that's it. The steps are mentioned below.
Note: It is recommended that you always take backup of your template before making any code customization. Click here to see how to take a backup of your Blogger template.
Before we proceed, copy this line of code -
<meta name="theme-color" content="#4285f4"/>
Once the code is at place it should look similar to the screenshot above. Now click on "Save template" on the screen and then load your blog in Chrome browser on your smartphone. You will now see that the top bar of Chrome has turned into another color other than the default light grey color.The major browsers even on smartphones are very advanced and it provides a lot of options for websites to personalize how their website looks on a readers phone, they can control the icon they see in the browser as well as the color of the browser's address-bar in mobile Chrome, Opera and Firefox OS.
If you use Chrome you might have noticed that upon visiting some websites the top bar of Chrome changes color and mostly according to theme of the website. It is not something that Chrome does magically, the website developers can set a specific color for Chrome to be themed with and that is very simple.
Bloggers on the Blogger.com platform has transitioned to a mobile-first approach, and it is a wise thing to do as the readers are more comfortable on mobile phones than on a laptop or a PC.
Setting Theme Color on your Blogger Blog
By default if you visit your blog on a mobile browser, here Chrome, you will see the default light grey color on the top bar, and that looks boring.Doing this is very simple, it requires you to add a line of code in your template and that's it. The steps are mentioned below.
Note: It is recommended that you always take backup of your template before making any code customization. Click here to see how to take a backup of your Blogger template.
Before we proceed, copy this line of code -
<meta name="theme-color" content="#4285f4"/>
- Now, go to your Blogger Dashboard and select your blog.
- Click on the "Template" option in the left panel
- Once the section is loaded, you will see a button with "Edit HTML" label, click on it to open the template editor.
- Inside the template editor hitCTRL+F / ⌘ + F and search for
<head>, it should be on the top already so you will find it easily
- Now paste the code we copied before immediately on the next line of
<head>
Set your desired color
You may of course want to set a color of your choice, the one that would be set in the default code provided in the tutorial you will get a dark blue color.To change the color that is set you have to make edit in the code that you use, this is the code -
<meta name="theme-color" content="#4285f4"/>
The yellow highlighted text #4285f4 (without the quotes) is the hex value of the color, in HTML colors also has hex values. If you aren't sure what is the hex value of the color you want, go to http://www.color-hex.com/ to choose the color and get your desired color's hex value. Then replace the yellow highlighted part with your own.
For example, if we want a certain shade of green, which has the hex value #215C03, we modify our code to this
<meta name="theme-color" content="#215C03"/>
That is simple. All you have to do is replace the hex value in the code with your desired color and place it in the template by following the steps in the previous section.
It's all. Impress your readers by doing what most Blogger blog owners don't think about.
Comment on the post if you like this, share it with your friends and family for them to make their blog look pretty as well. For any questions or suggestions feel free to comment.
