Προσθέστε Floating Spoiler Menu στο blog σας

Χρήστος Διολής 422 views0

Προσθέστε Floating Spoiler Menu στο blog σας
Μοιράσου το

Σε αυτή την ανάρτηση θα δούμε ένα πολύ όμορφο πρωτότυπο και εύχρηστο μενού για το blog σας που ξεδιπλώνεται (floating) όταν περνάμε τον κέρσορα του ποντικιού μας από πάνω του(mouseover) ,αλλιώς φαίνεται σαν εικονίδιο και δεν πιάνει καθόλου χώρο στην σελίδα μας!

Εγκατάσταση:

Πηγαίνετε blogger–> Διάταξη –>Προσθήκη gadget–> HTML/JavaScript και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα:

<style text-type=”CSS”>

#bmenu{

position:fixed;

right:10px;

center:0px;

background-color:#000;

border-radius:10px;

-moz-border-radius:10px;

border:1px solid #FFF;

width:202px;

height:20px;

color:#FF0606;

transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;

zindex:3;

overflow:hidden;

padding:9px 15px 10px;}

#bmenu h3{

margin:0;

padding:0;

text-align:center;

cursor:pointer;}

#bmenu ul{

border-radius:10px;-moz-border-radius:10px;

border:2px solid #FFF;

background-color:#FF0606;

margin:15px 0;

padding:0 15px;}

#bmenu li{list-style:none;margin:0 0 5px;padding:0;}

#bmenu li a{

color:#000;

text-decoration:none;

font-size:14px;}

#bmenu li a:hover{

color:#fff;}

#bmenu:hover{

z-index:5;

height:175px;

}

</style>

<div id=”bmenu”>

<h3>

TITLE</h3>

<ul>

<li><a href=”#”>ΤΙΤΛΟΣ</a></li>

<li><a href=”#”>ΤΙΤΛΟΣ</a></li>

<li><a href=”#”>ΤΙΤΛΟΣ</a></li>

<li><a href=”#”>ΤΙΤΛΟΣ</a></li>

<li><a href=”#”>ΤΙΤΛΟΣ</a></li>

</ul>

</div>

ΑΛΛΑΓΕΣ

TITLE—> Εδώ βάζουμε τον τίτλο που θέλουμε για το μενού! href=”#”>όπου # βάζουμε το λίνκ (url) που θέλουμε να ανοίγει, και όπου ΤΙΤΛΟΣ την ονομασία ετικέτας που θέλουμε να φαίνεται!

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