Ads 468x60px

Τρίτη, 6 Ιουνίου 2017

Navigation Menu Bar Widget

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα πολύ ωραίο και 
πρωτότυπο navigation bar widget!Μπαίνει οριζόντια στην σελίδα μας, είναι ελαφρύ
με κώδικα Css, δεν καθυστερεί το άνοιγμα της, και διαθέτει hover tooltip effect 
όταν κάνουμε mouseover με τον κέρσορα μας!













Η εγκατάσταση είναι απλή και

για να το εγκαταστήσετε και εσείς:
 
Πηγαίνετε blogger--> Διάταξη -->

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

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


 επικολλήστε τον ακόλουθο κώδικα--
..............................................................................................................................................................
<style type="text/css">

#menu3 ul {
list-style:none;
font-family: Helvetica, Arial, sans-serif;
font-size: 44px;
font-weight: bold;
letter-spacing: -2px;
line-height: 1.2em;
border-top:4px solid #000;
border-bottom:4px solid #666;
float:left;
clear:both;
margin:20px;
}
#menu3 ul li{
float:left;
}
#menu3 ul li a{
display:block;
text-decoration:none;
background-color:#ccc;
padding:10px 10px 5px 10px;
color:#666;
width:170px;
}
#menu3 ul li a span{
display:block;
text-align:center;

}
#menu3 ul li a span.title{

}
#menu3 ul li a:hover span.title{
color:#000;
}
#menu3 ul li a span.text{
padding:0px 5px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: -1px;
line-height: 2em;
text-align:right;
margin-top:-20px;
color:#f0f0f0;
font-weight:bold;
background-color:#000;
visibility:hidden;
}
#menu3 ul li a:hover span.text{
visibility:visible;
}
</style>

<div id="menu3">
<ul>
<li><a href="URL">
<span class="title">ΤΙΤΛΟΣ</span>
<span class="text">ΚΕΙΜΕΝΟ</span>
</a>
</li>
<li><a href="URL">
<span class="title">ΤΙΤΛΟΣ</span>
<span class="text">ΚΕΙΜΕΝΟ</span>
</a>
</li>
<li><a href="URL">
<span class="title">ΤΙΤΛΟΣ</span>
<span class="text">ΚΕΙΜΕΝΟ</span>
</a>
</li>
<li><a href="URL">
<span class="title">ΤΙΤΛΟΣ</span>
<span class="text">ΚΕΙΜΕΝΟ</span>
</a>
</li>
</ul>
</div>
...........................................................................................................................................
ΑΛΛΑΓΕΣ
URL -- Εδώ βάζετε το λινκ της διεύθυνση σας
ΤΙΤΛΟΣ --Εδώ βάζετε τον τίτλο του εικονιδίου
ΚΕΙΜΕΝΟ -- Εδώ βάζετε την λέξη που θα φαίνεται στο αναδυόμενο εφέ  

Αποθήκευση και έτοιμοι!


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


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




 Edit by

0 σχόλια :

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

Icon Icon Icon

spice up your blog