Add Css/Jquery Fixed Horizontal Card To Blogger Blog
Monday, April 27, 2020
Edit
This navigation bar made amongst CSS & jQuery gets semi-transparent when yous scroll downwards the page in addition to is slightly showing upward yesteryear fading out gradually becoming nigh transparent. When the user hovers over it, the bill of fare becomes opaque again.
Inside the navigation nosotros accept to a greater extent than or less links, a search input in addition to overstep & bottom buttons making it easier for the user to navigate to the overstep or bottom of the page.
If yous desire to add together this horizontal bill of fare amongst CSS/jQuery to a Blogger blog, follow the steps below:
1. Log into your Blogger describe of piece of occupation organisation human relationship in addition to choose your blog, in addition to hence cash inwards one's chips to "Template" in addition to press the "Edit HTML" button.
2. Click anywhere within the code surface area in addition to search using CTRL + F keys, this tag:
6. Finally, search for the next tag:
Credit: Tympanus. This bill of fare was inspired yesteryear David Walsh's overstep navigation bar.
Inside the navigation nosotros accept to a greater extent than or less links, a search input in addition to overstep & bottom buttons making it easier for the user to navigate to the overstep or bottom of the page.
If yous desire to add together this horizontal bill of fare amongst CSS/jQuery to a Blogger blog, follow the steps below:
1. Log into your Blogger describe of piece of occupation organisation human relationship in addition to choose your blog, in addition to hence cash inwards one's chips to "Template" in addition to press the "Edit HTML" button.
2. Click anywhere within the code surface area in addition to search using CTRL + F keys, this tag:
</head>3. Just above/before the </head> tag, add together the next scripts in addition to CSS code for the jQuery menu:
<style type="text/css">#nav{height:35px;border-bottom:1px enterprise #ddd;position:fixed;top:0;left:0;right:0;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVOMx9kgwlsIqZJSEOWslU5J2jjtywPsRi4kXHzHwMov1SDxiYZxnNHNDheSp54LyIZCfBE32EVk3ZiOWigQifLJOG_J6XNUWlvpr9wdAjzwuPK7mZaf2wwu6X_RtMQd1W9fKf0vvMy81Z/s1600/navbar.png) repeat-x middle left;z-index:999999}#nav ul{height:25px;list-style:none;margin:6px motorcar 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 enterprise #ccc;cursor:pointer;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1oZjjU0SEBRDt2Sx9BekUdy1aTR7o_Ua8iNiQUJObAUn_gj1vrPO7RrGZJkPfUDxNFoVf_3gC4RukVLkpE1rOLNSQGmQHkI9WSi8ciam_cxhfdHI_rEB9_6sgvofwkE5-wkNNfZBIpDUC/s1600/overlay.png) repeat-x middle 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/AVvXsEhHs-EK9LqGwsYiwL6t5Z3tXB5MZQ5kD85pTRMENVFyfSgHjiiNPCF_3FvtLqvTcDHnrGzTJHl8iKvp0L4MbTXRlHocDOBrh0EQ-UeCQ8VvAQ_szTPjIbTKn6IIU30hGNv21Qi_IWJEngJX/s1600/top.png) no-repeat middle center}#nav a.bottom span{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5qmWtroWlMV6h5dZLWfaCOqjcp12w6VdQECPvkg3J7J5Q-SBPpGblxo3Clh_aTOwqHRgO_0x_lAmRonr0qlLJwheVHPwMc1HyQ6qyga7wsKeA3VuOoVEzmbjRCHMZhmhTrrS8-hG97biX/s1600/bottom.png) no-repeat middle center}#nav ul li.search{float:right}#nav input[type="text"]{float:left;border:1px enterprise #ccc;margin:0 1px 0 50px;padding:2px;line-height:16px}input.searchbutton{border:1px enterprise #ccc;padding:1px;cursor:pointer;width:26px;line-height:16px;background:#E8E9EA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK8R8p89gYvVtw2yyjd2ALWGp13fkQ_ms8WSNmpgoam79hGgDb70mT3ZlJjBdSWzO0SjBhI0SGOX555ccG-L-GOlJ3kwcNRlw6qsrxilCPqwv9IGEVZCz1GIVWo1gmyrMzv7-rLyN_z8ms/s1600/search.png) no-repeat middle center}input.searchbutton:hover{background-color:#D9D9DA}</style>4. Next, search for this tag:
<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>
<body>If yous can't abide by it, search for this one:
<body expr:class='"loading" + data:blog.mobileClass'>5. Just below/after this code, re-create in addition to glue the HTML construction of the menu:
<div id="nav">Note: Replace URL address amongst the URL of your pages in addition to Link 1, 2, 3, 4, 5, 6 amongst the link championship that volition present inwards the menu.
<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>
6. Finally, search for the next tag:
</body>Just inwards a higher house the </body> tag, add together the next HTML code:
<div id="bottom"></div>7. Click the "Save Template" push in addition to you're done adding the menu. Enjoy!
Credit: Tympanus. This bill of fare was inspired yesteryear David Walsh's overstep navigation bar.