Mega menu for blogger απλα

μπορειτε να δειτε και ενα demo εδω

Mega menu στο blogger.

Για να το προσθεσουμε πρεπει να παμε στο προτυπο μας - επεξεργασια html και να βρουμε το </header>

Αμεσως κατω απο αυτο θα κανουμε επικολληση τον παρακατω κωδικο.

<ul class="wc-megamenu" id="nav">
<li class="wcnavlist"><a class="wclink" href="#">Home</a></li>
<li class="wcnavlist"><span class="wclink">Categories</span>
<ul>
<li> <ul><li><a href="#">Blogger</a></li><li><a href="#">Widgets</a></li><li><a href="#">Plugins</a></li><li><a href="#">Templates</a></li><li><a href="#">Wordpress</a></li><li><a href="#">Wp plugins</a></li><li><a href="#">Wp Themes</a></li><li><a href="#">SEO</a></li><li><a href="#">Traffic</a></li><li><a href="#">CSS</a></li></ul></li><li>
<ul>
<li><a href="#"> JavaScript </a></li>
<li><a href="#"> HTML5 </a></li>
<li><a href="#"> Jquery </a></li>
<li><a href="#"> Responsive </a></li>
<li><a href="#"> Web design </a></li>
<li><a href="#"> Menu for blogger </a></li>
<li><a href="#"> Facebook </a></li>
<li><a href="#"> Twitter </a></li>
<li><a href="#"> Make money </a></li>
<li><a href="#"> Adsense </a></li>
</ul>
</li>
<li>
<ul>
<li><a href="#"> Services </a></li>
<li><a href="#"> Contact us </a></li>
<li><a href="#"> About us </a></li>
<li><a href="#"> Disclaimer</a></li>
<li><a href="#"> Privacy Policy </a></li>
<li><a href="#"> Terms of use </a></li>
<li><a href="#"> Item 7 </a></li>
<li><a href="#"> Item 8 </a></li>
<li><a href="#"> Item 9 </a></li>
<li><a href="#"> Item 10 </a></li>
</ul>
</li>
</ul>
</li>
<li class="wcnavlist"><a class="wclink" href="#">Guest Post</a></li>
<li class="wcnavlist"><a class="wclink" href="#">Contact Us</a></li>
<li class="wcnavlist"><a class="wclink" href="#">Services</a></li>
<li class="wcnavlist"><a class="wclink" href="#">Privacy Policy</a></li>
</ul>
<style>
ul.wc-megamenu li{
font:16px georgia, verdana;
}
ul.wc-megamenu,ul.wc-megamenu li,ul.wc-megamenu ul
{
list-style:none;
margin:0;
padding:0
}
ul.wc-megamenu
{position:relative;z-index:999;float:left;}
ul.wc-megamenu li.hover,ul.wc-megamenu li:hover{position:relative;z-index:9999;color:#111111;text-decoration:none}
ul.wc-megamenu ul li{float:none;font-weight:700}
ul.wc-megamenu li:hover>ul{visibility:visible}
ul.wc-megamenu{width:100%}
ul.wc-megamenu ul li{float:left}
ul.wc-megamenu li.hover,ul.wc-megamenu li:hover{position:static}
ul.wc-megamenu ul ul{display:none!important}
ul.wc-megamenu ul li{position:static;width:180px}
ul.wc-megamenu ul ul{display:block!important;position:static;width:auto!important}
ul.wc-megamenu ul ul li{float:none}
ul.wc-megamenu ul ul ul{display:none}
ul.wc-megamenu li.hover ul,ul.wc-megamenu li:hover ul{visibility:visible!important;color:#fff}
ul.wc-megamenu{background: #111111; font:18px georgia, verdana;}
ul.wc-megamenu a:link,ul.wc-megamenu a:visited{text-decoration:none;color:#2c539e;}
ul.wc-megamenu a:hover{color:#fff}
ul.wc-megamenu a:active{color:#2c539e;}
ul.wc-megamenu li.last ul li{float:right}
ul.wc-megamenu ul ul li{font-weight:400}
ul.wc-megamenu li{float:left;min-height:1px;line-height:1.3em;vertical-align:middle;list-style:none;}
ul.wc-megamenu li a{display:block;}
ul.wc-megamenu ul{list-style:none;visibility:hidden;position:absolute;top:100%;left:0;z-index:99999;width:550px;font-size:14px;letter-spacing:normal;background:#222222; padding:0 0 0 10px}
ul.wc-megamenu ul a{width:180px;padding:5px;color:#222222;}
ul.wc-megamenu ul a:hover{background:#8fc800;}
ul.wc-megamenu ul ul{padding:0;margin-left:-5px;top:1px;left:99%;margin-top:5px;text-transform:none}
ul.wc-megamenu .wcnavlist{padding:4px 10px}
.wclink,.wclink a:link,.wclink a:visited{color:#fff;font-size:18px}
.wclink hover,.wclink a:link,.wclink a:visited.wclink a:active,.wclink a:hover{color:#fff}
ul.wc-megamenu .wcnavlist a:link, ul.wc-megamenu .wcnavlist a:visited,ul.wc-megamenu .wcnavlist a:active{color:#fff}
</style>

Δε χρειαζεται πιστευω να σας πω πως πρεπει να αντικαταστησετε τις ετικετες που ηδη υπαρχουν με τις δικες σας και να προσθεσετε τα link σας σε αυτες.

Στο παραπανω κωδικο υπαρχουν 3 στηλες με κατηγοριες. Αν για καποιο λογο θελετε να βαλετε και τεταρτη τοτε θα πρεπει να αντιγραψετε τη μια στηλη που ηδη υπαρχει στη συγκεκριμενη περιπτωση τα μπλε γραμματα να αφησετε ενα κενο και να την κανετε επικοληση ακριβως απο κατω.
    Επομενο βημα ειναι να αλλαξετε τον αριθμο με τα κοκκινα γραμματα απο 550px σε 750px. Ελπιζω να τα καταφερετε.