Sunday, 11 August 2013

How to make your own blog header with links

 
Blog design is so important; it's the first insite into your blogs personality. I'm always changing, creating and updating my design as you may have noticed. I'm forever searching for the perfect 'look' to help reach out to my readers and draw their attention. My boyfriend bless his heart has even tried to help me but as he doesn't understand our blogging world he just ends up creating very obscure designs which don't even fit with my theme. He admire him for trying and putting up with my moods, after hours of designing and still not getting the finished look I was hoping to achieve.
 

Above I have posted a few of my header designs which I have created using photoshop and picmonkey over the past year. My blog will always be Paint the uk Pink but I felt the name was to long for my header so I reduced it to Paint it Pink while keeping my link the same (too much hassle to change that). Tonight instead of joining in the Twitter chat I was designing the bottom photo which is now my new header (what do you think?) I tried to go more minamal as the pink background of the previous header detracked from my posts. I wanted to keep the image as I think my cats paw sneaking onto my palette is just adorable (that's right, it's not photoshoped in, that really is my cats paw).
 
I used mostly picmonkey to create the finished banner. Picmonkey is a free photo editing website with the exception of their royality package where you can pay to make the most of their website. Many people have asked me how I create the links within the banner so here's my few simple steps to achieving this -
 
1. Upload your finished banner/design to Photobucket or another image hosting site
 
2. Copy the direct link (URL)
 
3. Paste the URL to Image Maps in the bottom box  - click Start Mapping - Continue
 
4. Scroll down and uncheck the the 'Show text link' box (this stops text appearing below your image)
 
5. Choose the rectangle box and stretch to fit the image you want to link & type the full link and test.
 
6. Save and continue until all your links are created
 
7. Click 'Get Code' - then 'HTML CODE' (top left hand corner)
 
8. Copy and paste into a html widget on your blog and place the widget where you want the image to appear.
 
 
If you have problems with my directions let me know and I'll edit the instructions. I hope this helps a few of you. I create all my own designs on my blog and love helping others create theirs.







Follow my blog with Bloglovin   Twitter  Facebook  SheSaidBeauty  Instagram 
 

4 comments:

  1. love your designs, I'm constantly messing around with how my blog looks too and it can be so frustrating. One piece of coding wrong and it messes up the whole thing, I've felt like chucking the laptop out the window so many time in anger haha x

    ReplyDelete
    Replies
    1. HTML is hard to get to grips with. Anyone who ever used Myspace might have a basic understanding of the codes. I often want to just give up but then I get lovely comments like yours and I keep going ^-^ Xo

      Delete
  2. I can't wait to give this a go later - thank you so much for taking the time out to explain how to do it for a complete novice like me! I am trying to get the twitter, pinterest etc buttons sorted with little effect but I won't be beaten!

    Fi xoxox

    http://dandffeatures.blogspot.co.uk/

    ReplyDelete
    Replies
    1. You're welcome Fi :) Plz come back and let me know how you got on Xoxo

      Delete