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.

  • This was super helpful, thanks!

  • Awesome. I'm glad 🙂

  • Great post! When I first started my blog I really got into the personalisation and editing of my theme too. I redesigned my theme again this year and am really happy with it! I really thought the blogger borders around photos looked a bit tacky, I much prefer the clean edges now too!

    Tasha // shiwashiful.

  • Thanks for all the tips! They'll definitely come in handy.

    xx Mimmi, Muted Mornings

  • This was so helpful! How do you find the perfect size for your photographs? I find that so hard!

    xx Babette

  • I'm not sure if I get what you mean, but I think I do. First I use a photo editing program (paint.net) to resize all my photos to 1500px X 1000px. If I crop a photo I always make sure it's the same ratio. Then when I post the picture on blogger I select x-large. Was that helpful?

  • It's really satisfying designing your template isn't it?! Especially when you finally get it to a point that you're really pleased with.

  • So helpful! I was wondering how to remove the border around pictures but didn't get around to investigate about it yet- thanks to you, I don't have to anymore! Works brilliantly! Thanks! 🙂

  • You have no idea how much this actually helped me! I made the changes you suggested plus it inspired me to keep going with other changes in order to make my blog something I loved even more! Thanks!

  • Awesome possum!

  • Fantastic! I'm really glad this has been useful to some people.

  • Thank you so much! Those image borders were driving me round the bend! x

    Books & Novelties

  • This post was so helpful! With little changes my blog looks so much better now!

  • Great post! I must say, every time I see that navbar still in place I cringe a little. I'm all about making my Blogger blog not look like…well a Blogger blog! A must for me is also lining up my photos with text and making sure everything in my sidebar is centered perfectly. You've done a great job on your template by the way! I love how clean and simple it is, but with a soft feminine touch…Brava! xx

  • I know exactly what you mean about making it not look like a blogger template. I like the way the text aligns on your blog. I want to change my alignment but I hate the thought that the new posts won't be the same as the old. Can't decide if I should go through all of them. Maybe there's an easier way.

  • Yes, thank you! You are a thing of beauty. But now I think I understand your Blogging Better with Flickr post about the margins. That is so annoying how it doesn't align.

  • Oh wait, I figured it out. I just added a right margin to the code you gave me and it works a treat.

  • SO annoying! The Blogger uploader is seriously the worst thing ever. They really need to sort out their priorities 😉

  • This is such a helpful post – I am constantly looking for ways to make my blog look more streamlined! I have a quick question though – How do you enlarge images on your Popular Posts section in the sidebar?


  • Oh gosh it's been a while since I've had to think about that. I think (but I'm not 100% sure) that this is the site that guided me through it. Then I tinkered with the CSS to make it look the way I wanted it. For example removing the border-radius elements will remove the curved edges.

  • Fantastic post! I'm not very good at HTML either (I usually just hire someone). I love how you actually went into detail as well and gave the codes.


  • This post is wonderful! Very helpful 🙂
    Thank you for sharing the codes as well!! <3
    Really helps amatuers like me who are still trying to learn the whole css and html thing.

    X, Carina
    Running White Horses

  • I don't know

  • Very useful article,this is the great lesson for the starter who manage the blog as looking fair.
    By this artical that i follow all the process now my blog is looking good.Thanks again.
    Now my site looks like that.

  • Melek Ali


  • Ojas Cafe

    asm Work frinds , Its Very helpfull