Modern Ribbon Style Navigation Bar For Blogger

This  is also another cool work by using Css3.Actually Its  easy  to create Ribbon navigation  bar  with  Using  Css3 Just look at the  code,  you  will  figure  out, How it work.I  added  demo  page  for  those  who want  to  check it  before  add to  your  blog. 

 Live Demo

1. Log in to blogger account and Click drop down. 

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

#navigation_container { margin: 0 auto; width: 900px; } #navigation2 li { list-style: none; display: block; float: left; margin: 1em 0.8em; } #navigation2 li a { text-shadow: 0 2px 1px rgba(0,0,0,0.5); display: block; text-decoration: none; color: #f0f0f0; font-size: 1.6em; margin: 0; line-height: 28px; } #navigation2 li.active a:hover, #navigation2 li a:hover { margin-top: 2px; } #navigation2 li.active { font-style: italic; } #navigation2 li.active a { } .rectangle { background: #e5592e; height: 62px; position: relative; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55); box-shadow: 0px 0px 4px rgba(0,0,0,0.55); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; z-index: 500; /* the stack order: foreground */ margin: 3em 0; } .l-triangle-top { border-color: #d9542b transparent transparent; border-style:solid; border-width:50px; height:0px; width:0px; position: relative; float: left; top: -5px; left: -50px; } .l-triangle-bottom { border-color: transparent transparent #d9542b; border-style:solid; border-width:50px; height:0px; width:0px; position: relative; float: left; top: -45px; left: -150px; } .r-triangle-top { border-color: #d9542b transparent transparent; border-style:solid; border-width:50px; height:0px; width:0px; position: relative; float: right; right: -45px; top: -107px; } .r-triangle-bottom { border-color: transparent transparent #d9542b; border-style:solid; border-width:50px; height:0px; width:0px; position: relative; float: right; top: -149px; right: -145px; }

7. Go to blogger and click Layout 

8. Click Add Gadget and select 'HTML/Javascript'

9. Paste below code.

<div id="navigation_container"> <!-- the left side of the fork effect --> <div class="l-triangle-top"> </div> <div class="l-triangle-bottom"> </div> <!-- the ribbon body --> <div class="rectangle"> <!-- the navigation links --> <ul id="navigation2"> <li><a href="#"> Home</a></li> <li><a href="#"> About</a></li> <li><a href="#"> Downloads</a></li> <li><a href="#"> Contact</a></li> <li><a href="http://www.digitalhubinc.com/"> Services</a></li> </ul> <!-- end the ribbon body --> </div> <!-- the right side of the fork effect --> <div class="r-triangle-top"> </div> <div class="r-triangle-bottom"> </div> <!-- end container --> </div>

Replace # with your links.

10. Now save your 'HTML/Javascript'.

End.