Skip to main content

How to Adjust or Remove Margins in Your Blogger Blogs Template

Many of us are using templates that are customized by professionals but some parts of it may not be suited with our taste, people think differently and may want to customize and personalize their own blog templates some of this are footer credits and particular part of template. One of the most common is the margins that was made to our templates, we want to limit in some point the white and blank spaces in our site, margins that is too large between widgets may change the sites face. My first post about margins and padding is informative also you may find what you need there.
Controlling all your margins is very easy. The question is how?
Today I will teach you on how to adjust almost every margin that you can see in one's templates. Just follow the instruction and you'll find your way to sucess! :)

How to adjust or remove margins between your post and tabs (Pages) section?

(1) Firstly login to your blogger account and go to your blog’s dashboard.
(2) Now go to “Template” and then click “customize”.
(3) Now go to “advanced” tab and select the last option “Add CSS”.
(4) Now just paste the below code in that white box which appears.

Code: - .blog-posts {margin-top:-30px}
(5) That’s it, you removed your margin.
(6) Now save your template by clicking “Apply to your blog”.

Note: - Adjust the value “30px” according to your needs.


How to adjust or remove margins between your post and sidebar?

(1) Repeat the steps (1), (2) and (3), given above.
(2) Paste the CSS code given below.

Code- .blog-posts {margin-right:-30px}

(3) You are done.
(4) Now save your template by clicking “Apply to your blog”.

Note: - Adjust the value “30px” according to your needs.

How to adjust or remove margins between your sidebar and tabs (Pages) section?

(1) Repeat the steps (1), (2) and (3), given in 1st tutorial.
(2) Paste the CSS code given below.

Code- .main-inner .column-right-outer {margin-top:-30px}

(3) You are done.
(4) Now save your template by clicking “Apply to your blog”.

Note: - Adjust the value “30px” according to your needs.


How to adjust or remove margins between your posts?

(1) Repeat the steps (1), (2) and (3), given in 1st tutorial.
(2) Paste the CSS code given below.

Code- .date-outer{margin-bottom:-30px}

(3) You are done.
(4) Now save your template by clicking “Apply to your blog”.

Note: - Adjust the value “30px” according to your needs.

HERE ARE SOME OF MY POSTS




  • Add Beautiful Twitter Follow Me Flash Buttons For Blogger Blogs - New !!
  • Beautiful Hover Expanding Social Media Buttons For Blogs - New !!
  • Customizable Floating Social Sharing Buttons for Blogs - New !!
  • Customizable Recent Post Image Gallery for Blogger Blogs - New !!
  • Design Your Label Widget with Matrix Effects - New !!


  • How to adjust or remove margins between your sidebar widgets?

    (1) Repeat the steps (1), (2) and (3), given in 1st tutorial.
    (2) Paste the CSS code given below.

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

    (3) You are done.
    (4) Now save your template by clicking “Apply to your blog”.

    Note: - Adjust the value “30px” according to your needs.



    I hope you enjoy this tutorial, If you have any suggestion or question feel free to comment.
    In this blog you'll find many tutorials and widgets I wish you can subscribe to my email list so you'll get the fresh posts first in the lists :)

    Good day!

    Comments

    1. Hi, This lets me go up to -10 but anything over it starts to delete my text, the left margin seems to stop it. I'm just trying to make my post stretch to both sides with a small gap, do you possibly have any idea what I'm doing wrong?

      Thanks :) Sophie

      ReplyDelete
    2. @Sophie may I know your bloglink

      ReplyDelete
    3. Sure, it's http://sophiesmakeupblog.blogspot.co.uk

      ReplyDelete

    Post a Comment

    Popular posts from this blog

    How To Add HTML Contact Form for Blogger Blogs

    Our problem in creating a contact form is that you don't want third party contact form cause it will burden your loading page and if you want to give your reader an instant contact form but don't want to show your email, this HTML form will help you with your problem

    You can create a simple form, as displayed below, to enable your visitors to send you comments, questions or whatever you'd like.

    1.Log in to your dashboard--> layout

    2.Click on "Add a Gadget".

    Now Select "HTML/Java Sricpt"

    3.Copy and Paste below code into it.
    <FORM action="mailto:[email protected]" method="post" enctype="text/plain"><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%"><TR><TD width="30%"><DIV align="right"><B>Name:</B></DIV></TD><TD width="70%"><INPUT type="text" name="name" s…

    High PageRank Do-Follow Forums List (606)

    Besides from getting your answers to unanswerable queries, the good thing of do-follow forums is to create a good back links through their High Page rank pages on Google, creating your pointing to your site makes your blog grows faster in ranking,

    Now a days it is very hard to find do-follow link website because they are making their site as no-follow, like the wiki, it is before a do-follow site but since many SEO experts use wiki as spam they control it and made it no-follow, so now I am giving you a list of do-follow and high ranking sites that you can use to make your blog popular.

    Its your tactics on how to create your links on this site, but remember not to spam cause Google might hit you. :)

    Here are the list enjoy

    ForumPR1http://www.addthis.com/forum92http://chronicle.com/forums/83http://forums.myspace.com/84http://forum.joomla.org85http://forums.cpanel.net86http://forum.siteground.com87http://c7y-bb.phparchitect.com88http://forum.meebo.com89http://forums.mysql.com/710http://f…

    How to Add Random Post Widget to blogger Blogs

    Instead of creating new post everyday to reduce your bounce rate, many respected bloggers are suggesting to sell your old posts to readers. We all know that many of our posts are useful even time passed. today I am going to make a tutorial on how to add a beautiful random post and reduce your bounce rate also to promote your older posts

    Hows Random Posts.
    Doesn’t add load to your page loading
    Shows the Name Of The Author.
    Shows the number of comments.
    Summary Showing Enabled.
    CSS Added.
    Hover effect for images. Installing It On Your Blog Go to blogger > Open layout tab
    Now Add A new HTML/JavaScript widgetGive any title you want [ eg: Being Viewed, Recently Viewed, Now Viewing etc. Its up to you. ].
    Now paste the code given below :  <style type="text/css"> .recent_post_content{width:100%;} .recent_post_content_item {filter: alpha(opacity=80);opacity: 0.8;} .recent_post_content img {width:45px;height:45px;background-position: center;margin:7px;padding: 2px;border:#888 solid th…