5 QUICK WAYS TO CLEAN UP YOUR BLOGGER TEMPLATE

Why hello everyone. I’m a bit hesitant in writing this post today. I’m not sure how much interest it will generate, but I thought on the off chance that it would be helpful to anyone (especially for those of you starting out in designing your blog) I'd write it anyway. Building my blog template has been one of the most exciting parts of the whole blogging experience for me so far. I spent a few months putting my template together before I initially launched my blog. Then a few months after launching I began thinking it looked too childish and I did a big redesign. When I first sat down to design my blog I hadn’t a clue how to even begin to customize the code. Fortunately, I have an amazing techie friend who taught me a lot. I’m now at the point where I feel fairly confident in tinkering around. So I thought I’d share a few quick and easy tips that helped to clean up the appearance of my template.

Remove The Blogger Navbar:
The Blogger Navbar sits at the very top of your blog and is a default component of Blogger templates. There’s certainly nothing wrong with it, but it can distract from the look of your blog if you’re aiming for a sleek and clean appearance. Luckily, Blogger provides a quick fix to remove it.

Login to blogger account, select your blog and then select the “Layout” tab. In the top right of the layout you will see your “Navbar” with an option to “edit.” Click “edit” and a window will pop up with the option to alter the colour scheme or turn off the Navbar altogether.

Change Your Favicon:
The favicon is the icon associated with your site. I.e. the image you see on a tab. Blogger uses their favicon by default, but I think it looks a lot more professional to use your own customized favicon. It’s an easy thing to change too.

First thing you will have to do is create your own favicon. I recommend using paint.net to do this. It’s user friendly and extremely handy to have in general in terms of editing software. It is, of course, completely up to you how you want you favicon to look, but the only advice I would give is to consider keeping it simple. It can be hard to make out fine details given the size. Oh, and also save it as a PNG because blogger overlays a gray tinge on JPEG files.

Once you’ve got your image ready, all you have do is once again login to blogger account, select your blog and then select the “Layout” tab. In the top left of your layout you will see the “Favicon” gadget. Click “edit” on the gadget, then a window will pop up with the option to browse your computer for your custom made image.

*Note: if you’re not seeing your favicon change right away try refreshing the page and deleting your cache (press “ctrl” + “F5”). If you’re still not seeing it change you may have to give it time. I've experienced a delay when changing mine.

Customize Your Jump Link:
Your Jump Link refers the “read more” link that takes you to the full post. Not everyone uses jump links, but for those of you who do it can be nice to change the appearance.

The first thing you can do is to actually change what the link says. For example I changed mine from “read more»” to “ – CONTINUE READING – ”. To do that, select the “Layout” tab. There you will see your “Blog Post” gadget. Click “edit” on the gadget and a window will pop up. Under the “post page link text” section you will be given an option to change the “read more” text.

If you want to change the alignment of the page break things get only slightly more complicated. Instead of going to the layout tab, click on the template tab. Click “customize” under the “Live on Blog” section. Then click “advanced” and then “add CSS.”

Paste this code into the “add CSS” box:
.jump-link {text-align: center;}

*Note: if you want to align your page break right, simply change “text-align: center” to “text-align: right”.

There are of course, loads of other ways to edit the jump break, including changing the margins around it, changing the colour of the text, adding an image behind it, etc. I found this site to be helpful in walking me through the alternations.

Remove The Border From Your Images:
This step really depends on your personal preference and the overall look of your blog. Some people may like the border around their images, but personally I thought it helped clean up the look of my template to remove it.

If you do want to remove it just follow these steps: click on the “template” tab. Click “customize” under the “Live on Blog” section. Then click “advanced” and then “add CSS.”

Paste this code into the add CSS box:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
 padding: 0 !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;
}

Change Your Post And Sidebar Margins:
One of the things I noticed when designing my blog is that things were started to look a little cramped, so I decided to increase the margins between my posts and by sidebar gadgets.

For either alteration you’re first going click on the “template” tab. Click “customize” under the “Live on Blog” section. Then click “advanced” and then “add CSS.”

Once you’re at you “add CSS” box you’ve got two options...

To add space between your sidebar gadgets paste in this code:
.widget {margin: 50px 0 0 0;}

*Note: change the 50px to whatever size you want. That’s just what worked for me.

To add space between your posts paste in this code:
.date-header {margin: 100px 0 0 0;}

*Note: once again change the 100px to whatever you want. Additionally, this won’t work if you’ve altered your code to list the Post Title before the Post Date.