 |
ow to Add Css/Jquery Fixed Horizontal Menu In Blogger Blog? |
The menu created by this method gets semi-transparent when you scroll down the page and is slightly showing up by fading out gradually becoming almost transparent. When the user hovers over it, the menu becomes opaque again.
How to Add Css/Jquery Fixed Horizontal Menu in Blogger Blog?
- Login Blogger Account
- Search for the following code
</head>
- Just before the searched code add following code for Jquery Menu
<style type="text/css">#nav{height:35px;border-bottom:1px solid #ddd;position:fixed;top:0;left:0;right:0;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5oi1J-moI5IOPw_z5Exf9UCuDVGk1jWuy4QTR7Nzj59OHzwMN8Pmxs6e5Eu97wrtNDtDBeQWVzGVlyoTajZA0lDkKxmXhmiK8-4iWpr00EDTRcF4KZA5lQPTT6C7vIMJZr8r3p99OX3cS/s1600/navbar.png) repeat-x center left;z-index:999999}#nav ul{height:25px;list-style:none;margin:6px auto 0;width:600px}#nav ul li{display:inline;float:left;margin:0 2px}#nav a{font-size:11px;font-weight:700;float:left;padding:2px 4px;color:#999;text-decoration:none;border:1px solid #ccc;cursor:pointer;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe5WwgqNskU4vtWb0QA-z79foj8poY1ir0CA75Hjaxf6A8OxSLErlr0bhAzKRxGkyk08WU4QFDvKK6ZFKZhEW1xoAy23uPFSy8my9HBarBgxTQGl9FPONTo3WRJD-D87REKuIixCKLtzg_/s1600/overlay.png) repeat-x center left;height:16px;line-height:16px}#nav a:hover{background-color:#D9D9DA;color:#fff}#nav a.top span,#nav a.bottom span{float:left;width:16px;height:16px}#nav a.top span{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKlRb6A-adpl8gcx-cJQcd9rSMkI3R6j35y0H-vSBS6Tp2EW22_0pDg5IZiYrhHk_cTrQsQtNrDMNo7qOaUwJYh5TyFTfPrVtV52dBdbgslCyWxy_rN5sYrgaxLlqrjI4qiGFuygwipcDu/s1600/top.png) no-repeat center center}#nav a.bottom span{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha9Ljr5vXVu0phiF7YYIb60iseH0GXXX1rkGhPI41NNkQJQ5D-K47OQyp5LauWlnXPdNBuvqF6K45ZwX2OxAsEIi9YHZ30P8B5XDzhpmvqwyj2ikOd_hBpCJ_zXmVgilPcU7Voi666y19q/s1600/bottom.png) no-repeat center center}#nav ul li.search{float:right}#nav input[type="text"]{float:left;border:1px solid #ccc;margin:0 1px 0 50px;padding:2px;line-height:16px}input.searchbutton{border:1px solid #ccc;padding:1px;cursor:pointer;width:26px;line-height:16px;background:#E8E9EA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRUkVbfetmoCbZx77zvna6Kh8rtG__n-x9eTbszXMDosrmPO6mxb1xTmr8uhVdbTM2x6PqyQOnqrby9DkXBAxn2x1T4XECJWACXbh2lX6gyZG9o3wkFmzSoqG9mwzcKXloh9cayP6AaD9D/s1600/search.png) no-repeat center center}input.searchbutton:hover{background-color:#D9D9DA}</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.3.2.min.js"></script>
<script type="text/javascript">//<![CDATA[
$(function(){$(window).scroll(function(){var a=$(window).scrollTop();0!=a?$("#nav").stop().animate({opacity:"0.2"},400):$("#nav").stop().animate({opacity:"1"},400)}),$("#nav").hover(function(a){var b=$(window).scrollTop();0!=b&&$("#nav").stop().animate({opacity:"1"},400)},function(a){var b=$(window).scrollTop();0!=b&&$("#nav").stop().animate({opacity:"0.2"},400)})});//]]></script>
- Now search for the below code
<body>
- If you can't find then search for the below code
<body expr:class='"loading" + data:blog.mobileClass'>
- Just after or below the above code add the following code for structure of Menu.
<div id="nav">
<ul>
<li><a class="top" href="#top"><span></span></a></li>
<li><a class="bottom" href="#bottom"><span></span></a></li>
<li><a href='URL address'><span>Link 1</span></a></li>
<li><a href='URL address'><span>Link 2</span></a></li>
<li><a href='URL address'><span>Link 3</span></a></li>
<li><a href='URL address'><span>Link 4</span></a></li>
<li><a href='URL address'><span>Link 5</span></a></li>
<li><a href='URL address'><span>Link 6</span></a></li>
<li class="search">
<form method="get" action="/search">
<input name="q" type="text" placeholder="Search..."/><input type="submit" value="" class="searchbutton"/>
</form>
</li>
</ul>
</div>
<div id="top"></div>
Important Note: Replace URL address with the URL of your pages and Link 1, 2, 3, 4, 5, 6 with the link title that will show in the menu.
- Now search for the following code
</body>
- Just above the searched tag add the following code
<div id="bottom"></div>
- Save Template
- Done!