Οριζόντια & Κάθετα Μενού για το ιστολόγιο σας σε 8 χρώματα - Horizontal & Vertical Menu ( Νο 26 ) ( 8 colours )

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