Προσθήκη Κάθετη Drop Down Menu να Blogger

Αυτό το μενού είναι ιδιαίτερα εξατομικεύσιμο, έτσι ώστε να μπορείτε εύκολα να προσαρμόσετε αυτό το μενού σας και να δημιουργήσετε το δικό του στυλ που ταιριάζει στο blog σας, να προσαρμόσετε το χρησιμοποιήσετε HTML Editor μας, όπου μπορείτε να δείτε ζωντανή προεπισκόπηση του μενού σας, όταν εφάρμοσε τις αλλαγές, και η HTML δομή αυτού του μενού είναι βλασφημία εύκολη και απλή, δεν χρειάζεται να προσθέσετε οποιοδήποτε κατηγορία της id μπορείτε να προσθέσετε συνδέσεις σας με τη χρήση κανονικής ul και li ετικέτες.

Σημείωση - Επικόλληση όλων παρακάτω κώδικα HTML Editor και πατήστε το κουμπί προεπισκόπησης, εάν θέλετε να προσαρμόσετε αυτό το μενού στη συνέχεια, αλλάξτε τις τιμές CSS και πάλι χτύπησε το button.Now Προεπισκόπηση ας δούμε ζεστό για να το προσθέσετε στο blog blogger blogger.

Πώς Να Προσθήκη Κάθετη Drop Down Menu Να Blogger

1. Πηγαίνετε στο Blogger ταμπλό> Διάταξη
2. Κάντε κλικ στο κουμπί Προσθήκη Gadget
3. Επιλέξτε HTML / JavaScript
4. Επικόλληση παρακάτω κώδικα σε αυτό,

• Για να αλλάξετε το πλάτος επεξεργαστείτε απλώς την αξία  πλάτος: 250px?
• Εάν έχετε προσθέσει ήδη ένα jQuery plugin στο blog σας και στη συνέχεια αφαιρέστε τον κώδικα επισημαίνεται σε αχνό πράσινο χρώμα.
• Αντικαταστήστε το # με τις δικές σας συνδέσεις
• Αντικαταστήστε Θέση 1 Sub, Sub 2 Προϊόν ..... και με το κείμενο που θέλετε να εμφανίζεται στο μενού.

<style>/*======= Vertical Drop Down Menu By Helper Blogger ========= */.ddsmoothmenu-v ul { margin: 0; padding: 0; width: 250px; /* Main Menu Item widths */ list-style-type: none; font: bold 12px Verdana; border-bottom: 0px solid #ccc;} .ddsmoothmenu-v ul li { position: relative;} .downarrowclass { position: absolute; top: 12px; right: 7px;} .rightarrowclass { position: absolute; top: 10px; right: 5px;} /* Top level menu links style */.ddsmoothmenu-v ul li a { display: block; overflow: auto; /*force hasLayout in IE7 */ height: 32px; color: white; text-decoration: none; padding: 5px 5px 5px 25px; border-bottom: 0px solid #778; border-right: 0px solid #778;} .ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active { color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiixT-fvyaRTEeJY4ZGhMqzbjA0AI8p3gdZ0pDAK5pyeW0cFiDbvUNcAZoTcTokv14D_BVHPeeZCYjZDpH8S0xBWqLGkiCHzq12sDha_Nyzh7TjBABGkRxDmRcOxUZcPCCc95MfICGF4XE/s1600/tab_bg.gif); height: 22px; background-repeat: repeat-x; background-position: left center; margin-bottom: 1px;} .ddsmoothmenu-v ul li a.selected { /*CSS class that's dynamically added to the currently active menu items' LI A element*/ color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFcaFOaklHf_cH9HQ3o4oxEFDf50VoBr3voSZG-puMDg65EQXoefApb3-kEi48VgGq3BIVOectbfl_21LKMHfoLT-RJIj-IjrV9YpIyu-QD3aU23eaT2ygQMY6Pk3y4TjYUbq6WyfLPNg/s1600/tabhover_bg.gif); height: 22px; background-repeat: repeat-x; background-position: left center;} .ddsmoothmenu-v ul li a:hover { color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFcaFOaklHf_cH9HQ3o4oxEFDf50VoBr3voSZG-puMDg65EQXoefApb3-kEi48VgGq3BIVOectbfl_21LKMHfoLT-RJIj-IjrV9YpIyu-QD3aU23eaT2ygQMY6Pk3y4TjYUbq6WyfLPNg/s1600/tabhover_bg.gif); height: 22px; background-repeat: repeat-x; background-position: left center;} /*Sub level menu items */.ddsmoothmenu-v ul li ul { position: absolute; width: 170px; /*Sub Menu Items width */ height: 22px; top: 0; font-weight: normal; visibility: hidden;} /* Holly Hack for IE \*/* html .ddsmoothmenu-v ul li { float: left; height: 1%;} * html .ddsmoothmenu-v ul li a { height: 1%;}/*======= Vertical Drop Down Menu By Helper Blogger ========= */</style><script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script><script type="text/javascript" src="http://code.helperblogger.com/hb-smooth-menu.js"></script><script type="text/javascript"> })</script><script type="text/javascript"> ddsmoothmenu.init({ mainmenuid: "smoothmenu2", //Menu DIV id orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v" classname: 'ddsmoothmenu-v', //class added to menu's outer DIV //customtheme: ["#804000", "#482400"], contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"] })</script><div id="smoothmenu2" class="ddsmoothmenu-v"> <ul> <li> <a href="http://www.helperblogger.com/">Home</a> </li> <li> <a href="#">Folder 0</a> <ul> <li> <a href="#">Sub Item 1.1</a> </li> <li> <a href="#">Sub Item 1.2</a> </li> </ul> </li> <li> <a href="#">Folder 1</a> <ul> <li> <a href="#">Sub Item 1.1</a> </li> <li> <a href="#">Sub Item 1.2</a> </li> </ul> </li> <li> <a href="#">Item 3</a> </li> <li> <a href="#">Folder 2</a> <ul> <li> <a href="#">Sub Item 2.1</a> </li> </ul> </li> <li> <a href="http://www.helperblogger.com/">Create This</a> </li> </ul> <br style="clear: left" /></div>

Για περαιτέρω προσαρμογές χρησιμοποιούν ευγενικά μας πρόγραμμα επεξεργασίας HTML , έτσι ώστε να μπορείτε να δείτε μια προεπισκόπηση των αλλαγών σας. Ελπίζω να έχετε άρεσε αυτή η κάθετη menu.If δεν μπορείτε να προσαρμόσετε όπως θέλετε τότε παρακαλούμε αφήστε πίσω ένα σχόλιο με τα στοιχεία σας, και αν Δεν μπορείτε να προσθέσετε αυτό το μενού τέλεια στο blog σας, τότε αφήστε ένα σχόλιο με το URL Blog σας.