New CSS cloud widget for your tags/topics

Display your Tags/topics in new CSS cloud widget

This new widget will display all your topics/tags in a new fresh look on your sidebar or wherever you want to show this widget . The lovely mouse hover effect gives it to a new charming look , you can see it in next snapshot given below or hanging in my right sidebar .

Google launched New Google Plus Followers Gadget To Blogger!

Introducing to The New Google Plus Followers widget

The New google plus widget will Highlight your total Google+ audience (both its size and some friendly faces) and offer visitors the chance to follow you on Google+.It works exactly like Facebook and twitter widget because Like both of them it also displays the Faces of the followers in the form of small thumbnails. Moreover, it also has a Follow button that allows new users to follow you on Google+. Thus, it increases the no. of visitors of your site either via Google+ Stream, or by your site. It also integrated with an follow button by which users gets follow your Google Plus Fan page with a single click.

Top 25+ Best Social Bookmarking And Sharing Widget/Button For Blogger

Choose best social sharing widgets and buttons for your blog can helped you a lot and making your site more sharable. So I have making and collect the top  best Social Sharing widgets for blogger.So below are the best sharing widgets choose one of your best widget and add it in your website.

<<<<<<<<<<<<<<These widgets are being used by all top most blogger of the world. >>>>>>>>>>>>

1.Social Bookmarking Widget For blogger With Bubble Effect

2.Get The Monster Social Bookmarking Widget For Your Blog

10 Free Premium Looking WordPress Themes with Live Demo

Now a day everyone knows blogging and blog design. How important a blog design a only a blogger and designer can tell. Most of blogger thought how to get Free Premium WordPress Themes for their new Self hosted WordPress blogs. Here are 10 Free Premium Looking WordPress Themes.

10 Free Premium Looking WordPress Themes

Top 5 Best Plugins To Speed Up WordPress Websites!

People who use wordpress for publishing their articles, blogs, company information about products or services or having website based on wordpress, would surely like to know about the best wordpress plugins for faster website loading. As a slow loading web page really irritates users and also slows down the overall performance. Let me Explain you little about caching effect on your Blog speed.

How to Change Cursor in Blogger or Wordpress Websites

Have you already dreamed of customizing your blog or website to something really unique, adding contrasts, background and adding some cool widgets, well than its time to change your mouse cursor for giving any interesting effect to your wiggling mouse.
We have also posted other effects related to mouse like adding falling stars effect and many more well changing mouse cursor does not include any typical scripting or anything but just a small CSS is added to change your mouse to any image or .cur file.
So now you can follow the below tutorial on how it can be done in your blogger or wordpress blogs, and soon you will have your cursor changed to the one you have mentioned.
1. Go to Blogger > Template > Edit HTML.
2. Press Ctrl + F and search for </head> tag and paste the below code above it.

<style type='text/css'>body,a,a:hover{

cursor:url(http://safir85.ucoz.com/bdlab-blogspot/COOL_GREEN_POINTER.cur),progress}</style>

3. Now your code is placed and you can save your template, the .cur provided in the above code is green in color you can change that URL to your cursor urls.
That’s it this will work like a charm, if you are on wordpress you can follow the same procedure and paste the code right above the </head> tag I cannot explain about wordpress in brief as I do not use it.

How to add Leaf Falling Effect in Blogger using JavaScript

Adding effects like snow falling, stars falling and hearts falling have been posted earlier on this blog, but this is another version of falling leaves in blogger for giving it much more natural look, combined by nature. Well this effect is simply created using images and jQuery and it works everytime someone visits your blog and he see leaves falling from top. Well thanks too itechcolumn for this effect, so jump in too below tutorial and have fun.

Falling Hearts ♥ Blogger Widget for Valentines Day

Share some love with all your visitors now you can embed a heart falling widget in your blog for some romantic look, it looks simply awesome and installs just in seconds as explained below. The below code is manipulated from the Snow Widget so you may think that why snow is mentioned in the below code, well we just changed the image to the heart so you can also change it to anything according to your will.

Add Falling Stars Effect on Mouse Movement in Blogger

Now add simple falling stars effect when your mouse moves using a simple JavaScript trick, by just adding some lines of codes in your html section you can easily show stars fallings when ever your mouse makes some motion. This effect is compatible with all the modern browsers so you will not have any problems using this script.

Get Falling Snow Effect on Blogger for Christmas

Christmas is coming and as you all know Christmas is the occasion of snow, peace and ultimate cool fun so if you want to dress up your blog with some snow effect we are here with the code which you can apply to your blog to get that awesome snow effect really easily. It will enhance your overall visitors experience by giving them a cold effect while they browse your website. So you can check the below screenshot on how snow will look on your website.

20 SEO Terms You Should Know

If you have a website or blog, or if you work with anything related to the Internet, you’ll certainly need to know a bit about search engine optimization (SEO). A good way to get started is to familiarize yourself with the most common terms of the trade, and below you’ll find 20 of them. (For those who already know SEO, consider this post as a refresher!).

1. SEM: Stands for Search Engine Marketing, and as the name implies it involves marketing services or products via search engines. SEM is divided into two main pillars: SEO and PPC. SEO stands for Search Engine Optimization, and it is the practice of optimizing websites to make their pages appear in the organic search results. PPC stands for Pay-Per-Click, and it is the practice of purchasing clicks from search engines. The clicks come from sponsored listings in the search results.

2. Backlink: Also called inlink or simply link, it is an hyperlink on another website pointing back to your own website. Backlinks are important for SEO because they affect directly the PageRank of any web page, influencing its search rankings.

Free Blog/Website Widgets and Toolbar to Boost Up Your Traffic.

As I am Blogging since last year but I never Tried to search Over internet all the widgets and free toolbar
Today I saw one of them in my friends Website and also in Every second website I found a toolbar which is powered by different different Service providers.

I found Three best and Different toolbar for any Blog/Website.It will surely increase Your traffic and page views and also make it Share-able to audience.


So here the List

1.Alexa Toolbaar
Basically this toolbar create a toolbar which can be installed by your customer with Firefox/IE

So Goto The Alexa.com Register Your Blog/Website and create a Free Toolbar
Look Like this:

Add Floating Facebook Share & +1 Button Next To Posts in Blogger

Add Floating Facebook Share & +1 Button Next To Posts in Blogger

Ever wondered to create a Mashable type floating sharing widget for your blogger blogs? There you have it today! We released a sliding, scrolling widget last month which contained major social media sharing buttons but some of you complained that the widget do not work properly with the new blogger templates so to keep things more flexible, we are releasing yet another version of a floating widget which contains the best social buttons like Facebook Share/like, Twitter and Google +1 button. All in one. I have not used any scripts this time and this widget works purely on CSS and HTML and is fully compatible with all major browsers. You can see this sticky widget to left of my blog post. I have made sure to keep the installation process as easy as possible so be confident to try this one out to better increase your social engagement and thereby your page views.

 Did you check the Latest version? Floating Sharing With Pinterest and Others

How to add a comment form beneath your blog posts

How to add a comment form beneath your blog posts

Blogger have developed an inline (embedded) comment form which can be enabled through Blogger in Draft. This is probably the most requested feature for Blogger, and I'm sure many of you will want to use this straight away!

To enable inline comments for your Blogger powered blog, you need to log into your dashboard through Blogger in Draft. Then go to Settings>Comments and scroll down the page to see the new "Comment form placement" setting:

Check the radio setting for "Embedded below post" which will enable the display of the comment form below your blog posts.

Create a Drop Down Menu In Blogger

Create a Drop Down Menu In Blogger

Update: We have published almost 9 more menus like this one. To get them all just use the search box and type drop down menu. If you wish to add the same menu to Blogger Template Designer templates then read this post -> Custom Drop Down menu image
Why do you run after scripts such as jquery while you can use simple CSS and HTML to create beautiful drop down menus for your blog. I already shared a list of 30 Navigation menus and now you need to learn how to create a drop down menu in a navigation. I am sharing a simple code here that can be fully customize to make your preferred changes. So lets get to work!

Live Demo

How To Create a Drop Down Menu?
A drop down menu is needed when you have too much content on your blog or you love keeping things organized. To add a drop down menu to your blogger blogs do this:

    Go To Blogger > Design > Page Elements
    Select a HTML/JavaScript Widget just under the header and paste the following code inside it,

drop down menu

    <div id='techediannavbar'>
          <ul id='techediannav'>
            <li>
              <a href='#'>Home</a>
            </li>
            <li>
              <a href='#'>About</a>
           </li>
            <li>
              <a href='#'>Contact</a>
            </li>
      <li>
               <a href='#'>Sitemap</a>
                <ul>
                    <li><a href='#'>Sub Page #1</a></li>
                    <li><a href='#'>Sub Page #2</a></li>
                    <li><a href='#'>Sub Page #3</a></li>
                  </ul>
            </li>
          </ul>
        </div>

Replace # with your Page Links and the bolded text with relevant page names. The yellow highlighted code is responsible for the drop down menu. You can copy and paste it under any tab you want just before </li>
To add another tab just paste this code above </ul>

    <li>
              <a href='#'>Tab Name</a>
            </li>
           

    3.   Now Go to Design > Edit HTML
    4.   Backup your template and search for ,

    ]]></b:skin>

     3.   Just above it paste the code below,

    /*----- TECHEDIAN Drop Down Menu ----*/

    #techediannavbar {
        background: #060505;
        width: 960px;
        color: #FFF;
            margin: 0px;
            padding: 0;
            position: relative;
            border-top:0px solid #960100;
            height:35px;
    }

    #techediannav {
        margin: 0;
        padding: 0;
    }
    #techediannav ul {
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #techediannav li {
        list-style: none;
        margin: 0;
        padding: 0;
            border-left:1px solid #333;
            border-right:1px solid #333;
            height:35px;
    }
    #techediannav li a, #techediannav li a:link, #techediannav li a:visited {
        color: #FFF;
        display: block;
       font:normal 12px Helvetica, sans-serif;    margin: 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
          
    }
    #techediannav li a:hover, #techediannav li a:active {
        background: #BF0100;
        color: #FFF;
        display: block;
        text-decoration: none;
            margin: 0;
        padding: 9px 12px 10px 12px;
          
      
          
    }
    #techediannav li {
        float: left;
        padding: 0;
    }
    #techediannav li ul {
        z-index: 9999;
        position: absolute;
        left: -999em;
        height: auto;
        width: 160px;
        margin: 0;
        padding: 0;
    }
    #techediannav li ul a {
        width: 140px;
    }
    #techediannav li ul ul {
        margin: -25px 0 0 161px;
    }
    #techediannav li:hover ul ul, #techediannav li:hover ul ul ul, #techediannav li.sfhover ul ul, #techediannav li.sfhover ul ul ul {
        left: -999em;
    }
    #techediannav li:hover ul, #techediannav li li:hover ul, #techediannav li li li:hover ul, #techediannav li.sfhover ul, #techediannav li li.sfhover ul, #techediannav li li li.sfhover ul {
        left: auto;
    }
    #techediannav li:hover, #techediannav li.sfhover {
        position: static;
    }
    #techediannav li li a, #techediannav li li a:link, #techediannav li li a:visited {
        background: #BF0100;
        width: 120px;
        color: #FFF;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        margin: 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border-bottom:1px dotted #333;
      
    }
    #techediannav li li a:hover, #techediannavli li a:active {
        background: #060505;
        color: #FFF;
        display: block;     margin: 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    }

Make these changes:

    Change #060505 to change background color of the Main menu
    Change  the yellow highlighted text to change font color, size and family
    Change #BF0100 to change the background of a tab on mouse hover
    Change #BF0100 to change the background color of the drop down menu
    Change #060505 to change the background color of drop down menu on mouse hover

      4.    Save your template and you are done!

Colorful Tabs: A JQuery Menu For Blogger

Colorful Tabs: A JQuery Menu For Blogger

After having published and designed over 100+ Navigation Menus for Blogger, both with horizontal and vertical list view, today we would like to share a beautiful menu that has remained the favorite choice of all Techedian clients so far. This menu changes color for each tab on mouse hover. It uses simple JavaScript functions to produce neat and clean transition effects. Instead of displaying the sub menu items in traditional vertical drop down list, we aligned them with one another to fit into a single line. Unlike other menus, this widget would easily fit any BlogSpot template without design conflicts. It is positioned at the top most section of your blog to attract readers the most. The installation steps are fun to try and extremely easy. The Menu works fine on all major browsers i.e: IE7+, Safari, Chrome, Mozilla and Opera.  Lets add it to your blogs and get rid of any existing bulky menu that proved no less than a trouble.

If you are interested to learn how to create a menu from scratch and add Jquery effects to it then read the previous part of this series.

Navigation Menu Tutorials

1. How To Create a Drop Down Menu?

2. Convert any Horizontal Menu List into a Drop Down Menu

3. Add CSS3 Transitions To a Drop Down Menu

4. Create Animated Drop Down Menu With CSS3 Transitions - Coming Soon..

5. Add Jquery Slide Toggle Effect To a Drop Down Menu

6. Colorful Tabs: A JQuery Menu For Blogger

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://techedian.blogspot.in.googlecode.com/files/jquery-pack-colourful.js' type='text/javascript'></script>
    <script src='http://techedian.blogspot.in.googlecode.com/files/jcarousel-colourful.js' type='text/javascript'> </script>
    <script src='http://techedian.blogspot.in/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='&quot;loading&quot; + data:blog.mobileClass'>

  
7.   Just below it paste the following compressed code:

<!--START OF COLOURFUL TABS BY TECHEDIAN-->
<style>
/*------- Colourful Tabs Menu by http://techedian.blogspot.in/ -------*/
.TECHEDIAN-Nav-container {
border: 1px solid #cfcfcf;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsiLqeham3WnGbblTm1HsQXS3AtHEliGepNuowdkI83YqwUkWCTVZvVPWPyBtsxGcnGLUSSySdghARNHA1ByjevgSYVhlPw0ipzzBggSDiPukTADu6Vo-buPtT3jgTxua_iz_43zNQlPQ/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/AVvXsEjsiLqeham3WnGbblTm1HsQXS3AtHEliGepNuowdkI83YqwUkWCTVZvVPWPyBtsxGcnGLUSSySdghARNHA1ByjevgSYVhlPw0ipzzBggSDiPukTADu6Vo-buPtT3jgTxua_iz_43zNQlPQ/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/AVvXsEhASRzkdpuFk9-lya10qdti6p3Vlt4RpkjYEUVWNQv9QdBlAlzoizB6SHmBedWbF0IvaeKzdHxMZMSxdbbNLuXErpvRiEsC5R7NLmd1wPIjH3ZrESIEdGdQEuGvlCA3w1EEwsSOncCph2o/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#techedian a:hover, ul#nav li#techedian 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/AVvXsEge0lf2A0ZZIwZTf43iCUyXaoOWubWfrIe1YuZEOubS83-pB77HvzX6ahULLOE5cFrO9wjSCA9jklTk3P5n9PrKeBHOrjM6B4N6phc2RyfOO2izEZESRAeaicw7YJ9H5ScYgoVH1AaUxZQ/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/AVvXsEge0lf2A0ZZIwZTf43iCUyXaoOWubWfrIe1YuZEOubS83-pB77HvzX6ahULLOE5cFrO9wjSCA9jklTk3P5n9PrKeBHOrjM6B4N6phc2RyfOO2izEZESRAeaicw7YJ9H5ScYgoVH1AaUxZQ/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#techedian ul.sub-nav { background: #6f7987 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGRyPPLAfF8-HHThGrOzha8CSCT3o9A5rzDujPxiTtuPakXaiormtIkY7fkNEw-cxTJcgA91C9Wx22s78hoSwti0tODAEF67Iv1p2LMnvV9tvBLwGtbnW3DqrZMo5_jsyWqNxO6N5zQRw/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/AVvXsEjbYZlpm21xIFK_bGFM6-GtC2LATA6cT8vJW5DdeWaj4RWPP8FK8qzbSVlcABk_cfFyIur6c0CTowjXoSk9zbWTgwPuF3pkTShf3e33Yk6QWmimtU5EJbF76OMJWvd4soTdE4bXOgc9bOY/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/AVvXsEhHIic__1-UY14EtqfQgZ02llV6TG2oGbpNzrz9ra33wVdZYjEU69cLbQelzh7XLptwpYRKH1_qXooS75deMWKP4uM_IXnYkJyPQz4WUS3Nbftt4dP_BK8ZReZntv2fK4v8yd1Qc2WYXFg/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/AVvXsEhqLf_fWX8ejTwottAi2tzuPtoxyUErjZ05yba3aInHJWOS5D0iKS4h20I-NwgKTtQloa3328nOd5lXnS8GJBpuQQOLth9k51XNcRXim5wmIB4eOQSmdg8KDrL1KLcQTwK0of0y3TSuwuU/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/AVvXsEh5Rn-1gP5pyCyxMsObVhig3DO1UC-EI-djPeJ2-RZZWLXObWdG9nGG-SGccJ766buuRvGi6sTGewu6ozfifCX0TAw6MOF_na-7AmEDGaTuHdIfCn3icloRP9js6MT5sn8z12It8GJNaiQ/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#techedian ul.sub-nav li a:hover, ul#nav li#techedian 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='TECHEDIAN-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='techedian'><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 TECHEDIAN-->

  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. :)

Customizations Guide:

The code is written in a neat way so that any one may easily change, add or delete the tabs.

• Replace # with URL of the page and replace TAB names with Page Title
• To change the width of the menu edit width: 960px
• To create a new tab in any sub menu simple paste this code above </ul>

<li><a href='#'>SUB TAB</a></li>

• Tab 7 to Tab 10 are disabled. If you want to activate any one of it then simply remove the comment tags across it. i.e <!-- before it and --> after it
• For more customization tips, just post me a comment!

Is it SEO friendly?

Simple CSS and HTML menus are way better than flash menus because they use the hyperlink tag along with anchor text. Search engines crawl them better and they appear clearly in SITE LINKS. This menu has everything that robots would love. It has a Clear structure and uses no fancy Jquery functions which could lead to High load time.

Credits

The menu design is inspired from blogs.com, scripts and code structure is made compatible with blogger by T(techedian)- blog. You are most welcomed to redistribute the code as long as you attach attribution and credits back to this page.

Need help?

The code is self explanatory and would not trouble many of you. However if you want to further customize the menu then you are most welcomed to ask us for any help needed. Please always share your BLOG URL while posting. I hope this little effort may prove helpful for most of you. Thank you for taking time and reading this tutorial. Peace and blessings pals. :)