CSS Codes to make your blog look more awesome

When you create an account in blogger and start blogging, you want to change some look of the page and add some your own unique identification.

You may want to Hide navbar and may want to Hide space created by removing the navbar .

If you don't like 'subscribe to atom' feature, you can Remove subscribe to-atom putting simple css code in your template of to the add css section.


If you think that you have more interesting stuffs that can draw attention of the readers or simply want readers to navigate through your blog. There are methods to Customize your blog pager.

1. Hide Navbar

There is HTML tag for Navbar- navbar-iframe. You can find it simply by right clicking it and inspecting its element in Google chrome.

So if you put the following code in 'add CSS' section, the Navbar will not display anymore. It will however leave a space of approximated 30px height.

#navbar-iframe {
display: none!important;
}

Simply you can copy and paste the code.

2. Hide space created by Navbar

Now after you hide the navbar, if you are okay with the space then just save the template and you are done. If you still want to reduce the space then you probably need this code as well. It will simply removes that space created by removing the navbar.

#navbar.navbar.section{
display: none;
}

It is not so tricky, is it? Just copy the code and paste it in your 'add CSS section' and preview it. It you like, just save the template and you are done.


3. Remove Subscribe to-atom

That Subscribe to-atom feature is somewhat not aesthetic. Many may want to put it in the page but I found it important to remove it or not display in my blog so tried to find the way not to display it.

After few experiments, I found the code. In a similar way as with all other above codes, copy and paste it in 'add CSS' section and if you like save the template.

.blog-feeds,
.post-feeds {
display: none;
}

Just a piece of cake, isn't it?


4. Customize your blog pager

The navigators of your blog are sometimes called blog pager. Actually, it is HTML tag! (I am not sure.). There are numerous customization of these navigators.

 Hiding them all or simply making them larger in size than the rest of the text in the blog to completely replacing them with the images of your choice.

Here, I am going to give you a CSS code so to make your HOME, NEWER POST AND OLDER POST appear larger. If you want to know more customization options, you may refer to another post (I will write that soon).

Code to change the size of navigators text is:

#blog-pager{
font-size: 25px;
font-weight: bold;
}

Copy and paste it in 'add CSS' section and if you like of course save the template and you're done. The last thing, you can change the number shown in red that suits you the most. Preview it and save.