Monday, October 11, 2010

DIY: Image Menu Under Header.

I have never done a post like this so PLEASE let me know if it doesn't work for you!
Let me know if it does work so I can check it out on your blog! 
Feel free to ask questions!

If there is another word for the "image menu under the header" I am unaware of it. I am not that gifted when it comes to html codes. My uncle helped me figure out how to put the image links at the top of my blog and I realized that it really is not that difficult, so I thought I would show you all how to do it!

1. Go to your dashboard and click design.
2. Under your header there is a place to put a gadget.
3. Open a html gadget.

4. Copy this link:

<a href="http://ldcdesigns.blogspot.com/"><img hspace="22px" border="0" src="http://Image Location Goes Here" />

5. Add the link to the page you like [ex. home, about me, twitter etc]

6. Make sure you have the image you want to use uploaded somewhere online. Copy the image location and then paste it into the code.
[I have an un-published page on my blog that I use to upload images onto. I find this more convenient than using something like flickr]

7.Where it says: hspace="22px" That is the horizontal space between each image. You can change that number to line it up the way you like. [vspace="22pt" is for vertical space. If you need a vertical space, I didn't]

8. Do this for every link. I have 6 links at the top so I had to do it six times.

Email Button: If you want to make one an email button then instead of adding a link add mailto: YOUR EMAIL [no spaces] ex.mailto:098585c@acadiau.ca

For other HTML help visit: http://www.w3schools.com/  and  http://www.echoecho.com/htmlforms14.htm

xo ldc


  1. Yay! I've had this on my to-do list for forever and now that you've done it I'll move it higher up in priority :) Your buttons look great, btw.

  2. Great tutorial and great idea! Thank you for the info!

  3. WOW this is awesome! I'm going to have to try this tonight! Im SO excited now!!!!!!!!
    yeay for Lindsay

  4. Its not working for me:(
    I might just lack the smarts for this.

    but thanks for the tutorial!


  5. Nevermind! I finally figured it out! Stupid flickr! I used your idea and made a page for my buttons! Thank you so much for the html help! You are such a sweetheart!

    Have a wonderful day!



  6. Thank you! I found your blog through a Freckled Nest...cute dogs! Anyway, I'd been wanting to customize a navigation bar but had no idea how. This worked great!

  7. great tutorial! now, how do you make the buttons that people can grab and link back to your site? i can't figure it out! :[

  8. Thank you very, very much for this tutorial! :-)

    I tried it a few minutes ago on my testblog (because I'm such a scaredy cat... hihi... )and it works!
    Tomorrow I will install it on my real blog.

    Have a nice evening and many greetings,


  9. I've saved the info and will try it out later. Thanks. Yours looks GREAT!

  10. Somehow it is not working..the link works but the image is not visible ..I dont what I am doing wrong..but anyway great tutorial thanks...

  11. Thanks a lot for this tutorial, I am going to try it this weekend...Hope you are enjoying your Thanksgiving day

  12. Perfect! Just what I've been wanting to do for a long time now. Have bookmarked this and will let you know if I encounter any issues. Thanks so much for sharing!

  13. hey gal!! Thank you so much for this tutorial! Worked like a charm and now my blog looks much nicer! Thank you :)


Total Pageviews