5 MORE WAYS TO CLEAN UP YOUR BLOGGER TEMPLATE

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 {
text-align:justify;
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!

Code:

   <center>
   <style>   
   
   #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;  
   }  
   
   </style>  
   
   <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>  
   <br/><br/>

   </center>  
   

*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.