Add Roseic Mega Menu in Blogger

 

LIVE DEMO  

   

1.     Login to Blogger > Dashborad
2.     Click on Drop Down Menu and select Layout
3.     Add a HTML/JavaScript Gadget
4.     Paste below code in it.

<style>/--- Roseic Drop Down Menu ---/ ul.oe_menu { font-family:Arial, Helvetica, sans-serif; border:1px solid #fff; margin:0; padding:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkAAnVWFOaqgwRypVIfx-k7h8GgXp6k2gbG0GCeb9hK3sHDtNk4A0NcRWQNIWR7BNhQ6Jxu63jUhiTnPaBNMJW9xrc8JEF8HvdrmZFRRMeI9hHc6FiNWEqu6pc4tQ2_2eK9DywOJWYSRwO/s1600/bg.png) repeat-x; } } .clear { clear: both; } a { color: #3299bb; text-decoration: none; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } ul.oe_menu { list-style:none; width:960px; float:left; clear:both; margin:0; padding:0; position:relative; top:-5px; } ul.oe_menu li { float:left; position:relative; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOOc1w-gfLaYb3C_MmuikKh4Qk5ZwuENk50q6EGaFRL9VOTE3tjcH2a0Yz-NUMvTaMboSz-ppi11lWn5tU91lYM7Z1MKTBflgra3101e4QiC88HWzZTtTXxtCAUOeyKHw-vM1pICMRG9JV/s1600/rosiec-tab.png) no-repeat 100% 100%; margin:0; padding:0; } ul.oe_menu li a .home { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDgeJ4FJvjWX3kiyLLf3vjIyk5kaXtIU__-rFLl3fZIyzhBxe9wnqT02M_4sZLQrgljvMlN3SfdflHg0hrPj0goulnJsyh0ytbbir2NxfLbakmvYtRYeBofvSmq9KP0qP3EQziLTTlP3Jv/s1600/home-icon.png) scroll 20px 0px no-repeat; width:59px; margin:0; padding:10px 0; *padding:0; display:block; float:left; position:relative; } ul.oe_menu li a .home:hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDgeJ4FJvjWX3kiyLLf3vjIyk5kaXtIU__-rFLl3fZIyzhBxe9wnqT02M_4sZLQrgljvMlN3SfdflHg0hrPj0goulnJsyh0ytbbir2NxfLbakmvYtRYeBofvSmq9KP0qP3EQziLTTlP3Jv/s1600/home-icon.png) scroll 20px -44px no-repeat; padding:10px 0; *padding:0; display:block; float:left; position:relative; } ul.oe_menu li .no-p-m { margin:0; padding:0; height:41px; } ul.oe_menu li .all_categries_link { color:#006699; } ul.oe_menu li .menu { display:block; color:#666666; text-decoration:none; font-size:15px; padding:13px 17px; margin:1px; display:block; float:left; } ul.oe_menu li .menu:hover, ul.oe_menu li.selected .menu { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5cq02gm9xiRGNxSsqlIyGLXgMXWMuJKZToIID_hYx9X5nUIyWDdDiv7ovt4lIZduv8v4rI76f0aztGrQUrf3vRrKRgHKE-r8UyMSWfNq9oSArmcSiB30GUtY8M3bXXYRd04h2bEz31RTk/s1600/bg-tabs.png) bottom repeat-x; color:#fff; background-position:-2px 0px; } ul.oe_menu div { position:absolute; border:1px solid #1b63ab; top:46px; *top:44px; left:1px; background:#fff; display:none; zoom:1; } ul.oe_menu div ul.oe_full { width:100%; } li.oe_heading { color:#333; font-size:16px; margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid #ddd; clear:both; } span.reference { position:fixed; left:0px; bottom:0px; width:100%; font-size:10px; line-height:20px; text-align:right; height:20px; } span.reference a { color:#aaa; text-transform:uppercase; text-decoration:none; margin-right:10px; } span.reference a:hover { color:#ddd; } .bg_img img { width:100%; position:fixed; top:0px; left:0px; } ul.oe_menu li div.one-clm { width:172px; padding:0 15px 0 0; } ul.oe_menu li div.two-clm { width:370px; padding:0 15px 0 0; position:absolute; } ul.oe_menu li div.three-clm { width:555px; float:left; padding:0 15px 0 0; } ul.oe_menu li div dl { width:170px; float:left; font:Arial, Helvetica, sans-serif; margin:15px 0 15px 15px; *margin:0px 0 15px 10px; *position:relative; *top:10px; } ul.oe_menu li div dl dt { display:block; width:92%; padding:0 0 5px 0; margin:0 0 5px 0; border-bottom:1px dashed #f1f1f1; float:left; font:bold 14px Arial, Helvetica, sans-serif; color:#999; } ul.oe_menu li div dl dd a { background:none; color:#999; font:12px Arial, Helvetica, sans-serif; padding:3px 0; width:92%; display:block; } ul.oe_menu li div dl dd a:hover { text-decoration:none; color:#003399; } /--- Roseic Drop Down Menu ---/ </style> <!-- The JavaScript Drop Down Start--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script type="text/javascript"> $(function() { var $oe_menu = $('#oe_menu'); var $oe_menu_items = $oe_menu.children('li'); var $oe_overlay = $('#oe_overlay'); $oe_menu_items.bind('mouseenter',function(){ var $this = $(this); $this.addClass('slided selected'); $this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){ $oe_menu_items.not('.slided').children('div').hide(); $this.removeClass('slided'); }); }).bind('mouseleave',function(){ var $this = $(this); $this.removeClass('selected').children('div').css('z-index','1'); }); $oe_menu.bind('mouseenter',function(){ var $this = $(this); $oe_overlay.stop(true,true).fadeTo(200, 0.6); $this.addClass('hovered'); }).bind('mouseleave',function(){ var $this = $(this); $this.removeClass('hovered'); $oe_overlay.stop(true,true).fadeTo(200, 0); $oe_menu_items.children('div').hide(); }) }); </script> <!-- navigation java script ends here --> <ul id="oe_menu" class="oe_menu" style="position:relative;"><li><a class="menu" href="http://roseicmegamenu.blogspot.com/"><span class="home"></span></a> </li><li><a class="menu" href="#">Blogging</a> <div class="two-clm"><dl><dt>Category</dt><dd><a href="#">Widgets</a></dd> <dd><a href="#">Tutorials</a></dd> <dd><a href="#">JavaScript</a></dd> <dd><a href="#">Generators</a></dd> <dd><a href="#">CSS Widgets</a></dd> </dl><dl><dt>Brands</dt><dd><a href="#">Blogger</a></dd> <dd><a href="#">Wordpress</a></dd> <dd><a href="#">Tumbler</a></dd> <dd><a href="#">Joomla</a></dd> <dd><a href="#">Square Space</a></dd> <dd><a href="#">LiveJournal</a></dd> </dl></div></li><li><a class="menu" href="#">Money Online</a> <div class="one-clm"><dl><dt>Brands</dt><dd><a href="#">Adsense</a></dd> <dd><a href="#">Citika</a></dd> <dd><a href="#">Ad Brid</a></dd> <dd><a href="#">Yahoo</a></dd> <dd><a href="#">Bing</a></dd> <dd><a href="#">...View More</a></dd> </dl></div></li><li><a class="menu" href="#">Social Media</a> <div class="three-clm"><dl><dt>Online Media</dt><dd><a href="#">eNews</a></dd> <dd><a href="#">ePaper</a></dd> <dd><a href="#">eBusiness</a></dd> <dd><a href="#">eGold</a></dd> <dd><a href="#">eSilver</a></dd> <dd><a href="#">eSports</a></dd> <dd><a href="#">View More...</a></dd> </dl><dl><dt>Multi Media </dt><dd><a href="#">TV News</a></dd> <dd><a href="#">News Paper</a></dd> <dd><a href="#">TV Anchor</a></dd> <dd><a href="#">View More...</a></dd> </dl><dl><dt>Brands</dt><dd><a href="#">Aaj Tak </a></dd> <dd><a href="#">News 24 </a></dd> <dd><a href="#">Star News </a></dd> <dd><a href="#">ABP News </a></dd> <dd><a href="#">P7 News</a></dd> <dd><a href="#">Aawaj</a></dd> <dd><a href="#">...View More</a></dd> </dl></div></li><li><a class="menu" href="#">Social Sites</a> <div class="three-clm"><dl><dt>Facebook</dt><dd><a href="#">IT</a></dd> <dd><a href="#">Accounts</a></dd> <dd><a href="#">Management</a></dd> <dd><a href="#">Marketing</a></dd> <dd><a href="#">Softwares</a></dd> <dd><a href="#">Hardware</a></dd> <dd><a href="#">View More...</a></dd> </dl><dl><dt>Google</dt><dd><a href="#">Web</a></dd> <dd><a href="#">Images</a></dd> <dd><a href="#">Translate</a></dd> <dd><a href="#">Google Plus</a></dd> <dd><a href="#">View More...</a></dd> </dl><dl><dt>Twitter</dt><dd><a href="#">Follow</a></dd> <dd><a href="#">Tweet</a></dd> <dd><a href="#">Share</a></dd> <dd><a href="#">Retweet</a></dd> <dd><a href="#">Unfollow</a></dd> <dd><a href="#">View More...</a></dd> </dl></div></li><li><a class="menu" href="#">CSS</a> <div class="one-clm"><dl><dt>CSS Widget</dt><dd><a href="#">Codes</a></dd> <dd><a href="#">Classes</a></dd> <dd><a href="#">ID</a></dd> <dd><a href="#">View More...</a></dd> </dl></div></li><li><a class="menu" href="#">Books</a> <div class="one-clm"><dl><dt>eBooks</dt><dd><a href="#">Adsense Secrets 5 </a></dd> <dd><a href="#">Let Us C</a></dd> <dd><a href="#">Fundamentals</a></dd> <dd><a href="#">JavaScript</a></dd> <dd><a href="#">Core Java</a></dd> <dd><a href="#">What is Blogging</a></dd> <dd><a href="#">View More...</a></dd> </dl></div></li><li><a class="menu" href="#">Tools</a> <div class="one-clm"><dl><dt class="oe_heading">Blogging Tools</dt><dd><a href="#">HTML Editor</a></dd> <dd><a href="#">HTML Encoder</a></dd> <dd><a href="#">View More...</a></dd> </dl></div></li><!-- <li><a class="menu" href="http://roseicmegamenu.blogspot.com">Gifts</a> <div class="one-clm"><dl><dt class="oe_heading">Gifts</dt><dd><a href="#">Fun Gifts</a></dd> <dd><a href="#">USB Gadgets</a></dd> <dd><a href="#">Clocks</a></dd> <dd><a href="#">View More...</a></dd> </dl></div></li>--><li><a class="menu" href="#">Help</a> <div class="one-clm"><dl><dt class="oe_heading">Offers</dt><dd><a href="#">Combo</a></dd> <dd><a href="#">View More...</a></dd> </dl></div></li></ul>

• Finally Save Your Widget and You are done.

Make Changes....!

    Replace it # with your link.