Stylish Blogger Navigation with Lower Section Widget

A three column footer widget is a common section on many commercial or nor commercial websites or blogs. This section keep readers attractive to many recipes on your blog near to its lower section. The other thing is that if you add a little navigation bar with lower section then it'd be an amazing thing exactly. It will keep reader always busy to read your quality tutorials again and again. This widget is an extracted widget from a particular site, i further customized it and gave a newer shape. You might see this lower+navigation widget set close to my lower section, so live demo is it actually. Just keep reading with Wild Blogger Tricks and get your job handled within a glimpse.

Prepare Your Template For This Widget

1. Go to Blogger and Log in with your account
2. Now go to template section and follow the  command
Edit HTML > Proceed > Expand Widget Template
3. Now Search for ]]></b:skin> and add the following code above it

/*------WBT Menubuttonpic-----*/
.menutoppic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG36SbC8tV4s2G8RMuFtTLI6BC46XE90T7UIzEjY2eltE_jki5s8chKe3R_ze4BLljErfJfIRDPqqOAhp9HZsU8oruP4idHYEeR4Ub8j50Ubx-9dxSXuvYc7TeAKIuKmSVOJU43cKnL9nD/s1600/nav_hover.gif) repeat-x ;width:100%;height:42px;margin:0 auto;padding:0}
.menusearch{width:300px;float:right;margin:0 auto;padding:0}
.menutop{width:980px;height:25px;margin:0 auto;padding:8px 14px}
.menutop ul{padding-left:0;color:#69d0ed;text-transform:none;list-style-type:none;font:bold 12px Arial,sans-serif;margin:0}
.menutop li{display:inline;margin:0}
.menutop li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyBUpi8bKsWbjJl_q3likz_S5f9qJjSfT8aIAseDXXWCIOxZ7ICSXUmZjGw0SDQh0ixTje4Q_-TbVzvz6irw2a1vEOlJhHSwHToWjUs8YGXPWWUKKj6NgB1s6NBrJ4dNXKHax1OLkegQFB/s1600/topbar-div.png) no-repeat center right;float:left;display:block;text-decoration:none;color:#69d0ed;line-height:2em;padding:0px 12px}
.menutop li a:visited{color:#69d0ed}
.menutop li a:hover{color:#fff;text-decoration:none}
/* -----   LOWER SECTION   ----- */
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
clear: both;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmPOU8MePOezL72JczGss1Ame6c4v85RGYjxHx37k6NkXuS_aNnM4rMp6cnADincNK3sE-DyeRtmXv7jUJpyXylrLEx6BiBTX_rx2Jfo0pJqhyvN_p539cRzCumdgmrsxrp3qpBDrMGrbl/s400/footer-bg.gif) repeat scroll left top transparent;
position:relative;
z-index:9999;
}
#lower-wrapper {
margin:auto;
padding: 10px 0px 20px 0px;
width: 960px;
}
#lowerbar-wrapper {
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
font-family:Arial, verdana;
font-size: 13px;
color: #ECECEC;
line-height: 22px;
line-height: 1.6em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
text-shadow:1px 1px 2px rgb(0,0,0);
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 15px 10px 15px;}
.lowerbar h2 {
margin: 10px 0 26px 0;
font: bold 15px georgia, verdana, arial;
text-transform: uppercase;
color:white;
border-bottom: 1px solid rgb(60, 60, 58);
padding-bottom: 6px;
text-shadow:1px 1px 2px rgb(0,0,0);
letter-spacing:1px;
}
.lowerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}
.lowerbar li {
margin: 0px 0px 2px 0px;
padding: 0px 0px 1px 0px;
}
.lowerbar li a:link, .lowerbar a:visited{
color: #888;
text-decoration: none;
}
.lowerbar li a:hover{
color: #CCC;
text-decoration: underline;
}

Second Step Behind to Complete this Task Successfully

1. Don't save your template yet
2. Now find out </body> this code
3. Add the following code after <!-- end outer-wrapper --> or before <div id='credits'>

<div class='menutoppic'>
<div class='menutop'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='Link-1'>About Us</a></li>
<li><a href='Link-2'>Sitemap</a></li>
<li><a href='Link-3' target='_blank'>Services</a></li>
<li><a href='Link-4'>Contact Us</a></li>
</ul>
<div class='menusearch'>

<div style='float:right;padding:1px 8px 0 0;'>
<form action='/search' method='get'>
<input name='sitesearch' style='display:none;' value='http://mas-template.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#282828;  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPyMcwuGCjSW86MJBEDsSPk806eN8nFIRlCc7oY_FkexVZK5UoRW_F2AZ3aEM8OFYvA38jG07ytPhZgrAzlz0hOh-8wbw5NKfOiIDd9qGxhd0xMZ3QTZVHVWyjGbs35Wc2hrpn9-g8VFUM/s1600/fieldsearch.gif) no-repeat;' type='text' value='Search Tricks...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgef3lAfx1qdZOyN15TV2xmwosPJd_vuZZ1376YNffrwkJmvuicehy3OcR6WWbM_xvbK4Pb61vE4GVr0vW8NHYZaB9q9NFufWsS-nsW3E5nAUg1WpNn5DhMlQ23a7AWp-HC_4Gjv10c2clQ/s1600/btn_search.gif' type='image' value='Search'/>
</form>
</div>
</div>
</div>
<div style='clear:both;'/>
</div>
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'/>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'/>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'/>
</div>
<div style='clear: both;'/>
</div> </div><!-- end lower-wrapper -->

Customization Guide of Navigation Bar

1.Change the following links with yellow marks and titles
2. Add <li><a href='#'>Title</a></li> this link for each time as more horizontal navigation bars and
the following links will help you to show dropdowns

<ul>
    <li><a href='#'>Sub link 1</a></li>
    <li><a href='#'>Sub link 2</a></li>
    <li><a href='#'>Sub link 3</a></li>
    <li><a href='#'>Sub link 4</a></li>
    <li><a href='#'>Sub link 5</a></li></ul>

Need Help?

Further need more help directly post your comment or contact us directly. Remember one thing your feedback is always appreciated to us. Thanks, happy blogging....