CSS Codes to tune up your blog site

  
Dear friends,

You may use CSS codes rather than modifying your blog template to hide or remove some unwanted items to adjust to enhance the look and feel of your blog site for proper utilization of available space and better approach.

 

Caution: Modifying your template wrongly may lead your blog to disappear permanently. It is advised not to play with the template if you are not an expert. You can safely apply the following CSS codes to tune up your blog site.

Here is the method for how to apply css scripts for your blog site:

Step 1:  Login to your blogger account and go to “Template” menu and then click on “customize”.
 
Step 2:  Then go to “advanced” tab and scroll down to select the last option “Add CSS”.
 
Step 3:  Now just paste the desired code(s) below in “Add custom CSS” box.

Step 4: You also need to append pixel size (e.g. -30px) as per look and feel of your site.
               TIP: You should refer to the preview pan below and adjust accordingly.

Step 5: You now need to Click on “Apply to Blog” available on top right corner to make changes permanent.

Please find below some nested useful css codes to enhance your blogging experience. You can opt whichever you require:

CSS code to adjust or remove margins between post and tabs for pages in blogger

Use Code:

 
.blog-posts {margin-top:-30px}   //* for top margin adjustment
.blog-posts {margin-right:-10px} //* for right margin adjustment
.blog-posts {margin-left:-10px}   //* for left margin adjustment

CSS code to adjust or remove margins between sidebar widgets in blogger

Use Code:

 
.sidebar .widget {margin-top:-20px}

CSS code to adjust or remove margins between sidebar and tabs (Pages) in blogger

Use Code:
 

.main-inner .column-right-outer {margin-left:-15px}
.main-inner .column-left-outer {margin-left:-15px}
.main-inner .column-left-inner {margin-right:-15px}

CSS code to adjust or remove margins between your post and sidebar in blogger

Use Code:
 

.blog-posts {margin-right:-10px}
.blog-posts {margin-left:-10px}

CSS code to adjust or remove top space after disabling navbar in blogger

Use Code:

 
.content-inner {margin-top: -60px !important;}

CSS code to hide post title in blogger

Use Code:

 
.post-title {display:none;}

CSS code to hide post "old and new" link from blogger

Use Code:

 
.blog-pager-newer-link {float: left; display: none;}
.blog-pager-older-link {float: right; display: none;}

Or 

 
you may use this single code to remove all above including “home” link

.blog-pager {text-align: center; display: none;}

CSS code to hide or remove "Subscribe to: Posts (Atom)" link from Blogger

Use Code:

 
.blog-feeds{display:none !important;}

Java Script code to remove spam links from comments posting in blogger

Use Code just above  [</body>] tag:

< script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

<script >$('.comment-content a[rel$=nofollow]').hide());</script>

note: this will not remove links from existing comments.

  Author:

Vishal Sinha
(Web Developer)