Οριζόντια & Κάθετα Μενού για το ιστολόγιο σας σε 8 χρώματα - Horizontal & Vertical Menu ( Νο 26 ) ( 8 colours ) |  Στάλες στο γαλάζιο ® <link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhvoq83TJ8CU8H_mFiWv3TAboMzVChoh6New4Lv1jlrPc0_mhxSOly1M2bvKu_79ymItN_m92nzrXdIYd5SNFDRfMMiXeTl_hRKulVQbyWqJ94Q8POzgpLP4AVLvQYY53jq5WkQjw2Sf8/s72-c/Horizontal+%26+Vertical+Menus.png' rel='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiME6DVcbv3gKvBNmYAN6FDaLxToDKS-E4cTNSSmHJAS370hC-oKXqo1VtWSfx20ExDsIsLjKJppxnTl_N-7lJi_B4ZDQzj5BQ5TZ9fMdN27ybf3x0Yzs0Jd7JQo_Ar824kLqZbIbRkOUU/s640/Stales_sto_Galazio.jpg'/>

0

8 επιλογές χρωμάτων σε οριζόντιο & κάθετο μενού για το ιστολόγιο σας. Εμείς σας δίνουμε την λύση....Εσεις διαλέξτε αυτό που σας κάνει!!!
Ας πάμε να δούμε τον τρόπο....
θα μπείτε στο Πανόπτη σας & μετά >>> Διάταξη >>> Επεξεργασία HTML και θα κάνετε αναζήτηση με το Ctrl + F για το.....
]]></b:skin>

Μόλις το βρείτε πριν από το κλείσιμο του ]]></b:skin>
Προσθέστε τον παρακάτω κώδικα.

Για Οριζόντιο Μενού:



<!--BUBBLE-MENU-26-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
.bubplastic.horizontal {
width: 100%;
height: 27px;
margin: 0;
padding: 0;
background: #000000 url(...small black image...) top left repeat-x;
}
.bubplastic.horizontal ul {
list-style: none;
margin: 0;
padding: 0;
}
.bubplastic.horizontal ul li {
float: left;
margin: 0;
padding: 0;
background: transparent url(...large black image...) top left no-repeat;
}

.bubplastic.horizontal ul li a {
display: block;
height: 27px;
padding-left: 35px;
float: left;
text-transform: uppercase;
font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
font-size: 70%;
color: #FFFFFF;
text-decoration: none;
}

.bubplastic.horizontal ul li a span.menu_ar {
display: block;
float: left;
height: 22px;
padding-top: 5px;
padding-right: 35px;
background: transparent url(...large black image...) top right no-repeat;
cursor: pointer;
}

/* BLUE HOVER */
.bubplastic.blue ul li a:hover,
.bubplastic.blue ul li.highlight a {
background: transparent url(....COLOR IMAGE....) top left no-repeat;
}
.bubplastic.blue ul li a:hover span.menu_ar,
.bubplastic.blue ul li.highlight a span.menu_ar {
background: transparent url(....COLOR IMAGE....) top right no-repeat;
}
<!--BUBBLE-MENU-26-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->

Για Κάθετο Μενού:



<!--BUBBLE-VERTICAL-MENU-26-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
.bubplastic.vertical {
width: 250px;
margin: 0;
padding: 0;
display: block;
}
.bubplastic.vertical ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
.bubplastic.vertical ul li {
display: block;
float: left;
width: 100%;
margin: 0;
padding: 0;
background: transparent url(...large black image...) top left no-repeat;
}

.bubplastic.vertical ul li a {
display: block;
margin: 0;
width: 100%;
padding-left: 35px;
text-transform: uppercase;
font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
font-size: 70%;
color: #FFFFFF;
text-decoration: none;
background: transparent url(...large black image...) top left no-repeat;
}

.bubplastic.vertical ul li a span.menu_ar {
display: block;
margin: 0;
width: 100%;
height: 22px;
padding-top: 5px;
padding-right: 35px;
background: transparent url(...large black image...) top right no-repeat;
cursor: pointer;
}

/* BLUE HOVER */
.bubplastic.blue ul li a:hover,
.bubplastic.blue ul li.highlight a {
background: transparent url(.....blue.gif.....) top left no-repeat;
}
.bubplastic.blue ul li a:hover span.menu_ar,
.bubplastic.blue ul li.highlight a span.menu_ar {
background: transparent url(.....blue.gif.....) top right no-repeat;
}
<!--BUBBLE-VERTICAL-MENU-26-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->

Εικόνες για τα 8 χρώματα:
small black image:
large black image:
Στην περίπτωση που θέλετε να χρησιμοποιήσετε κάποιο άλλο χρώμα θα αντικαταστήσετε το κομμάτι του παραπάνω κώδικα από το σημείο /* BLUE HOVER */ έως το } με το χρώμα που θέλετε από τα παρακάτω.
COLOR IMAGES
blue:
Είναι το tutorial που σας δίνω έτοιμο.
aqua:

/* AQUA HOVER */
.bubplastic.aqua ul li a:hover,
.bubplastic.aqua ul li.highlight a {
background: transparent url(aqua.gif) top left no-repeat;
}
.bubplastic.aqua ul li a:hover span.menu_ar,
.bubplastic.aqua ul li.highlight a span.menu_ar {
background: transparent url(aqua.gif) top right no-repeat;
}

gray:

/* GRAY HOVER */
.bubplastic.gray ul li a:hover,
.bubplastic.gray ul li.highlight a {
background: transparent url(gray.gif) top left no-repeat;
}
.bubplastic.gray ul li a:hover span.menu_ar,
.bubplastic.gray ul li.highlight a span.menu_ar {
background: transparent url(gray.gif) top right no-repeat;
}

lime:

/* LIME HOVER */
.bubplastic.lime ul li a:hover,
.bubplastic.lime ul li.highlight a {
background: transparent url(lime.gif) top left no-repeat;
}
.bubplastic.lime ul li a:hover span.menu_ar,
.bubplastic.lime ul li.highlight a span.menu_ar {
background: transparent url(lime.gif) top right no-repeat;
}

orange:

/* ORANGE HOVER */
.bubplastic.orange ul li a:hover,
.bubplastic.orange ul li.highlight a {
background: transparent url(orange.gif) top left no-repeat;
}
.bubplastic.orange ul li a:hover span.menu_ar,
.bubplastic.orange ul li.highlight a span.menu_ar {
background: transparent url(orange.gif) top right no-repeat;
}

pink:

/* PINK HOVER */
.bubplastic.pink ul li a:hover,
.bubplastic.pink ul li.highlight a {
background: transparent url(pink.gif) top left no-repeat;
}
.bubplastic.pink ul li a:hover span.menu_ar,
.bubplastic.pink ul li.highlight a span.menu_ar {
background: transparent url(pink.gif) top right no-repeat;
}

purple:

/* PURPLE HOVER */
.bubplastic.purple ul li a:hover,
.bubplastic.purple ul li.highlight a {
background: transparent url(purple.gif) top left no-repeat;
}
.bubplastic.purple ul li a:hover span.menu_ar,
.bubplastic.purple ul li.highlight a span.menu_ar {
background: transparent url(purple.gif) top right no-repeat;
}

red:

/* RED HOVER */
.bubplastic.red ul li a:hover,
.bubplastic.red ul li.highlight a {
background: transparent url(red.gif) top left no-repeat;
}
.bubplastic.red ul li a:hover span.menu_ar,
.bubplastic.red ul li.highlight a span.menu_ar {
background: transparent url(red.gif) top right no-repeat;
}

Κάνετε αποθήκευση προτύπου & πάμε στο 2ο βήμα.....
Πανόπτης ---> Διάταξη ---> Στοιχεία Σελίδας ---> Προσθήκη gadget ---> HTML/JavaScript
Και μέσα στο gadget βάζουμε τον παρακάτω κώδικα, χωρίς να προσθεσουμε κάτι στον Τίτλο.

Για Οριζόντιο Μενού:



<!--BUBBLE-MENU-26-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
<div class="menu bubplastic horizontal blue">
<ul>
<li class="highlight"><span class="menu_r"><a href="" target="_self"><span class="menu_ar">Login</span></a></span></li>
<li><span class="menu_r"><a href="...your link..." target="_self"><span class="menu_ar">Home</span></a></span></li>
<li><span class="menu_r"><a href="...your link..." target="_self"><span class="menu_ar">tab 1</span></a></span></li>
<li><span class="menu_r"><a href="...your link..." target="_self"><span class="menu_ar">tab 2</span></a></span></li>
<li><span class="menu_r"><a href="...your link..." target="_self"><span class="menu_ar">tab 3</span></a></span></li>
<li><span class="menu_r"><a href="...your link..." target="_self"><span class="menu_ar">tab 4</span></a></span></li>
<li><span class="menu_r"><a href="http://loneeagle110.blogspot.com/search/label/Blogger%20Tutorials" target="_self"><span class="menu_ar">Blogger Tutorials</span></a></span></li>
</ul></div>
<!--BUBBLE-MENU-26-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->


Για Κάθετο Μενού:



<!--BUBBLE-VERTICAL-MENU-26-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
<div class="menu bubplastic vertical blue">
<ul>
<li class="highlight"><span class="menu_r"><a href="" target="_self"><span class="menu_ar">Login</span></a></span></li>
<li><span class="menu_r"><a href="...your link..." target="_self"><span class="menu_ar">Home</span></a></span></li>
<li><span class="menu_r"><a href="...your link..." target="_self"><span class="menu_ar">tab 1</span></a></span></li>
<li><span class="menu_r"><a href="...your link..." target="_self"><span class="menu_ar">tab 2</span></a></span></li>
<li><span class="menu_r"><a href="...your link..." target="_self"><span class="menu_ar">tab 3</span></a></span></li>
<li><span class="menu_r"><a href="...your link..." target="_self"><span class="menu_ar">tab 4</span></a></span></li>
<li><span class="menu_r"><a href="http://loneeagle110.blogspot.com/search/label/Blogger%20Tutorials" target="_self"><span class="menu_ar">Blogger Tutorials</span></a></span></li>
</ul></div>
<!--BUBBLE-VERTICAL-MENU-26-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->


Όπου ...your link... βάζετε τον σύνδεσμο της αντίστοιχης ετικέτας ....tab 1,2,3,4,5 κτλ....

Και για όσους χρησιμοποιήσουν κάποιο άλλο χρώμα στο σημείο
<div class="menu bubplastic horizontal blue"> ή <div class="menu bubplastic vertical blue">
Θα αλλάξετε την ονομασία του χρώματος από blue σε αυτό που θα χρησιμοποιήσετε π.χ. pink
<div class="menu bubplastic horizontal pink"> ή <div class="menu bubplastic vertical pink">

Αφού περάσετε τις ετικέτες που θέλετε κάνετε αποθήκευση & μετά από την διάταξη της σελίδας σας, παίρνεται το gadget & το τοποθετείται ακριβώς κάτω από τη κεφαλίδα σας.
Πατάτε ΑΠΟΘΗΚΕΥΣΗ κι είστε ΟΚ.

Για σχέδια σε Οριζόντια Μενού δείτε τα.....

Οριζόντιο Μενού Νο 1
Οριζόντιο Μενού Νο 2
Οριζόντιο Μενού Νο 3
Οριζόντιο Μενού Νο 4
Οριζόντιο Μενού Νο 5
Οριζόντιο Μενού Νο 6
Οριζόντιο Μενού Νο 7
Οριζόντιο Μενού Νο 8
Οριζόντιο Μενού Νο 9
Οριζόντιο Μενού Νο 10
Οριζόντιο Μενού Νο 11
Οριζόντιο Μενού Νο 12
Οριζόντιο Μενού Νο 13
Οριζόντιο Μενού Νο 14
Οριζόντιο Μενού Νο 15
Οριζόντιο Μενού Νο 16
Οριζόντιο Μενού Νο 17
Οριζόντιο Μενού Νο 18
Οριζόντιο Μενού Νο 19
Οριζόντιο Μενού Νο 20
Οριζόντιο Μενού Νο 21
Οριζόντιο Μενού Νο 22
Οριζόντιο Μενού Νο 23
Οριζόντιο Μενού Νο 24
Οριζόντιο Μενού Νο 25
Οριζόντιο Μενού Νο 26
Οριζόντιο Μενού Νο 27
Οριζόντιο Μενού Νο 28
Οριζόντιο Μενού Νο 29
Οριζόντιο Μενού Νο 30
Οριζόντιο Μενού Νο 31
Οριζόντιο Μενού Νο 32
Οριζόντιο Μενού Νο 33
Οριζόντιο Μενού Νο 34
Οριζόντιο Μενού Νο 35
Οριζόντιο Μενού Νο 36
Οριζόντιο Μενού Νο 37
Οριζόντιο Μενού Νο 38
Οριζόντιο Μενού Νο 39
Οριζόντιο Μενού Νο 40
Οριζόντιο Μενού Νο 41
Οριζόντιο Μενού Νο 42
Οριζόντιο Μενού Νο 43
Οριζόντιο Μενού Νο 44
Οριζόντιο Μενού Νο 45
Οριζόντιο Μενού Νο 46
Οριζόντιο Μενού Νο 47
Οριζόντιο Μενού Νο 48
Οριζόντιο Μενού Νο 50
Οριζόντιο Μενού Νο 51
Οριζόντιο Μενού Νο 52
Οριζόντιο Μενού Νο 53
Οριζόντιο Μενού Νο 54
Οριζόντιο Μενού Νο 55
Οριζόντιο Μενού Νο 56

Οριζόντιο Μενού Νο 61
Οριζόντιο Μενού Νο 62
Οριζόντιο Μενού Νο 63
Οριζόντιο Μενού Νο 64
Οριζόντιο Μενού Νο 65
Οριζόντιο Μενού Νο 66
Οριζόντιο Μενού Νο 67
Οριζόντιο Μενού Νο 68
Οριζόντιο Μενού Νο 69
Οριζόντιο Μενού Νο 70
Οριζόντιο Μενού Νο 71
Οριζόντιο Μενού Νο 72
Οριζόντιο Μενού Νο 73
Οριζόντιο Μενού Νο 74

Για σχέδια σε Κάθετα μενού δείτε τα....

Κάθετο Μενού Νο 1
Κάθετο Μενού Νο 2
Κάθετο Μενού Νο 3
Κάθετο Μενού Νο 4
Κάθετο Μενού Νο 5
Κάθετο Μενού Νο 6
Κάθετο Μενού Νο 7
Κάθετο Μενού Νο 8
Κάθετο Μενού Νο 9
Κάθετο Μενού Νο 11
Κάθετο Μενού Νο 12
Κάθετο Μενού Νο 13
Κάθετο Μενού Νο 14
Κάθετο Μενού Νο 15
Κάθετο Μενού Νο 16
Κάθετο Μενού Νο 17
Κάθετο Μενού Νο 18
Κάθετο Μενού Νο 20
Κάθετο Μενού Νο 21
Κάθετο Μενού Νο 22
Κάθετο Μενού Νο 23
Κάθετο Μενού No 26
Κάθετο Μενού Νο 30
Κάθετο Μενού Νο 31
Κάθετο Μενού Νο 32
Κάθετο Μενού Νο 33
Κάθετο Μενού Νο 34

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

Παρακαλώ, την προσοχή σας ! ! !

* Εάν εντοπίσετε κάποιο πρόβλημα σε κάποια δημοσίευση (μη ενεργός συνδεσμος λ.χ. ή οτιδήποτε άλλο), παρακαλούμε κάντε τον κόπο να γράψετε στα σχόλιά σας, το οποιοδήποτε πρόβλημά σας, ώστε να προβούμε στην άμεση διόρθωσή του.
Επίσης, μπορείτε να αποστείλετε ένα "Ευχαριστώ" προς όσους ασχολήθηκαν & σας προσέφεραν ένα... κομμάτι από τη γνώση τους.

Παράκληση προς τους φίλους αναγνώστες-σχολιαστές:

* Να αποφεύγετε να γράφετε με greekglish γιατί τα σχόλιά σας ΔΕΝ θα γίνονται δεκτά.
* Αποφεύγετε το spamάρισμα στα σχόλια. - Please don't spam me!
* Σε περίπτωση που δεν έχετε καταλάβει κάτι, επικοινωνήστε μαζί μας μέσα από την φόρμα των σχολίων και θα σας απαντήσουμε σε εύλογο χρόνο, γι' αυτό ΜΗΝ καταφεύγετε στη αποστολή e-mail για τις όποιες απορίες σας.
* Χρησιμοποιήστε το Reply (που βρίσκεται κάτω από την εικόνα χρήστη), αν θέλετε να του απευθύνετε το λόγο, ή να απαντήσετε σε προυγούμενο σχόλιο.
* Το μέγιστο όριο χαρακτήρων είναι 4.096
* Τα σχόλιά σας θα δημοσιεύονται μετά τον απαραίτητο έλεγχο.

Σημείωση: Όσοι θέλετε να παίρνετε ειδοποιήσεις για τα σχόλια που κανετε, μην ξεχάσετε να τικάρετε το κουμπί "Να λαμβάνω ειδοποιήσεις"

Σας Ευχαριστούμε για την κατανόηση και την επίσκεψή σας.!

 
Top
Blogger Tutorials

Δημιουργήστε τώρα ένα ιδανικό ιστολόγιο, χωρίς να ξοδέψετε ούτε 1€.Περισσότερα από 500 tutorials είναι στη διάθεσή σας.
Οι διαχειριστές του ιστολογίου «Στάλες στο γαλάζιο» σας συμβουλεύουν...
Αποφεύγετε την οποιαδήποτε προσφερόμενη "βοήθεια" από τυχάρπαστους και κατ' επίφαση "web designers", που από ιδιοτέλεια και μόνο προσπαθούν να εκμεταλλευθούν την άγνοιά σας!!!
Με εκτίμηση
«Στάλες στο γαλάζιο»
:-)