Hoki Doki. My last rendition of “5 Quick Ways to Clean Up Your Blogger Template” went over way better than I anticipated. Surprisingly it was far and away my most liked post on Bloglovin'. Wouldn't have guessed that. At any rate, I'm extremely happy that some of you guys seemed to find it helpful and I figured why not squeeze every last drop of goodness out of this thang and go in for round two. Let's flog this (nearly) dead horse! So here come 5 more tips on how to clean up your blogger template. I hope these aren't too finicky for you guys.

CSS Adjustments: Letter Spacing And Text-transform Uppercase

When I first started designing my blog I remember thinking “there are no good fonts here.” Not until a few months ago did I have an epiphany and realize it wasn't about the fonts, it was about the letter spacing. Adjusting the space between letters can completely change the look of a font. Additionally, I remember looking for fonts that were exclusively uppercase. If only I had known back then what I know now. It's incredibly easy to transform text into uppercase.

So how's it done? Pretty simple. First you have to determine the CSS element name of what you want to change. If that seems confusing all it means is there's a specific name for any piece of your blog (whether it be the title of your post or the date of your post) and you have to figure out what it is before you can make adjustments. If you're ever not sure what it is I recommend googling it. Seriously, there's always an answer on Google. But for quick reference here are a few that might be helpful:

Title of your post: h3.post-title
Date of your post: h2.date-header
Your gadget titles: .sidebar h2
Your jump break (read more link) .jump-link a

To make your adjustments you want to go to your dashboard and click on the “template” tab. Click “customize” under the “Live on Blog” section. Then click “advanced” and then “add CSS.”

If I wanted to change the letter spacing and transform the text to uppercase for my gadget titles I would paste this code into the CSS box:

.sidebar h2 {
letter-spacing: 0.5em;
text-transform: uppercase;

Of course you can swap out that element name for any other one you want to change and also change the letter-spacing to whatever tickles your sister. 

Remove The “Showing Posts Labeled/Sorted Message”
One thing that can drive me crazy is you've set up your whole blog to be attractive and cohesive and then you type something into the search or click on a category and it comes up with with this big clunky message at the top of the page saying “showing posts with label...”. It throws everything off. Removing it is pretty simple, but it does involve tinkering with your HTML code. So before you do anything, first backup your template!

Now I could explain the whole process, or I could refer you to this site, which is what I used and it worked a treat.


Justify Your Post Text
This one is a personal taste thing, but when I wrote my last post on this subject matter one of the things that was mentioned in the comments (thank you Brittany) is that justifying your post text can help to streamline the look of your blog. I didn't want to have to go back in to each and every post and change the text alignment, so I made a little CSS adjustment and I think it made a world of difference. 

Now the problem I had next was that the photos were not aligning with the right margin of the post text, so I had to redefine the right margin of the post text too.

To make these changes. Go to your dashboard and click on the “template” tab. Click “customize” under the “Live on Blog” section. Then click “advanced” and then “add CSS.”

Paste this code into your CSS Box:

.post {
margin-right: 1.4em;

Note: you may find that you have to adjust the size of the “margin-right” from what I have here to align exactly with your photos.

Also note: if you've already centered your text or aligned it right, this code won't sit quite right with it (if at all). It works best if you're text is already aligned left.

Clean Up Your Post Footer

Here's a simple one that requires no fiddling with the code. Blogger tends to add a whole load of stuff to your post footer by default that you probably don't want. It just clutters up the page. To clean up the footer all you have to do is...

Go to your dashboard and select the “Layout” tab. There you will see your “Blog Post” gadget. Click “edit” on the gadget and a window will pop up. Under “Page Post Options” you have the ability to un-check (and remove) elements such as the author, the time posted and associated labels.

Beautify Your Search Bar

If you don't have a search bar I would really recommend getting one. I find myself getting frustrated when I can't find a search bar on a blog. There is a generic search gadget that you can add on blogger, but I think that sometimes it can look a bit awkward sitting in the middle of your carefully designed blog. When I wanted to change my search bar I had the most frustrating time trying to find a code for an attractive one. In the end I just used this code, removed the social networking portion from it and altered a few things. I'll show you the code I ended up with (barring a couple of styling elements) as I don't want anyone pulling their hair out trying to figure it out.

It's pretty simple to add this search bar. Go to your dashboard and select the “Layout” tab. Click “add a gadget” wherever you want to put it and add a “HTML/Java Script” gadget. Then all you have to do is paste in code below and save it. Voila, attractive search bar!


   #search {  
   border: 1px solid #ddd;  
   background: white url(http://1.bp.blogspot.com/-t-XnlJf5iIE/Tu_lRFYsvkI/AAAAAAAABqc/qtXhiIEeTpY/s1600/search.png) 98% 50% no-repeat;  
   text-align: left;  
   padding: 8px 24px 6px 6px;  
   width: 75%;  
   height: 18px; mouse:pointer:  
   #search #s {  
   background: none;  
   color: #cccccc;  
   font-family: verdana;  
   border: 0;  
   width: 100%;  
   padding: 0;  
   margin: 0;  
   outline: none;  
   <div id="search" title="Type and hit enter"> <form action="/search" id="searchform" method="get"> <input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search&quot;;}" onfocus="if (this.value == &quot;Search&quot;) {this.value = &quot;&quot;;}" type="text" value="Search" /> </form> </div>  


*Note: It's easy to adjust the width however you please and of course feel free to change the search icon to one that you prefer. 


  1. Love this, it was again so so helpful! At least I'll have some reference for the day I find the time to work on my layout more than some little adjustments here and there ;) xx

    Gyudy’s Notes Of Beauty

  2. This was so helpful! I've had my blog for about three months but found it doesn't look as 'professional' as others. I've saved this post for future reference - thanks!

  3. Thanks for some more great tips! Totally agree about justified text and photos lining up, it just makes the blog look so much better imo! I'll definitely have to do the remove the showing posts message, it is so clunky! I had such a hard time finding an attractive search bar too! I ended up settling for the one I have now, but I may have to change it to yours because I love its simplicity :)

    Tasha // shiwashiful.

  4. Thanks for such helpful information! This will really help me customize my blog to make it more streamlined. I justified my titles and it looks much better :) I would love to know how to customize the popular post widget too, as the default one is pretty boring. I hope to see more posts like this!


  5. Really great post! I'm still learning what's annoying/clunky to readers.


  6. These are really great advice. Thank you for sharing them, it's really helpful especially for a beginner like myself :)


  7. girl, these were SO helpful -- I just incorporated a few into my template. you rock my blogsocks for sharing these!

  8. Faaaabulous! I'm glad they worked out for you.

  9. Excellent. I think I left the answer to your popular posts widget question in one of the comments in the last "5 quick ways to clean up your blogger template." Hopefully that helps.

  10. Yes, text and photos lining up... it's the little things.

  11. It seems to take re-evaluation. There are always little details that suddenly look wrong to me on my blog.

  12. Great tips! So many times we see the same tips over and over again but these are really amazing/helpful. Thanks!


  13. Just used your code for search box and worked!! Thanks for sharing!!

  14. Okay, this blogger crush just turned into an obsession. You've saved my life! I've been looking for some of these tips for MONTHS now!! THANK YOUUUUUU! :)

  15. Thanks for all those tips!


  16. Hi! how do you clean up your post footer? I mean not the content but the style of it... to be more simple and beautifull than the one that blogger qives us by default...

    Thank you for all your tips they are really usefull!


  17. Thank you for this! Just added the search bar and it looks great :)

  18. Sorry I just saw this. If you want to clean up your footer I would just go to the Layout tab, then click "edit" on the Blog Posts section and just uncheck everything you don't need. Then if you want to add nice share buttons back in find a good widget. I believe "AddThis" is what a lot of people use. Hope that helps!

  19. Awesome tips! Used the search bar one straight away and loving it! Thank you so much :)