Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Thursday, November 25, 2010

Remove Space between Gadgets in Blogger Sidebar

Here's a popular question: "How do I remove spaces between gadgets on my sidebar?" I have seen this question being asked many times that I think a proper straight-forward tutorial is needed for this matter for future references. One might want to remove spaces between gadgets for various reasons. A common one is to use a picture gadget as a title, so the picture gadget needs to be really close with the next gadget to serve as a title. If you're interested in reducing space between your blog posts, see this tutorial instead.




Step 1:

As you might have already guessed, you have to identify your Gadget's ID. You have lots of elements in a page. CSS allows you to address a particular element or a particular group of elements via its class or ID. Please refer to this post on a brief note about IDs and Classes. Enough with the lecture, check out how you can identify your gadget's ID here. To play safe, identify both top and bottom gadgets' IDs (the space that will be removed lies between these two gadgets)

This is the ID of my gadgets (using my favorite add-on FireBug of course):



So my top gadget's ID is Label1, and my bottom gadget's ID is BlogArchive1.

Step 2:

If you're using the old Blogger interface:
Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
#Label1{
margin-bottom: -50px !important;
}

Replace 'Label1' with the ID of your top gadget. By doing this, the gap between these two gadgets will be reduced. It goes without saying that you'd have to change the value 50 accordingly. You can use the following code too:

#BlogArchive1{
margin-top: -50px !important;
}

Where 'BlogArchive1' is the ID of your bottom gadget. You have seen two different ways on how you can reduce the gap between your gadgets. In most cases, just use either one of these methods and it will work like a charm. In some rare cases, you might have to use both these methods combined.

Also, if you want to reduce 2 gaps between 3 gadgets, checkout the screenshot below. It speaks for itself:


Now that you've gotten the idea, it's just a matter of creativity on how you use these useful tools. And yes, you can use 'margin-right' and 'margin-left' CSS attributes as well to move your gadgets/elements horizontally. Have fun!

290 comments:

  1. i've been trying to figure a way around this spacial problem for months. Your solution was easy to follow and the first that even suggested i go through the advanced section in template designer.

    A HUGE THANK YOU!

    ReplyDelete
  2. Dangerbird: Glad you find it helpful. and thanks for dropping by.

    ReplyDelete
    Replies
    1. can i use the one you've given with mu custom blogger template ?

      Delete
    2. Hi Mani,

      That depends. What's you blog's address?

      Delete
    3. Hi, my blog url is http://studentsidea.blogspot.com ,

      you've given ways to reduce between particular widget manually, but is it possible to automate the space , like whatever widgets we add ,the space is always the same ( around 5px )..

      Pls reply

      Delete
    4. Hi Jake..

      Theoretically, it is possible. But the problem is, most widgets come with added padding, built within the gadget.. The 5px that we define will start after the padding, making it appear as though the space is bigger than 5px.. You 'nah mean?

      This is what you'd use, generally:

      .sidebar .widget{
      padding: 0px !important;
      margin: 0px !important;
      margin-bottom: 5px !important;
      }

      Cheers :)

      Delete
  3. Thank you! I've been trying everything and this is so simple!

    ReplyDelete
  4. pigeon pie: Glad you find it helpful. Thanks for stopping by.

    ReplyDelete
  5. this was VERY helpful. I struggled for hours trying to figure this out. Thank you for the clear pictures and helpful advice!

    ReplyDelete
  6. Emma: Thanks for the feedback, glad you got it resolved. Regards.

    ReplyDelete
  7. Hi,

    How do I close the gap between the pager and the post on my blog? Are there any css codes for that?

    Thanks

    ReplyDelete
  8. @LivingTru: I'm not sure what you meant by pager. If you're referring to the gap between your posts, go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog:

    .date-outer{
    margin-bottom: -30px !important;
    }

    Adjust the value 30 accordingly. If you want to separate your posts, use this instead:

    .date-outer{
    margin-bottom: 0px !important;
    }

    If you were referring to something else, get back to me. Regards.

    ReplyDelete
  9. Is there a way to do this just through the edit HTML page? I'm using an old template, not the new template designer.

    ReplyDelete
  10. @Bec: Are you referring to this blog of yours? If yes, then you can follow the exact steps above as you're still using the modern layout. If you're using some older template, kindly provide me the address of the blog so that I can advice you further.

    ReplyDelete
  11. Oh I thought I was using the classic layout but I see what you mean now, thanks :)

    ReplyDelete
  12. @Bec: No problem. The classic layout refers to a more primitive type of design, we rarely use that anymore.

    Regards.

    ReplyDelete
  13. hey, thanks for this tutorial

    from Malaysia:)

    ReplyDelete
  14. @The Sharkox: Sure thing homie, cheers :)

    ReplyDelete
  15. This is brilliant...thank you so much!

    ReplyDelete
  16. @Cupcake: You're welcome. Cheers.

    ReplyDelete
  17. Thank you so much for this tutorial, it was perfect. I do have one question, however. When I adjusted the spacing, it looks great in Firefox, IE and Safari. It looks totally different (and bad) in Chrome. If I fix it in Chrome, it looks bad in the others.Any suggestions?

    http://icandyhandmade.blogspot.com

    ReplyDelete
  18. @jen: Funny, usually IE is the outcast. I see what you mean. There's a workaround. Instead of placing your sidebar images (Kid's Designs, Women's Designs, etc) in Picture gadgets, why not put them in an single HTML/Javascript gadget? If you need help with this, feel free to get in touch with me via email, and I will provide you with the necessary code that you need to put in the HTML/Javascript gadget.

    Cheers.

    ReplyDelete
  19. Thank you for this tutorial....I am having one problem...I can't get the changes to happen.

    I am adding

    #Image7{
    margin-bottom: 0px
    }

    #Image6{
    margin-top: 0px
    margin-bottom: 0px
    }

    #Image5{
    margin-top: 0px
    margin-bottom: 0px
    }

    into CSS (with varying px) but it will not budge. I want the images in one solid block.

    Am I doing something wrong?? I use firefox. Any help would be appreciated.

    Thanks (http://andiehanley.blogspot.com)

    ReplyDelete
  20. @Andie: I can't find image 5, 6 and 7 from your blog. Probably I didnt look hard enough, or have you removed it?

    And a piece of advice. If you wanna place a group of images on your sidebar, instead of using the Picture gadget, use the HTML/Javascript gadget. Your images will fit well. The only downside is that you'd have to play with some coding, but I'm happy to help with this one.

    ReplyDelete
  21. I am having this same problem! I cant get the gadgets to budge!

    I am adding
    #Image1{
    margin-top: -2px;
    margin-top: -2px;
    }

    #Image2{
    margin-top: -2px;
    margin-top: -2pm;
    }

    #Image3{
    margin-top: -2px;
    margin-top: -2pm;
    }

    #Image4{
    margin-top: -2px;
    margin-top: -2pm;
    }

    #Image5{
    margin-top: -2px;
    margin-top: -2pm;

    and NOTHING happens? What I am doing wrong???
    Thanks for any help! (I am also using firefox)

    ReplyDelete
  22. Thank you, this was the only tutorial I found that actually worked :)

    ReplyDelete
  23. Hi YoboY- Thank you for all these helpful tutorials (they are my lifeline). I have a question regarding column spacing: I was wondering, is there a way to reduce the space between my main column with my posts and the sidebar column? I'm using the Simple template. I tried to look in the HTML, but I couldn't locate a related code. Thanks! (http://emoltofashion.blogspot.com/)

    ReplyDelete
  24. @Emily: What is your blog's addrss?

    @Laura: Glad it worked. Cheers :)

    @Molto: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog:

    .main-inner .column-center-inner .section{
    margin-right: 0px;
    }
    .column-right-inner{
    margin-left: -5px;
    }

    That should do it. Cheers.

    ReplyDelete
  25. beautifulcommotion.blogspot.com
    Thanks for your help!

    ReplyDelete
  26. @Emily:

    Hi there,

    Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog:

    #Image4, #Image3, #Image1 {
    margin-bottom: -50px;
    }

    Cheers.

    ReplyDelete
  27. Hi YoboY. Thank you for the great site...

    I have this problem... I can't move label1 gadget (or any other gadget that I put instead of it) up... to bottom, left or right it is okay ay but not to up... The gadget is just below the tabs banner (awesome template)... www.askerhaklari.com

    ReplyDelete
  28. @sorunlu: I don't quite get what you mean. Tell you what. Get a screenshot of your Page Elements (Dashboard - Design - Page Elements), upload it somewhere and give me the link. Use the contact form instead, not the comments. Cheers.

    ReplyDelete
  29. thanks sir.. check out my blog with new gaping.

    ReplyDelete
  30. @Licia: You're welcome. Do you need help Licia?

    ReplyDelete
  31. @Muse Origins: Glad you find it helpful. You're welcome. Cheers :)

    ReplyDelete
  32. Thank you, this is great post.

    ReplyDelete
  33. @Mhshohel: No problem. Cheers.

    ReplyDelete
  34. You're incredible. Thank you 100 times! Works like a charm; it's been bugging me for forever.

    ReplyDelete
  35. @eliz: Kudos to you for finding this buried page. Cheers.

    ReplyDelete
  36. @Muse: No problem. Cheers and God bless.

    ReplyDelete
  37. Hi!
    In my template , gadgets didn't appear with that # before their names, they appear between '' (ex:'BlogArchive1')... I don't know where to add the code.
    Help me please!! :)

    ReplyDelete
  38. @velvet: That's right. When you view them, you won't see the hash (#) sign before your gadget's ID. You need to add them by yourself when you address your gadget in template designer. Say your gadget's ID is BlogArchive1. In template designer, you need to add the hash sign by yourself to address it. Something like this:

    #BlogArchive1{
    margin-top: -50px;
    }

    Cheers.

    ReplyDelete
  39. Lots of thanks!! :)

    (Feeling a bit stupid now... haha!)

    ReplyDelete
  40. I'm unable to get the left and right sidebar gadgets to move. Here is the CSS code:

    #Html1,#LinkList6,#TextList1,#LinkList1,#LinkList2{
    margin-bottom: 2px
    }
    #Image7,#Image6,#Image5{
    margin-bottom: 2px
    }

    http://thelakerunner.blogspot.com/

    Any suggestions on what I am doing wrong?

    ReplyDelete
  41. @Lake Runner:

    Use this:

    #HTML1,#LinkList6,#TextList1,#LinkList1,#LinkList2{
    margin-bottom: 12px !important;
    }
    #Image7,#Image6,#Image5{
    margin-bottom: 12px !important;
    }

    Noticed #HTML1,#LinkList6,#TextList1,#LinkList1,#LinkList2{
    margin-bottom: 2px !important;
    }
    #Image7,#Image6,#Image5{
    margin-bottom: 2px !important;
    }

    I changed 2px to 12px, just to make sure you notice the difference. You need to know if you're addressing the right elements first, and if it is working. A small figure like 2px will be hard to notice, and you will not know if what you're doing is right or wrong. Once you're sure your code is working, then you can go on to change the figure to whatever number you'd like to use.

    ReplyDelete
  42. Thank you for the help. Everything seems to be working the way I wanted.

    ReplyDelete
  43. @The Lake Runner: That's nice to hear :)

    ReplyDelete
  44. Greetings and the biggest thanks for sharing your Blogger know-how with the world. I have had great success stylizing my website, SocialEnrichment.com, based on the above. I am thrilled! I've hit a roadblock. I cannot for the life of me figure out the ID for the column that starts with CLASSES. I want to eliminate the padding-left. I've used FireBug and I'm stumped. Most of the time, I can figure this out. Thanks so much in advance!

    Barbara

    ReplyDelete
  45. @Barbara: Thanks for your kind words. Appreciate it :)

    Now, back to your question. Before IDs, there are classes. We address an ID with a hash symbol '#', and a class with a dot symbol '.'

    I've published a very brief post on IDs and classes before. See if you'd like to have a look.

    All the best..

    ReplyDelete
  46. This is very helpful. I was trying it during one hour but can't be done. Thanks for help.

    ReplyDelete
  47. @antleeli: You're welcome :) Cheers and God bless.

    ReplyDelete
  48. Oh my goodness! This has been bothering me so much! Thank you for this help!!!

    ReplyDelete
  49. Do you know of any tutorials to reduce the space between the Gadget title and the gadget? I'm over at www.emisarias.blogspot.com and there's a ridiculously large gap between the title and the actual gadget.

    ReplyDelete
    Replies
    1. Here's a fix. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      h2 {
      padding-bottom: 0px !important;
      margin-bottom: 0px !important;
      }

      Delete
    2. You are the best. That was crazy easy and saved me more hours of trying to figure it out on my own. Thank you!

      Delete
    3. You're most welcome :) Happy blogging!

      Delete
  50. This was a massive help, thanks very much for posting it!

    ReplyDelete
  51. Hi! Thanks for the Clear tutorial, but I too am having problems with the spaces not budging. I am trying:

    #Image19, #Image16, #Image17 {
    margin-bottom: -50px;
    }

    my blog is: www.blog.justinablakeney.com

    Thank you for any help that you can provide!

    ReplyDelete
    Replies
    1. You have huge margins between your images. Let's get rid of them first. Add this to your css:

      #Image16, #Image17, #Image19{
      margin: 0px !important;
      }

      Cheers :)

      Delete
    2. Thank you! I've added that, but nothing seemed to change...

      Delete
    3. Nevermind-- I got it! You're the bomb! thanks so much.

      Delete
  52. This makes sense and I'm sure I'm follwing the instructions but it just isn't working for me. help?

    Here's the website:
    http://bffwedding.blogspot.com/

    Here's what I'm adding to the CSS:
    #HTML1{
    margin-bottom: -50px
    }

    I really appreciate your help!

    ReplyDelete
    Replies
    1. Try this:

      #HTML1{
      margin-bottom: -50px !important;
      }


      Cheers :)

      Delete
    2. :/ it's still not budging.

      Delete
    3. I don't see the code anywhere in your source. Can you make sure the code sits in your template and get back to me so that I can check why it isn't working?

      Delete
  53. Thanks for the help. Really easy to use.

    ReplyDelete
    Replies
    1. Thanks for your feedback :) Happy blogging..

      Delete
  54. I'm so sad, it was working perfectly before and now I can't use this trick anymore and I don't know why :'( Maybe you have an idea why ?

    ReplyDelete
    Replies
    1. You've got a piece of broken code in your template. It'll make all new code useless, unless you get the broken code fixed. This is the code I'm talking about:

      .PageList li{font-family: 'Covered By Your Grace', cursive; font-size:169%;

      Should be (The curly bracket at the end):

      .PageList li{font-family: 'Covered By Your Grace', cursive; font-size:169%;}

      Once you've got this fixed, retry the code in the tutorial. It's still working :)

      Good luck!

      Delete
  55. I've tried doing this and reading through all the comments but nothing seems to work :(

    I can't seem to get my search picture and the search bar to be closer together and same goes with the archives.

    This is my testing blog! http://eoalphatesting.blogspot.com

    Please help me. I've spent way too long on this haha.

    ReplyDelete
    Replies
    1. Hi Ly,

      Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      #HTML4{
      margin-bottom: -30px;
      }

      #HTML3{
      margin-bottom: -30px;
      }

      Adjust the values accordingly. Cheers!

      Delete
    2. Of course it does. I tested it before giving it to you. Anyways, I can't find your search picture and the search gadget anymore. Let me know if you were trying to fix something else.

      Cheers.

      Delete
    3. That's weird it's still there when I click on the link I gave you. I tried it multiple times and it would not work for me. I'm not sure if I'm doing anything wrong?

      Delete
    4. Hi Ly,

      I see them now. Try these codes instead:

      #HTML4{
      margin-bottom: -30px !important;
      }

      #HTML3{
      margin-bottom: -30px !important;
      }

      If it still doesnt work, leave the code in your template and get back to me so that I can inspect what's wrong. Cheers!

      Delete
    5. I hate to keep bugging you but could you take another look at it?

      Thanks so much!

      Delete
    6. Hi Ly,

      I still don't see the codes that I gave you. See for yourself:

      http://i.imgur.com/x0kmm.png

      The codes that I gave you are nowhere to be found in your template. Could it be that your browser not saving the changes that you're making? Check and see if the codes are still there. If it isn't, try using another browser and make sure the codes are there. Get back to me and let me know how it goes.

      Delete
  56. Hi,
    This is what I've tried to get rid of the space between my gadgets with no change...

    #HTML2,#HTML1,#HTML6,#HTML5,#HTML13{
    margin-bottom: 12px !important;
    }
    Here is the blog I'm working on.
    http://creativepracticeblog.blogspot.com/

    Also the spacing between the date and title of the post seems far apart too. Is all this spacing connected somehow?

    ReplyDelete
    Replies
    1. Hi Robin,

      I don't have permission to view your blog. Perhaps it has been set to private or something? It's hard to suggest anything without inspecting.

      Delete
  57. Ok, I changed the settings you should be able to view my blog now...
    http://creativepracticeblog.blogspot.com/

    ReplyDelete
    Replies
    1. Okay 3 things.

      1) You have a broken code in your CSS. New CSS codes will not work till you get the broken one fixed. Go to your template, and find this code:

      .header-outer {
      margin-top: -33px;

      Change it to (add the closing curly bracket at the end):

      .header-outer {
      margin-top: -33px;}

      2) Then try your previous code. BTW, adding a 12px margin is only gonna make the gap wider. Use a negative margin. Something like this:

      #HTML2,#HTML1,#HTML6,#HTML5,#HTML13{
      margin-bottom: -20px !important;
      }

      3) There's no connection between these gaps. They're just spaced out that way. Use the following CSS to control the gap between your title and date-header:

      .date-header, .date-header span, .post{
      padding: 0px !important;
      margin: 0px !important;
      }

      .post-title{
      margin-top: 15px !important;
      }

      Adjust the value 15px accordingly.

      Delete
  58. Thank you again, I appreciate all you help. The codes worked great after I fixed that broken code that I had. :)

    ReplyDelete
  59. Hello, I'm also struggling with this. Perhaps I have some broken code that I don't realize? I would appreciate your help!

    My blog is http://www.hello-newday.blogspot.com

    Thank you!

    ReplyDelete
    Replies
    1. Good guess. Yes you do have some broken codes in your template.

      See this line here?
      #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)

      Change it to (add a curly bracket at the end):
      #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

      That should fix it. All the best!

      Delete
    2. Thank you so much! You're awesome. :)

      Delete
  60. I have searched everywhere and tried many things. This is the only one which worked! Thanks!

    ReplyDelete
  61. hello,

    Thanks for the help buddy. I am trying to capture your tips on my blog( www.techbase.in)

    ReplyDelete
    Replies
    1. Hi Chirag,

      What do you mean by capture?

      Delete
  62. Hi I was wondering if you could please help me. I cant find the codes for my aboutme. and sponsorswap. gadgets in order to close the spacing between them. Please help! thank you
    agrayrainbow.blogspot.com

    ReplyDelete
    Replies
    1. Hi Sonya,

      Yeah, sure, but I couldn't find your 'aboutme' or 'sponsorswap' anywhere in your blog. Where should I be looking? I can see some pictures under 'Good Reads'. Is this what you were referring to?

      Delete
  63. Firstly, your site is SO helpful!
    Second, I'm having huge trouble with changing the space between my images in posts. I've searched for ages, but can't find anything.
    Just wondering if you can help
    Thanks in advance :)

    http://dreamsarenecessary.blogspot.co.uk/

    ReplyDelete
    Replies
    1. Hi Claire,

      First, edit these posts, and make sure there are no unnecessary line breaks between these images. Pressing enter too many times to force a line break could introduce annoying gap between images.

      When you're certain there aren't any line breaks between your images, go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .separator a{
      margin-bottom: 0px !important;
      }

      All the best!

      Delete
  64. Thank you so much! This has been a useful tutorial!

    ReplyDelete
  65. You've been a really great help! I love coming back to your blog for your tutorials. And even Google agrees that your tutorials are good. You're on top of their search result pages. Bookmarked you on Delicious!

    ReplyDelete
    Replies
    1. Thanks YWtE. Do let me know if you have specific questions that I have not covered before. I'd be more than happy to have a look!

      Have a nice weekend :)

      Delete
  66. thnaaaaaaaaaaaanks man . you r the best

    ReplyDelete
  67. I'd like to remove the space between my pages menu and the text ads right below them. Is this doable?

    http://www.baylordoctor.com/

    Thanks!

    ReplyDelete
    Replies
    1. Yes it is..

      Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      #AdSense2{
      margin: 0px !important;
      margin-top: 5px !important;
      }

      Change the value '5px' accordingly.. Cheers :)

      Delete
  68. Hey,

    This tutorial was a great find; thanks for writing it! I am trying to move the "follow us on..." picture buttons in the right column of my blog so that there is no space between them. I saw some small changes trying both the techniques you listed in the post but not what I was going for. I then read through the comments and tried this code:

    #Image3, #Image2, #Image1{
    margin: 0px !important;
    }

    Which is where everything stands now. The bottom two images seem to have closed their gap a bit (not as much as I want, but the top one doesn't seem to have moved at all. The blog address is fineryblog.blogspot.com. Any advice or solutions you could give would be most appreciated!

    ReplyDelete
    Replies
    1. Hi Madeline,

      Try this:

      #Image3 br{
      display: none !important;
      }

      #Image3, #Image2{
      margin-bottom: -5px !important;
      }

      Let me know how it goes :)

      Delete
  69. hi, i was wondering if you could give me a helping hand

    im using pictures for links to my pages but i want to remove the space between them, i understand where the custom css box is and to paste the code but i don't understand what i replace the label1 with, ive read your other posts but still don't understand how to identify or where to go to identify it

    it would be a great help

    http://vanillanougat.blogspot.com.au/

    ReplyDelete
    Replies
    1. Hi Kristina,

      Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .Image{
      margin: 0px !important;
      }

      Let me know what you think of it :)

      Delete
    2. thankyou so much, i really appreciate it :)

      Delete
  70. Having the same issue... using pictures as links and can't adjust the spacing. I pasted your code and adjusted both the links and the gadget below. Nothing.

    http://lainecokerdesign.blogspot.com/

    Thanks!

    ReplyDelete
    Replies
    1. Hi Laine,

      Try this. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .widget{
      padding: 0px !important;
      margin: 0px !important;
      }

      Cheers :)

      Delete
  71. Im having a problem removing the gaps between my picture links on the side bar could you take a look? ive tried some of the codes above but dont believe they worked.
    thanks
    http://ticklesmytastebuds.blogspot.com.au/

    ReplyDelete
    Replies
    1. Hi TMT,

      Sorry for the late reply. I've seen your blog, and I can only see one picture gadget. Where exactly is the gap that you were referring to? I believe I can help.

      Cheers :)

      Delete
    2. i dont know if my last reply worked? but i guess is not just picture links but i just want all the gadgets on my side bar to be closer together.

      Delete
    3. Hi Kristina,

      What's your blog's address?

      Delete
    4. http://ticklesmytastebuds.blogspot.com.au/

      Delete
    5. Here, add this to your CSS :)

      .sidebar .widget{
      padding: 0px !important;
      margin: 0px !important;
      margin-bottom: 5px !important;
      }

      Delete
    6. thankyou so much for your time :) it worked!!

      Delete
  72. Site | nursenacole.com

    I'm having issues with centering EVERYTHING on my right sidebar only. Including images, titles and words... can you help? You have a wonderful site and I visit you site daily : )

    ReplyDelete
    Replies
    1. Hi Nacole,

      Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      #sidebar-right-1{
      text-align: center;
      }

      Let me know how it goes :)

      Delete
  73. Last question, I recently adjusted my right sidebar width and added more space... oddly, the pictures (from google widgets) did NOT re-size and DON'T fit perfectly within the new adjustment. They are still the same size for the previous "smaller" width. Is there anyway I can increase the pictures to "new" sidebar width I've created?

    ReplyDelete
    Replies
    1. Usually, it doesn't work that way. The frame size is usually fixed and non-adaptive, which means changing the sidebar width is not gonna change a thing on your actual gadget. We need to make changes to the gadgets directly. Which gadget are you referring to, and how exactly did you add it (via HTML/Javscript gadget or Picture gadget, etc)?

      Delete
  74. Hello! Sorry, but I also have the same issue.

    I tried following the tutorial, pasted this already,

    .widget{
    padding: 0px !important;
    margin: 0px !important;
    }

    and still nothing works. :( I don't know it I'm just stupid or what. Can you please help me?

    This is my blog, josemargotravels.blogspot.com

    What I'm trying to do is to remove the spaces between the picture widgets which I'd eventually change into links.

    Thank you so much!

    ReplyDelete
    Replies
    1. Hi Jose,

      Sorry for the late reply. I think I can help. Is there a particular group of picture widgets that you'd like me to look at, or do you wanna apply the tweak to ALL picture gadgets on your sidebar?

      Delete
  75. I can't get this to work for anything. I've tried all the variations you present in the comments section and I can't seem to make it work. If you get a chance, my address is http://www.mysecretkshopper.com/.
    Thank you

    ReplyDelete
    Replies
    1. Hi AC,

      I've seen your blog. Where exactly is the gap that you wanna get rid of?

      Delete
  76. cheers, worked great

    bez
    veganoo.net

    ReplyDelete
  77. hi yoboy :)
    umm, the trick is not working for me.
    this is my test blog:
    http://lilootemp.blogspot.com/
    I want to remove the space between my fake menu bar (which is just a picture at the moment, the picture written 'home, makeup review' etc) and my header (the big fat picture with a garden on the left).
    the id for my fake menu bar is Image 5
    and the id for my header is header1

    do you know what i am doing wrong?
    i tried to add this:
    #Image5{margin-bottom: -50px !important;}
    #Header1{margin-top: -50px !important;}


    thank you so much yoboy x

    ReplyDelete
  78. omg yoboy. i am such a daftie. it is working now.
    i really had to respect your spelling to the letter and put the { and } on a separate line
    god, i am thick x

    ReplyDelete
    Replies
    1. Looks like you're getting the hang of it :) Glad you got it figured, have fun and happy blogging! :)

      Delete
  79. Hi yoboy :)
    my blog www.dohalink.blogspot.com
    there is somthing problem with page list ,i cant see that
    and how can reduse the sapce under the post (between two post)
    how enlarge the maring box of the post

    ReplyDelete
    Replies
    1. Hi Link Doha,

      1) I can see your pages gadget. See my screenshot.

      2) There's a very little space between your post, why would you wanna reduce that space? See my screenshot.

      3) I'm not quite getting this. Perhaps if I have more context I'll be of better help. What exactly are you trying to do?

      Delete
  80. still there is problem
    www.dohalink.blogspot.com

    i can't see ur screen shot
    this domain not registered

    after my header there is page menue , but its hiding .
    b4 i reduce the margin between gadget on css , but i dont remamber what i did.

    pls chk and clarify

    ReplyDelete
    Replies
    1. Hi Link Doha,

      Here's my screenshot again:

      Your menu

      I can still see your menu. Are you not seeing what I'm seeing?

      Delete
  81. Hello! Could you help me out? This won't work for me, here is my CSS. Is there anything broken here? :D

    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
    padding: none !important;
    border: none !important;
    background: none !important;
    -moz-box-shadow: 0px 0px 0px transparent !important;
    -webkit-box-shadow: 0px 0px 0px transparent !important;
    box-shadow: 0px 0px 0px transparent !important;
    }

    .footer-outer
    {
    border: none;
    }

    .blog-pager
    {
    background-image: none;
    .quickedit{display:none;}

    ReplyDelete
    Replies
    1. Hi Jelena,

      This part here isn't right (the last four lines):

      .blog-pager
      {
      background-image: none;
      .quickedit{display:none;}

      There should be a closing curly bracket '}' at the end of line 3:

      .blog-pager
      {
      background-image: none;}
      .quickedit{display:none;}

      Now that this is taken care of, your new CSS code should work again. Is there anything in particular you need help with? Eg: 'how to remove gap between gadget A and gadget B' or something like that?

      Delete
  82. Hello! :D I have a question. I have some banners on my blog sidebar, and the spacing between them is way too huge. I want to make it as minimal as possible. I tried this, but it didn't work. I might have some broken codes. Could you help me out?

    Blog url: http://the-wandering-heart.blogspot.com

    CSS codes:

    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
    padding: none !important;
    border: none !important;
    background: none !important;
    -moz-box-shadow: 0px 0px 0px transparent !important;
    -webkit-box-shadow: 0px 0px 0px transparent !important;
    box-shadow: 0px 0px 0px transparent !important;
    }

    .footer-outer
    {
    border: none;
    }

    .blog-pager
    {
    background-image: none;
    .quickedit{display:none;}

    ReplyDelete
    Replies
    1. Hi again Jelena,

      Refer to the comment above this on how you can fix your existing code. Once you've got that taken care of, proceed with the following code. This set of code should minimize the gap between your banners in your sidebar:

      #HTML9, #HTML12, #HTML7, #HTML4, #HTML8, #HTML11, #HTML1{
      margin-top: -30px !important;
      }

      #HTML13{
      margin-top: -20px !important;
      }

      Let me know how it goes :)

      Delete
    2. Thank you, it worked perfectly! :*

      Delete
  83. Hello Yoga,

    Great post and great comments. Maybe this isn't the right tutorial for this question but I couldn't find what I was looking for when searching your blog for it. I want to remove the space between the posts and the header of my blog (or if you prefer the tabs and posts). I have searched but I couldn't find anything yet. Do you have any suggestions? My blog is http://euronomist.blogspot.com/

    ReplyDelete
    Replies
    1. Hi Euronomist,

      Here's what you've been looking for. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .main-outer{
      position: relative !important;
      top: -30px !important;
      }

      Cheers :)

      Delete
  84. Many thanks Yoga! Exactly what I needed!

    ReplyDelete
  85. Hello, Yoga! I noticed how much you helped me and a lot of other bloggers with your knowledge. I was wondering if you could help me out again:

    http://i603.photobucket.com/albums/tt119/AngelStar483/helpneeded.jpg

    Taken from: www.fashion-bite.com

    Here's what I'd like to do. I'd like to categorize my posts on my blog and make that label (for example: novelty, outfits...) appear in the post headline, just like here. Could you do a tutorial on that on your blog?I would really appreciate it. Thank you! :D

    ReplyDelete
    Replies
    1. Hi Jelena,

      I could definitely give it a try, but I'll be honest with you. As I'm preparing for an exam this coming week (18th), I won't be able to give this one a go just yet, as it'll take quite some time to play around with the HTMLs.. If you don't mind waiting till next week (sometime around 20th), I promise I'll come up with something.. Will that be okay?

      Delete
    2. Sorry to interfere but that would be a great tutorial Yoga. Looking forward to it.

      Delete
    3. 'Label in Post Title' it is! Still havent worked on it though, I'll figure something out, I promise! :)

      Delete
  86. Of course! Good luck on your exam! :D

    ReplyDelete
    Replies
    1. I've got the code prepared. Now it is just a matter of composing a post :)

      Delete
  87. thank you but it didnt work! i tried everything. even the things you said to do in the comments. i am in ccs. should i be in html? i just dont understand why it wont work for me

    ReplyDelete
    Replies
    1. Hi Erica,

      Nope, you shouldn't be in HTML.. The 'Add CSS' is the place where you should be adding these codes.

      Anyways, let me have a look at your blog. I see you've got two blogs. Which one should I be looking at? And, where exactly is the gap that you're trying to remove - or do you wanna apply a generic rule that would shorten the gap between ALL sidebar gadgets?

      I'll come up with a customised code once you reply me. Cheers :)

      Delete
  88. Hi,
    how can i reduce space between pagelist and main body.
    and how can arrange footer area (resize)

    pls replay

    thank you

    ReplyDelete
    Replies
    1. Hi Link Doha,

      Add this to your CSS:

      .main-inner{
      padding-top: 5px !important;
      }

      Cheers :)

      Delete
  89. Thank you! This was really helpful. I'm brand new to CSS and your site is really great.

    ReplyDelete
    Replies
    1. Hi Jocelyn,

      Thanks, appreciate your feedback! :)

      Delete
  90. Hello-- tried the tutorial, but no luck. I'm actually trying to decrease the space as I want to add a picture where the gadget title is, and want it to appear as the title, but the space is so large, especially when you remove a title. anything i can do to shorten the space between the title and gadget and between gadgets would be great. does this make sense? any feedback is appreciated!

    ReplyDelete
    Replies
    1. Hi Happy Habitat,

      I'm gonna need more context. I understand you're trying to decrease some gap in your blog's sidebar, presumably some gap between an image gadget (that suppose to act as a gadget title) and some gadget. But I can't seem to find this image gadget that you're referring to.. What am I missing?

      If you could tell me where exactly is the gap that you're referring to, I'll get back to you with a custom solution to decrease/remove the gap..

      Cheers :)
      -Yoga-

      Delete
  91. sir
    http://www.keralatotalchat.com/p/kerala-total-chat.html i am using blogspot template. how to edit/p/ pls helpme
    pls e mail me keralatotalchat.com

    ReplyDelete
    Replies
    1. Hi Kerala,

      I've replied your previous comment before. You can't alter the way the URLs are formatted, as we don't own the hosting service that blogger is providing us for free. As such, we can't remove the /p/ part from our URLs..

      Hope this helps :)

      Delete
  92. ok thanks....... me sad my sub page Url is bored . any idea for change/p/??

    ReplyDelete
  93. Hi there,

    I've read through all the above comments but can't seem to work out what I need to do. I have pictures on my sidebar and want to decrease the blank space between each one - www.cheandfidel.blogspot.com .... would greatly appreciate your help. Thanks so much!

    ReplyDelete
    Replies
    1. Hi Jodi,

      Try this. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .widget.Image{
      margin-bottom: -20px !important;
      }

      Let me know how it goes. Cheers :)

      Delete
    2. Oh goodness - thank YOU so very much. It looks wonderful (I adjusted to -13px)!

      Delete
    3. Excellent! :)

      Cheers and God bless.

      Delete
  94. Question- How do I reduce the space between the Post and the Sidebar with CSS?

    Thanks

    ReplyDelete
    Replies
    1. Hi Aman,

      It depends to the kind of template you're using. What's your blog's address?

      Cheers.

      Delete
  95. Ok, I've got two questions for you. I tried the above with no results. I would like to close gap between my page list and link list gadgets on the side bar. Also, how do I move my main body up so it aligns with the first gadget? Does that make sense? Any help is SO appreciated!!

    Liz
    yellowfinchdesigns.blogspot.com

    ReplyDelete
    Replies
    1. Hi there,

      For the gap between your pages gadget and linklist gadget, add the following to your 'Add CSS' box:

      #LinkList1{
      margin-top: -27px !important;
      }

      And to move your main body a little up, use the following:

      .column-center-outer{
      position: relative !important;
      top: -20px !important;
      }

      Let me know how it goes :)

      Delete
    2. No luck :(
      I moved the body and date up a bit by tweeking some of the code. I would like to make the date and title of the post a bit closer, but couldn't figure that one out.

      The above codes didn't do anything??

      Thanks for your help!!
      Liz
      yellowfinchdesigns.blogspot.com

      Delete
    3. Looks like you've got a broken piece of code in your template that's ruining all the new codes that you add to your template - the reason why the code that I gave above did not work. Go to your 'Add CSS' box, and find and delete the following lines:

      .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
      .BlogList .item-thumbnail img {
      padding: none !important;
      border: none !important;
      background: none !important;
      -moz-box-shadow: 0px 0px 0px transparent !important;
      -webkit-box-shadow: 0px 0px 0px transparent !important;
      box-shadow: 0px 0px 0px transparent !important;#LinkList1{
      margin-top: -27px !important;
      }

      That should remove the broken code. Re-add the code that I gave in my previous reply then. Cheers..

      Delete
    4. AWESOME!! Thank you. I actually didn't have that code in my CSS, but found it in my HTML. I don't really know what I'm doing, but it worked ;)
      Thank you so much.
      Cheers,
      Liz

      Delete
  96. Why can't i find the ID's help please :/ Getting ID tutorial won't open :(

    ReplyDelete
  97. This post is exceptionally helpful, but I'm running into a small hitch.

    I've created a custom attribution gadget at the bottom of my blog and I'm trying to move it up closer to the bottom of the actual posts so there's not so much blank space. However, there's a dotted line separator in between messing everything up and I can't figure out how to remove it. Because I can't figure that out, when I try to resolve the spacing issue with the fix detailed in this post, the dotted line just stays in the same place and it looks weird, sometimes even running through my attribution text. Any ideas on how to get rid of this dotter line?

    You're the best, man. Thanks again for all you do on this blog.

    http://www.postjimmer.com

    ReplyDelete
  98. Hi Steve,

    Try this, add the following to your CSS:

    .footer-outer{
    border-top: 0px !important;
    }

    Cheers :)

    ReplyDelete
  99. Ok, I have one more question for you. I am adding "ads" on my sidebar. I wanted to use the text box to type in Sponsors, but it is not aligned with my page list and link list. It is too far to the left.....how do I align it with the lists above?

    I deleted the text because it looked funny not lined up.
    www.yellowfinchdesigns.blogspot.com

    Many many thanks!!
    Liz

    ReplyDelete
    Replies
    1. Hi Liz,

      I need to inspect your blog with the gadget being present if I were to suggest something accurate and useful. Could you restore the gadget and gimme a nudge? I'd usually reply comments within 24 hours..

      Cheers..

      Delete
    2. Ok, put it back up http://yellowfinchdesigns.blogspot.com/
      I did it as a text gadget so the font would match the ones above. I thought I could just type it as the title of the HTML gadget, but it does a different font AND is to the left.

      Thank you So much. Seriously, you're awesome.

      Cheers,
      Liz

      Delete
    3. Hi Liz,

      Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      #Text1{
      padding-left: 1.25em !important;
      }

      Cheers :)

      Delete
  100. Your code worked perfectly the first time I tried editing the spaces between my gadgets, but then I removed the code to fix something, and now when I try to re-enter it, nothing happens. I can't get my gadgets to budge.

    http://alexaandglenn.blogspot.com/

    I typed:

    #HTML8, #HTML7, #HTML9, #HTML1 {
    margin-bottom: -50px;
    }

    I did it on Google chrome

    If you could help me, that would be soooo great,

    Andrea

    ReplyDelete
    Replies
    1. Hi Andrea,

      It seems like you have a broken piece of code in your 'Add CSS' box, and this code is rendering newer codes useless. Go to your 'Add CSS' box, and find and delete the following two lines:

      .header-outer {
      margin-left:170px;

      Cheers :)

      Delete
  101. This worked for me the first time I tried it a few months ago, but for some reason I lost all the coding and my blog went back to default and this time around I am unable to get the code to work and move the gadgets closer together any suggestions?

    ReplyDelete
    Replies
    1. Let's have a look at your blog. What's your blog's address?

      Cheers :)

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.