Animated Horizontal Menu For Blogger ( Νο 14 )

θα μπείτε στο Πανόπτη σας & μετά >>> Διάταξη >>> Επεξεργασία HTML και θα κάνετε αναζήτηση με το Ctrl + F για το.....

</head>

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

<!--MENU-14-STARTS-Widget-by-http://loneeagle110.blogspot.com-->
<style type="text/css">

.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; 
}


.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; 
padding: 0;
}

.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}

.animatedtabs a{
float: left;
position: relative;
top: 5px; 
background: url(http://i40.tinypic.com/2u4hpnr.jpg) no-repeat left top;
margin: 0;
margin-right: 3px;
padding: 0 0 0 9px;
text-decoration: none;
}

.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(http://i41.tinypic.com/mwdv77.jpg) no-repeat right top;
padding: 5px 14px 3px 5px; 
font-weight: bold;
color: black;
}


.animatedtabs a span {float:none;}
.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}

.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; 
top: 0;
}

.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}

.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; 
top: 0;
}
</style>
<!--MENU-14-STOPS-Widget-by-http://loneeagle110.blogspot.com-->

Κάνετε αποθήκευση προτύπου & πάμε στο 2ο βήμα.....

Πανόπτης ---> Διάταξη ---> Στοιχεία Σελίδας ---> Προσθήκη gadget ---> HTML/JavaScript

Και μέσα στο gadget βάζουμε τον παρακάτω κώδικα, χωρίς να προσθεσουμε κάτι στον Τίτλο.

<!--MENU-14-STARTS-Widget-by-http://loneeagle110.blogspot.com-->
<div class="animatedtabs">
<ul>
<li><li class="selected"><a href="..." title=""><span>Login</span></a></li>
<a href="...your link..." title=""><span>Home</span></a></li>
<li><a href="...your link..." title="...tab title..."><span>tab 1</span></a></li>
<li><a href="...your link..." title="...tab title..."><span>tab 2</span></a></li>
<li><a href="...your link..." title="...tab title..."><span>tab 3</span></a></li> 
<li><a href="...your link..." title="...tab title..."><span>tab 4</span></a></li>
<li><a href="...your link..." title="...tab title..."><span>tab 5</span></a></li>
<li><a href="http://loneeagle110.blogspot.com/search/label/Blogger%20Tutorials" title="Blogger Tutorials"><span>Blogger Tutorials</span></a></li>
<li><a href="..." title=""><span>Contact</span></a></li>
</ul>
</div>
<!--MENU-14-STOPS-Widget-by-http://loneeagle110.blogspot.com-->

Όπου ...your link... βάζετε τον σύνδεσμο της αντίστοιχης ετικέτας.

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

Πατάτε ΑΠΟΘΗΚΕΥΣΗ κι είστε ΟΚ.

Το αποτέλεσμα:





Για άλλα σχέδια σε Μενού δείτε τα.....

Οριζόντιο Μενού Νο 1
Οριζόντιο Μενού Νο 2
Οριζόντιο Μενού Νο 3
Οριζόντιο Μενού Νο 4
Οριζόντιο Μενού Νο 5
Οριζόντιο Μενού Νο 6
Οριζόντιο Μενού Νο 7
Οριζόντιο Μενού Νο 8
Οριζόντιο Μενού Νο 9
Οριζόντιο Μενού Νο 10
Οριζόντιο Μενού Νο 11
Οριζόντιο Μενού Νο 12
Οριζόντιο Μενού Νο 13

Αν η σελίδα σας δε βολεύει ή δεν θέλετε οριζόντιο μενού δείτε την ανάρτηση για προσθήκη κάθετου μενού εδώ!!!

ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!

Στην περίπτωση που κάπου δυσκολευτείτε μπορείτε να επικοινωνήσετε μαζί μου στο email: loneeagle110@gmail.com