HORIZONTAL MENU-3

HOME
MY POSTS
- LINK-1
- LINK-2
- LINK-3
- LINK-4
- LINK-5
MY LINKS
- LINK-1
- LINK-2
- LINK-3
- LINK-4
- LINK-5
MY VIDEOS
- LINK-1
- LINK-2
- LINK-3
- LINK-4
- LINK-5
MY PHOTOS
- LINK-1
- LINK-2
- LINK-3
- LINK-4
- LINK-5
MY FILES
- LINK-1
- LINK-2
- LINK-3
- LINK-4
- LINK-5
MY MUSIC
- LINK-1
- LINK-2
- LINK-3
- LINK-4
- LINK-5
FORUM
- LINK-1
- LINK-2
- LINK-3
- LINK-4
- LINK-5
RADIO+TV
- LINK-1
- LINK-2
- LINK-3
- LINK-4
- LINK-5
MY NEWS
- LINK-1
- LINK-2
- LINK-3
- LINK-4
- LINK-5
MY RSS
- LINK-1
- LINK-2
- LINK-3
- LINK-4
- LINK-5

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

/* 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>

<ul>

<li><a href='http://the-best-widgets.blogspot.gr/p/my-posts.html' title='MY POSTS'>MY POSTS</a>

</ul>

<li><a href='http://the-best-widgets.blogspot.gr/p/blog-page_11.html' title='MY LINKS'>MY LINKS</a>

</ul>

<li><a href='http://the-best-widgets.blogspot.gr/p/wigdets.html' title='MY VIDEOS'>MY VIDEOS</a>

</ul>

<li><a href='http://the-best-widgets.blogspot.gr/p/widgets_859.html' title='MY PHOTOS'>MY PHOTOS</a>

</ul>

<li><a href='http://the-best-widgets.blogspot.gr/p/widgets_26.html' title='MY FILES'>MY FILES</a>

</ul>

<li><a href='http://the-best-widgets.blogspot.gr/p/blog-page.html' title='MY MUSIC'>MY MUSIC</a>

</ul>

<li><a href='http://the-best-widgets.blogspot.gr/p/my-forum.html' title='FORUM'>FORUM</a>

</ul>

<li><a href='http://the-best-widgets.blogspot.gr/p/widgets_9083.html' title='RADIO+TV'>RADIO+TV</a>

</ul>

</ul>

</ul>

</li></ul></div></div>

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

=>Κρατήστε όσες κατηγορίες θέλετε και διαγράψτε τις υπόλοιπες πριν το αποθηκεύσετε.

=>Αν θέλετε μπορείτε να αλλάξτε τα χρώματα αλλάζοντας τον κωδικό χρώματος που βρίσκεται μπροστα από το σύμβολο της δίεσης (#).

=>Αν θέλετε μπορείτε να αλλάξτε τα νούμερα με τα γαλάζια γράμματα τα οποία είναι το πλάτος και το ύψος της οριζόντιας μπάρας, των μενού, η μεταξυ τους αποστάση, το πάχος του περιγράματος και το μέγεθος της γραμματοσειράς.

=>Δώστε τίτλο στις κατηγορίες αλλάζοντας τα ανοιχτά πράσινα γράμματα.

=>Δώστε ονόματα στις κατηγορίες αλλάζοντας τα έντονα πράσινα γράμματα.

=>Δώστε τίτλο στα link του υπομενού αλλάζοντας τα πορτοκαλί γράμματα.

=>Δώστε ονόματα στα link του υπομενού αλλάζοντας τα κίτρινα γράμματα.