Customizing Blogger Templates Using Chrome Developer Tools

Google Developer tools image

When I was starting a blog most of my time is used in fixing errors and designing my blog template. I’m sure newbie bloggers are doing this kind of thing too.  A lot of bloggers think that Google Chrome is used only in browsing a site.  But, Google extremely good by providing some tools to help blogger to easily customize their own blog template by using Developer Tools on Google Chrome.  By using this tool, we are able to edit some basic style on a site like alignment, padding, text-size, margin, background-color and many more without changing yet the original html code on our blogger dashboard.

You don’t need to become a web developer to design a great template on your blog you just need this developer tool and some basic knowledge in html coding to make your desired style on your template. I’m also using this tool to check what CSS code is used on a specific site on its template. On this page I’m going to teach you some basic tweaks to change some styles in my blog template using Google chrome developer tools. I hope you will enjoy it.

Changing Styles On My Header

Supposed we need to tweak my blog header style, first we need to open my blog on Google Chrome browser then right click the header part on my blog and choose inspect element. See image below.

Blog header widgets
You will see now the developer tools window where the html and CSS code is specified. If you try to click the <div id=”header-wrapper”> on the developer tools you will see that the header part on my blog is highlighted and the its CSS code will appear on the right side of the developer tools.

Google Chrome Developer Tools

The #header-wrapper in CSS part in above image is my header div ID, if we try to add a background: #172044; on the CSS part in developer tools you will notice on my site that the background color on my header was changed. In developer tools you will notice also the square button in the right side part of the background attributes. Using that button you can automatically select a color without manually changing the color hex code of the header background. You can also add and edit some existing attribute in header CSS like its width, margin, height and padding.

Header background color added

After you add or edit something on your blog template using the developer tools the next thing you must do is to edit or add the CSS code to your blogger dashboard to finally change the style of your blog. To do this just go to your Blogger Dashboard->>Template->>Edit HTML. Just copy the ID in your CSS on the developer tools, in the above example its header ID is header-wrapper, then find it in your html editor on your blogger dashboard by using CTRL+F.

NOTE: You can’t declare a new ID in CSS on the developer tools. For example, you want to add an ID #header-extension{width:50%; height:10%; background: #111111} it is illegal to declare something like this. You can add or edit properties only in developer tools if there are already declared an ID in CSS on the template of a site.

Please follow and like us:

Leave a Reply

Your email address will not be published. Required fields are marked *