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.
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.
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.
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.
