All-Coder | Free Web Source: JQUERY

Showing posts with label JQUERY. Show all posts

Mega Menu with Image or Thumbnails for Blogger

Hacks,Tricks,Blogging Tricks ,Cool Computer Tricks ,Blogger Widget,Mobile Hack Tricks ,Auto like Trick,JavaScript,Coding,Magic Tricks,Facebook Tricks

Visual content holds a certain appeal that websites integrate images to every page, or even operate solely through photos. Now, with the new AJAX navigation menu widget, images can be added to the drop-down menu as well.

The AJAX navigation menu for blogger is a widget designed specifically for the Blogger platform. It is inspired from the Mashable website long before it was given a makeover. Despite the plain and simple inspiration, the drop down menu with images is a huge hit.

It works based on the jQuery library and Blogger JSON Feed API. Function-wise, it works just like a normal drop-down menu when JavaScript is disabled. For it to work online, a blog must be for public visitors, so the Blogger JSON Feed API will function as designed.

Features

Multi-Level Menu Support

The AJAX menu is a multi-level drop-down menu that is based on the standard unordered list of HTML. When a menu contains a sub-menu, it loads on the fly when a user rolls over the main menu. What is great about this is that it saves outgoing traffic, especially on a website that uses a large navigation.

Cross-browser Compatibility

Most AJAX applications will work across different browsers even with other plugins or proprietary technology already installed. The menu with images works in the same premise, instead of being designed for a specific browser. Because there is no telling which browser you or your blog readers would use, the new AJAX drop-down mega menu with images is the ideal option.

Some of the Windows browser supported includes IE5+, Firefox, Google Chrome, Safari Netscape 7+ and Opera 8+. When you're using a Mac, the AJAX menu is supported on Firefox, IE and Safari. If JavaScript is disabled, however, the menu is still accessible, but only as pure CSS menu.

Automatic Sub-Menu Display

With the new AJAX menu, you only need to roll over a menu item and sub-menus will automatically load. No need to click on a menu to get the sub-menu to drop down. This not only saves users' valuable navigation time, but also outgoing traffic.

Menu Styling

AJAX menus can be styled by simply changing the megamenu.js and the CSS style. The former is used when javaScript is turned on, while the latter is when it is turned off. You can adjust the menu parameters manually or you can use ready-to-use templates.

There are plenty of other features, but you would not be able to use or experience them if you do not install the new mega menu with images. What do you need to do then to implement it in your blog or website?

Adding Mega Menu with Images/Thumbnails in Blogger

Step 1. Log in to your Blogger account, then go to the Dashboard. Select the blog where you want to install the new mega menu.

CSS

Step 2. Click on Template, then press the Edit HTML button. Press anywhere inside the code area and use the CTRL + F function to make your search quicker and easier. Type the following tag and hit Enter to find it:

]]></b:skin>

Once you find the tag, add the code below just above/before it:

.megamenu *{margin:0;padding:0;font-family:'PT Sans Narrow'}ul.megamenu{list-style:none;line-height:1;overflow:visible !important}ul.megamenu:after{margin:0;padding:0;content:' ';display:block;height:0px;clear:both}ul.megamenu li{float:left;display:inline;position:relative;text-transform:uppercase}ul.megamenu li a.menu-target:after{content:"";width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #fff;font-size:0;line-height:0;bottom:22px;right:5px;position:absolute}ul.megamenu li a{display:block;line-height:50px;padding:0px 20px;text-decoration:none;border-left:1px solid #000;box-shadow:1px 0 0 0 rgba(255, 255, 255, 0.1) inset;color:#d9d9d9;font-size:14px;transition:all 0.3s ease-in-out}ul.megamenu li a:hover{background:#111111;color:#fff}ul.megamenu ul{position:absolute;display:none;top:100%}ul.megamenu li:hover > ul{display:block}ul.megamenu ul li{z-index:72;min-width:149px;float:none;background:#000;text-shadow:none}ul.megamenu ul li a{text-transform:none;font-weight:normal}ul.megamenu ul li a:hover,ul.megamenuid ul li a.hover{background:#E0E0E0;color:#444}ul.megamenu ul ul{display:none;left:100%;top:0}ul.megamenuid li div.megasubmenu{background:#F9F9F9;position:absolute;width:830px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;-moz-transform:translate(0,30px);-webkit-transform:translate(0,30px);-o-transform:translate(0,30px);transform:translate(0,30px);transform-origin:50% 0;visibility:hidden;opacity:0;color:#888;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);transition:all 0.3s ease-in-out}ul.megamenuid li:hover div.megasubmenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.megamenuid ul,ul.megamenuid ul li{display:block !important;border:0 none !important;margin:0 !important;padding:0 !important}ul.megamenuid ul li{background:none !important;float:left !important}ul.megamenuid ul.leftmenulist{position:absolute;width:18%;left:0;top:0;bottom:0;background:#EEEEEE;border-right:1px dashed #e5e5e5 !important}ul.megamenuid ul.leftmenulist a{border-left:none !important;color:#555}ul.megamenuid ul.rightmenulist{position:relative;display:block;width:81%;float:right;margin:0px 0px 0px !important;background:none}ul.megamenuid ul.rightmenulist li{display:block;overflow:hidden;position:relative;min-height:210px;padding:5px 17px 5px 0px !important}ul.megamenuid ul.rightmenulist li .thumb-container{left:0;width:100%;height:100%;position:absolute;overflow:hidden;font-size:0;line-height:0}ul.megamenuid ul.rightmenulist li .thumb-container img{position:relative;top:10px;padding:0;width:100%;height:100%;display:block}ul.megamenuid ul.rightmenulist li a{display:block;border-left:none !important;padding:0px 5px !important;line-height:1.4;color:#777;font-weight:bold;font-size:14px}ul.megamenuid ul.rightmenulist li a:hover{color:#000;background:transparent}ul.megamenuid .loading-icon{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyKD-WrwyYRtByQP9WLiTK2TqgcoA_K9Bj2HRLn1aRsmE6p7AaNhKJvmXQYl7d8xjZonrpxd-nbRpYIAsSASJ1OqeNvxy3Wr_GrLLLTxhNFxcjjRkWUao4T__JeD6jBTbyoa2kZ5TI5Dc/s1600/wait.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}ul.megamenuid .menu-icon{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #777;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}#megamenuid{background:rgba(0, 0, 0, 0) -moz-linear-gradient(center top , #3d3d3d, #212121) repeat scroll 0 0;background:-webkit-linear-gradient(top,#3d3d3d,#212121);background-color:#3d3d3d;box-shadow:1px 1px 0 0 rgba(255, 255, 255, 0.1) inset;height:50px;width:100%;position:relative;max-width:1000px;margin:0 auto;padding:0px}#megamenuid h5{font-size:16px;margin-top:70px;text-align:center}#megamenuid h5:before{content:"";position:absolute;top:50px;left:50%;width:5px;height:2px;margin-left:-4px;border-left:2px solid black;border-right:2px solid black}#megamenuid h5:after{content:"";position:absolute;top:55px;left:50%;width:10px;height:5px;margin-left:-7px;border-top:2px solid black;border-left:2px solid black;border-right:2px solid black;border-radius:8px 8px 0px 0px}li.search-box{float:right !important;line-height:35px;margin:7px 10px 0 0}li.search-box .search-field{border:none;padding:3px;background:#3F3F3F;color:#fff;width:135px;font-size:13px}li.search-box .search-field:focus{border:none;outline:none;background:#4C4C4C;color:#fff}li.search-box .search-button{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGm-xQntgI2Li0Kn_I1LkPb4CrBrQkTVvKwTbqtZKWwa_6p8AuwiBQ10dv5jpJmVUd5M18ul3AOM57ZNCuV3lgD4FTeqLqwaLpYzpBvnNjm39lOYbkdO8g_29ZsByKKBIEw_JEXizJ2v4/s1600/search.png') no-repeat;border:none;cursor:pointer;padding:5px 10px;transition:all 0.3s ease-in-out}li.search-box .search-button:hover{opacity:0.9}.search-alert{background:#E84C3D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiir537y6NceeEV4Lb7HpVQEZ6wNs5mBrr-T29VgO3e22p9TJY2S4pRBWTTvFtunaZLXrBlPP3gQ1rdVfwHb1aynEb33JtNgwsvUKvaSDZNteX52vTeIUPq-d0TevhgHdtKRMsdSVLHGlU/s1600/search-info.png) no-repeat;background-position:5px;text-transform:capitalize;color:#fff;margin:-5px;padding:0px 15px 0px 40px;display:none;border-radius:5px}

JavaScript

Step 3. Check if your blog has the jQuery plugin already installed. If not, you need to add a few lines of code before the </head> tag (CTRL + F to find it). See the code below:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='http://nine.hax9.com/js/allcoder/megamenu.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('#megamenuid').megaBloggerMenu({
postsNumber : 4,
noThumbnail : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipOAO0HZw-ScV28JLVf7tKv58t7xftNK3jKBiTX_rLn8lf7IaQ0cjTG0mtqyr76GV1mAv-Pie3Mfrq_M83SHtsGwGYx38kNiD7bqKSkBlj7bV3rWPnmnm5IcIX2J7tYDntcCkKn0BDig8/s1600/no_image_available.png'
});
});

$(function(){
$('.search-here').submit(function(e){
    if($('.search-box .search-field').val().length==0){
       $('.search-box .search-alert').fadeIn().css('display','inline-block');
      e.preventDefault();
    }
});
});
</script>

Note

- If jQuery plugin already exist, remove the line in red.
- To change the number of posts, change the 4 value from:

postsNumber : 4

- To add a different thumbnail when a post has no image, replace the url in blue from:

noThumbnail : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipOAO0HZw-ScV28JLVf7tKv58t7xftNK3jKBiTX_rLn8lf7IaQ0cjTG0mtqyr76GV1mAv-Pie3Mfrq_M83SHtsGwGYx38kNiD7bqKSkBlj7bV3rWPnmnm5IcIX2J7tYDntcCkKn0BDig8/s1600/no_image_available.png'

HTML

Step 4. Carefully add the HTML code to ensure that the drop down menu with images will work as designed. There are only three types of URLs that the AJAX Menu accepts and they must be used accordingly.

Label URL: http://yourblogurlblogspot.com/search/label/LABELNAME
Search Query: http://yourblogurl.blogspot.com/search?q=SEARCHQUERY
Label w/ Search Query: http://yourblogurl.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY

Among the three URLs, the Search Query has to be URL encoded using a specific tool.

Step 5. Search the following line using CTRL + F:

<div class='main-outer'>

Just above this line, add the following HTML code:

<ul class='megamenu' id='megamenuid'>
<li><a href='/'>Home</a></li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
</ul>
</li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
</ul></li>
<li><a href='http://ADDURLHERE.com'>Normal Link</a></li>
<li class='search-box'>
<form action='/search' class='search-here' method='get'>
<input class='search-field' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='search-button' type='submit' value=' '/>
</form>
<p class='search-alert'>Search form is empty!</p>
</li>
</ul>
<div class='clear'/>
<div class='clear'/>

Note: replace the text in blue with the label url and the text in red with the name of the label. This is the label that you have added to the Labels settings of your post editor:

Step 6. Click on Save template for all the changes to take effect.

If you can't find the line from step 5, access the Layout tab, click on Add Gadget, and then choose HTML/JavaScript Gadget. Copy the HTML code and paste it inside the box... then press the Save button.

That's it!

Once that is done, your AJAX menu with images will be implemented and ready for you to use. Make sure to choose photos that are relevant to the menu and sub-menus so your website will have cohesive look and appeal. Research shows, however, that text accompanied by any image, even if completely irrelevant, can grab attention.

BLOGGER TRICKS BLOGGER WIDGETS JQUERY TUTORIALS

How to add blogger contact form to blogger static page using CSS

jerry at 7:33:00 AM 0

Hacks,Tricks,Blogging Tricks ,Cool Computer Tricks ,Blogger Widget,Mobile Hack Tricks ,Auto like Trick,JavaScript,Coding,Magic Tricks,Facebook Tricks

n older posts, i posted a post about how to add blogger contact form to blogger static page using CSS. if you are new here then also check it out. so, today i found another tricks to add contact form to static page using simple and short jQuery. Main advantage of jquery than CSS is it allow you to place contact form anywhere you want, like: post, pages, sidebar etc. and this simple and easy method to add contact form to static page. read below full tutorial to know further.

Step :-1 Add JQuery plugin to your blog’s HTML

This widget will work based on jQuery, then your blog must have jQuery plugin. remember : ignore this step, if your blog have already jQuery plugin

Go to blogger –> Template –> Edit HTML
CTRL + F to find </head> tag
Copy and paste below code just above/before </head> in your blogs HTML

Next, Read my blog post to know how to add contact form to blog.

Step :-2 Add CSS and jQuery

Go to blogger dashboard –> Template –> Edit HTML
CTRL + F to find ]]></b:skin> tag
Copy and paste below code CSS code just above/before ]]></b:skin>

.ContactForm {
display: none;
}
.blogger-items-contact .ContactForm {
display: block;
}
.widget.ContactForm .title {
display: none;
}
.widget.ContactForm * {
max-width: 100%;
}

Next, Search for </body> tag
Copy and paste below code just above/before </body>

<script type='text/javascript'>
//<![CDATA[
$('.ContactForm').appendTo('.blogger-items-contact');
//]]>
</script>

Now, save your template.

Step:- 3 Add Short code of Contact form widget

Now, you can add below short code anywhere you want to show contact form in your blog.

<div class="blogger-items-contact"></div>

Let’s add it to Static page ..

In your blogger dashboard, Click “Pages” from the menu
Now click on new page and choose “Blank Page”

In post editor, switch to HTML mode and paste above code and publish it.

That’s it, now see the result

Credit :
This tip is already published in BloggerItems.com, i just Re-shared it here. all credits going to Tien Nguyen founder of ( Blogger Items ). many thanks him for written this awesome tip & jQuery.

FACEBOOK JQUERY POPUP BOX

New Version Of jQuery Popup Facebook Like Box With Timer !

jerry at 2:58:00 AM

Hacks,Tricks,Blogging Tricks ,Cool Computer Tricks ,Blogger Widget,Mobile Hack Tricks ,Auto like Trick,JavaScript,Coding,Magic Tricks,Facebook Tricks

have published Version1 of Facebook type jQuery popup with facebook likebox and today im sharing version2 with much more control options. This one includes a time counter and instead of likebox it displays facebook like box. It also includes a close option. You can also specify whether it to show immediately as soon as a visitor enters your site or after a specified time. The JavaScript code for this widget is created by me HITESH KATARA The installation is extremely easy just follow these steps. This one comparatively loads faster compared to the previous facebook blogger widgets i published so far, and also will worked with all browsers like IE-7+ and other major browsers.

How To Install This Widget To Blogger?

As always, it is jQuery based widget, and your blog must have the jQuery plugin. if your blog already have a latest jQuery plugin, then Ignore this step and directly follow the Second step.
If not add the below snippet code before </head> tag

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

Next?

Customize your settings as you need
Go to Your Blogger Layaout
Add Gadget > HTML/JAVASCRPT> Paste Following Code

<style type='text/css'> #allcoderpopup{ position: fixed; top:100px; z-index:9999; display:none; padding:0px; right:600px; border:10px solid rgba(82, 82, 82, 0.7); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ -webkit-border-radius:8px 8px 8px 8px; -moz-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px; width:400px; height:360px; overflow:hidden; } #allcoderpopup span{ font-size:20px !important; font-weight:bold !important; } #allcoderpopup h1{ background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgduFuVDlmEinti-kmkKCwHlZlrFjqKVR5Ucdvl1gDAtue06JgFb0wCiMnoimTlIVnpzIanYeeXrAS6pDOPYAR8cQYUkZrQ4U98ft54QXemv5WK5XevFDn_TgQ1SY2-enrzfoUlK1CQk1E1/s1600/%255Bwww.gj37765.blogspot.com%255Dh1.png) 98% no-repeat; border:1px solid #3b5998 !important; color:#FFFFFF !important; font-size:20px !important; font-weight:700 !important; padding:5px !important; margin:0 !important; font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important; overflow:hidden !important; } .htmlarea{ font-size:12px !important; font-weight:normal !important; height:265px !important; padding:1px !important; background:#fff !important; border-bottom:2px solid #ddd; overflow:hidden !important; } #acfooter{ text-align:left; background:#F2F2F2 !important; height:56px !important; padding:10px 10px 10px 10px !important; overflow:hidden !important; } #acclose{ float:right; background-color:#eee !important; border:1px solid #ccc !important; color:#111 !important; font-weight:bold !important; padding:5px 8px 5px 8px !important; text-decoration:none !important; display:inline-block !important; font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important; outline:none !important; position:relative !important; font-size:18px !important; margin:1px !important; } #acclose:active{ top:1px; left:1px; } .grabthis{ bottom:80px; font:8px "lucida grande",tahoma,verdana,arial,sans-serif; position:absolute; right:6px; text-align:right; z-index: 99999; } .grabthis a{ color: #000; text-decoration:none; } .grabthis a:hover{ text-decoration:underline; } </style> <script type='text/javascript'> jQuery(document).ready(function() { function allcoder_ppopup() { var sec = 10 var timer = setInterval(function() { $("#acfooter span").text(sec--); if (sec == 0) { $("#allcoderpopup").fadeOut("slow"); clearInterval(timer); } },1000); var acwh = jQuery(window).height(); var acpph = jQuery("#allcoderpopup").height(); var acfromTop = jQuery(window).scrollTop()+50; jQuery("#allcoderpopup").css({"top":acfromTop});} jQuery(window).fadeIn(allcoder_ppopup).resize(allcoder_ppopup) //alert(jQuery.cookie('sreqshown')); //var acww = jQuery(window).width(); //var acppw = jQuery("#allcoderpopup").width(); //var acleftm = (acww-acppw)/2; var acleftm = 500; //var acwh = jQuery(window).height(); //var acpph = jQuery("#allcoderpopup").height(); //var acfromTop = (jQuery(window).scrollTop()+acwh-acpph) / 2; jQuery("#allcoderpopup").animate({opacity: "1", left: "0" , left: acleftm}, 0).show(); jQuery("#acclose").click(function() { jQuery("#allcoderpopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});}); </script> <div id="allcoderpopup"> <h1>Join us on Facebook</h1> <div class="htmlarea"> <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fkatarahitu&width=400&colorscheme=light&show_faces=true&border_color=%23fff&stream=false&header=false&height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true"></iframe> <div class="grabthis"> By <a href="http://www.allcoder.blogspot.com/" target="_blank">All-coder</a> / <a href="http://all-coder.blogspot.in/2013/02/new-version-of-jquery-popup-facebook_16.html" target="_blank">+Get This!</a>

</div>
</div>
<div id="acfooter">
Please wait..<span>10</span> Seconds
<a href="#" id="acclose" onclick="return false;">Cancel</a>
</div>
</div>
<!-- End popup -->

Change Facebook Username "KataraHitu" to Yours Facebook Username
Change Your Timing as given there '10'
You Can Add your text toward Cancel Anything Like Skip,Not now etc

If Any Problem Ask Freely :)

Blog Ethic Blogger News Blogger Use Blogging Tips Cool Widget For Social Sharing Feeds HTML And CSS Tricks JQUERY

Add Page Peel effect with jQuery & CSS to Blogger

jerry at 6:02:00 AM 0

Hacks,Tricks,Blogging Tricks ,Cool Computer Tricks ,Blogger Widget,Mobile Hack Tricks ,Auto like Trick,JavaScript,Coding,Magic Tricks,Facebook Tricks

You may saw this awesome trick used by many professional and other Websites/Blogs.This Page peel is used to Show ads ,this page peel attract Blog visitors and they may have the tendency to click on ad and your earnings increases.Also this page peel can be used to increase your Subscribers.Here I am going to show you how to add a page peel trick to Blogger blog.

Click the link below to view demo

View Demo

Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)

Copy the below code inside <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Add Page Peel Effect To Blogger Blog

Step 2 :

Go to Design->Edit HTML
Copy and paste the below code above </head>

Step 3:

Copy the below code inside <body> or <body ...............>

Change can the RED highlighted text with url image url that you want,else leave it default(needn't change)
Change the BLUE highlighted text with your feed URL or place your advertisement

Save the Template

You are done..! If any problem persists please do comment.

Cool Widget For Social Sharing HTML And CSS Tricks JQUERY

Fancy CSS3 & jQuery Lavalamp Menu For Blogger

jerry at 6:11:00 AM 0

Hacks,Tricks,Blogging Tricks ,Cool Computer Tricks ,Blogger Widget,Mobile Hack Tricks ,Auto like Trick,JavaScript,Coding,Magic Tricks,Facebook Tricks

I have shared one jQuery menus on Hacking And Blogging so far,first one was Drop Down Cool+ Stylish Menu In Blogger Drop Down Menu and second This time I am sharing an amazing CSS3 & jQuery lavalamp menu and as mentioned in title it works with CSS3 and jQuery.You can use this menu in 6 colors by just changing a word in the HTML code.This menu is designed and I have bloggerized it to works perfectly with any blogger blog.Now lets go to the tutorial and see how to add this menu to blogger blog.

How To Add This Menu TO Blogger?

For easy understanding I am dividing the tutorial in three parts & they are as below,

Adding Scripts
Adding Styles
Adding The Menu

Adding Script

Go to Blogger Dashboard > Template

Click on Edit HTML
Hit Proceed
Find below code in your template

</head>

add below code just above it,(If you have already added a jQuery library to your blog then delete the highlighted code)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.helperblogger.com/lavalamp-menu.js" type="text/javascript"></script>

Adding Style

Now find below code,

]]></b:skin>

add below CSS code immediately before it,

/*LAVALAMP MENU START*/

.lavalamp {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
 -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
 height: 18px;
        font-family: calibri;
}

.magenta {
 background : rgb(190,64,120);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 border: 1px solid #841144;
 
}

.cyan {
 background : rgb(64,181,197);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 border: 1px solid #2f8893;
 
}

.yellow {
 background : rgb(255,199,79);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 border: 1px solid #c08c1f;
 
}

.orange {
 background : rgb(255,133,64);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 border: 1px solid #c04f11;
 
}

.dark {
 background : rgb(89,89,89);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 border: 1px solid #272727;
 
}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
 color: #fff;
 text-shadow: 0 -1px 0 rgba(0,0,0,.40);
 
}

.lavalamp a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}

.lavalamp ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}

.lavalamp ul li {
    list-style: none;
    float:left;

    text-align: center;
    }

.lavalamp ul li a {
    padding: 0 20px;
    text-align: center;
    }

.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}

/*LAVALAMP MENU END*/

Now save your template.

Adding The Menu

Now come to Page Layout

Now come to Page Layout
Click on Add a Gadget (Below Header)
Choose HTML/JavaScript
Copy and paste below code inside it,

<div class="lavalamp dark">
 <ul>
  <li class="active"><a href="">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contacts</a></li>
  <li><a href="#">Back to Article</a></li>
  <li><<a href="#">How it Works?</a></li>
 </ul>
 <div class="floatr"></div>
</div>

Replace # with the links
Replace Home,About,Blog. etc. with your link text which you want to appear on the menu.
If you want to change background color of the menu then replace <div class="lavalamp dark"> with one of the code below.

<div class="lavalamp">
<div class="lavalamp magenta">
<div class="lavalamp cyan">
<div class="lavalamp yellow">
<div class="lavalamp orange">
<div class="lavalamp dark">

Finally save your widget and you are done.

I have tried my best to keep this tutorial as easy as possible,if still you are getting any single problem then feel free to share it below via comments,I will try to give reply as soon as time allows.

Pages

AllCoder

Mega Menu with Image or Thumbnails for Blogger

Features

Multi-Level Menu Support

Cross-browser Compatibility

Automatic Sub-Menu Display

Menu Styling

Adding Mega Menu with Images/Thumbnails in Blogger

CSS

JavaScript

HTML

How to add blogger contact form to blogger static page using CSS

Step :-1 Add JQuery plugin to your blog’s HTML

Step :-2 Add CSS and jQuery

Step:- 3 Add Short code of Contact form widget

New Version Of jQuery Popup Facebook Like Box With Timer !

Add Page Peel effect with jQuery & CSS to Blogger

Add Page Peel Effect To Blogger Blog

Fancy CSS3 & jQuery Lavalamp Menu For Blogger

Random Post

Popular Posts

Recent Posts

Random Post

Followers

Pages