Showing posts with label Menubar. Show all posts
Showing posts with label Menubar. Show all posts

Add Neat CSS3 Drop Down Menu in Blogger

After few days of rest here is an another tutorial i would love to share with all of you is that a neat CSS3 based drop down menu for blogspot blog. The tutorial will explain how you can add an neat css3 drop down menu to blogger.

The menu-bar comes with not just some links adding option but it also has some other options for you to use within the menu is social networking buttons like Facebook, Google+, twitter, and feeds that will be displayed at right corner of the menu and below it, a search form. and the left side of it we have a drop down navigation menu.

Related : How to Add CSS Drop Down Menu To Blogger



How to neat CSS3 drop down menu in blogger?

Go to blogger dashboard > Template > Edit HTML
Press CTRL + F to enable search box and search for the tag below:

</header>

Just below </header> add the HTML structure:

    <div id='contact-links'>
        <div id='my-links'>
            <a href='#'>About</a>
            <a href='#'>Contact</a>
                    <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_kg1YUuCGui-vwJrsoEZaFaNUmvzdaC7Jzo6R3c0JunzPU48oIxobB9VylVS5HTVm24iP0eZfvfjJrTyHAw_7Z7_mYps8sgmrkSUHJ_8WfwCyVMkcSZG84g4ZM5HpVJaH2sN4w32BK_k/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
    <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_x5RccR5MWwKzrNH7hbiiib9DQmLsCIOAOfzCF7HzPxdiaqyWECkoBukqtnPzRy721Xp-57QLnF8pkBKTmcuFcIBwZtYd06Ochcj9P2fUMHLUDO_K8-wH0Yw8gA4AnE2ol0STvr5aGbM/s1600/twitter.png' title='Twitter' width='18px' /></a>
            <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjir6mHgjcFyilGl75w0vXTuA0fLo1awN1VR2hTBM-PcA9vgLL46XNCbhPzfI1LQgo2dL2aoYXNbXaQpznLMgSsKSo_x9qz-FyZhh5WW0Mo4DgS8f2st-0S_xBKAB0bYoz0T1ruCalxMCc/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
            <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZkQXDgfhsEKryCLSH-2gaKChlYt5aRdqRQnTdE7ERgWE57rkq8E9clVlEfqMgSJ7Q40-AxlK1m-sCq9N4KB_UOmf2WHBs8qbsfEVAMeoxioPNxx4PZkgXCO6_Io5NkhgDeIpGAkny6O8/s1600/rss-icon.png' title='RSS Feed' width='18px'/></a>
        </div>

        <div id='menu-container'>
            <nav id='neat-menu'>
                <ul>
                  <li class='active'><a href='/'>Home</a></li>
                    <li><a href='#'>Dropdown</a>
                        <ul>
                            <li><a href='#'>Menu element 1</a></li>
                            <li><a href='#'>Menu element 2</a></li>
                            <li><a href='#'>Menu element 3</a></li>
                            <li><a href='#'>Menu element 4</a></li>
                            <li><a href='#'>Menu element 5</a></li>
                        </ul>
                    </li>
                    <li><a href='#'>Dropdown</a>
                        <ul>
                            <li><a href='#'>Menu element 1</a></li>
                            <li><a href='#'>Menu element 2</a></li>
                            <li><a href='#'>Menu element 3</a></li>
                            <li><a href='#'>Menu element 4</a></li>
                            <li><a href='#'>Menu element 5</a></li>
                        </ul>
                    </li>
                    <li><a href='#'>Dropdown</a>
                        <ul>
                            <li><a href='#'>Menu element 1</a></li>
                            <li><a href='#'>Menu element 2</a></li>
                            <li><a href='#'>Menu element 3</a></li>
                            <li><a href='#'>Menu element 4</a></li>
                            <li><a href='#'>Menu element 5</a></li>
                        </ul>
                    </li>
                    <li><a href='#'>Single Menu</a></li>
                    <li><a href='#'>Single Menu</a></li>
                    <li><a href='#'>Dropdown</a>
                        <ul>
                            <li><a href='#'>Menu element 1</a></li>
                            <li><a href='#'>Menu element 2</a></li>
                            <li><a href='#'>Menu element 3</a></li>
                            <li><a href='#'>Menu element 4</a></li>
                            <li><a href='#'>Menu element 5</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>

            <!-- menu-search form -->
            <div id='menu-search'>
              <form method='get' action='/search'>
                    <input autocomplete='off' name='q' placeholder='search...' type='text' value=''/>
                </form>
            </div>
        </div>
    </div>


Now, replace "#" with the links you want to be added into the menu and replace the texts menu element 1, 2 , 3, 4 with text you would like to add related to your links in a drop down or single  menu.

Now, Let's add styling to the menu by adding CSS code. All you have to is to find below piece of code:

 ]]></b:skin> 

Just above ]]></b:skin> add this code: 


#contact-links {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    margin: auto;
    position: relative;
    width: 100%;
}
#contact-links a {
    color: #4C9FEB;
}
#contact-links a:hover {
    color: #3D85C6;
}
#my-links {
    float: right;
    font-size: 12px;
    margin: 4px 10px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
}
#my-links a {
    margin-left: 7px;
    padding-left: 8px;
    text-decoration: none;
}
#my-links a:first-child {
    border-width: 0;
}
#menu-container {
    background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
    border-radius: 0 0 4px 4px;
border:1px solid rgba(0,0,0,0.1);
    box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;
    clear: both;
    height: 46px;
    padding-top: 1px;
}
#neat-menu {
    float: left;
}
#neat-menu a {
    text-decoration: none;
}
#neat-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#neat-menu > ul > li {
    float: left;
    padding-bottom: 12px;
}
#neat-menu ul li a {
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
    border-color: #D1D1D1;
    border-image: none;
    border-style: solid;
    border-width: 0 1px 0 0;
    color: #333333;
    display: block;
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    padding: 11px 15px 10px;
    text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul li a:hover {
background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 );
}
#neat-menu > ul > li.active > a {
    background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
    border-bottom: 1px solid #2D81CC;
    border-top: 1px solid #4791D6;
    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    color: #FFFFFF;
    margin: -1px 0 -1px -1px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu > ul > li.active > a:hover {
    background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 );
}
#neat-menu > ul > li:first-child > a {
    border-radius: 0 0 0 5px;
}
#neat-menu ul ul {
    background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
    border-radius: 5px 5px 5px 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 0 #FFFFFF inset;
    height: 0;
    margin-top: 1px;
    opacity: 0;
    overflow: hidden;
    width: 240px;
    padding: 0;
    position: absolute;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#neat-menu ul li:hover ul  {
    margin-top: 0\2;
    height: auto;
    opacity: 1;
    visibility: visible;
}
#neat-menu ul ul a {
    border-right-width: 0;
    border-top: 1px solid #D1D1D1;
    box-shadow: 0 1px 0 #FFFFFF inset;
    color: #444444;
    height: 24px;
    line-height: 24px;
    padding: 7px 12px;
    text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul ul a:hover {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
    border-top: 1px solid #4791D6;
    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu ul ul li:first-child a {
    border-top-width: 0;
}
#menu-search {
    margin:8px 10px 0 0;
    float: right;
}
#menu-search form {
    background:  url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibCr208RFlyTmMOjUN59IuFzR-uhUSzGZ3DooIBALbDe6dhfrJlpuvLeUlsZLRBhrqCtBvH6rqG1oJHEV35OEykh-GCobtOvGCIJxiNP_HxNY30lkEgUxGhncVgmuHe3_8yQxXrcrtT1I/s1600/menu-search.gif")  no-repeat scroll 5% 50% transparent;
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
    height: 26px;
    padding: 0 25px;
    position: relative;
    width: 130px;
}
#menu-search form:hover {
    background-color: #F9F9F9;
}
#menu-search form input {
    color: #999999;
    font-size: 13px;
    height: 26px;
    text-shadow: 0 1px 0 #FFFFFF;
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    float: left;
    outline: medium none;
    padding: 0;
    width: 100%;
}
#menu-search form input.placeholder, #menu-search form input:-moz-placeholder {
    color: #C4C4C4;
}

Click on the Save template button to save the changes... and you're done! ;)
No comments:
Labels: , ,

How to Add CSS Drop Down Menu To Blogger

Pure CSS drop down menu for blogger - Menubar is the must have widget for the blogger or any website so, that visitors of the blog can navigate to the other category pages from the one place where they come. it is not just helps your readers to go trough other page but it helps you reduce the bounce rate of your blog and increase the page-views as well. so, here's present the pure css based drop down menu for your blog and you have to just follow the steps given below to integrate this menu into your blog. 

Preview : -
CSS drop down menu - animated GIF

How to add this to blogger?
Go to blogger dashboard > Template > Edit HTML and search for the ]]></b:skin> tag using CTRL + F.
Now, copy and paste below CSS code just above it.


/* CSS drop down menu by bloggerwidgetgenerators.com */
        nav ul
        {
            list-style: none;
            position: relative;
            display: inline-table;
        }
        nav ul li a
        {
            display: block;
            padding: 25px 40px;
            text-decoration: none;
        }
        nav ul li
        {
            float: left;
        }
        nav ul ul li
        {
            position: relative;
            float: none;
        }
        
        /*Third Step*/
        
        nav ul ul
        {
            position: absolute;
            top: 100%;
        }
        nav ul ul ul
        {
            position: absolute;
            left: 100%;
            top: 0;
        }
        /*Colors*/
        
        nav ul
        {
            background: #0052a4;
            background: linear-gradient(top, #0052a4 0%, #0052a4 100%);
            background: -moz-linear-gradient(top, #0052a4 0%, #0052a4 100%);
            background: -webkit-linear-gradient(top, #0052a4 0%,#0052a4 100%);
            box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
            border-radius: 10px;
        }
        nav ul li:hover
        {
            background: #C0C0C0;
            background: linear-gradient(top, #C0C0C0 0%, #C0C0C0 40%);
            background: -moz-linear-gradient(top, #C0C0C0 0%, #C0C0C0 40%);
            background: -webkit-linear-gradient(top, #C0C0C0 0%,#C0C0C0 40%);
        }
        nav ul ul
        {
            background: #C0C0C0;
            background: linear-gradient(top, #C0C0C0 0%, #C0C0C0 40%);
            background: -moz-linear-gradient(top, #C0C0C0 0%, #C0C0C0 40%);
            background: -webkit-linear-gradient(top, #C0C0C0 0%,#C0C0C0 40%);
            border-radius: 0px;
            padding: 0;
        }
        nav ul ul li
        {
            border-top: 1px solid #000;
            border-bottom: 1px solid #000;
        }
        nav ul li a
        {
            color: #FFF;
        }
        nav ul li:hover a
        {
            color: #000;
        }
        
        nav ul ul li a
        {
            color: #fff;
        }
        nav ul ul li a:hover
        {
            color: #fff;
            background: #0052a4;
        }

Now, Blogger Dashboard > Layout > Add a Gadget > Choose HTML/Javascript from the list.
Copy and paste below code into blank area : 

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Articles</a>
            <ul>
                
                <li><a href="#">Fun</a></li>
                <li><a href="#">freebies</a></li>
                <li><a href="#">Web Design</a>
                     <ul>
                         <li><a href="#">HTML</a></li>
                         <li><a href="#">CSS</a></li>
                     </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Archives</a>
            <ul>
                <li><a href="#">January</a></li>
                <li><a href="#">February</a></li>
            </ul>
        </li>
        <li><a href="#">AboutMe</a></li>
    </ul>
</nav>

Now, replace "#" with URL and Home, Articles, Fun etc texts with your menu texts. and finally, save your widget and you're done !

After completing above process don't forget to move your widget to after the header widget in your layout section.

If you have any query related to this, feel free to comment below.

Thanks :)

No comments:
Labels: , ,
Subscribe to: Posts (Atom)