Οριζόντιο menu για το blog σας

Είναι πολύ σημαντικό να έχετε και εσείς στο blog σας ένα τέτοιο menu που μπαίνει κάτω από τον τίτλο του blog σας, και το κάνει πιο εντυπωσιακό και πιο όμορφο. Στην πραγματικότητα πρόκειται για μία μπάρα-μενού που όπως αναφέραμε μπαίνει κάτω από τον τίτλο του blog και σε αυτή τη μπάρα-μενού μπαίνουν τα link από τις αναρτήσεις ή τις ετικέτες σας.
Μπορείτε να το δείτε πως δουλεύει και στην πράξη

Πάμε βήμα προς βήμα να δούμε πως θα τα βάλετε!

1..Πίνακας ελέγχου
2..Σχεδίαση

3..Στοιχεία Σελίδας

4..Προσθήκη gadget

5..HTML/Javascript 

Και μέσα στο gadget βάζουμε τον παρακάτω κώδικα:

<ul id="nav">

<li class="current_page_item">


<a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">test 1</a></li>

<li><a href="#">test 2</a></li>

<li><a href="#">test 3</a></li>

<li><a href="#">test 5</a></li>

<li><a href="#">test 6</a></li>

<li><a href="#">test 7</a></li>

<li><a href="#">test 8</a></li>


</ul>

<div class="clear"></div>

6.. Διάταξη 
7.. Επεξεργασία html
8.. Λήψη πλήρους προτύπου
Aλλαγες στην επεξεργασία HTML στο blogger

ctrl F λειτουργεί μόνον όταν ο κέρσορας είναι μέσα στο πρότυπο, και ανοίγει ένα κουτάκι, οπου γράφετε τη λέξη κλειδί η τη φράση που ψάχνετε, και αμέσως χρωματίζονται οι αντίστοιχες φράσεις 

</head>

  
11.. Αφού το βρούμε ακριβώς από πάνω του κάνουμε επικόλληση τον παρακάτω κώδικα:

<style type='text/css'>
#nav {
width:106.6%;
margin-left:-30px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ4IhpW9WX-zTlHtoErwOZF-0wZ17iO-K4dN9M379O3xBGEIijHl0GYtcDGEmkDXTt4ohMkmdh3dGa9oP99xNuW4XbAzox8rWo21EIf0g6emsQjXXPXLTE-ZIZZFZBuzPUR6k6vDP1Naw/s1600/2ppc2g3.png%25CE%25BE%25CE%25BF%25CE%25BD%25CE%25B9.png) repeat-x;
}

#nav li {
float: left;
display: block;
}

#nav li a {
float: left;
display: block;
padding: 12px 18px 12px 18px;
text-transform: uppercase;
text-decoration:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ4IhpW9WX-zTlHtoErwOZF-0wZ17iO-K4dN9M379O3xBGEIijHl0GYtcDGEmkDXTt4ohMkmdh3dGa9oP99xNuW4XbAzox8rWo21EIf0g6emsQjXXPXLTE-ZIZZFZBuzPUR6k6vDP1Naw/s1600/2ppc2g3.png%25CE%25BE%25CE%25BF%25CE%25BD%25CE%25B9.png) no-repeat top right;
color:#ffffff;
}

#nav li a:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ4IhpW9WX-zTlHtoErwOZF-0wZ17iO-K4dN9M379O3xBGEIijHl0GYtcDGEmkDXTt4ohMkmdh3dGa9oP99xNuW4XbAzox8rWo21EIf0g6emsQjXXPXLTE-ZIZZFZBuzPUR6k6vDP1Naw/s1600/2ppc2g3.png%25CE%25BE%25CE%25BF%25CE%25BD%25CE%25B9.png) no-repeat right -40px;
color:#ffffff;
text-decoration:none;
}

ul#nav li.current_page_item a, ul#nav li.current-cat a {
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ4IhpW9WX-zTlHtoErwOZF-0wZ17iO-K4dN9M379O3xBGEIijHl0GYtcDGEmkDXTt4ohMkmdh3dGa9oP99xNuW4XbAzox8rWo21EIf0g6emsQjXXPXLTE-ZIZZFZBuzPUR6k6vDP1Naw/s1600/2ppc2g3.png%25CE%25BE%25CE%25BF%25CE%25BD%25CE%25B9.png) no-repeat right -80px;
}

#nav li ul {
display: none;
}
</style>

12.. Κάνουμε προεπισκόπηση και αν δεν μας βγάλει κάποιο λάθος κάνουμε αποθήκευση προτύπου .


 *όπου # βάζουμε το link της ανάρτησης ή το lnik της ετικέτες


π.χ  <a href="http://free-bloggertips.blogspot.com/">ΑΡΧΙΚΗ ΣΕΛΙΔΑ</a></li>

http://www.mybloggertricks.gr