Stylish Blogger Horizontal Navigation Bar With Thumbnail Option. ~ All Tricks And Tips

Top menu is one of the most common sections at any website of blogsite on the web. I just have come across another stylish top menu widget of blogger but today I'd show you all how to configure another best stylish horizontal navigation bar workable with blogger as well as any type of HTML template. This template has some special features for example to show the most important keywords based tutorials of your site it's enough to show as faster as possible. It exhibits at the same time important links with targeted image. I found this widget on the web and further shortened the script to make your better understanding. Live demo is available on the post as well. Just read through WBT and get your task handled within moments.

Live Demo

Configure Your HTML Template

1. First of all go to Blogger and log in with your account

2. Now go to template section and download one of copy [Back Up Your Template]
& follow the commands

Edit HTML > Proceed > Expand Widget Template

3. Now seek for ]]></b:skin> and paste the following code above it

div.mashmenu {
 /* colors */
 background: none  repeat-x scroll top #F3F6F9; 
/* color of the nav */ 
border-bottom: 1px solid #DCE5EE; 
/* border bottom :  no hover color */ 
border-top: 2px solid #CF4125; 
color:black; 
z-index:9990;
margin-top:0px; } 
div.mashmenu div.fnav {
 /* colors */
border:2px solid #F3F6F9;
/* border top,left,right :  no hover color */
border-bottom:none;
}
div.mashmenu div.fnav:hover{
/* colors */
border:2px solid #0054a2;
/* border top,left,right : hover color */
border-bottom:none;
background:white;
}
div.mashmenu div.fnav a.flink {
/* colors */
color:#0054a2;
}
div.mashmenu div.fnav div.allContent {
/* colors */
background: none repeat scroll 0 0 #F3F6F9;
 /* color of the nav */
border:2px solid #0054a2;
/* border bottom,left,right : hover color  */
border-top:none;
color:black;
}
div.mashmenu div.fnav div.allContent a.slink {
/* colors */
color:#0054a2;
}
div.mashmenu div.fnav div.allContent a.slink:hover {
/* colors */
background-color: #5E88B4;
color:white;
}
div.mashmenu div.fnav div.snav:hover div.insideContent{
/* colors */
background: white;
border-left:1px solid white;
}
div.mashmenu div.fnav div.insideContent a {
/* colors */
color:#0054a2;
border-bottom:1px solid #5E88B4;
/* border bottom : hover color  */
}
div.mashmenu div.fnav div.insideContent a span:hover{
/* colors */
background-color: #5E88B4;
color:white;
}
div.mashmenu div.feat a.flink { /* colors */
color:#0054a2;
}
div.mashmenu div.feat a.flink:hover{
/* colors */
background-color: #5E88B4;
color:white;
border:none;
}
div.mashmenu a {
text-decoration:none; }
div.mashmenu img {
border:2px solid white; }
div.mashmenu div.fnav div.allContent{
display:none; }
div.mashmenu div.fnav div.allContent
div.insideContent{
display:none; }
div.mashmenu {
font-family: &amp;quot;Arial&amp;quot;, &amp;quot;Verdana&amp;quot;, sans-serif;
font-size:13px;
width: 1064px;
position: fixed;
padding: 3px 0 0;
margin-bottom:14px;
}
div.mashmenu div.fnav {
margin:0px 0px 0px 3px;
display:inline-block;
position:relative;
/* css3 */
-moz-border-radius:4px 4px 0px 0px;
-webkit-border-radius:4px 4px 0px 0px;
border-radius:4px 4px 0px 0px;
}
div.mashmenu div.fnav a.flink {
padding:8px;
display:block;
}
div.mashmenu div.fnav div.allContent {
position:absolute;
top:33px;
left:-2px;
max-width:550px;
max-height:250px;
overflow:hidden;
/* css3 */
-moz-border-radius:0px 0px 4px 4px;
-webkit-border-radius:0px 0px 4px 4px;
border-radius:0px 0px 4px 4px;
}
div.mashmenu div.fnav div.allContent:hover{
width:550px;
height:246px;
}
div.mashmenu div.fnav:hover div.allContent {
display:block;
}
div.mashmenu div.fnav div.allContent a.slink
{ margin:1px 0px 1px 1px;
padding:10px;
display:block;
width:140px
}
div.mashmenu div.fnav div.snav:hover div.insideContent{
display:block;
position:absolute;
top:0px;
left:165px;
width:410px;
height:100%;
padding-left:10px;
}
div.mashmenu div.fnav div.insideContent span.featured ,
div.mashmenu div.fnav div.insideContent a {
width:365px;
float:left;
overflow:hidden;
padding:5px 0px;
position:relative;
}
div.mashmenu div.fnav div.insideContent a img {
float:left;
width:100px;
height:60px;
padding-right:10px;
}
div.mashmenu div.fnav div.insideContent a span {
position:absolute;
top:20px;
left:120px;
padding:3px 3px ;
}
div.mashmenu div.feat {
float:right;
border:none;
margin-right:10px;
margin-top:5px;
}
div.mashmenu div.feat:hover{
border:none;
}
div.mashmenu div.feat a{
float:left;
font-size:12px;
border:none;
padding:5px 5px;
}
div.mashmenu div.feat a:hover{
/* css3 */
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;

4. Now save your template and go back to the Layout section
5. Pick up a new HTML/JavaScript and paste the following code below of Header section shown below

<div class="mashmenu">
    <div class="fnav">
    <ahref="#" class="flink" >TopLink?</a>
    <div class="allContent">
    <div class="snav" >
    <a href="#" class="slink" >Sub link?</a>
    <div class="insideContent">
    <a href="#" >
    <img src="ImageUrl" alt="Targeted Script" />
    <span>Targeted Script</span>
    </a>
    <a href="#" >
    <img src="ImageUrl" alt="Targeted Script" />
    <span>Targeted Script</span>
    </a>
    <a href="#" >
    <img src="ImageUrl" alt="Targeted Script" />
    <span>Targeted Script</span>
    </a>
    </div><!-- end insideContent-->
    </div><!-- end snav -->
    </div><!-- end allContent -->
    </div><!-- end fnav1 -->

    <div class="fnav">
    <ahref="#" class="flink" >TopLink?</a>
    <div class="allContent">
    <div class="snav" >
    <a href="#" class="slink" >Sub link?</a>
    <div class="insideContent">
    <a href="#" >
    <img src="ImageUrl" alt="Targeted Script" />
    <span>Targeted Script</span>
    </a>
    <a href="#" >
    <img src="ImageUrl" alt="Targeted Script" />
    <span>Targeted Script</span>
    </a>
    <a href="#" >
    <img src="ImageUrl" alt="Targeted Script" />
    <span>Targeted Script</span>
    </a>
    </div><!-- end insideContent -->
    </div><!-- end snav -->
    </div><!-- end allContent -->
    </div><!-- end fnav2 -->

    <div class="fnav">
    <ahref="#" class="flink" >TopLink?</a>
    <div class="allContent">
    <div class="snav" >
    <a href="#" class="slink" >Sub link?</a>
    <div class="insideContent">
    <a href="#" >
    <img src="ImageUrl" alt="Targeted Script" />
    <span>Targeted Script</span>
    </a>
    <a href="#" >
    <img src="ImageUrl" alt="Targeted Script" />
    <span>Targeted Script</span>
    </a>
    <a href="#" >
    <img src="ImageUrl" alt="Targeted Script" />
    <span>Targeted Script</span>
    </a></div>
<!-- end insideContent-->
    </div><!-- end snav -->
    </div><!-- end allContent -->
    </div><!-- end fnav3 -->

    <div class="fnav">
    <ahref="#" class="flink" >TopLink? </a>
    <div class="allContent">
    <div class="snav" >
    <a href="#" class="slink" >Sub link?</a>
    <div class="insideContent">
    <a href="#" >
    <img src="ImageUrl" alt="Targeted Script" />
    <span>Targeted Script</span>
    </a>
    <a href="#" >
    <img src="ImageUrl" alt="Targeted Script" />
    <span>Targeted Script</span>
    </a>
    <a href="#" >
    <img src="ImageUrl" alt="Targeted Script" />
    <span>Targeted Script</span>
    </a>
    </div><!-- end insideContent-->
    </div><!-- end snav -->
    </div><!-- end allContent -->
    </div><!-- end fnav4 -->

    <div class="fnav">
   <ahref="#" class="flink" >TopLink?</a>
    <div class="allContent">
    <div class="snav" >
    <a href="#" class="slink" >Sub link?</a>
    <div class="insideContent">
    <a href="#" >
    <img src="ImageUrl" alt="Targeted Script" />
    <span>Targeted Script</span>
    </a>
    <a href="#" >
    <img src="ImageUrl" alt="Targeted Script" />
    <span>Targeted Script</span>
    </a>
    <a href="#" >
    <img src="ImageUrl" alt="Targeted Script" />
    <span>Targeted Script</span>
    </a>
    </div><!-- end insideContent-->
    </div><!-- end snav -->
    </div><!-- end allContent -->
    </div><!-- end fnav5 -->

    <divclass="fnav">
    <ahref="#" class="flink" >TopLink?</a>
    <div class="allContent">
    <div class="snav" >
    <a href="#" class="slink" >Sub link?</a>
    <div class="insideContent">
    <a href="#" >
    <img src="ImageUrl" alt="Targeted Script" />
    <span>Targeted Script</span>
    </a>
    <a href="#" >
    <img src="ImageUrl" alt="Targeted Script" />
    <span>Targeted Script</span>
    </a>
    <a href="#" >
    <img src="ImageUrl" alt="Targeted Script" />
    <span>Targeted Script</span>
    </a>
    </div><!-- end insideContent-->
    </div><!-- end snav -->
    </div><!-- end allContent -->
    </div><!-- end fnav6 -->

6. Now save it and all you're done

Customization Guidance

1. Simply change Top Link as of your top link
2. Change Sub link as of your sublink
3. To change your targeted script simply change Targeted Script
4. Change your targeted Image Url by changing Image Url
5. Change mash menu width by changing width: 1064px;

Note: There are lots of customizations are remaining in this widget those are not possible to expos elaborately to you all by this, if you know HTML editing then i think you could easily find those changes and modify accordingly

Need Help?

I think that this tutorial will help you a lot behind better understanding. After that if you feel any problem simply leave out your comment directly or contact us here. Your feedback is always appreciated

Wednesday, 15 May 2013