Hello! About me
Lifestyle DIY
Personal Recipes

25 August 2014

The big guide of blog design

As I was doing my Makeover Mondays series, I started to get asked quite a lot about blog design tips, so since I no longer have the time to design your blogs myself, I decided to make this super extensive post for those of you who want to give your blogs a brand new look.

I'm going to share with you some pretty basic (and hopefully useful) tips and some of my favorite resources and tutorials.

Tips


1. Google and pinterest are your best friends


If you see something on another blog that you love, you will most likely find a tutorial on how to do it on google. You can find almost anything here, including some pretty and free premade templates.

2. Make it easy to read


I'd like to say I put content before design, but the truth is I don't. It wouldn't be the first time I leave a blog just because the design annoys me, and trust me, you don't want that. So make your posts as easy to read as you possibly can. How?

  • White background
  • Dark font (maybe not pure black. But try to make it as close to it as you can)
  • Large text
  • Forget about hand-written fonts. No. Just.... no. As legible as you may think it is, it is not as easily read as the classics (Arial, Verdana, Helvetica...). It's ok to use it for headings and little details, but not for the whole post body.

3. Images


Make them as large as you can, and most important, make them all the same width. This makes a huge impact.

4. Say goodbye to blogger's navbar


What's the navbar? Does this sound familiar to you?


Well I'm going to tell you a little secret that some of you probably don't know... YOU CAN HIDE IT! Yes, really, for free. How? Easy as this!

In the navigation menu in the left, go to "Layout"

In the upper right corner you'll see "navbar".

And you can hide it there:

5. Change your favicon


What's a favicon?





Did you notice my blog has a custom icon instead of the boring blogger icon? Well it's so easy to change that and it makes a huge difference. How? Go to your layout (like we did before), and in the upper right corner, you'll find the favicon.






Then click on "Edit" and upload your own icon! You can actually find a lot of favicons in tumblr














6. Search widget


You don't want your visitors to leave because they can't find what they want, so make sure they do by adding the search widget. Make it as visible as you can by placing it as one of the first elements on your sidebar.


7. Keep your readers


I said you don't want them to leave because they can't find what they want, but the truth is you don't want them to leave... ever! Keep them longer on your blog by giving them some ideas on what to read next. 

How? Add a popular posts widget, and a related posts. Blogger does not offer the related posts widget, but you can find a way to add it here.

Resources


Fonts


If you're bored of the typical fonts and you want some new ones for your graphics, I recommend you download some from dafont.com 

If you want to install some on your blogger template, I recommend Google Webfonts. And google is a really nice guy, so he'll tell you how to install it.

Colors


Do you want a nice pastel pink but don't know what the code for it would be? Good news! I know who has the answer: colourlovers ! Not only can you search colors, but also palettes and patterns. Their patterns are not the best, but the color and palette search... I love it!

But... what if you find a color you love, but it's a bit too dark, or a bit too light? I'm going to tell you my secret... 0to255. It will give you the code for lighter and darker tones of that color. Hurray!

Tutorials


Did you like this post? Why don't we keep in touch?

Follow
Facebook Twitter E-mail Pinterest Google+ Image Map

44 comments:

  1. This is a really helpful post, I hope one day I'll have enough patience to go ahead and learn to do some things myself :b

    xoxo, Monica | Brunette In Black

    ReplyDelete
  2. Such a helpful post! Well done lovely :)
    Catherine | Counter Pretty

    ReplyDelete
  3. Love your tips! Just changed my favicons (only simple ones), and it makes a blog look so much more professional. Thanks x

    Victoria | VIXWILL

    ReplyDelete
    Replies
    1. It looks really good! I'm glad I could help! xx

      Delete
  4. This is a great post! But how do you edit your blog and make new posts without the navigation bar? I always start a new post from the navigation bar so if it's not there I wouldn't know what to do! And I missing something? How do you actually edit the blog and go to the blogger page?

    Every Day In Grace

    ReplyDelete
  5. This is soo cool of you!! I found this post to be so informative as if we're chatting over coffee in Belgium already!! I'm definitely saving this!!

    Thank you!!

    Jabi

    ReplyDelete
  6. What an amazing post! So useful for doing the little things to my blog that I didn't know I could. Thank you for sharing these tips

    Jennifer xx
    www.ginevrella.blogspot.co.uk

    ReplyDelete
  7. Wow, this was so helpful! Thanks!
    Hattie
    hattiehards.blogspot.co.uk

    ReplyDelete
  8. such a helpfull post! thank you so much for sharing!!!

    http://thegrisgirl.blogspot.com.es/

    ReplyDelete
  9. Aww thank you for sharing Belen!!! We all need helpful tips in the blogworld! <3

    Diana P. | Cups & Roses

    ReplyDelete
  10. I freaking love you for this post. I'm wanting to change my layout for the autumn months and this is going to help me millions.

    Hayley \\ allshewrotewas

    ReplyDelete
    Replies
    1. aww I freaking love you too. I'm so happy you liked it! xx

      Delete
  11. Thank you so much! This has helped a lot xx

    http://voguedreamland.blogspot.com

    ReplyDelete
  12. Great post hun! This actually encouraged me to change my post font colour from pure black to #444444 and it has made such a difference. :)

    xx

    ReplyDelete
    Replies
    1. woah! I can't believe it's you the one telling me this. I love your designs! I'm so happy you liked the post! xx

      Delete
  13. Thank you so much, this was very helpful :)

    http://sumptuouselixir.blogspot.co.uk

    ReplyDelete
  14. Thanks so much for sharing this! so helpful. x

    Kate Louise Blogs

    ReplyDelete
  15. This is so helpful, but I can't get the link for the article about how to add a read more widget to blogger to work. Could you try sending it to me again?

    ReplyDelete
  16. This was really helpful, thanks!

    ReplyDelete
  17. This was so helpful. I had been wondering how to remove the "Navbar" from my blog.
    Thanks!

    Style Storms

    ReplyDelete
  18. Great post full of little helpful bits. Thanks!

    ReplyDelete
  19. Definitely saving this for future reference! Off to remove my navbar now ;) I'm keeping my simple blogger layout for now, as I quite like it, but I would like to know how to make it myself, so every tip is helpful! ;) xx

    Gyudy’s Notes Of Beauty

    ReplyDelete
  20. this is awesome and your blog is so darn cute!!

    Arianne | http://ariannecruz07.blogspot.com

    ReplyDelete
  21. Your post has been featured in my August Favorite Blog Posts here
    August Favorite Blog Posts
    Lots of love ♥

    Roze @ Its Rozee

    ReplyDelete
  22. I love the templates you have made and these will come in handy when I want to make some changes to my blog so I don't end up making you do it for me haha x

    daisy-drops

    ReplyDelete
  23. Thank you soo much! This was soo useful and I went to change my favicon and navbar straight away haha! Thank you :D
    Sensitive Epidermis | Rainbow
    xxx

    ReplyDelete

I love reading your comments, so feel free to leave anything you want to say. They always make my days. I always try to reply to all of them so make sure you come back to read my answer.

Leave the link to your blogs so I can visit you back.

Ps. Make your links clickable by adding:
<a href="YOUR BLOG URL"> YOUR BLOG NAME </a>