How to Add Colorful Tabs JQuery Menu For Blogger in 2020

Colorful Tabs JQuery Menu For Blogger. colourful jquery menu After having published and designed over 100+ Navigation Menus for Blogger | tips and tricks 2020

Colorful Tabs JQuery Menu

With horizontal and vertical list views, after publishing and designing over 100+ navigation menus for Blogger, today we would like to share a beautiful menu that has been the favorite choice of all my clients so far. This menu changes the color of each mouse hover tab. It uses simple Javascript functions to create smooth and clean transition effects. Instead of displaying submenu items in the traditional vertical dropdown list, we combined them to fit in one line. Unlike other menus, this widget fits easily into any blog spot template without any design conflicts. This is at the top of your blog to attract more readers. Installation steps are fun and extremely easy. The menu works well on all major browsers: I7 ++, Safari, Chrome, Mozilla and Opera. Let's add you to our blogs and get rid of any existing big menus that have been no less of an inconvenience.

Demo

If you are interested in how to create a Colorful Tabs JQuery Menu from scratch and add jacquard effects to it, be sure to read the back of this series.

Add it to blogger

1. Go To Blogger > Template
2. Backup your template
3. Click Edit HTML > Proceed
4. Search For <head> and just below it paste these scripts:

<script src='http://downloads.mybloggertricks.com/jquery-pack-colourful.js' type='text/javascript'></script> 
    <script src='http://downloads.mybloggertricks.com/jcarousel-colourful.js' type='text/javascript'> </script> 
    <script src='http://downloads.mybloggertricks.com/files/mt-colourful.js' type='text/javascript'></script>

5. Now search for the body class. i.e: Looks similar to this with some code inside it

body {
----
---
)
Inside this class paste the following values:
body {
margin:0px
padding:0px;
---
---
}
6. Next search for this
<body>
or this:

<body expr:class='"loading" + data:blog.mobileClass'>

7. Just below it paste the following compressed code:

<!--START OF COLOURFUL TABS BY MBT-->

<style>

/*------- Colourful Tabs Menu by www.MyBloggerTricks.com -------*/

.MBT-Nav-container {

border: 1px solid #cfcfcf;      

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQxYcWc0XmI-V5Z05nKgoMmum8TnYQb5fZCTDmXPy7bhLxPWRFYBsOH_Oq1NNDFtWbeA51Ldj_z7Xp2R6HndjUE-8OgrPu_6m6cdl36deJbRemSGbXBtpR_axRIyU8by89d82zqGxbwYE/s400/menu-bgd.png) bottom left repeat-x;       

    position: relative;       

      margin: 0;  padding: 0;       

border: 1px solid #cfcfcf;

}

ul#nav {      

    border-left: 1px solid #cfcfcf;       

        border-right: 0px solid #cfcfcf;       

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQxYcWc0XmI-V5Z05nKgoMmum8TnYQb5fZCTDmXPy7bhLxPWRFYBsOH_Oq1NNDFtWbeA51Ldj_z7Xp2R6HndjUE-8OgrPu_6m6cdl36deJbRemSGbXBtpR_axRIyU8by89d82zqGxbwYE/s400/menu-bgd.png) bottom left repeat-x;       

    position: relative;       

    font-size: 12px; font-family: helvetica, arial, sans-serif;       

    list-style: none;  margin: 0 auto;  padding: 0;       

    width: 960px;       

}

#nav ul {      

     margin: 0;       

    

}

:focus {      

    outline: 0;       

}

*html ul#nav { clear: both; height: 1%; }      

ul#nav li a {       

    display: block;       

    float: left;       

    text-transform: uppercase;       

    font-weight: bold;       

    line-height: 33px;       

    padding: 0 13px 0 10px;       

    color: #333;       

    text-decoration: none;       

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOTxSZeHXougxRHUkKSZIhxbkt2xtjGFt2K26OdW0rQetvSHtbJbii07rT0p0eDCmXQBxgNfORnxJmCJCIq0Mf48IoeuGyfHR3TrQmibIxq3gwIN14xTyTfRFpU4o6OtPRR0tDz6bUBB0/s400/menu-rule.png) right 2px no-repeat;       

}       

*html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }       

*:first-child+html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }

ul#nav li a:hover, ul#nav li a.open { color: #fff; }

ul#nav li#mbt a:hover, ul#nav li#mbt a.open { background: #0f1f37; }      

ul#nav li#link-entertainment a:hover, ul#nav li#link-entertainment a.open { background: #b70943; }       

ul#nav li#link-news a:hover, ul#nav li#link-news a.open { background: #cf3c02; }       

ul#nav li#link-life a:hover, ul#nav li#link-life a.open { background: #724375; }       

ul#nav li#link-technology a:hover, ul#nav li#link-technology a.open { background: #02b0cf; }       

ul#nav li#link-top10 a:hover, ul#nav li#link-top10 a.open { background: #353533; }

ul#nav li#links-1 a:hover, ul#nav li#links-1 a.open { background: #b70943; }      

ul#nav li#links-2 a:hover, ul#nav li#links-2 a.open { background: #289728; }       

ul#nav li#links-3 a:hover, ul#nav li#links-3 a.open { background: #666666; }       

ul#nav li#links-4 a:hover, ul#nav li#links-4 a.open { background: #b70943; }



ul#nav li#link-home a {       

    padding: 0 33px 0 10px;       

    text-indent: -9999px;       

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRUAAl7IhCx_3b7XgLXmUzg-2t1l-Nor87PbSlk7rnEt5EyE9N-KpthFfId718lJvAVWuppIkYC4w6g0nZhFrOLY0356u-gr3GP-TIraDI73S8L2g6vLySoNB46HqG6Gz5SHtHgSF_aY0/s400/home-icon.png) right 0px no-repeat;       

}       

*html ul#nav li#link-home a { padding: 0; width: 43px; }       

ul#nav li#link-home a:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRUAAl7IhCx_3b7XgLXmUzg-2t1l-Nor87PbSlk7rnEt5EyE9N-KpthFfId718lJvAVWuppIkYC4w6g0nZhFrOLY0356u-gr3GP-TIraDI73S8L2g6vLySoNB46HqG6Gz5SHtHgSF_aY0/s400/home-icon.png) right -33px no-repeat; }

/* Sub-Vertical Navigation */

ul.sub-nav {      

    position: absolute;       

    top: 33px;       

    left: -1px;       

    overflow: hidden;       

    width: 960px;       

    display: none;       

    z-index: 999;       

list-style: none;       

  padding-left:0px;       

}

ul#nav li#mbt ul.sub-nav { background: #6f7987 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC-EZk43RD0_67kW8O54AQJlJaDfgBsxiQierfy3tJbdrXdM8_SzBDx685ccNxG9F_fyAssbypd5Fh28g-ReGbJXd09ZfSvFhf-74Ky8ZEgKmWhnQEr_75u9w_V8PZuGrLadhS_1zidTw/s400/business-subnav-bgd.png) top left repeat-x; }      

ul#nav li#link-entertainment ul.sub-nav { background: #d46b8e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinvsl32LZx4lluzs_CiFqoUv6CFnDjQRSdAktrNC7y4FKrStIjthh3mazPJh8nktorwl8nihZjS31rd9bHtXf-zv5WB_ll6JSKHq1ig3RvHiwbBEESYtJjkHtnQ7yWQPhwNSj6IX0thLA/s400/entertainment-subnav-bgd.png) top left repeat-x; }       

ul#nav li#link-news ul.sub-nav { background: #e28a67 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibAv1ZSctvj7L5eXZ-eB7qbw6Y96azSBAUdoa5Zo16Pq75Ux99oTXIgALzhYDPEeEYi_IPJSs3f_P1viZdcAWHqkezOJQS20vqH9ULc_80cly-86ZrnVu0eDdAI1KjzcziHkY2ujBvlkQ/s400/news-subnav-bgd.png) top left repeat-x; }       

ul#nav li#link-life ul.sub-nav { background: #aa8eac url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi48RUPe1JNGgDz6cX9gdCkOxwLH3fZI7bKqmkByrXjI_fIKPonZpcVt_sMwkrvq5-SfsSqRbLXeQfbIepuyFTfgAMY8UsrQn-9mcvO7QBFyFNUPFm0dMKGBJcw5wKV1HLkl__GwtYDa1I/s400/life-subnav-bgd.png) top left repeat-x; }       

ul#nav li#link-technology ul.sub-nav { background: #67d0e2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgODwmPXwPIxi4RtjIx9fWHyJoE4yF5frSquIFN3p4HaOy1iW6MVr1W6FaAPqjl05UdhRzF2oGO1IMhyosxVxmPI23ZtMBd6uiGhriGLWhd7Iiw_C_mzzXY8m6VBrKFbu6QGJY9WtPhJaU/s400/technology-subnav-bgd.png) top left repeat-x; }

ul#nav li ul.sub-nav li { float: left;   }

ul#nav li ul.sub-nav li a {      

    float: none;       

    background: none;       

    font-size: 11px;       

    text-transform: none;       

    color: #fff;       

    line-height: 25px;       

}

ul#nav li#mbt ul.sub-nav li a:hover, ul#nav li#mbt ul.sub-nav li a.active-cat{ background: #0f1f37 !important; }      

ul#nav li#link-entertainment ul.sub-nav li a:hover, ul#nav li#link-entertainment ul.sub-nav li a.active-cat { background: #b70943 !important; }       

ul#nav li#link-news ul.sub-nav li a:hover, ul#nav li#link-news ul.sub-nav li a.active-cat { background: #cf3c02 !important; }       

ul#nav li#link-life ul.sub-nav li a:hover, ul#nav li#link-life ul.sub-nav li a.active-cat { background: #724375 !important; }       

ul#nav li#link-technology ul.sub-nav li a:hover, ul#nav li#link-technology ul.sub-nav li a.active-cat { background: #02b0cf !important; }

</style>

<div class='MBT-Nav-container'>
      

<ul id='nav'>
<li class='non-vertical-link top-link' id='link-home'><a class='open' href='#'>Home</a></li>
<li class='top-link' id='mbt'><a href='#'>TAB 1</a>       

                    <ul class='sub-nav'>
<li><a href='#'>SUB TAB 1.1</a></li>
<li><a href='#'>SUB TAB 1.2</a></li>
<li><a href='#'>SUB TAB 1.3</a></li>
<li><a href='#'>SUB TAB 1.4</a></li>
</ul>
</li>
<li class='top-link' id='link-entertainment'><a href='#'>TAB 2</a>       

                    <ul class='sub-nav' style='display: none;'>
<li><a href='#'>SUB TAB 2.1</a></li>
<li><a href='#'>SUB TAB 2.2</a></li>
<li><a href='#'>SUB TAB 2.3</a></li>
<li><a href='#'>SUB TAB 2.4</a></li>
<li><a href='#'>SUB TAB 2.5</a></li>
</ul>
</li>
<li class='top-link' id='link-news'><a href='#'>TAB 3</a>       

                    <ul class='sub-nav' style='display: none;'>
<li><a href='#'>SUB TAB 3.1</a></li>
<li><a href='#'>SUB TAB 3.2</a></li>
<li><a href='#'>SUB TAB 3.3</a></li>
<li><a href='#'>SUB TAB 3.4</a></li>
</ul>
</li>
<li class='top-link' id='link-life'><a href='#'>TAB 4</a>       

                    <ul class='sub-nav' style='display: none;'>
<li><a href='#'>SUB TAB 4.1</a></li>
<li><a href='#'>SUB TAB 4.2</a></li>
<li><a href='#'>SUB TAB 4.3</a></li>
<li><a href='#'>SUB TAB 4.4</a></li>
<li><a href='#'>SUB TAB 4.5</a></li>
<li><a href='#'>SUB TAB 4.6</a></li>
<li><a href='#'>SUB TAB 4.7</a></li>
</ul>
</li>
<li class='top-link' id='link-technology'><a href='#'>TAB 5</a>       

                    <ul class='sub-nav' style='display: none;'>
<li><a href='#'>SUB TAB 5.1</a></li>
<li><a href='#'>SUB TAB 5.2</a></li>
<li><a href='#'>SUB TAB 5.3</a></li>
<li><a href='#'>SUB TAB 5.4</a></li>
<li><a href='#'>SUB TAB 5.5</a></li>
</ul>
</li>
<li class='non-vertical-link top-link' id='link-top10'><a href='#'>TAB 6</a></li>
<!--
<li class='non-vertical-link top-link' id='links-1'><a href='#'>TAB 7</a></li>
--> 

<!--
<li class='non-vertical-link top-link' id='links-2'><a href='#'>TAB 8</a></li>
--> 

<!--
<li class='non-vertical-link top-link' id='links-3'><a href='#'>TAB 9</a></li>
-->

<!--
<li class='non-vertical-link top-link' id='links-4'><a href='#'>TAB 10</a></li>
-->
<li style='clear: both;'/>      

            </ul>
</div>
<!--END OF COLOURFUL TABS BY MBT-->

8. Hit Save and all done!
Visit your blogs to see a complete new change to the site layout. The menu will blend both light and dark themes. Have fun. :)