In this tutorial I will show you how to add images next to your blogs navigation links as pictured below:
Login to Your Blogger Dashboard
Click Design
Then click Add A Gadget, (preferably you should put this within your Header widgets)
Now click HTML/Javascript and copy the following code and paste it within the HTML/Javascript box:
<div id="nav-images">
<ul>
<li><span class="home"><a href="Your Blog Url Here">HOME</a></span></li>
<li><span class="about"><a href="Your Blog Url Here">ABOUT</a></span></li>
<li><span class="advertise"><a href="Your Blog Url Here">ADVERTISE</a></span></li>
<li><span class="contact"><a href="Your Blog Url Here">CONTACT</a></span></li>
<li><span class="links"><a href="Your Blog Url Here">LINKS</a></span></li>
</ul>
</div>
then Click Save
Next click Edit HTML
Now search for this code:
/b:skin
Now copy the following code:
#nav-images ul li { display inline; font-weight bold; list-style-type none; padding 5px; margin 0px; }
#nav-images li span.home { background url('Image Url Here') no-repeat; padding 0 0 0 10px; }
#nav-images li span.about { background url('Image Url Here') no-repeat; padding 0 0 0 10px; }
#nav-images li span.advertise { background url('Image Url Here') no-repeat; padding 0 0 0 10px; }
#nav-images li span.contact { background url('Image Url Here') no-repeat; padding 0 0 0 10px; }
#nav-images li span.links { background url('Image Url Here') no-repeat; padding 0 0 0 10px; }
and paste it directly above the /b:skin coding.
Next you will need to add in your own images.
First I recommend creating 20px by 20px PNG images at 72 dpi.
Second, host your images.
Third, copy the images direct link and paste in place of Image Url Here.
Once you've linked all your images, hit preview and make sure everything looks ok, if it does click Save.
Finally, you'll need to make sure your links, link to the correct pages.
Open the HTML/Javascript box you created earlier and find where it says Your Blog Url Here and replace it with the proper link on your site.
You may also choose to completely rename any link, by replacing any of the Capitalized words with that of your choosing.
Once everything's complete, hit Save and enjoy :)