.png "English"){kind=small}
Πέμπτη 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>
@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>
<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
Εγγραφή σε:
Σχόλια ανάρτησης
(
Atom
)
Smart Defrag 2
Γειά σας σε αυτήν την ανάρτηση θα δούμε το Smart Defrag 2 ένα από τα καλύτερα προγράμματα ανασυγκρότησης των σκληρών μας δίσκων...
Auto Scrolling Recent Posts
Γειά σας ένα πολύ ωραίο widget με οριζόντιο Auto Scrolling για να παρουσιάζουμε τις πρόσφατες αναρτήσεις μας...
Free YouTube Uploader
Γειά σας σε αυτήν την ανάρτηση θα δούμε το Free YouTube Uploader το οποίο μας επιτρέπει...
Social media
Γειά σας τα gadgets και widgets για τα social media δεν έχουν πλέον τελιωμό και σε αυτήν την ανάρτηση θα δούμε...
Back to top button
Γεία σας σε αυτήν την ανάρτηση θα δούμε ένα πολύ γνωστό και χρήσιμο gadget το οποίο μας βοηθά έτσι ώστε...
Sitemap Widget
Γειά σας,σε αυτήν την ανάρτηση θα δούμε ένα πολύ ωραίο και χρήσιμο Sitemap widget το οποίο μας δείχνει μαζεμένες σε μία σελίδα...
Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού-Μη Εμπορική Χρήση-Όχι Παράγωγα Έργα 3.0 Ελλάδα .
0 σχόλια :
Δημοσίευση σχολίου