Navigation menu is an essential gadget for blogs. They help users to visit other links and the reduce bounce rate. A good navigation menu can increase the visitors as well as the satisfaction of search engines which is called SEO or search engine optimization.
 |
| Awesome Nav bar gadget with how to, template, home, contact links |
how to, template, home, contact links
Awesome Nav bar gadget with how to, template, home, contact links
According to the Google’s advisors, a webpage should only contain 100 links or that is called more search engine friendly. So each link must be attractive to visitors. That is why we have created an awesome navigation menu gadget with CSS animation for blogger.
image of Navigation menu gadget with template, home, contact links with HTML coding
Cool menu gadget with template, home, contact links for blogger
image of Navigation menu gadget with template, home, contact links for blog posts
Awesome Navigation menu gadget blogger
image of Navigation menu gadget of step 3 animation
Good Navigation menu gadget
This gadget does not use any script and the animation is created using Cascade Style Sheets and .jpg files. You can compress them if you need to save some bytes. We have included the main links which every blogger need. They are: Home, Templates, HOW TO and contact. These links have inbuilt hover CSS animation.
How to install this cool Navigation menu gadget with CSS animation for blogger.
Just copy all the code below and paste it to a notepad.
Edit the below links with your links.
Go to Blogger Dashboard.
Add the code into HTML gadget in the Layout.
Arrange the gadget to position. I think it is best to add them above post header, below post footer or as footer.
Save the layout.
View it and use the mouse pointer to check out the CSS animation.
<style>/*** Name: shipmethis* Date: APRIL 2013* Autor: Akhil S Kumar* Visit: https://www.shipmethis.com/* Version: 1* Licence: http://www.blogbulk.com**/#shipmethis {list-style: none;padding: 0;margin: 117px 0 0 200px;width: 500px;height: 50px;background: ;position: relative;}#shipmethis span {display: none;position: absolute;}#shipmethis a {display: block;text-indent: – 900%;position: absolute;outline: none;}#shipmethis a:hover {background-position: left bottom;}#shipmethis a:hover span{display: block;}#shipmethis .home {width: 80px;height: 40px;background: url(https://i34.tinypic.com/sqgpz4.jpg) no-repeat;left: 20px;top: -23px;}#shipmethis .home span {width: 90px;height: 100px;background: url(https://i35.tinypic.com/15d06zo.jpg) no-repeat;left: 5px;top: -20px;}#shipmethis .templates {width: 115px;height: 40px;background: url(https://i37.tinypic.com/2qn5jyc.jpg) no-repeat;left: 100px;top: -23px;}#shipmethis .templates span {width: 115px;height: 90px;background: url(https://i37.tinypic.com/25gco5k.jpg) no-repeat;left: 15px;top: -20px;}#shipmethis .howto {width: 100px;height: 40px;background: url(https://i34.tinypic.com/2vcbxo7.jpg) no-repeat;left: 220px;top: -23px;}#shipmethis .howto span {width: 115px;height: 100px;background: url(https://i36.tinypic.com/2m4bwyb.jpg) no-repeat;left: 15px;top: -20px;}#shipmethis .contact {width: 115px;height: 40px;background: url(https://i37.tinypic.com/jhveat.jpg) no-repeat;left: 320px;top: -23px;}#shipmethis .contact span {width: 115px;height: 100px;background: url(https://i37.tinypic.com/250iipj.jpg) no-repeat;left: 15px;top: -20px;}</style><ul id=”shipmethis”><li><a href=”https://www.shipmethis.com/” class=”home”>Home<span></span></a></li><li><a href=”https://www.shipmethis.com/p/about-us.html” class=”templates”>About us<span></span></a></li><li><a href=”https://www.shipmethis.com/p/forum.html” class=”howto”>Forum<span></span></a></li><li><a href=”https://www.shipmethis.com/p/blog-page_19.html” class=”contact”>Contact<span></span></a></li></ul><div align=’right’><a href=’https://www.shipmethis.com//'</a></div>
Do not forget to Replace the links with your links.
Hope you will like this…Subscribe us for more awesome and useful gadgets for blogger.
