How to add CSS3 Dropdown Menu in Blogger

By -
How to add CSS3 Dropdown Menu in Blogger
CSS3 Dropdown Menu in Blogger is a part of your blog section that performed about your blog appearance beauty on you blog templates  and a part of the attraction for visitors. If you would like the another menu styling, the below CSS3 drop down menu is available for you which designed for adapting to every blogger template known as Blogspot templates.  The menu is designed with a good frame and the parent links are touched with hover color. Also, we have the drop-down navigation menu or submenu and on the left menu side, we have the blogger search form.

You can visit this below demo button.


How to add this CSS3 Dropdown Menu?


 Step 1: Login your blogger then >> Go to Template and Edit HTML

Step 2: In the HTML Code area just click on anywhere on the code area and press CTRL+F or Command+F (Mac) then copy this below tag to paste in the search column and press Enter.

]]></b:skin>

 Step 3: Copy this below code HTML code and paste in above code ]]></b:skin>
/*--[Menu]--------------------------*/
#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: 0px 0px 0px 0px;
 border:5px solid rgba(0,0,0,0.1);
    clear: both;
 box-shadow: 0px 0px 0 rgba(255, 255, 255, 0.8) inset;
    height: 46px;
    padding-top: 0px;
 margin-top:0px;
}
#blogger-menu {
    float: left;
}
#blogger-menu a {
    text-decoration: none;
}
#blogger-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#blogger-menu > ul > li {
    float: left;
    padding-bottom: 12px;
}
#blogger-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: 16px;
    height: 25px;
    line-height: 25px;
    padding: 11px 22px 10px;
    text-shadow: 0 0px 0 #FFFFFF;
}
#blogger-menu ul li a:hover {
    background: -webkit-linear-gradient(#049ae0, #049ae0) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#00c7f9, #00c7f9) repeat scroll 0 0 transparent;
    background: linear-gradient(#049ae0, #049ae0) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#049ae0', endColorstr='#049ae0',GradientType=0 );
 color: #fff;
}
#blogger-menu > ul > li:first-child > a {
    border-radius: 0 0 0 0px;
}
#blogger-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: 1px 0px 0px 0px;
    border: 0px 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;
}
#blogger-menu ul li:hover ul  {
    margin-top: 0\2;
    height: auto;
    opacity: 1;
    visibility: visible;
}
#blogger-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;
}
#blogger-menu ul ul a:hover {
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 );
    color: #444444;
}
#blogger-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/AVvXsEjAZ1MR6QW_-RuZ2AYwUxDgONaDXjtmsIgXdYOqtJjjqCKn5YVLnFjUVfvNHWf9GsC8_7bbdMMOtxdgZlRJ84H1T3cEWe1QvGhZZeH-NeAQZXb1iZa15hIyovQnPLFqsmPtbmpBsjJHEnOi/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: 28px;
    padding: 0 25px;
    position: relative;
    width: 130px;
}
#menu-search form:hover {
    background-color: #ffffff;
}
#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; }

Step 4: Press CTRL+F or Command+F (Mac) then copy this below </header> tag to paste in the search column and press Enter.

Step 5: Copy these below code and paste below it.

<div id='menu-container'>
        <nav id='blogger-menu'>
            <ul>
              <li class='active'><a href='/'>Home</a></li>
                <li><a href='#'>Menu 1</a>
                    <ul>
                        <li><a href='#'>Child Menu 1</a></li>
                        <li><a href='#'>Child Menu 2</a></li>
                        <li><a href='#'>Child Menu 3</a></li>
                        <li><a href='#'>Child Menu 4</a></li>
                        <li><a href='#'>Child Menu 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Menu 2</a>
                    <ul>
                        <li><a href='#'>Child Menu 1</a></li>
                        <li><a href='#'>Child Menu 2</a></li>
                        <li><a href='#'>Child Menu 3</a></li>
                        <li><a href='#'>Child Menu 4</a></li>
                        <li><a href='#'>Child Menu 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Menu 3</a>
                    <ul>
                        <li><a href='#'>Child Menu 1</a></li>
                        <li><a href='#'>Child Menu 2</a></li>
                        <li><a href='#'>Child Menu 3</a></li>
                        <li><a href='#'>Child Menu 4</a></li>
                        <li><a href='#'>Child Menu 5</a></li>
                    </ul>
                </li>
    <li><a href='#'>Menu 4</a>
                    <ul>
                        <li><a href='#'>Child Menu 1</a></li>
                        <li><a href='#'>Child Menu 2</a></li>
                        <li><a href='#'>Child Menu 3</a></li>
                        <li><a href='#'>Child Menu 4</a></li>
                        <li><a href='#'>Child Menu 5</a></li>
                    </ul>
                </li>
              <li><a href='#'>Menu 7</a></li>
              <li><a href='#'>Menu 8</a></li>
   </ul>         </nav>
        <!-- menu-search form -->
        <div id='menu-search'>
          <form action='/search' method='get'>
                <input autocomplete='off' name='q' placeholder='search...' type='text' value=''/>
            </form>
        </div>
    </div>
</div>

Step 6: Now start to replace the symbol of # to your URL and replace in red with your menu titles.

Note: If would like to remove the a whole dropdown menu just start from <ul>xxxxx</ul>, which highlighted in yellow and if you would like to remove any child menu just remove from <li>xxxxx</li>

The last thing to do is; checking from step #2 - #6, if everything is correct just click on "Save Template" button to save and change.

Popular posts from this blog

What is Authority Optimization and Why Does It Matter Now More Than Ever?

By -
Image
There are three words you would repeatedly hear when it comes to search engine optimization: content, relevance, and authority. Content and relevance are important to drive up rankings and remain updated for SEO purposes. But what about that last one—authority? Does your brand understand authority when it comes to optimization? Read this article for a brief primer on authority and how to optimize your content ideally to increase this aspect: Understanding Authority in the Context of SEO Image Source: https://pixabay.com/en/analytics-charts-graphics-marketing-2618277/ Search engines algorithms are becoming more specific year by year. Try to think about web search in a manner a company like Google does. They want to make each result a user gets as relevant as possible to the search phrase. In addition, search engine companies want to offer monetized links in the least intrusive manner possible. In recent years, there’s another major concern for search results: accuracy. Rememb...
Read more

How an SEO Consultant Can Grow Your Business

By -
Image
You may know your business well, but do you know what can boost your business? If you think digital marketing is all about making random posts with relevant hashtags on social media, you have got it wrong. The world of digital marketing is vast and social media handling is just one tiny aspect of it. You may know the basics of SEO theoretically, but executing it timely can be a tad bit difficult and you will soon find yourself muddled in the realm of digital marketing. This is precisely why we have “experts” in every field and an SEO consultant is one of them. This is a sample of the SEO Audit Tips that every SEO Consultant Report to the website owner. What Does an SEO Consultant Do? An SEO consultant will first check the health of your website or you may call it the SEO audit. This audit is delivered in the form of a report. You can find all the problem areas in this report and a customized solution is provided for the same. This report is often provided for free of cost by a mos...
Read more

A Beginners Guide To Writing A New Blog

By -
Image
It is rational for a beginners overview of blogging to start with info on ways to start a blog site. However, first, a quick intro to exactly what a blog site actually is. A blog is nothing greater than your on-line journal or journal, where you could reveal your feelings, thoughts, and viewpoints or even market your items. There are a couple of guidelines in addition to keeping it clean. For that reason, they can be found in all form of forms, sizes, and styles, as well as your blog site page is essentially your own to anything you want with. You could consist of pictures, hyperlinks to your websites, MP3s as well as videos. Much depends on the kind of blog site you have as well as who is the service provider, but Wordpress permits more than Blog writer or Blogspot, particularly if you have downloaded it to your very own website. However, it is likewise more difficult and you could prefer to start off simple then function your way up as you come to be much more familiar with what...
Read more