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