How to Add a Shining CSS3 Horizontal Menu For Blogger

How to Add a Shining CSS3 Horizontal Menu For Blogger
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:

Also Check: How to Add Metro Style Social Widget for Blogger

Adding How to Add a Shining CSS3 Horizontal Menu For Blogger 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=”https://bbloggertutorials.blogspot.com/2013/09/http://bbloggertutorials.blogspot.com/“>Home</a></li>

        <li><a href=”https://bbloggertutorials.blogspot.com/2013/09/#“>Features</a></li>

        <li><a href=”https://bbloggertutorials.blogspot.com/2013/09/http://bbloggertutorials.blogspot.com/p/blogger-tools.html“>Products</a></li>

        <li><a href=”https://bbloggertutorials.blogspot.com/2013/09/http://bbloggertutorials.blogspot.com/p/contact-me.html“>Contact</a></li>

        <li><a href=”https://bbloggertutorials.blogspot.com/2013/09/http://bbloggertutorials.blogspot.com/p/sitemap.html“>Tips</a></li>

        <li><a href=”https://bbloggertutorials.blogspot.com/2013/09/http://bbloggertutorials.blogspot.com/p/terms-and-conditions.html“>Tricks</a></li>

        <li><a href=”https://bbloggertutorials.blogspot.com/2013/09/#“>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)

Also Check: 

  1. What is the Substation?
  2. TOP 100 SCHOOLS IN BANGLADESH IN 2022
  3. Microsoft Excel Basic Functions 
  4. CPA Marketing
  5. How to Fix Account warning on TikTok?
  6. 20 Best All-Inclusive, Adult-Only Resorts in the World
  7. 7 Top Economics Magazines, Publications & Journals in 2022

Check Us on Social Media: FacebookTwitterInstagramPinterestLinkedin