Friday, September 13, 2013

How to Add a Shining CSS3 Horizontal Menu For Blogger

,
Horizontal menu best alternative option for labels or sections.
The importance of horizontal menu including: reducing the space occupied by the sections/labels and distort the appearance of blog, coordinate and beautify the style of blog.
This widget is designed by CSS3 technology, And you can add this gadget to your blog with very easy way:

Adding the widget to Blogger blog:
1. Go to Blogger Dashboard  → Layout → click on "Add a gadget".
2. Select "html/java script" and add the code given below:
<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background:url("http://1.bp.blogspot.com/-e8VrFODNr7s/T2TK3jW0ZYI/AAAAAAAAALA/wH-oW-79nzA/s1600/noop-menu-blogger.png") repeat scroll 0 0 transparent;border:1px solid #1357AF!important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style>
<a href="http://bbloggertutorials.blogspot.com" style="position: absolute;z-index:-11;"><img src="http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png" /></a>
<div class="wg-shining-menu">
    <ul class="menu">
        <li><a href="http://bbloggertutorials.blogspot.com/">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="http://bbloggertutorials.blogspot.com/p/blogger-tools.html">Products</a></li>
        <li><a href="http://bbloggertutorials.blogspot.com/p/contact-me.html">Contact</a></li>
        <li><a href="http://bbloggertutorials.blogspot.com/p/sitemap.html">Tips</a></li>
        <li><a href="http://bbloggertutorials.blogspot.com/p/terms-and-conditions.html">Tricks</a></li>
        <li><a href="#">About</a></li>
    </ul>

</div>
NOTE
3. - Replace the URL in blue with your own.
    - Replace the tab name in red with your own.
4. Finally click on save.
Now you can see the result  (o)

13 comments:

  1. Amazing! Itѕ trulу remагκаble
    pіece of writing, I havе got much сlеar
    іdea on thе topic of frrom thiѕ
    ρaгagгaph.

    My page ... weight loss diet pills

    ReplyDelete
  2. Nice information. Which is used to attract visitors of blogger. Templates make blogger as look like website. SEO Experts Bangalore

    ReplyDelete
  3. I am 100% agree with you that you have shared best seo tips and guides for all SEO Consultants who love learn new things.

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Thank you for your tutorials that you share to your post. I learn new things while reading your thoughts in this blog jut like online software video tutorials.

    ReplyDelete
  6. Here I am going to share a fresh and Do Follow High PR sites to get high Ranking In search engines. These Sites surely helps you in Building great backlings. These site are tested even after Penguin update and obtained good results from these sites here......
    http://newseowebs.blogspot.com

    ReplyDelete
  7. it really make our web pages more dynamic and provide great look and feel....
    6 Month Training

    ReplyDelete
  8. HTML and CSS are most important in website development it will plays a major role to shape a well websites.

    Web Designing Company Bangalore | Web Designing Companies Bangalore

    ReplyDelete
  9. I haven't placed it on my dashboard! but let's pray it works bro... enjoy!

    ReplyDelete
  10. how can we post multiple post in a single page?

    ReplyDelete

 

Disclaimer | Terms and Conditions | Privacy Policy | Copyright © 2012 | Template design by bbloggertutorials