• SANTORINI

    SANTORINI

  • SANTORINI

    SANTORINI

  • ZAKYNTHOS

    ZAKYNTHOS

  • LEYKADA

    LEYKADA

  • KEFALLONIA

    KEFALLONIA

  • KERKYRA

    KERKYRA

  • RODOS

    RODOS

GADGETS FOR BLOGS

YouTube GITHUB glitch.com JSBIN Start.me JSFIDDLE CODEPLY PASTEBIN.COM Repl.it CODEPEN CODEPEN

ΠΩΣ ΒΑΖΩ ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ ΜΕ ΥΠΟΜΕΝΟΥ ΣΑΝ GADGET Νο 1

ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ ΜΕ ΥΠΟΜΕΝΟΥ ΑΠΛΟ ΣΑΝ GADGET Νο 1
Αυτό είναι ένα απλό οριζόντιο μενού με υπομενού το οποίο τοποθετήται σαν gadget κάτω ακριβώς από τον τίτλο του blog σας και μπορείτε να το δείτε σε λειτουργία πατώντας το κίτρινο link ►. Δεν θα χρειαστεί να προσθέσετε κάτι στο πρότυπο του blog σας, αλλά θα χρειαστεί να αφαιρέσετε την ενότητα TABS που βρίσκεται περίπου στις γραμμές 325-373 πέντε γραμμές πάνω ή πέντε γραμμές κάτω θα τον βρήτε ανοίγωντας το πρώτο βελάκι που θα συναντήσετε μέσα στο πρότυπο σας για να επεκταθεί το κρυμένο μέρος του κώδικα της σελίδας σας. 
Η ενότητα TABS αρχίζει έτσι /* Tabs ----------------------------------------------- */ και έχει μήκος περίπου 50 γραμμές. 
Πρέπει να τον διαγράψετε αν θέλετε να λειτουργήσει το gadget του οριζοντίου μενού με υπομενού που σας δίνω παρακάτω. Αφου το διαγράψετε σώστε το πρότυπό σας και πηγαίνετε στη διάταξη / προσθήκη gadget  HTML/Javascript  και κάντε επικόλληση τον παρακάτω κώδικα. Μην ξεχάσετε να αλλάξετε τα links μου με τα δικά σας links.

ΠΑΤΗΣΤΕ ΕΔΩ ΓΙΑ ΝΑ ΤΟ ΔΕΙΤΕ ΣΕ ΛΕΙΤΟΥΡΓΙΑ ΣΕ ENA DEMO BLOG ►

<style>
#mbtnavbar {background: #255720;width: 100%;color: #FFFFFF;margin: 0;padding: 0;position: relative;border:1px solid #FBBB22;height:32px;}
#mbtnav {margin:0;padding:0;}
#mbtnav ul {float: left;list-style: none;margin: 0;padding: 0;}
#mbtnav li {list-style: none;margin: 0;padding: 0;}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {color: #FFFFFF;display: block;font:normal 14px Arial;margin: 0;padding: 8px 8px 8px 8px; text-decoration: none; border-right:1px solid #FBBB22;}
#mbtnav li a:hover, #mbtnav li a:active {background: #740777;color: #FFFFFF;display:block;text-decoration: none;margin: 0;padding: 8px 8px 8px 8px;}
#mbtnav li {float: left;padding: 0;}
#mbtnav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 242px;margin: 0;padding: 0;}
#mbtnav li ul a {width: 242px;}
#mbtnav li ul ul {margin: 1px 1px 1px 1px;}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {left: -999em;}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {left: auto;}
#mbtnav li:hover, #mbtnav li.sfhover {position: static;}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {background: #173374;width: 242px;color: #FFFFFF;display: block;font:normal 14px Arial;margin:0px;padding: 8px 8px 8px 8px;text-decoration: none;border-bottom:1px solid #FBBB22;z-index:9999;}
#mbtnav li li a:hover, #mbtnav li li a:active {background: #FFFF00;color: #000000;display: block;}
#mbtnav li li li a, #mbtnav li li li a:link, #mbtnav li li li a:visited {background: #207907;width: 242px;color: #FFFFFF;display: block;font:normal 14px Arial;padding: 4px 8px 4px 8px;text-decoration: none;z-index:9999;}
#mbtnav li li li a:hover, #mbtnav li li li a:active {background: #207907;color: #FFFFFF;
display: block;}
</style>

<div id='mbtnavbar'>
<ul id='mbtnav'>
<li><a href='http://the-best-widgets.blogspot.gr'>Home</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/my-posts.html'>My posts-1</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/my-posts_19.html'>My posts-2</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/blog-page_3.html'>My articles</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/blog-page_11.html'>My links</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/wigdets.html'>My videos </a><ul>
<li><a href='https://www.youtube.com/user/WIDGETSFORBLOGS'>Widgets for blogs videos</a></ul>
<li><a href='http://the-best-widgets.blogspot.gr/p/widgets_859.html'>My photos ▼</a><ul>
<li><a href='http://myphotos77.imgur.com/' title='Imgur.com'>Imgur.com</a></li>
<li><a href='http://www.flickr.com/photos/98183932@N02/sets'>Flickr.com</a></li>
<li><a href='https://www.pinterest.com/photos1000'>Pinterest.com</a></ul>
<li><a href='http://the-best-widgets.blogspot.gr/p/widgets_26.html'>My files ▼</a><ul>
<li><a href='https://drive.google.com/folderview?id=0B8GeBeRdN9NsX0RKYzZOemtwOWM&usp=sharing'>Annimated Gifs</a></li>
<li><a href='https://drive.google.com/folderview?id=0B8GeBeRdN9NsT3VPRkpOYmUwSVU&usp=sharing'>Blogger backrounds</a></li>
<li><a href='https://app.box.com/s/chdfmak9du0v6hlg0h5b'>Ringtones</a></li>
<li><a href='https://app.box.com/s/if98ihmj6bs15f69bro2'>Free programs</a></ul></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/blog-page.html'>My music</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/my-forum.html'>My forum+chat</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/widgets_9083.html'>My Radio+tv</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/wigdets_31.html'>My news</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/widgets_3619.html'>My rss</a></ul></div>

1 σχόλιο:

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.