Southern Listeners

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

Thursday, November 25, 2010

Remove Space between Blogger Posts

I have just written a tutorial on how you can reduce space between Blogger gadgets. I guess I might as well write a tutorial on this one, since you have to address the elements in this one in a slightly different manner. How different one might ask. Most gadgets are unique, so normally they have their own IDs. However, it is difficult to find an ID for your post structures since post structures are identified using classes. Please refer to this post on a brief note about IDs and Classes.



Step 1:


Identify your class of course. Check out how you can identify your element's ID or class here. This is what I get using Firebug:


As you can see in the image above, my blog posts' class is known as date-outer. But it is not exclusive. You can also address your posts with date-posts, post-outer, post hentry and so on. See the image below. If you're using a different template, you might be seeing different classes altogether. I used Awesome Inc template for this tutorial.


The problem is, unless you're the designer of this template or really an expert when it comes to blog designing, you might not always know which is the right class to address. An element can have more than one classes associated to it, unlike IDs (where each elements can only have one unique ID). So you have to determine which class is the most accurate one using trials and errors. In this example, you can forget about date-posts, post-outer and post hentry classes because the right one to use is date-outer. Please feel free to play around with the other classes in the following step.

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.
.date-outer{
margin-bottom: -50px;
}
You can use margin-top attribute too:
.date-outer{
margin-top: -15px;
}

Try using the other child classes (date-posts, post-outer, post.hentry) in the example above and see what happens. You will see changes, but not the one that you will like. Also, note how classes are addressed by adding a dot (.) as its prefix, unlike an ID's hash (#) prefix. That's about it. Have fun.

266 comments:

  1. Perfect explaination. Got it at one go
    Thanx
    -Salil
    http://www.parasitech.net

    ReplyDelete
  2. @Salil: That's nice to hear. I always thought my instructions were confusing. Cheers buddy.

    ReplyDelete
  3. Hi,
    just found a solution.
    Very nice.
    Is there also a way to remove some space between Header and first Post?

    Thanks

    ReplyDelete
  4. @JL: I'm sure there is. But it depends on what template you're using. What's your blog's address?

    ReplyDelete
  5. @Prayag: You're welcome. Cheers and God bless.

    ReplyDelete
  6. Hi. I'm having the same problem as JL. I need to remove the white space between the header and first post.

    My address is www.stevenandlilyphotography.com

    Thanks,
    Lily

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

    #Header1{
    margin-bottom: -40px;
    }

    ReplyDelete
  8. hey ! nice post.. will try.. I also want to know how to reduce the gap betwen the post header and the first line... Pls indicate

    ReplyDelete
  9. @Momchef: In your case, add the following CSS:

    .post-header{
    height: 0px;
    margin-bottom: 2px;
    }

    Adjust the value 2px accordingly.

    ReplyDelete
  10. Hey! I find this very useful, thanks :-)
    but how can I remove the space between the pictures? There's always big white bar between them, it's ugly.
    ps. sorry if wrote something wrong, I'm not good at english :$

    ReplyDelete
  11. @Anon: Gap between images eh? Well, it's hard to tell. I need to inspect your blog if I were to give a working fix. Is there a page I can have a look at?

    ReplyDelete
  12. hi do you know how to remove the white spaces between photos in blogger when posting images from flickr??? please reply. :)

    http://www.whatevereveramen.com/

    ReplyDelete
    Replies
    1. You still have a small padding defined for your images. Try removing it. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img{
      padding: 0px !important;
      }

      Screenshot

      Delete
  13. thank you! :) I know this question is not under this area but im having trouble resizing my photos. I want to have uniform width for both portrait and landscape photos without ruining the quality of the image. I discovered using flickr but do you know any better solutions? thanks so much!

    ReplyDelete
    Replies
    1. The only way I know to achieve a same width for both portrait and landscape images is via trials and errors. There's a fast way to it.

      Say this is my landscape image:
      http://3.bp.blogspot.com/_VZprIDHV4-Q/TO1Zqa76cwI/AAAAAAAACJo/MGHWAJGQNd8/s500/1.png

      And this my portrait one:
      http://3.bp.blogspot.com/-WjAoxl2OHIA/TzaQJ4pFaAI/AAAAAAAAF1w/xJvET9eqRWo/s268/0a.jpg

      See the 2 highlighted tags above? I'd set the width for one of the image, say 500, and I'll adjust the value 268 until the two are the same. For portrait images, the highlighted value represents the height (s268 in the example above). And in landscape images, it represents width (s500). Once you've uploaded your image to your post, switch over to HTML view, and fix on one of the values, and change the other value and keep hitting preview to see if they agree to each other.

      The following post might be useful:
      Resize Blogger Post Image

      Delete
  14. Hi, may I know how do I reduce the white space in between photos? I find the white space too big and it's not nice... Would appreciate if you could help. Anyway I am using dynamic view for my blog.

    ReplyDelete
    Replies
    1. Hi Zyh,

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

      .article-content div img{
      margin-bottom: -13px !important;
      }

      Cheers!

      Delete
  15. Will appreciate it if u 'll kindly direct me on how to reduce the wide space between my sidebar and post body. http://www.recipesng.blogspot.com
    Thanks

    ReplyDelete
    Replies
    1. Hi Vicky,

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

      .column-left-inner{
      margin-right: -15px !important;
      }

      .column-right-inner{
      margin-left: -15px !important;
      }

      Cheers!

      Delete
    2. It worked perfectly. You've been of great help. Thanks a lot.

      Delete
    3. Hello,
      Thanks for your help so far. But I still need to close up the space between my header/tab and post body, Your help will be very much appreciated.
      http://www.recipesng.blogspot.com

      Thank You

      Delete
    4. Hi Vicky,

      Here, add this to your CSS:

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

      Cheers :)

      Delete
  16. Hi Yogaratnam,

    I've been trying to reduce the space between images, just like Zyh. I copied this code:

    .article-content div img{
    margin-bottom: -13px !important;
    }


    It worked for a short time, then reverted back to the old way. I was so happy for a second! Can you look at my current CSS to see if there's a problem?

    .post-title {
    text-align:center;
    }

    .post h3 {
    margin: 0em 0 -1;
    padding:0 0 -1px;
    font-size:110%;
    font-weight:normal;
    line-height:-1em;
    color: $pagetitlecolor;
    text-align: center ;
    }




    .widget {
    margin: -1px;
    }

    #blog-pager {

    }

    .widget {
    margin: -1px;
    }

    #blog-pager {

    }




    #Header1{
    margin-bottom: 0px;
    }

    .post-header{
    height: 0px;
    margin-bottom: 0px;
    }

    .article-content div img{
    margin-bottom: -13px !important;
    }

    ReplyDelete
    Replies
    1. Hi Scuba,

      Have you got this sorted? The gap between your images seems quite small to me.

      Delete
  17. Hey there!!

    So some of my readers were complaining that the amount of space to the posts is too small [between the header and the bottom of the page] so I attempted to make the title smaller and move up the header to add more space. Now I have a floating header and I've seen some of your other posts but nothing seems to be working?? Any ideas?

    ps. Just a thought:: have they come up with a way for the title and header to scroll with page instead of staying stationary? That might work well too!!

    allgabrielleu.com

    Thanks! I LOVE YOUR SITE!!

    ReplyDelete
    Replies
    1. Hi GUnion,

      Actually, I've come up with a way to make the header non-floating. I think you will like it. Check it out:

      http://www.southernspeakers.net/2011/11/non-floating-header-in-blogger-dynamic.html

      Cheers :)

      Delete
    2. Hey there!

      Thanks so much for the reply. Unfortunately, it still didn't work. I still have that awkward space underneath my title photo. Here's the code:

      #header .header-drawer.sticky, #header .header-drawer {
      top: 287px;
      }

      #header .header-bar{
      height: 318px;
      }

      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 318px;
      }

      #header-container {
      height: 358px;
      }

      .viewitem-panel .viewitem-inner {
      top: 253px;
      padding-bottom: 73px !important;}

      #header-container #header.header .header-bar span.title{
      background: url(http://1.bp.blogspot.com/-5PRrQ6747jk/T5r-oOo0r0I/AAAAAAAAAyw/NbOBIubHt_w/s1300/gabred22.jpg)
      repeat center;
      margin-left: auto !important;
      margin-right: auto !important;
      height: 275px;
      }

      #header.header .title a h1, #header.header .title h3{
      display: none;
      }

      .tabs{
      width: 95% !important;
      text-align: center !important;
      }

      .ss,.blogger-gear{
      display: none;
      }

      #views{
      display: none !important;
      }

      #header #pages, #header #pages:before{
      border-left: 0px !important;
      }

      #header .header-bar, #header .header-drawer.sticky, #header .header-drawer{
      top: 0px !important;
      margin-top: 0px !important;
      position: relative !important;
      }

      body.sidebar #main.hfeed #sidebar{
      position: absolute !important;
      }

      body.sidebar #main.hfeed #sidebar .item{
      background: #EEEEEE;
      }

      #header{
      position: relative !important;
      }

      Please, I hope you can help :)

      Blessings, GUFP.

      Delete
    3. Looks like you've been placing random values all over your header.. As I've mentioned before, you need to be very careful with your header code.. If you change one single value, you need to change the whole code.. Keep a backup if this code if you're planning to temper with the code again in the future. These are the values that you should have.. DON'T add this code to your css, but find for these code from your 'Add CSS' section, and change the values that you have to the values that I've given below.. Let me know how it goes..

      #header .header-drawer.sticky, #header .header-drawer {
      top: 244px;
      }

      #header .header-bar{
      height: 275px;
      }

      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 275px;
      }

      #header-container {
      height: 315px;
      }

      .viewitem-panel .viewitem-inner {
      top: 210px;
      padding-bottom: 230px !important;}

      Good luck :)

      Delete
    4. You are a freakin' miracle worker!! I don't know how ya do it but you do. And there's a tiny piece of me that feels like I owe you some fresh baked cookies, or tickets to something, or any awesomely randomness in a cup from the corners of my brain :) YOU ROCK!! Thank you!!

      Delete
    5. Lol.. Don't bother.. Glad I could help :)

      Delete
  18. Hi, can you show me how to reduce the white space between my pictures at my blog? :)
    http://picturingthememories.blogspot.com/

    ReplyDelete
  19. Can you tell me how to reduce the space between the pictures on my blog? http://picturingthememories.blogspot.com/

    ReplyDelete
    Replies
    1. If you were referring to the pictures in your post, 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.

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

      Cheers! :)

      Delete
    2. Thank you, so much! It worked! :D

      Delete
  20. Hey, can you tell me how I could remove space between post title and gadget? And how I can get my post title to center? :) Thank you xx

    ReplyDelete
    Replies
    1. Hi Eveline,

      What's your blog's address? I cant suggest anything useful without inspecting your blog..

      Delete
  21. Hello, I've been having the same problem...I'm trying to make the gap between my photos much smaller, I've tried a few things you've suggested here but nothing seems to be working...I'd appreicate it so much if you could lend a hand as I'm no good with the whole technical side of blogging!! Thank you!
    http://modemadeleine.blogspot.co.uk/

    ReplyDelete
    Replies
    1. Hi Maddie,

      Are you referring to your blog as whole or is there a particular post that you want me to look at? I realized that some of your pictures in your 'My Jubilee Weekend in Devon' have dead div containers in between them. It'll be easier for me to highlight these containers if we could move this discussion to Blogger Help Forum. Create a discussion thread there, and get back to me with its link.

      Delete
  22. Thank you, I have started a discussion here is the link https://productforums.google.com/forum/#!category-topic/blogger/how-do-i/3xYK_Memf54

    I want to reduce the gap with all images on my blog as a whole, but yes I noticed that my most recent posts seems to have a bigger gap than past posts.

    ReplyDelete
  23. Can you tell me how to reduce the space between the pictures in my posts on my blog?

    tankerfralaura.blogspot.com

    ReplyDelete
    Replies
    1. Hi Laura,

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

      .post-body img{
      padding: 0px !important;
      margin-bottom: -5px !important;
      }

      You might still see some gap in between some of your pictures, due to line breaks in your post. In cases like this, edit the post, and delete any line break that you see between your pictures..

      Delete
  24. Can u tell me how to reduce a gap between two pages in blogger?

    ReplyDelete
    Replies
    1. Yes but there is not generic answer. I'm gonna have to inspect your blog before I could suggest something. What's your blog's address, and where can I see these two pages you were referring to?

      Delete
  25. Any idea how I'd make the space between my header and blog posts not so big? http://www.jenx67.com Thanks!

    ReplyDelete
    Replies
    1. Hi Jenni,

      Sorry for my ridiculously late reply. Here, 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.

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

      Adjust the 5px value accordingly. Cheers :)

      Delete
  26. How to decrease the space between blog post content and the blog post footer.

    http://technotrickology.blogspot.in/2012/07/how-to-boost-your-pc-for-better.html

    Here you can see the big space between the post and footer

    ReplyDelete
    Replies
    1. You have a ghost widget there, titled 'Related Post'. If you know what I'm talking about, try to get rid of it. Otherwise, you can hide this widget from appearing by going to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      #bottom-posts{
      display: none !important;
      }

      Cheers :)

      Delete
    2. thanks a lot its really working,i have one more problem please help me

      In my blog

      http://technotrickology.blogspot.in/

      My home page and lebel pages does not show the OLDER POSTS LINK,i tried many times but have not worked,Please help me if you want my template to send you then i will send it.

      Give me address where i have to send my templates

      Delete
    3. Hi JB,

      It seems like your template has this feature (and possibly some other features) readily disabled. You can restore these features by going to dashboard - Template - HTML - Proceed - Revert widget templates to default, BUT, since you're using a heavily modded template, you might end up screwing your template. Backup your template, and give it a go. It it screws up really bad, try contacting your template maker to see if there is an easy way to restore this one particular feature.

      Good luck :)

      Delete
    4. Took me almost 2 hours to find this. Go edit your template, find and delete the following lines:

      <!--Page Navigation Starts-->
      <script type='text/javascript'>
      var pageCount=6;
      var displayPageNum=6;
      var upPageWord =&#39;Previous&#39;;
      var downPageWord =&#39;Next&#39;;
      </script>
      <script src='http://johnytemplate.googlecode.com/files/page-navigation.js' type='text/javascript'/>
      <!--Page Navigation Ends -->

      Cheers..

      Delete
    5. Its working,i have asked this question to many bloggers but they did not find a solution.I have no words to describe my feelings,if you are in our city,i will give you a treat for this.but now i can only give you a thank you. keep it up,i will read your blog regularly,and also tell my friends about your blog.

      again Thanks

      Delete
    6. No biggie buddy :) Have a nice weekend..

      Cheers and God bless.

      Delete
    7. Hi Yoga

      I am trying to change my Blogger blog post body width but i can not able to do that,i have changed the width of main-wrapper but not working.
      If i change the outer wrapper width the post body width automatically get larger
      Please help me i am very new to blogger and i have little knowledge on css and html

      My blog info: wisdomgraffiti@gmail.com
      password: jayantab

      Delete
    8. Assuming you want your post width to be larger, this is what you need to add to your CSS:

      #main-wrapper {
      width: 68% !important;
      }

      Cheers :)

      Delete
  27. hy frn i am unable to remove the gap between posts by the method u mentioned above.. plz help me my blog is www.androhdgamer.com sorry for my bad english

    ReplyDelete
    Replies
    1. Hi Anon,

      Add this to your CSS:

      .post-footer-line{
      display: none !important;
      }

      Cheers :)

      Delete
  28. i added it to css but still there is much gap between the first and second post. how do i remove it? Gap in other posts are now fine..thanks for the help frn :)

    ReplyDelete
    Replies
    1. Hi Anon,

      That space is reserved for your AdSense ads. To hide them, add this to your css:

      .inline-ad{
      display: none !important;
      }

      Cheers :)

      Delete
    2. I had the same thing and it worked. I'm still new to blogging and you were a great help! thanks so much!

      Delete
    3. After a stressful day, this is exactly what I needed to hear, thanks! :)

      Delete
  29. Thanks for the post, I successfully implemented this css on my US Jobs blog.

    ReplyDelete
  30. Hi, I have a rather large gap within my post footer and it doesn't look like the google share buttons are showing up either.

    I've tried your code but it doesn't make a difference.

    Please help!

    ReplyDelete
    Replies
    1. Hi there,

      This is what I'm seeing:

      Screenshot of your blog

      Your share buttons are showing. I can see some gap after your post text, but this is gap is coming from your post itself. It seems like you've added additional div tags and line breaks within your post. Edit these posts - switch to 'Edit HTML' mode (as opposed to 'Compose' mode), and delete these unnecessary tags and line breaks.

      All the best :)

      Delete
  31. Hey,

    I am trying to change the html code or css code to delete the post footer bar at the bottom of my posts. Also, i am trying to remove the http:// link from my header banner. Help!
    http://wallstreetbaystreet.bloger.com

    ReplyDelete
    Replies
    1. Hi Anon,

      I might be able to help, but I couldn't open the link that you gave me. What's your actual blog's address?

      Delete
  32. Hey,

    Sorry I typed the address wrong, here is the correct address: wallstreetbaystreet.blogspot.com .

    Mark

    ReplyDelete
    Replies
    1. Hi Mark,

      You don't have a post footer bar. See screenshot:
      http://i.imgur.com/11aRA.png

      As for your header link, use 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.

      .header-inner{
      position: relative !important;
      z-index: 0 !important;
      }

      #header-inner a{
      position: relative !important;
      z-index: -11 !important;
      }

      Delete
  33. Hi,

    Did you get the correct link I sent you today? If not, here it is again: http://wallstreetbaystreet.blogspot.com

    Thanks,
    Mark

    ReplyDelete
  34. Hi,

    The code you gave me did not take the link out of my header banner.
    As for the post footer bar, I mean there is an actual horizontal white bar at the bottom of my post pages that is making a space between at the bottom of my post pages.

    ReplyDelete
  35. I guess the link came out of my banner when viewed in Google Chrome and Firefox but not Internet Explorer; weird huh?

    ReplyDelete
    Replies
    1. I'm having a tough time finding this bar that you're referring to. Could you pin-point the exact location (web-address if required) where I should be looking at? Annotated screenshots will be extremely helpful. Here's how you could upload one.
      http://www.southernspeakers.net/2011/09/obtaining-direct-links-from-blogger.html

      As for the link, if you're still onto it, there's one more thing that we could try - editing the direct HTML source.. But as you might have guessed, I'm gonna have to give you HTML codes, and the commenting area in this post isn't exactly the best place to carry on with this. Here's what you can do. Create a question thread in this forum --> Blogger Help Forum. Once you've created one, send the link of your question thread to me, and I will answer you there accordingly.

      Cheers :)

      Delete
  36. Hi,

    I changed the color of the post footer bar that i am talking about to the color gray so you can see it, it is right at the very bottom of one of my posts here http://www.wallstreetbaystreet.com/p/stocks.html. I am able to change the color of the bar, but cannot delete it completly.
    As for the link in my header, here is my question on blogger forum:http://productforums.google.com/forum/#!category-topic/blogger/how-do-i/RSOO8KcVn0I%5B1-25%5D

    ReplyDelete
    Replies
    1. Hi Mark,

      Found it at last. Looks like it's your comment-container, removing which could equal to disabling comments in your posts.

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

      #comments{
      display: none !important;
      }

      I'll reply bout the header link in the forum.. Cheers! :)

      Delete
  37. Hey, it worked! Thanks!

    ReplyDelete
  38. Hey,

    One more question, any idea how to change the color of the black bar at the top the BarChart.com stock market app at the top right of my website (wallstreetbaystreet.blogspot.com)? I want to have a color of #000080 instead of #000000. I don't know what PARAM NAME="cobrand" VALUE="****" code to add.

    ReplyDelete
    Replies
    1. Can't find anything that matches your description.. See my screenshot:
      http://i.imgur.com/At4cp.png

      Mind uploading an annotated screenshot?

      Delete
  39. Weird how the barchart.com applet does not show on your end, but it does on mine, in all my browsers to.
    Here is the screenshot you were asking for: https://picasaweb.google.com/110971806512392607858/Domains#

    Also for my markthorpecom.blogspot.com blog i cannot seem to get my header banner to center. I have tried many different css codes in add css and html codes in html editor that worked for my other blogs headers to center, but they will not work for this blog.

    ReplyDelete
  40. I am guessing you can't the barchart.com app that i am talking about because it is a java app and your java has to be turned on or accepted in order to see the app.

    ReplyDelete
    Replies
    1. Hi Mark,

      Use this to center your header in markthorpecom.blogspot.com:

      #Image1_img{
      display: block !important;
      margin-left: auto !important;
      margin-right: auto !important;
      }

      As for the barchart gadget, my java is not turned off. If it were, half your content won't be visible to me as most of the charts in your blog is java-based. It seems to me like this is a browser-compatibility problem. I can see the gadget fine in IE, but not in Firefox. You should contact your gadget-maker to consult about this issue.

      Delete
  41. Hi,
    That worked, thanks again for the help!

    ReplyDelete
  42. Hey,
    It's me again. I am trying to get rid of the border that is around my sports banners on my markthorpecom.blogspot.com blog.
    It's making it so there are bigger spaces between my sports banners than I want. I want the banners to have smaller spaces between them like the sports banners have on my domainnamebanker.blogspot.com blog.

    ReplyDelete
  43. To clarify what I was asking earlier, is that all images on my markthorpecom.blogspot.com (including my sports banners and header banner), seem to have borders around the images. I am looking for html code or css code to get rid of the border around my images.

    Thanks

    ReplyDelete
    Replies
    1. Hi Mark,

      Here's what you're looking for:

      http://www.southernspeakers.net/2011/03/remove-blogger-picture-shadow-and.html

      Cheers :)

      Delete
  44. That worked, thanks.
    Any idea how to remove the remaining spaces between my sports banners on markthorpecom.blogspot.com? When i am editing my post, whether in html or compose, there are no spaces bewteen my banners, nor do I add code to make spaces, but when you load my websites on any browser, there are spaces between my banners.

    ReplyDelete
    Replies
    1. Hi Mark,

      Add this to your CSS:

      #Image1_img, #Image2_img, #Image3_img, #Image4_img, #Image5_img, #Image6_img, #Image7_img, #Image8_img, #Image9_img, #Image10_img, #Image11_img, #Image12_img, #Image13_img, #Image14_img, #Image15_img, #Image16_img, #Image17_img, #Image18_img, #Image19_img, #Image20_img {
      margin-bottom: -10px !important;
      }

      Cheers..

      Delete
  45. Hey there. I've been searching for something different than this for my site, but can't find it anywhere. I'm using Awesome, Inc. template.

    I'm wanting to make a change on the border shadows around the body and gadgets, so it'll be white with no border shadows, like yours. Perhaps, just a thin line between posts, and on the gadgets/widgets, if that's possible?

    Here's one of my sites to see what I'm talking about. http://www.electronicrev.com/

    You've been a great help to me so far with your information. I hope you can help with this.

    I appreciate any help you can offer my way.

    Thanks : )
    Steven

    ReplyDelete
    Replies
    1. Hi Steve,

      Here, add this to your CSS:

      .main-inner .widget, .date-outer {
      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;
      }

      If you wanna remove the borders all together, remove the hash (#) from the code above (in Line 3). Cheers :)

      Delete
    2. So awesome. Can't thank you enough! =D

      Delete
  46. Hey stranger,

    Just me again,
    Wondering how to make my buttons on the left hand side of my page (ie: american stocks button) have the same amount of space between them vertically in IE, Chrome and Firefox..all browsers for that matter, if possible.
    I want the spaces between my buttons like how they are when the website is showing in Chrome, but they are to far apart in IE and Firefox.
    wallstreetbaystreet.blogspot.com

    Thanks again,
    Mark

    ReplyDelete
    Replies
    1. Different browsers render attributes in a different way, and there isn't a way to change an attribute for a particular browser alone. If we try to reduce the gap now, you'd notice that the existing gap in Chrome will get shorter than what it is now.. I'm afraid there's nothing much we can do about it. That said, the following code MIGHT help:

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

      Cheers :)

      Delete
  47. Yeah i guess I can't win either way, but I used the code anyway, thanks.
    One more question, how do I get the entire post area and pages of my blog (middle section) to move down some? It is not aligned at the top with my buttons or widgets on each side of it on my blog. Hope I explained it well enough.

    Mark

    ReplyDelete
    Replies
    1. Hi Mark,

      Try this:

      .column-center-outer{
      top: 18px !important;
      }

      Cheers :)

      Delete
  48. Hi again. That pesky shadow doesn't seem to want to go away. I added this http://speedcap.net/img/6d839281f7f38e3e7ed2aa7eeb9a2499/a905ef65.png

    and it took me all night last night to try and figure it out, and couldn't.

    I really need to learn java script I guess. I'm wondering, will I have this same shadow issue should I add other additions to my site?

    Any help or suggestions on this issue?

    Thanks a bunch. :)

    ReplyDelete
    Replies
    1. Not exactly.. The previous code that I suggested only covers the parts that I actually managed to spot, which is pretty much most of your elements considering the main widgets are covered.. I missed the bottom part of your blog the last time.. Here, use this code instead of the previous one:

      .main-inner .widget, .date-outer, #blog-pager, .footer-fauxborder-left {
      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;
      }

      Cheers :)

      Delete
    2. OK, you're awesome! Thanks a bunch. BTW, your google ads are not going un-noticed by me - hint!

      Feel free to delete that last comment. ;p

      Thanks again :)

      Delete
  49. That works, I just adjusted the number (15) to where I liked it positioned best.

    Thanks again!

    ReplyDelete
  50. One more question that I forgot to ask.
    For my domainnamebanker.blogspot.com blog, how do I go about moving the whole left sidebar to the right, so it can be lined up with the left outer edge my header banner, like my post page is lined up with the outer right edge of my banner.
    I am trying to make it so my post page and links sidebar all line up under my header banner.

    Thanks again for taking time to answer my questions.
    Mark

    ReplyDelete
    Replies
    1. Hi Mark,

      Try this:

      #sidebar-left-1{
      position: relative;
      left: 50px !important;
      }

      Cheers :)

      Delete
  51. Yeah that worked, that is exactly what I wanted, thanks again, you have been a great help!

    Mark

    ReplyDelete
  52. Hi again,

    What css code do i need to move my entire blog markthorpecom.blogspot.com up to the top so there is no space between the blog itself and the web browser (where the blogger bar at the top used to be).

    Thanks,
    Mark

    ReplyDelete
    Replies
    1. Hi Mark,

      Try this:

      body{
      margin-top: -30px;
      }

      Cheers :)

      Delete
  53. Hey,

    Thanks, that worked.
    How would i go about extending the length of my blog on the bottom by the same amount, but without losing what i changed at the top? I tried altering your code and put margin-bottom instead of margin-top but it did not work. I even used -30px and 30px with no luck either way.

    Mark

    ReplyDelete
  54. What i am trying to do is make the body of my markthorpecom.blogspot.com blog the same height as my domainnamebanker.blogspot.com blog.

    Mark

    ReplyDelete
    Replies
    1. See if this is what you've been looking for:

      body{
      padding-bottom: 0px !important;
      }

      Cheers :)

      Delete
  55. That's it, thanks again.
    Clicked on some ad's ;)

    Mark

    ReplyDelete
  56. hy yoga , plz help me. i am new at blogger. i want to remove the space between the menubar and picture slideshow in my blog. My blog adress is global-gamer.blogspot.com

    ReplyDelete
    Replies
    1. Hi Anon,

      You have a pages gadget in between your slideshow and your menubar. If you can't remove the gadget via your layout page, then use the following code instead. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      #PageList1{
      display: none !important;
      }

      Cheers :)

      Delete
  57. thanks alot frn :) your site is awesome

    ReplyDelete
  58. hy yoga, Sorry for posting off topic. is it possible to have different content on siderbar in different pages? if yes then can u plz make a tutorial .

    ReplyDelete
    Replies
    1. Hi Anon,

      Yes, it is possible.. The trick is too add all the gadgets at first, and selectively hide a certain of them in certain page.. For example, if you want GadgetA to appear in PageA, and GadgetB in PageB, first you need to add both GadgetA and GadgetB by going to Dashboard - Layout.. Next, you need to add some code to make GadgetA only appear in PageA, and the same for GadgetB.. Here's how you do that:

      http://www.southernspeakers.net/2010/10/showhide-gadgets-on-specific-page.html

      It might sound confusing at first, but really, it's a piece of cake once you get the hang of it :)

      Delete
  59. thanks :) i will try that.

    ReplyDelete
  60. hy yoga, I messed up my blog and everything is not in proper order and dotted lines are appearing in the middle of the posts while adding a new side bar on my blog. how can i fix this? plz help me. my blog is global-gamer.blogspot.com

    ReplyDelete
    Replies
    1. Hi Anon,

      Gonna need more context:
      1) What is 'everything'? Gonna need a list of things that aint right..
      2) Where was the dotted lines originally located?
      3) What exactly did you do, and how did you do it?
      4) Where can I see a working version of your template, to get an idea of what it's suppose to look like?

      Delete
  61. when i posted the comment it was messed up i fixed it. Now only dotted lines are seen in the post. pls see this snap shot http://i1263.photobucket.com/albums/ii628/lonleynesss/Capture.png . I added a new sidebar at the left so it happened.

    ReplyDelete
  62. and here is the backup of my blog template http://up.ht/QavKOT

    ReplyDelete
    Replies
    1. Is the sidebar working fine? And is the dotted line the only problem that needs fixing for now?

      Delete
  63. yeah its okay. the dotted line is the only problem now..

    ReplyDelete
    Replies
    1. Right.. Here's what you're looking for. Add it to your CSS:

      #content-wrapper{
      background-position: 870px 0 !important;
      }

      Cheers and God bless :)

      Delete
  64. thanks alot. you have been a great help to me.

    ReplyDelete
  65. Hello, I've been trying to reduce space on my test blog between the images and it's not working at all. Care to help?
    I've looked EVERYWHERE and even tried all the suggestions above. All I want is a thin space between the images. Please and thank you.

    http://testinghydro.blogspot.ca/

    ReplyDelete
    Replies
    1. Hi Wanna,

      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.

      .post-body img{
      padding: 0px !important;
      margin-bottom: -4px !important;
      }

      Let me know how it goes. Cheers..

      Delete
  66. How to remove space between first two posts and remaining post are in the correct order.

    ReplyDelete
    Replies
    1. I need to have a look at your blog first. What's your blog's address?

      Delete
  67. i still have too much space below my posts on home page how can i remove it at http://ptetech.blogspot.com hope you can help

    ReplyDelete
  68. how can i reduce main footer on my blog?????

    ReplyDelete
    Replies
    1. Reduce what of your main footer? Gonna need more context..

      Delete
  69. i wanted to reduce space between my comment box and footer which i have done.

    What I currently want is that on post pages there should be sufficient space between post title and content any tweak for that

    http://ptetech.blogspot.com/2012/09/wateen-continues-leadership-role-in-ict.html

    here is the link as you can see content is appearing immediately after my social networking icons i want some between it

    ReplyDelete
    Replies
    1. Right. Go to Dashboard - Template - Edit HTML - Find for </b:skin> - Paste the following directly below </b:skin>

      <b:if cond='data:blog.pageType == "item"'>
      <style>
      .post-body.entry-content{
      position: relative;
      top: 10px !important;
      }
      </style>
      </b:if>

      Cheers.

      Delete
    2. Thanks a lot guru g it worked like a charm

      http://ptetech.blogspot.com/2012/10/get-eznetscan-for-details-from-snmp-enabled-devices-connected-to-your-network.html.html

      Delete
  70. I want to remove white space between a Page List and a Marquee Banner bar. What CSS codes do I need for it. Here is my blog:

    http://giadinhtpb.blogspot.com/

    Thanks in advance for your help.

    ReplyDelete
    Replies
    1. Add this to your Add CSS box:

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

      Cheers :)

      Delete
    2. Hi Yoga:

      It worked beautifully. Thanks a bunch.

      Now I would also like to remove white space between the below Marquee Banner bar and above the Main body border (the one above the Los Angeles clock).

      Thanks again for your help and prompt attention.

      cayson

      Delete
  71. Hi Yoga,

    I've tried to remove the vertical white space between Video and Slideshow tabs on Page List http://giadinhtpb.blogspot.com/ by selecting a transparency color in Tabs Border Color, but it does not seem to work.

    What CSS codes do I need to fix it?

    Thanks a million.

    cayson

    ReplyDelete
    Replies
    1. Hi Cayson,

      This one should fix the one between your Marquee and main posting area:

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

      I can't seem to find the vertical space that you're referring to. Could you send me a screenshot?

      Delete
  72. Hey I want to reduce the space between two posts on my homepage. After 3 posts it does not have unnecessary space. I tried ur code snippet but after 3 posts it starting to overlap. Kindly suggest something. My blog link is www.coralsandcrimsons.com
    Thanks in advance

    ReplyDelete
    Replies
    1. You were seeing Adsense ad space, which would normally appear between your first few posts. The following code would hide it. Add it to your 'Add CSS' box:

      .inline-ad{
      display: none !important;
      }

      Kindly remove this code in the future if you decide to enable Adsense on your blog.

      Delete
  73. hi....
    my blog is computercoex.blogspot.in
    and i want to reduce the space between the post, but non of yours css code are working.
    plzzzzzzzz help
    my email wasimr.kumar066@gmail.com

    ReplyDelete
    Replies
    1. Hi Rahul,

      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.

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

      Cheers :)

      Delete
  74. Hello again,

    I am looking to remove the padded space at the bottom my blog just under the last YouTube video. I tried using some of the codes you gave me in the ast but none worked.
    theexpendables2.blogspot.ca is the blog in question

    ReplyDelete
    Replies
    1. Hi there,

      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.

      .post-footer{
      margin-bottom: -35px !important;
      }

      Cheers :)

      Delete
  75. That worked, thanks.
    One more question, my oilfracking.blogspot.com blog and other blog backgrounds will not change or delete. It even shows my background is deleted within template designer, but when you go to the website the old background is still there.
    I have noticed other people are having this problem on Bloggers forums.

    ReplyDelete
  76. Any idea why my background cannot be deleted or changed within Blogger.
    oilfracking.blogspot.com
    I messaged you earlier about it, but i wasn't sure if you received the message or not as i did not get confirmation it was sent.

    ReplyDelete
    Replies
    1. The Template Designer has been broken for quite some time now - which is why your changes are not reflected in your actual blog. But we can still manually change the background using some CSS. Upload the background that you wanna use somewhere and get its direct link. I'll provide you with the necessary code once you have the direct link to the background.

      Delete
  77. Yeah I figured Template Designer was broken somewhat, as I can change or delete backgrounds with some of my blogs under the same Blogger username, but some blogs I cannot.
    The blog in question I was just trying to delete the current background and not have a background at all (just have solid color blogger background), but cannot even do that.

    ReplyDelete
    Replies
    1. The following code should do the trick. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .body-fauxcolumn-outer .cap-top, body, .body-fauxcolumn-outer{
      background: white !important;
      }

      Cheers..

      Delete
  78. Got another question for you, how do I move my header to the very top of the page for my blog expendablesmovies.blogspot.com

    ReplyDelete
  79. Hi,
    I figured out how to move my header to the top of the page but I do not know how to get the post body and news and videobar body to come together as one and for them both to go all the way to the bottom of the page to meet up with the post footer and to go all the way to the top to meet up with the header.
    I do not want any space between the bottom or top of the post body or space between the post body or news/video right bar.

    ReplyDelete
  80. Hey,
    I used some of your old css code you gave me in the past and most of it worked to get my expendablesmovies.blogspot.com blogs center column and right column to line-up better like i asked you for in my previous messages, but it is still now 100%. Maybe you can still look at it and give me the correct code to adjust it correctly.
    I still cannot seem to get the right and center column to move in sync in height, like if i add or take something away from the center column post, the right bar column will be longer or shorter in height compared to the center column. I can never can seem to get both the center and right columns to stay attached to the post footer.
    Hope that makes sense, don't know how to explain it any other way.

    ReplyDelete
    Replies
    1. Hey,

      Sorry for the late reply. It seems like both your mainbar and sidebar meet your post footer --> http://i.imgur.com/s0Nis.jpg

      What am I missing?

      Delete
  81. Yes I got them to meet and everything else to work with some old css code you gave me that i altered, i just wanted to make sure that i didn't miss anything or that you maybe had some better css code for me to use than what css code used/altered.
    If it looks fine to you and you don't think i need to change any of the css code, then i will leave it as is.

    ReplyDelete
    Replies
    1. Still looking good there. You won't have to change the code unless if you've made a major change in your blog or if you've changed to a different template.

      Cheers :)

      Delete
  82. Having an issue with my layout section of my blog, seems corrupted. See my post about it: http://productforums.google.com/forum/#!category-topic/blogger/something-is-broken/GowNh84t0xg

    Help!

    ReplyDelete
  83. I am also missing the whole bottom of my page where my fotter was, there isn't supposed to be a space at the bottom of the page showing the background image.

    Just so you know, my other blogs under the same blogger sign in account are not corrupted, just my expendablesmovies.blogspot.com blog for some reason. I didn't even make an changes, it was just like that when i logged in??

    ReplyDelete
    Replies
    1. I've replied you in the forum. let's continue our discussions there..

      Delete
  84. Hi I've tried all your suggestions to remove the white gap between blog images, but it doesn't seem to be working...

    Also, I wanted to ask how to reduce the gap between the header and page links at the top

    My URL is: http://sindy-ng.blogspot.co.uk

    Any suggestions would be so great! :)

    ReplyDelete
    Replies
    1. Hi Sindy,

      Are you referring to the images in your blog posts? If yes, try this then. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .post img, table.tr-caption-container{
      padding: 0px !important;
      }
      .separator{
      margin-bottom: -8px !important;
      margin-top: -9px !important;
      }

      As for the gap between your header and page links, use this (additively):

      #content-wrapper{
      margin-top: -30px !important;
      }


      Cheers :)

      Delete
  85. Hey again,

    How do I remove the separator line and bar on my blog.
    http://seinfeldsitcom.blogspot.com .

    Thanks

    ReplyDelete
    Replies
    1. Hi there,

      Sorry for my late reply. Are you referring to the line below your header image?

      Cheers..

      Delete
  86. Yes the line below my header image and also the red bar below my text.

    ReplyDelete
  87. I am also trying to get rid of the divider line at the bottom of my blog as well. I tried getting rid of the bar and divider lines within the html but I could not get it to work. I also tried to edit the divider lines in blogger template customize but it seems like the blogger template customize section is still broken. When is blogger going to fix that anyway???

    ReplyDelete
    Replies
    1. No idea when they're planning to fix it. But here's the code anyway. Add it to your 'Add CSS' box:

      .tabs-inner .section:first-child, .columns-cell {
      border: 0px !important;
      }

      Always check if the code got saved by checking your 'Add CSS' box after restarting your browser. Try using IE10 if you can't get your code to save.

      Delete
  88. Hi,
    I've tried all the codes including the ones you have suggested to other readers. But I still have unwanted space between the dotted line and the second post title. My blog address is bakingyummiees.blogspot.in
    Pls help.
    Thanks,
    Deepti.

    ReplyDelete
    Replies
    1. Hi Deepti,

      Use this instead:

      .post-footer{
      height: auto !important;
      background: none !important;
      }
      .date-posts{
      border-bodttom: 1px solid black;
      padding-bottom: 60px !important;
      background: url("http://i1326.photobucket.com/albums/u654/Deeptis109/pagebreaker_zpsee317621.jpg") no-repeat bottom transparent;
      background-position: center bottom !important;
      }
      .post-outer{
      position: relative !important;
      margin-top: -10px !important;
      }

      Cheers.

      Delete
  89. I tried this...though it works, but the the third post title actually overlaps the No.of comments display at the end of second post. I have therefore not applied it yet.
    I had written a couple of your codes mentioned in this article already in the CSS yesterday. I thought of deleting them and rewriting the above code but here is the thing: Whenever, I login to my blogger the next day, I don't see any of the CSS codes that I had written the previous day, why is that?

    ReplyDelete
    Replies
    1. Hi Deepti,

      Sorry for the late reply. I could be an issue with your browser. Have you tried using a different browser? Also, instead of waiting for the next day, could you try closing your browser after saving a code, and re-open your browser to see if the code is still there?

      As for the gap, let me know when the previous code is up (and saved, and doesn't disappear), so that I can provide some follow up codes to fix the overlapping.

      Delete
  90. Thanks for your help. I have been using chrome. However, I am not able to see the the previous CSS code even in IE9. I can't get the
    previous code up since it's not visible and I donot know how I will solve this problem. But thanks for your help anyways.

    Deepti.

    ReplyDelete
  91. Hi,
    I got the code that I had applied earlier:
    .main-inner{
    padding-top: 5px !important;
    }
    .sidebar .widget{
    border-bottom: 0px !important;
    padding-bottom: 0px !important;
    }
    .separator{
    margin-bottom: -8px !important;
    margin-top: -9px !important;
    }
    I replaced it with the code that you had suggested in your previous reply but the third post title still overlaps the comment icon of the second post.

    Thanks,
    Deepti.

    ReplyDelete
    Replies
    1. Hi there,

      Sorry for the late reply. I've seen your blog, to look for this overlapping that you're referring to. But the comment icons aren't there anymore. If you can still see the overlapping, could you send me a screenshot of what you're seeing?

      Delete
  92. Hi,
    It's alright I sorted out the problem on the home page so it's fine. However, in the post pages there is still huge space before the post divider which I am not able to remove. Is there a way to remove that?

    Thanks,
    Deepti.

    ReplyDelete
    Replies
    1. Try this. Go to Dashboard - Template - Edit HTML - Find for </b:skin> - Paste the following directly below it:

      <b:if cond='data:blog.pageType == "item"'>
      <style>
      .post-footer{
      margin-top: -60px !important;
      }
      </style>
      </b:if>

      Cheers..

      Delete
  93. yay it worked. Thank you. One more question please (sorry I keep coming up with questions). I would like to copyright my blog, is it possible? If yes, how? I have tried looking for options over the net but have not found anything useful yet.

    Thanks,
    Deepti.

    ReplyDelete
    Replies
    1. Hi Deepti,

      Your blog is automatically protected under the Digital Millennium Copyright Act (DMCA) , granted that all the contents in your blog is your original work.

      Read more on Blogger's copyright policy here: http://support.google.com/blogger/bin/answer.py?hl=en&answer=157218&topic=12467&ctx=topic

      Delete
  94. Hello,

    Could you tell me how to move the Post Title closer to the actual post area? I don't want the title to be right on top of the post but right now there is just too much space between the two.

    Thanks for your help!

    ReplyDelete
    Replies
    1. Hi there,

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

      Delete

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