Ads 468x60px

Πέμπτη, 25 Φεβρουαρίου 2016

Red Navigation Bar

Φίλες και φίλοι γεια σας, σήμερα θα δούμε πως μπορούμε να ενσωματώσουμε 
στην σελίδα μας, μία navigation menu bar!Είναι σε κόκκινο χρώμα τοποθετείτε
εύκολα, έχει λίγα Links και δεν καθυστερεί καθόλου το άνοιγμα της σελίδας μας!







Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

και στο παράθυρο που θα ανοίξει 


επικολλήστε τον ακόλουθο κώδικα--
..............................................................................................................................................................
<style>
@import "http://fonts.googleapis.com/css?family=ABeeZee";
nav ul ul {
    display: none;
}
nav ul li:hover > ul {
    display: block;
    width: auto;
}
nav ul {
    background: -ms-linear-gradient(top, #b40c1f 25%, #c00c20 50%);
    background: -moz-linear-gradient(top, #b40c1f 25%, #c00c20 50%);
    background: -webkit-linear-gradient(top, #b40c1f 25%, #c00c20 50%);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.42);
    list-style: none;
    position: relative;
    display: inline-block;
    font-family: "ABeeZee",tahoma,serif;
    width: 100%;
    padding: 0;
}
nav{
    margin: 0 auto;
    width: 70%;
}
nav ul:after {
    content: ""; clear: both; display: block;
    color:#ffffff;
}
nav ul li {
    float: left;
    color:#ffffff;
}
nav ul li:hover {
    background: #aa0c20;
}
nav ul li:hover a {
    color: #fff;
}
nav ul li a {
    display: block; padding: 10px; text-decoration: none;
    color:#ffffff;
}
nav ul ul {
    background:#b40c1f;
    box-shadow: 0 0 12px rgba(0,0,0,0.15);
    border-radius: 0px;
    padding: 0;
    position: absolute;
    top: 100%;
}
nav ul ul li {
    float: none;
    border-top: 1px solid #aa0c20;
    border-bottom: 1px solid #aa0c20;
    position: relative;
}
nav ul ul li a {
    padding: 15px 40px;
    color: #fff;
}
nav ul ul li:hover {
    background: #aa0c20;
 }
nav ul ul ul {
    position: absolute; left: 100%; top:-1px;
}
</style>
<nav>
<ul>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li>

<a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li> 
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a><ul>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
</ul></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
</ul>
</nav>
.................................................................................................................................................................
ΑΛΛΑΓΕΣ 

Εκεί που λέει ΔΙΕΥΘΥΝΣΗ URL βάζετε την διεύθυνση σας, και εκεί που λέει ΤΙΤΛΟΣ βάζετε τον τίτλο σας που θα φαίνεται στην μπάρα!Αποθήκευση και έτοιμοι!

Καλή επιτυχία!!! 


Πηγή κώδικα 
thanks to bloggerspice.com



 Edit by

0 σχόλια :

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

Icon Icon Icon

spice up your blog