How to Add Modern Ribbon Style Navigation Bar For Blogger

1. Login to your blogger account , click drop down and then click on the Template button

AND

Step 4: Now Go to Template > Edit HTML (Before editing template It is always recommended that you Back it up first). Now search for the following code (Ctrl+F)

                                                                 ]]></b:skin>
                                           
                                                              CoPy ThIs CoDe                      
                                                       
                                 /* The CSS Code for the menu starts here supertrick4blog.blogspot.com */ #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; }

                                                        
                                                      Paste this code after ]]></b:skin> 


                                     Now Save Template. 

 

. Go to blogger and click Layout

. Click on Add Gadget and select 'HTML/Javascript widget

. 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://supertrick4blog.blogspot.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>