If you find the default Blogger template a bit boring and you would like to add your own customization, you can do so with a bit of CSS tweaks. In this short tutorial post, we’ll see how the browser’s Inspect Element web developer tool can be used to easily identify and tweak CSS.
In this example, we will change the background colour of the sidebar widgets header.
A) How to add custom CSS code to tweak Blogger template elements?
To add custom CSS to Blogger blog, we can add those custom CSS code in Blogger's "Add CSS" area in the Blogger Template customization area.
Login to Blogger
Click on “Template” on the left sidebar navigation
Click on “Customize” in the page that appears. You will be in “Blogger Template Designer” page
Click on “Advanced”
Scroll down and click on “Add CSS” - Add custom CSS code here and apply.
B) How to open Insect Element in browser?
Most common browsers such as Google Chrome and Firefox have web developer tool called ‘Inspect Element”. It is used to inspect the underlying code of the page elements, as the name suggests.Right click on the element on the webpage which you want to inspect. A window as shown below appears which shows the elements of the page as well as the CSS code within the Inspector tab of the window.
C ) How to use Inspect Element to find and customize Blogger template CSS?
- Open your blog in a browser (Eg: Mozilla Firefox)
- Right-click on the sidebar of the Blogger blog and select “Inspect Element”. (You should click on the element of the web page which you want to inspect)
- The Inspect Element window will now show the HTML code (right section) and CSS code used in the page (left section). Make sure you have “styles” selected in the left side pane of Inspect Element window.
- You can play around with the CSS code here to see real-time changes.
- Once satisfied with the result, the CSS code can be copied and pasted in "Add CSS" in Blogger as described in section A.
For example:
The sidebar of the blog has a H2 HTML element and the Sidebar widget title's class is ".sidebar .widget h2".
- To change the sidebar widget’s background colour we are interested in “.main-inner .sidebar .widget h2”
- Click at the end of the last line of code under “.main-inner .sidebar .widget h2 “ and enter additional CSS code or edit exiting ones.
- We want to change the background colour, so edit
.main-inner .sidebar .widget h2{
background-color: #434343;
}
AFTER:
.main-inner .sidebar .widget h2{
background-color: #156fc3;
padding: 10px;
margin-bottom: 5px !important;
}
//The code above is just for example. In your case, it will depend on the theme.
In the above example, we not just changed the background color, but we also added margin to the bottom, and padding for the widget title.
- You can also change the background color by selecting any color from the colorpicker when you click on the color.
- Similarly, you can also add border, rounded border etc.
While you are making changes to the properties of the widget, you can see the changes in the upper help of the page, real time. If you are satisfied with what you see, select and copy the code. In Firefox, you can right-click and do "Copy Code".
- Go to Blogger and add custom CSS in the Blogger Template designer area as discussed section A above and click Apply.
Similar method can also be used to inspect other elements in your Blogger page. Use Inspect Element to see real time changes, copy the code and put it in “Add CSS” in Blogger.
No comments:
Post a Comment