Saturday, August 15, 2015

In Blogger, Gadgets by Anuj sunar 12:47 AM

How To Add Mega Dropdown Menu In To Blogger

I have already update in preview post a another mega dropdown gadget Click here to you can see that menu Today in this post we will discuss adding a another mega dropdown menu to blogger. A mega dropdown menu is horizontal navigation menu which contains multicolumn dropdown lists. This mega menu is better than a traditional dropdown menu because it can hold large number of links in a single dropdown list. Adding this mega dropdown menu to blogger is very easy you just need to copy and paste the given code in your blog.
See screenshot of megadropdown menu in here......

So how to insert this Gadget in to your blogger blog just follow the instruction.
1. First go to your blogger Dashboard "Layout > Add A Gadget" and click in to "HTML/Javascript" link
2. Now copy and paste the below code in to HTML box

<style>
/--- Roseic Drop Down Menu By www.adhikarikedar.blogspot.com ---/
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/AVvXsEj0cZlrMZ3BlRrIlZG3FUcaQmLeiEQun8otLGqiclKyJf2BY5xqJx77_gM_sejFNMQB7aixhI16aedePwYUPdDbq71BVXhzCB27xZdI-sB5bUd9w-X7B5biR0dCVdJe6wkZMBO2dYMnL3rR/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/AVvXsEgNBzT2a-F3A-LhK6BcTWg68nqaKF43_2kIH5FxlfHJ4CMwWaaB_H_81ms49BmiMryBfKvfpqAKLH_7jUvz9CycSOIUqUIGB4tpq6kGL-QIw1H88LpfB3K015EzbaJn50UOmrkOAKMFbLIO/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/AVvXsEhT6CI5wTrEu1GU2z1PD4js-4keG6Kqa8Yj5B1LRRWHOGR8oyPUw1Nfv97Jcqr8z1ehUnCx2Sgrd3EmNcFjeLQx5fLuL3yltMQJ3sru8AGBNL_YUgk6SR7neVYektHLUyx8lZZmLOBmBzzE/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/AVvXsEhT6CI5wTrEu1GU2z1PD4js-4keG6Kqa8Yj5B1LRRWHOGR8oyPUw1Nfv97Jcqr8z1ehUnCx2Sgrd3EmNcFjeLQx5fLuL3yltMQJ3sru8AGBNL_YUgk6SR7neVYektHLUyx8lZZmLOBmBzzE/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/AVvXsEha5AnKaQbc79jb1RNB0g07rsiI-_5bSSFYXUdaP25vjeHHIL1rg8MGOsP1B4hyphenhyphenIrP9U5RcgDrrCABaSJYgTVpQfm0zsYLrm-lx2LkN360kwAU9kHv-EepvUStyFpRh2sPCHvKelvopO2Ua/s1600/bg-tabs.png) bottom repeat-x;
color:#fff;
background-position:-2px 0px;
}
ul.oe_menu div {
position:absolute;
border:2px solid #fff000;
top:25px;
*top:44px;
left:1px;
background:#004469;
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 By www.adhikarikedar,blogspot.com ---/
</style>


<script type="text/javascript" src="https://kedar-adhikari.googlecode.com/svn/MegaMenu.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>


<ul id="oe_menu" class="oe_menu" style="position:relative;">
<li><a class="menu" href="http://www.adhikarikedar.blogspot.com/"><span class="home"></span></a>

</li>
<li><a class="menu" href="#">General</a>
<div class="two-clm">
<dl>
<dt>आबश्यक टिप्सहरु</dt>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/Blogger">ब्लगर को बारेमा</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/Design">डिजाईन</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/Messanger">Messanger</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/Registry%20Editor">Register Editor</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/Scroling%20Text">Scrolling Texts</a></dd>
</dl>
<dl>
<dt>पढ्नै पर्ने रहेछ</dt>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/Password">Password को बारेमा</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/Tips%20and%20tricks">टिप्सहरु</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/Security">सेकुरिटीहरु</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/Recovery">रिकभरी</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/Information">जानकारीहरु</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/display">Themes</a></dd>
</dl>

</div>
</li>
<li><a class="menu" href="#">Application</a>
<div class="one-clm">
<dl>
<dt>डाउनलोड गर्नुहोस</dt>
<dd><a href="http://www.onlinecomputerinstitute.com/2012/01/anti-malware-17-softwer-free-downloads.html">Free Antivirus</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/2013/01/messaging-and-chat-free-downloads-15.html">Free messanger</a></dd>
<dd><a href="https://docs.google.com/uc?authuser=0&id=0B9g70MOZ02RxZFd6SUdyMGpYSnM&export=download">Online Form</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/File%20Download">Free Drivers</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/File%20Download">Desktop Gadget</a></dd>

<dd><a href="http://www.onlinecomputerinstitute.com/search/label/File%20Download">...View More</a></dd>
</dl>

</div>
</li>
<li><a class="menu" href="#">Services</a>
<div class="three-clm">
<dl>
<dt>पाठ्यक्रमहरु</dt>
<dd><a href="https://sites.google.com/site/hamrobunkota/home/Basic%20Course.pdf?attredirects=0&d=1">कम्प्युटर बेसिक कोर्श</a></dd>
<dd><a href="#">कम्प्युटर हार्डवेर/नेट्वोर्किंग</a></dd>
<dd><a href="#">ग्राफिक कोर्ष</a></dd>
<dd><a href="#">एकाउन्ट प्याकेज</a></dd>
<dd><a href="#">एडभान्स कोर्ष</a></dd>
<dd><a href="#">माइक्रोसफ्ट अफिश</a></dd>
<dd><a href="#">बाँकी कोर्षहरु हेर्नुहोस...</a></dd>
</dl>
<dl>
<dt>अनलाईन बाट आदान प्रदान </dt>
<dd><a href="#">क्रेडिट कार्डको सुविधाहरु</a></dd>
<dd><a href="#">फोटो एडिटिंग गर्नुपरेमा</a></dd>
<dd><a href="#">भिडियो एडिटिंग गर्नु परेमा</a></dd>

<dd><a href="#">र अन्य सुविधाहरु हेर्नुहोस...</a></dd>
</dl>

<dl>
<dt>SOftware हरु चाहिएमा</dt>
<dd><a href="#">Microsoft Office </a></dd>
<dd><a href="#"> Adobe Company </a></dd>
<dd><a href="#">IDM Software </a></dd>
<dd><a href="#">Antivirus </a></dd>
<dd><a href="#">Internet Security</a></dd>
<dd><a href="#">Windows Software</a></dd>

<dd><a href="#">...View More...</a></dd>
</dl>

</div>
</li>
<li><a class="menu" href="#">Tutorials</a>
<div class="three-clm">
<dl>
<dt>कम्प्युटर सम्बन्धी</dt>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/Write%20in%20Nepali">नेपाली लेख्ने तरिका</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/Software">सफ्टवेरहरुको बारेमा</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/Gadgets">ग्याजेटहरु</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/Microsoft%20Office">माइक्रोसफ्ट अफिस</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/Hardware">हार्डवेर को बारेमा</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/Task%20Manager">टास्क म्यानेजर</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/More%20Computer%20Tips">अरु पनि हेर्नुहोस...</a></dd>
</dl>
<dl>
<dt>इन्टरनेट को बारेमा</dt>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/About%20Blogger">Web/Blogger को बारेमा</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/Facebook">सामाजिक संजालको बारेमा</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/Internet">SEO को बारेमा</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/3D%20Effects">Gadget हरु</a></dd>
<dd><a href="#">HTML/Javascript...</a></dd>
</dl>
<dl>
<dt>डिजाईन सम्बन्धी</dt>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/Design">Adobe Photoshop</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/Animation">Corel DRAW</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/Animation">Flash Player</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/Start%20Blogger">InDesign</a></dd>
<dd><a href="#">Dream Weaver</a></dd>
<dd><a href="http://www.onlinecomputerinstitute.com/search/label/Photoshop">View More...</a></dd>
</dl>

</div>
</li>
<li><a class="menu" href="#">Media</a>
<div class="one-clm">
<dl>
<dt>रेडियो टि.भी. हरु</dt>
<dd><a href="#">रेडियोहरु</a></dd>
<dd><a href="#">टि.भी. हरु</a></dd>
<dd><a href="#">म्युजिक भिडियोहरु</a></dd>
<dd><a href="#">फिल्मी दुनिया</a></dd>
</dl>

</div>
</li>
<li><a class="menu" href="#">E-Commerce</a>
<div class="one-clm">
<dl>
<dt>अनलाईन बाट किनबेच गर्नु परेमा</dt>
<dd><a href="#">इलेक्ट्रोनिक सामानहरु </a></dd>
<dd><a href="#">खाध्यान्न सामानहरु</a></dd>
<dd><a href="#">तरल पदार्थहरु</a></dd>
<dd><a href="#">सवारी साधनहरु</a></dd>
<dd><a href="#">कामदारहरु चाहिएमा</a></dd>
<dd><a href="#">कस्मेटिक आईटमहरु</a></dd>
<dd><a href="#">बाँकी अनलाईन सुविधाहरु...</a></dd>
</dl>

</div>
</li>
<li><a class="menu" href="#">Custom</a>
<div class="one-clm">
<dl>
<dt class="oe_heading">पैसा कमाउने उपायहरु</dt>
<dd><a href="http://www.onlinecomputerinstitute.com/2011/09/make-your-business-top-development-of.html">बिज्ञापन को बारेमा</a></dd>
<dd><a href="#">प्रकाशकको बारेमा</a></dd>
<dd><a href="#">अनलाईन जब</a></dd>
</dl>

</div>
</li>

<li><a class="menu" href="#">Help</a>
<div class="one-clm">
<dl>
<dt class="oe_heading">तपाईंलाई शहयोग चाहिएमा</dt>
<dd><a href="http://www.onlinecomputerinstitute.com/p/blog-page_1224.html">नजानेका कुराहरु सोध्नुहोस</a></dd>
<dd><a href="http://www.blogger.com/follow-blog.g?blogID=6221924456870892469" target="_blank">हामीसंग सदश्य बन्नुहोस</a></dd>
<dd><a href="http://www.facebook.com/onlineguru" target="blank">फेसबुक मा मिल्नुहोस</a></dd>
</dl>

</div>

</li>

</ul>

3. Now replace the all another website link to your web blog link and also text

4. Finally save the gadget and view your blog that is has been success.
if you have any problem in this post throw us your comment we will reply soon thank you.

About Me

Anuj Sunar is passionate for the blogging. He started his first blog in 2010 on Technology and his blogging career what he learnt he decided to share his experience with people. Now he is certified Web Designer,, Online Computer teacher and Technology enthusiast. Anuj started his blogging career as a part time blogger and now he is full-time blogger, you can call him professional blogger. Apart from blogging he doing bogging. Blogging is the only thing that gives him relaxation. Join and connect with me