How to Create a Simple Customised Blog Design (Part 3, Finishing Touches)

Thursday, November 21, 2013

This is the final instalment in a three part guide on how to create your own simple, customised blog design (here are parts one and two). If you've followed the instructions up until this point, you'll have a clean looking blog layout that's customised in colours and fonts of your choice- but it's not quite finished yet. In this post I'll show you how to make final adjustments that will refine your blog and make it look that bit tidier. 

Step One: Centre Sidebar Titles
In the last guide I showed you how to create sidebar title images that match your header using Picmonkey.com. You'll notice that when you upload these, they don't sit central in your sidebar and instead veer off to the left. You can fix this by copying the piece of coding from THIS page. Go to Blogger's template designer and under 'advanced' scroll down to 'add CSS.' Underneath where you pasted the code to remove image borders, paste the piece of code and press return. Your titles will now be central. If they still look slightly mis-matched, you might need to adjust the size and positioning of the font in Paint, just make sure the width of the overall document is the same width as your blog sidebar (you can check this by going to template designer, 'adjust widths' and check how many pixels wide your sidebar is. Then use Picmonkey's 'resize' option). If you have stuck with Blogger's standard gadget text as titles rather than use images, you can centre these titles by following this tutorial.

Step Two: Centre Your Tabs/ Pages Links
These are the links that appear under your header (About Me, Contact etc) at the moment they'll be sitting to the left of your header. You need to copy the code from THIS page (including the full stops at the beginning) and as with step one, paste it into the 'add CSS' section of Blogger template designer underneath the previous pieces of code. Once you've pasted it, press return and your page tabs will now sit central.

Step Three: Remove Blogger Navbar
The navbar is the strip right along the top of your blog, it's unnecessary and can detract from your blog design. You can turn this off by going to 'layout' from the drop down bar of your Blogger dashboard, and at the top click on the 'navbar' widget. When the box pops up switch this to off, you'll now notice though that there's a space above your blog's header. To remove this copy the piece of coding from THIS page, go to Blogger template designer and paste into the 'add CSS' box under the other pieces of coding you've added. Press return and the space above the header will disappear.

Optional: Choose a Background Image
If you'd rather have a patterned background on your blog, you'll need to use a 'seamless image'. A seamless image is an image that can be repeated without showing boundary lines- think of it a bit like a pattern on regular wallpaper that you'd hang on your wall. If you use an image that isn't seamless, it will display on your background as big blocky squares. A lot of the seamless images you'll probably find online will be watermarked, but there are free ones out there too if you look hard enough. I've put together an album of seamless images to get you started (you can find it HERE), I've adjusted the colours and sizes of the prints on Photoshop to give you the biggest range of options. Feel free to download and use any of them from the album, or search for your own. If you're using a patterned background it's always best to uncheck the 'scroll with background' box. This is because it can be distracting when readers are scrolling through your blog.

Your Simple, Customised Blog Design
If you've followed all of the steps from the three guides in this series, you'll have something that looks like my example above (but customised to your own tastes). Everything should look clean and tidy, all of your fonts, colours and titles will match and everything will sit central. Best of all it didn't cost you a penny, every programme used was free and you didn't need to pay a blog designer. In the future I'll be writing a beginners guide to image mapping, which will show you how to get clickable social media buttons and headers.

I hope you've found these tutorials useful and easy to follow, if you have any questions at all leave them below
Follow on Bloglovin

You Might Also Like

25 comments

  1. this is so helpful! thank you!

    http://woodwinked64.blogspot.co.uk/

    ReplyDelete
  2. AMAZING! I couldn't figure out the top links for the life of me. Thank you for this post :) x

    Laura x
    http://pale-girl-reviews.blogspot.com

    ReplyDelete
  3. I've been following all your posts closely and I'm really thankful to you for sharing the tips on blog design :) My blog looks so gloomy and untidy, and I dont really have the money to pay a blog designer at the moment. I'll find time to refurbish my blog soon by following your guides ^_^

    ReplyDelete
  4. I've found these blog design tutorials so so helpful, Thanks!
    x

    Cameron Childs: cosmetics - hair - beauty

    ReplyDelete
  5. Hello. I added you to my google+ today. I feel that I can learn a lot from your blog. Just this post was so helpful to me and I will come back and look around to see what else I will learn. Have a great day.

    ReplyDelete
  6. thank you this is so helpful but how do you get your title central?xx

    ReplyDelete
    Replies
    1. I got my title central by going to 'adjust widths' in Blogger template designer and moving them around until the header was in the middle, but you need to make sure that your header image is wide enough in the first place for this to work. If you go back to the second part of the guide where I was making the header I explain it in detail there. Alternatively you can add a piece of coding to the 'add css' section of template designer- google 'center blog header' the first page that comes up will tell you the code to add x

      Delete
  7. Great tips, and super cute blog! Following now. Glad I stumbled upon you, looking around now :)

    Have a great weekend ❥

    Ashton Belle from:
    http://lovelifeandtruthtells.blogspot.com/

    ReplyDelete
  8. great tutorial, love your blog design.

    http://diaryofatrendaholic.blogspot.ca/

    ReplyDelete
  9. All is well but id love a pink lace backround like yours, is there any photo you used to get it?

    ReplyDelete
  10. Have loved these posts and have put them to good use on my blog that I have recently started. Thank you soo much :)

    J x

    http://justjohanna717.blogspot.co.uk/

    ReplyDelete
  11. Thank you so very much. Your tips and tricks are priceless.

    Barbara @ www.allmylivesnow.com

    ReplyDelete
  12. I've just followed all of this and am SO PLEASED with how my blog looks now!! Thank you for this and for making it easy to follow :) xx

    ReplyDelete
  13. Thank you so much for all your tips, its helping me so much with starting my own blog. I was wondering if you could help me with the tabs along the top, as i would like mine to be customized to match my blog but cant find a way around it.

    =) xx

    ReplyDelete
  14. Thank you so very much for the tutorial! I am running into a problem, I can not get rid of the shadow box around my "tabs/page links" I've found numerous codes to put into CSS, I've changed all the custom settings, but it will not leave! Is there a quick fix for this? Thank you so much!

    http://onelaststitch.blogspot.com/

    ReplyDelete
    Replies
    1. I'm glad you found it helpful! :) To get rid of the boxes around tabs you don't need to add any CSS, depending on what template you're using you just need to go into template--> advanced--> accents then change the bevel colour to white or transparent. If you have a look at the earlier tutorials to this I explain it with diagrams :) Hope that helps! x

      Delete
    2. Thank you for the quick reply, I followed the diagrams, everything in my settings is set to white/transparent (I've tried both options) and it's still boxy.

      Delete
    3. are you using the 'Simple' template? As the accents and things are different depending on the template you use. Under the simple template it should definitely remove the tabs lines in the accents option. If you're still having trouble email me at beautiful-solutions@outlook.com with your blog link and I'll have a look for you x

      Delete
    4. I guess my layout wasn't the 'simple' template (as I previously thought). I changed it and everything worked perfectly! Thank you, thank you! Everything you write is easy to follow and very helpful. Thank you so much for responding quickly too!

      Cheers!

      Delete
  15. wow this post was so helpful! I have attempted to start a blog so many times however have been put off due to how it looks, now it looks amazing and i owe it to all your helpful, informative posts!

    perksofbeingcurly.blogspot.com

    ReplyDelete
  16. Your tips are amazingly helpful! I basically build my entire blog with your steps haha.

    ReplyDelete
  17. Your tips have been so helpful as I'm starting off a new blog, the only thing I can't workout out is how you got your bloglovin' followers box central? Thanks xx

    ReplyDelete

Subscribe