12 Mar 2014

blog it // better design



lots of people ask me about designing their blogs and sadly I can't design everyone's blogs. I just don't have the time between juggling my normal blogging, school, sailing etc. As much as I would love to, it just isn't possible.
so I've put this post together (with a free template) to get you started in creating your own blog design with some tips and easy HTML codes for you to use.



Your blog //
Use a clean template like the simple template. Click here for a free simple clean template designed by me. You can add your design straight away.



Designing your header // 

- Sketch and plan out lots of ideas first

- think about it as your very own
- collect ideas, colors, fonts etc. into a secret or public pinterest board
- think about a color palette that will suit your entire blog

This is an important part of your blog as it is your first impression. Don't rush the design of it and make sure you are utterly and completely happy with your design. The rest of your design will come slowly from what you base your header on.

Upload your header to photobucket and add a image link in an HTML gadget on your blog

<a href="LINK TO YOUR BLOG"><img src="DIRECT IMAGE LINK">

add page links underneath or above with this code

<div align=center"><a href="PAGE LINK GOES HERE">TITLE GOES HERE<a/>

repeat this (^^) code as many times as you like

Tagline ideas // 
dates e.g. est. 2012
topic summary e.g. craft // photograph // inspire
a catchy tagline for your blog name e.g. "making life sweeter"

Sidebar //
- use your header as a base for your sidebar design
- add a 'hello and about me' paragraph. Here's an example

Hello! Welcome to (blog name) my name is (name) and I share (what your blog is about) I hope you stick around and read more about me <a href="ABOUT ME PAGE LINK"<here<a/> 

- add a follow me link (bloglovin or GFC)
- copyright notice

Copyright (symbol) (blog name) (start year - present year). Please do not use any of my ideas, design, images and posts without full written permission. Thank you 

so i hope this might get you started
if you have any specific questions, please leave them in the comments or email me
harri x


Follow

20 comments:

  1. Great post~ I like how you break it down in simple terms yet nothing's lost in the delivery.

    ReplyDelete
    Replies
    1. Glad it was easy to understand. the world of code is quite confusing xx

      Delete
  2. Fantastic help!! Thank you an über, über lot! Can't wait for break, so I can get started with these tips :)

    ReplyDelete
  3. So useful! Thank you so much!

    India, Striped French Bulldogs

    Xx

    ReplyDelete
  4. How do you use a custom font for your tabs, post titles and gadgets?

    ReplyDelete
    Replies
    1. stay tuned for a q + a post for questions
      xx

      Delete
  5. Harri- just wondering.... where do I paste this into? (the template)
    Thanks,
    Georgina x

    ReplyDelete
    Replies
    1. go into
      template > edit HTML and paste that code and remove old one
      xx

      Delete
  6. great advice! also, is the template the same one you use for your own blog?
    Lauren | OhHay Blogs!
    xxx

    ReplyDelete
    Replies
    1. yes it is. it has no lightbox borders, backgrounds or any of that ugly stuff that blogger uses xx

      Delete
  7. U have a very pretty blog!! I never really use codes only for the custom cursor :D

    Xx Barbora
    Abitconfusing.blogspot.com

    ReplyDelete
    Replies
    1. yes! i love your little cursors! xx

      Delete
  8. Hi Harri,
    I came arcoss your blog yesterday and I'm so in love with it already!
    I love that it is so clean and cute and you're such a lovely person!
    After I read through some of your post I was so inspired to do something so I cleaned up the whole house and now I'm ready to put some of your ideas in action :)

    And I'd love to make my own blog since I've got plenty of time after my last final exam this week. I already have some html knowledge but I never put any of my websites online. So I was wondering how I can use your template...

    Loads of love from Germany! xx

    ReplyDelete
    Replies
    1. Thank you so much xx
      I'm so glad that you were inspired. it makes my day to hear comments like this
      good luck for your exam and have fun decorating
      xx

      Delete
  9. "Could not load template preview: Error parsing XML, line 3508, column 9: The string "--" is not permitted within comments" why does that happened? do I need to backspace the "--"?

    ReplyDelete
    Replies
    1. OMG I don't know. um...try uploading the file instead of copy and pasting, it has worked for everyone else??? sorry i'm not any help

      Delete
  10. How do you display the links in one straight line? and also if I want to add a divider like || in between but don't want it to link like yours do how do I do it?

    ReplyDelete
  11. I haven't understood how to download the template! Can you help me?

    ReplyDelete

Thank you for taking the time to write a comment. I read everyone and try to reply as soon as possible so check back. Hope you enjoyed this post x Harri