MBT Style Bottom Menu With Awesome Hover Effects!

MBT Bottom Menu Is The Most Wanted Widget By Blogger's Due To It's Awesome Look And Effects. Therefore I Am Sharing You This Widget With New Effects. Firstly This Widget Was Made By Most Popular Blog MyBloggerTricks Which Is Now Customized With New Hover Effects Only Provided By Ngtechzone (Where You Are).So Let's Discuss About This Widget And It's Features-

Features Of MBT Bottom Menu-

1. Awesome Background Image With Shadow!
2. Stylish Back To Top Button!
3. Can Be Used For Other Important Links Like Contact, Advertise Etc.
4. No Jquery Used!
5. Very Light!
6. Awesome Hover Effects!
7. Text-Shadow Effects!
8. Integrated Font Awesome Icons!
9. Responsive!
10. New Styled With Media Queries!
11. Can Be Used On Any Background Color!
12.  Can Be Used In Both Blog As Well As In Static Page!
13. Updates Ready! ( Come Again To Check For Updates)
14. And More..
15. All This For Free!

                                      LIVE DEMO

After Reading All Of These Features You Must Be Excited To Add This Widget.So Lets Start-

Adding This Awesome Bottom Menu-

The Steps Shown Below Are Easy And Easy To Customize So Just Follow The Steps Carefully And Get This Widget-

1- Go To Blogger >> Layout >> Add A Gadget >> HTML/JAVASCRIPT 

2- Paste This Magical And Awesome Code In It-

<style>
/*
///////////////////////////////////////////////////////////////////
Credits: NGTECHZONE & MyBloggerTricks
//////////////////////////////////////////////////////////////////
*/
@media only screen and (max-width:1024px) { .ng-menubottompic { display: none; }
}
.ng-menubottom li a {
text-decoration: none
}
.ng-menubottompic {
background: url(http://myfilezone.96.lt/uploads/bottom-menu.png)left top repeat-x;
width: 100%;
height: 62px;
position: relative;
z-index: 9999;
margin: 10px auto -15px
}
#ng-menubottom-container {
width: 950px;
margin: 0 auto;
padding: 0
}
.ng-menubottom {
float: left;
margin: 0 auto;
padding: 15px 0
}
.ng-menubottom ul {
padding-left: 0;
color: #fff;
text-transform: none;
list-style-type: none;
font: 400 12px Arial, sans-serif;
margin: 0
}
#backtotop a,
#backtotop a:visited,
.ng-menubottom li a {
display: block;
font-weight: 400;
font-family: oswald, arial
}
.ng-menubottom li {
display: inline;
margin: 0
}
.ng-menubottom li a {
border-right: 1px solid #333;
float: left;
color: #ddd;
font-size: 13px;
line-height: 1em;
padding: 0 12px;
transition: 0.5s;
}
.ng-menubottom li a:hover {
border-right: 1px solid white;
text-decoration: none;
border-left: 1px solid white;
color: #fff;
text-shadow: 0px 0px 0.5px white;
}
#backtotop {
float: right;
background: url(http://myfilezone.96.lt/uploads/back-top.png)100% 57% no-repeat;
padding-right: 26px
}
#backtotop a,
#backtotop a:visited {
color: #ddd;
text-decoration: none;
font-size: 13px
}
#backtotop a:hover {
text-shadow: 0px 0px 1px white;
border-bottom: 1px dashed white;
}
</style>
<div style='background-color:white'><br>
<div class='ng-menubottompic'>
<div id='ng-menubottom-container'>
<div class='ng-menubottom'>
<ul>
<li>
<a href='#'>
                <i class='fa fa-envelope'></i> Contact
              </a>
</li>
<li>
<a href='#'>
                <i class='fa fa-pencil'></i> Privacy Policy
              </a>
</li>
<li>
<a href='#'>
                <i class='fa fa-flag'></i> About Us
              </a>
<li><a href='#'> <i class='fa fa-usd'></i> Advertise</a></li>
</li>
</ul>
</div>
<div id='backtotop'>
<p id='back-top'>
<a href='#' id='back-top'>
              Back To Top
            </a>
</p>
</div>
</div>
</div>
</div>

Replace # With Your Own URL'S And Save The Widget.

3- Save The Widget And See Your Blog Beautify With This Awesome Widget.

Tip- Use This Widget Just Before Your Blog's Footer For Great Look!

FROM THE AUTHOR:

This Was An Awesome Widget Which Will Definitely Change Your Blog's Look. 
Do You Need Any Help? If Yes Why Not Ask It Through Comments And Don't Forget To Subscribe Us.