Here’s the second installment of the three-part series on how to add a horizontal navigation bar in Blogger — this time, using your own custom HTML and CSS. Using the techniques you learn here, you can create a navigation bar that suits your aesthetic. The screencast is best viewed in HD, full screen. :)
If you have any questions about the HTML or CSS that I use in this video, please watch the Web Basics videos — they’re a good place to start if you’re new to HTML and CSS.
Check out my blog demo here.
The markup I used for the Navigation Bar:
<a href=”">home</a> |
<a href=”">about</a> |
<a href=”">blogroll</a> |
<a href=”">shop</a> |
<a href=”">contact</a>
</div>
The CSS I wrote in the demo:
color: pink;
}
#my_navbar a{
color: #f47a88;
padding: 0 10px 0 10px;
font-family: Georgia;
font-size: 15px;
font-style: italic;
}
#my_navbar a:hover{
color: #c7bb31;
text-decoration: none;
}
{ 5 comments }
Desperate…Desperate for Part 3 :-) x
THANK YOU! This helped me so much. I had been going nuts because I couldn’t get my navbar to work in the pages widget (probably due to my 3rd party blog layout) and the font was stuck in white on white background no matter what I did.
This finally created something that worked for me and I was able to scratch the pages widget. Still can’t get the CSS to respond when I change the font, but this is such an improvement. Thank you.
this was so incredibly helpful! thank you! the only thing is that the css code doesn’t seem to be responding. i would love to know what i did wrong. thanks again!
Thanks for the tutorial. I love the look, but can’t get the css to work either.
Just wanted to thank you for all of your tutorials, tips and goodies! My friend and I have been wanting to start a blog for many months now and failed over and over because we were both getting frustrated with the templates. You made it possible for us to kick start our blogging addiction! It was easy, simple and fun! :)
We used your strawberry shortcake and gave it our own spin- hope you like it! :)