• 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 Νο 3

ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ
ΠΩΣ ΒΑΖΩ ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ ΜΕ ΥΠΟΜΕΝΟΥ ΣΑΝ GADGET Νο 3
Για να βάλουμε αυτό το μενού στο blog μας θα πρέπει να αφαιρεθούν οι παρακάτω γραμμές κώδικα της ενότητας Tabs που βρίσκονται περίπου στις γραμμές 325-373 και ξεκινάει όπως σας τον έχω ακριβώς από κάτω. Για να τον βρούμε πρέπει να πάμε στην επεξεργασία προτύπου και να πατήσουμε το πρώτο βελάκι στην γραμμή 13-15 περίπου για να επεκταθεί το κρυμένο μέρος του κώδικα. Αφού φανεί ο κρυμένος κώδικας με τα μπλέ γράμματα πηγαίνουμε στις γραμμές που σας έγραψα πιο πάνω και σβήνουμε τον παρακάτω κώδικα όπως τον βλέπετε. Μετά σώζουμε το πρότυπο και πηγαίνουμε στην διάταξη και αντιγράφουμε σαν gadget τον επόμενο κώδικα και το οριζόντιο μενού θα λειτουργήσει χωρίς κανένα πρόβλημα.

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

/* Tabs ----------------------------------------------- */
.tabs-outer {
  overflow: hidden;
  position: relative;
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;}
#layout .tabs-outer {
  overflow: visible;}
.tabs-cap-top, .tabs-cap-bottom {
  position: absolute;
  width: 100%;
  border-top: 1px solid $(tabs.border.color);}
.tabs-cap-bottom {
  bottom: 0;}
.tabs-inner .widget li a {
  display: inline-block;
  margin: 0;
  padding: .6em 1.5em;
  font: $(tabs.font);
  color: $(tabs.text.color);
  border-top: 1px solid $(tabs.border.color);
  border-bottom: 1px solid $(tabs.border.color);
  border-$startSide: 1px solid $(tabs.border.color);
  height: 5px;
  line-height: 5px;}
.tabs-inner .widget li:last-child a {
  border-$endSide: 1px solid $(tabs.border.color);}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;color: $(tabs.selected.text.color);}

ΚΩΔΙΚΑΣ CSS+HTML ΓΙΑ ΤΟ ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ ΜΕ ΥΠΟΜΕΝΟΥ.

<style>
#catmenucontainer{height:auto;background:#transparent;display:block;padding:0px 0 0px 0px;font: 14px Arial, sans-serif;font-weight:normal;}
#catmenu ,#catmenu ul {margin: 0px 3px;padding: 0px;list-style: none;height:auto;}
#catmenu a {background:#333;color: #FFFFFF;display:block;font-weight: normal;padding: 5px 5px 5px 5px;}
#catmenu a:hover {background:#0F4094;color: #FFFFFF;display:block;text-decoration: none;}
#catmenu li {float: left;margin: 0px;padding: 0px;}
#catmenu li li {float: left;margin: 0px 0px 0px 0px;padding: 0px;width: 240px;}
#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {background:#0050A0;width: 240px;float: none;margin: 0px;padding: 5px 5px 5px 5px;color:#fff;border-bottom:1px solid #FFFFFF;}
#catmenu li li a:hover, #catmenu li li a:active {background:#098105;width: 240px;float: none;margin: 0px;padding: 5px 5px 5px 5px;color:#fff;border-bottom:1px solid #fff;}
#catmenu li ul {position: absolute;width: 20em;left: -999em;z-index:1;}
#catmenu li:hover ul {left: auto;display: block;}
#catmenu li:hover ul, #catmenu li.sfhover ul {left: auto;}
</style>

<div id='catmenucontainer'>
<div id='catmenu'>
<ul>
<li><a href='http://the-best-widgets.blogspot.gr/' title='HOME'>HOME</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/my-posts.html' title='MY POSTS'>MY POSTS</a>
<ul class='children'>
<li><a href='http://www.google.gr/' title='LINK-1'>LINK-1</a></li>
<li><a href='http://www.google.gr/' title='LINK-2'>LINK-2</a></li>
<li><a href='http://www.google.gr/' title='LINK-3'>LINK-3</a></li>
<li><a href='http://www.google.gr/' title='LINK-4'>LINK-4</a></li>
<li><a href='http://www.google.gr/' title='LINK-5'>LINK-5</a></li>
</ul>
<li><a href='http://the-best-widgets.blogspot.gr/p/blog-page_11.html' title='MY LINKS'>MY LINKS</a>
<ul class='children'>
<li><a href='http://www.google.gr/' title='LINK-1'>LINK-1</a></li>
<li><a href='http://www.google.gr/' title='LINK-2'>LINK-2</a></li>
<li><a href='http://www.google.gr/' title='LINK-3'>LINK-3</a></li>
<li><a href='http://www.google.gr/' title='LINK-4'>LINK-4</a></li>
<li><a href='http://www.google.gr/' title='LINK-5'>LINK-5</a></li>
</ul>
<li><a href='http://the-best-widgets.blogspot.gr/p/wigdets.html' title='MY VIDEOS'>MY VIDEOS</a>
<ul class='children'>
<li><a href='http://www.google.gr/' title='LINK-1'>LINK-1</a></li>
<li><a href='http://www.google.gr/' title='LINK-2'>LINK-2</a></li>
<li><a href='http://www.google.gr/' title='LINK-3'>LINK-3</a></li>
<li><a href='http://www.google.gr/' title='LINK-4'>LINK-4</a></li>
<li><a href='http://www.google.gr/' title='LINK-5'>LINK-5</a></li>
</ul>
<li><a href='http://the-best-widgets.blogspot.gr/p/widgets_859.html' title='MY PHOTOS'>MY PHOTOS</a>
<ul class='children'>
<li><a href='http://www.google.gr/' title='LINK-1'>LINK-1</a></li>
<li><a href='http://www.google.gr/' title='LINK-2'>LINK-2</a></li>
<li><a href='http://www.google.gr/' title='LINK-3'>LINK-3</a></li>
<li><a href='http://www.google.gr/' title='LINK-4'>LINK-4</a></li>
<li><a href='http://www.google.gr/' title='LINK-5'>LINK-5</a></li>
</ul>
<li><a href='http://the-best-widgets.blogspot.gr/p/widgets_26.html' title='MY FILES'>MY FILES</a>
<ul class='children'>
<li><a href='http://www.google.gr/' title='LINK-1'>LINK-1</a></li>
<li><a href='http://www.google.gr/' title='LINK-2'>LINK-2</a></li>
<li><a href='http://www.google.gr/' title='LINK-3'>LINK-3</a></li>
<li><a href='http://www.google.gr/' title='LINK-4'>LINK-4</a></li>
<li><a href='http://www.google.gr/' title='LINK-5'>LINK-5</a></li>
</ul>
<li><a href='http://the-best-widgets.blogspot.gr/p/blog-page.html' title='MY MUSIC'>MY MUSIC</a>
<ul class='children'>
<li><a href='http://www.google.gr/' title='LINK-1'>LINK-1</a></li>
<li><a href='http://www.google.gr/' title='LINK-2'>LINK-2</a></li>
<li><a href='http://www.google.gr/' title='LINK-3'>LINK-3</a></li>
<li><a href='http://www.google.gr/' title='LINK-4'>LINK-4</a></li>
<li><a href='http://www.google.gr/' title='LINK-5'>LINK-5</a></li>
</ul>
<li><a href='http://the-best-widgets.blogspot.gr/p/my-forum.html' title='FORUM'>FORUM</a>
<ul class='children'>
<li><a href='http://www.google.gr/' title='LINK-1'>LINK-1</a></li>
<li><a href='http://www.google.gr/' title='LINK-2'>LINK-2</a></li>
<li><a href='http://www.google.gr/' title='LINK-3'>LINK-3</a></li>
<li><a href='http://www.google.gr/' title='LINK-4'>LINK-4</a></li>
<li><a href='http://www.google.gr/' title='LINK-5'>LINK-5</a></li>
</ul>
<li><a href='http://the-best-widgets.blogspot.gr/p/widgets_9083.html' title='RADIO+TV'>RADIO+TV</a>
<ul class='children'>
<li><a href='http://www.google.gr/' title='LINK-1'>LINK-1</a></li>
<li><a href='http://www.google.gr/' title='LINK-2'>LINK-2</a></li>
<li><a href='http://www.google.gr/' title='LINK-3'>LINK-3</a></li>
<li><a href='http://www.google.gr/' title='LINK-4'>LINK-4</a></li>
<li><a href='http://www.google.gr/' title='LINK-5'>LINK-5</a></li>
</ul>
<li><a href='http://the-best-widgets.blogspot.gr/p/wigdets_31.html' title='MY NEWS'>MY NEWS</a>
<ul class='children'>
<li><a href='http://www.google.gr/' title='LINK-1'>LINK-1</a></li>
<li><a href='http://www.google.gr/' title='LINK-2'>LINK-2</a></li>
<li><a href='http://www.google.gr/' title='LINK-3'>LINK-3</a></li>
<li><a href='http://www.google.gr/' title='LINK-4'>LINK-4</a></li>
<li><a href='http://www.google.gr/' title='LINK-5'>LINK-5</a></li>
</ul>
<li><a href='http://the-best-widgets.blogspot.gr/p/widgets_3619.html' title='MY RSS'>MY RSS</a>
<ul class='children'>
<li><a href='http://www.google.gr/' title='LINK-1'>LINK-1</a></li>
<li><a href='http://www.google.gr/' title='LINK-2'>LINK-2</a></li>
<li><a href='http://www.google.gr/' title='LINK-3'>LINK-3</a></li>
<li><a href='http://www.google.gr/' title='LINK-4'>LINK-4</a></li>
<li><a href='http://www.google.gr/' title='LINK-5'>LINK-5</a></li>
</ul>
</li></ul></div></div>

=>Πηγαίνετε στη διάταξη, επιλέξτε το gadget που βρίσκεται κάτω από τον τίτλο του blog, μετά πατήστε προσθήκη HTML java script και αντιγράψτε τον παραπάνω κώδικα μέσα στο κουτάκι σαν gadget αφού αλλάξετε τα links με τα μώβ γράμματα με τα δικά σας links.
=>Κρατήστε όσες κατηγορίες θέλετε και διαγράψτε τις υπόλοιπες πριν το αποθηκεύσετε.
=>Αν θέλετε μπορείτε να αλλάξτε τα χρώματα αλλάζοντας τον κωδικό χρώματος που βρίσκεται μπροστα από το σύμβολο της δίεσης (#).
=>Αν θέλετε μπορείτε να αλλάξτε τα νούμερα με τα γαλάζια γράμματα τα οποία είναι το πλάτος και το ύψος της οριζόντιας μπάρας, των μενού, η μεταξυ τους αποστάση, το πάχος του περιγράματος και το μέγεθος της γραμματοσειράς.
=>Δώστε τίτλο στις κατηγορίες αλλάζοντας τα ανοιχτά πράσινα γράμματα.
=>Δώστε ονόματα στις κατηγορίες αλλάζοντας τα έντονα πράσινα γράμματα.
=>Δώστε τίτλο στα link του υπομενού αλλάζοντας τα πορτοκαλί γράμματα.
=>Δώστε ονόματα στα link του υπομενού αλλάζοντας τα κίτρινα γράμματα.

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

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

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