How to Adjust / Remove Margins From Blogger (Blogspot) Blog ?

Friday, 24 May 2013

How to Adjust / Remove Margins From Blogger (Blogspot) Blog ?

Like me, many of us started blogging by creating our blog with blogger (blogspot) blog. Blogger provides us with different template styles, live editing, current stats and much more but if you are not satisfied with your template margins or if they hampers your blog looks, If you want to adjust them or remove them completely but don’t want to mess up with your template’s html code, Then this tutorial is definitely for you as today’s tutorial is about adjusting or completely removing margins from your blogger (blogspot) blog by just adding a CSS code.
You can see my template, I don't like margins that's why i removed them.


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.




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.





Kindly comment, if this tutorial helped you.

Subscribe Updates, Its FREE!

author

Article by

Sandeep has written 55+ articles. If you like this post, you can follow Bloglution on Twitter. Subscribe to Bloglution feed via RSS or EMAIL to receive instant updates.

Labels: ,

12 comments:

  1. Unknown30 May 2013 at 17:26

    It is very much helpful to the new people like me.Thanks a lot and keep it up.

    ReplyDelete
  2. Unknown30 May 2013 at 19:25

    Thanks Jayaprakasan, for your valuable comment, glad to help you.

    ReplyDelete
  3. Samuel27 July 2013 at 13:43

    good one. thanks

    Best Online Hostings

    Domain name $1.49 only

    Best Online Store

    ReplyDelete
  4. Kristen2 August 2013 at 06:51

    Can you post how to change the margins of your post text? For example, on my blog I have text underneath pictures that I post, but the text margins are wider than the actual picture. I want to change it so the picture and text have the same margins.

    Are you able to help?

    ReplyDelete
    Replies
    1. Unknown2 August 2013 at 14:03

      Thanks Kristen, i will post an article soon on customizing blogger post text.
      till then like our fb page and follow us on twitter.

      Delete
  5. 2knowhow8 September 2013 at 13:05

    thank you so much sandeep :D you are truly a genius. Thank you for sharing your knowledge..

    Here is the sample of my blogpost with your tutorial applied

    http://4freefacebookcredit.blogspot.com/

    ReplyDelete
  6. Mayang Sari23 September 2013 at 15:23

    great article. easy to understand. tq so much for sharing this.

    ReplyDelete
  7. MDL30 September 2013 at 17:01

    wow complete set.. it just amazed me of how your code adjusted my site's margins..thanks a lot

    ●●●●●> Best Widgets <●●●●●

    ReplyDelete
  8. Unknown17 October 2013 at 07:27

    Great tutorial - thank you!

    ReplyDelete
  9. Fastnet13 November 2013 at 15:24

    thanks so much

    clear and useful!!

    ReplyDelete
  10. Sarah1 February 2021 at 16:23

    I enjoy every one of the content, I must say i appreciated, I would really like more details concerning this, due to the fact it is extremely great., Thank you regarding revealing. Professional Designing

    ReplyDelete
  11. Sarah1 February 2021 at 16:29

    Whilst we obtained in your internet record nevertheless including attention just a little contact submits. Good way of possible, We're book-marking throughout a time period discover variations determine spgs method upward. Web Template

    ReplyDelete

• Your feedback is important to us.
• Do not post spam comments, it will be immediately removed upon our review.
• Avoid including website URLs in your comments.

Subscribe to: Post Comments (Atom)