Spinny Leaf Menu

Γεια σας παιδια σημερα σας εχω ενα παρα πολλη ωραιο menu με φυλλα που δινει μια πολλη ωραια νοτα στο Blog σας. Ειναι πανευκολο στο να το προσθεσετε απλα ακολουθηστε τις παρακατω οδηγιες. (Demo οπως παντα ειναι στο τελος της αναρτησης)

1) Πρώτα, συνδεθείτε στο λογαριασμό σας Blogger.

2) Κάντε κλικ στο Σχεδίαση. και επιλέξτε Επεξεργασία HTML.

Προσοχή:

3) Πριν ξεκινήσουμε:

- Πρέπει να είστε προσεκτικοί κατά την αλλαγή του προτύπου σας.

- Πριν κάνετε οποιαδήποτε αλλαγή, αποθηκεύστε το προτυπο σας σε ασφαλή μέρος (Στον υπολογιστη σας). 

4) Παμε τωρα να ψαξουμε τον παρακατω κωδικα(Ctl+F):

]]></b:skin>

5) Και επικολουμε ακριβως απο πανω τον παρακατω κωδικα:

nav {
        width: 960px;
        height: 100px;
        margin: 120px auto;
        text-align: center;
}
.top-menu li {
        display: inline-block;
        text-align: center;
        margin: 30px 5px;
        position: relative;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
}
.top-menu li:hover {
        margin: 30px 20px;
}
.top-menu li:active {
        margin: 30px 33px;
}
.top-menu li a  {
        width: 100px;
        height: 100px;
        z-index: 9999;
        position: absolute;
        top: 35px;
        font-weight: bold;
        display: block;
        text-decoration: none;
        font-size: 20px;
        color: #fff;
        text-shadow: 0px 1px 1px rgba(0,0,0,0.4), 0px 4px 6px rgba(0,0,0,0.1), 0px 9px 11px rgba(0,0,0,0.1);
        -webkit-transition: all 0.1s linear;
        -moz-transition: all 0.1s linear;
        -o-transition: all 0.1s linear;
}
.top-menu li:active a {
        font-size: 26px;
        top: 30px;
        text-shadow: none;
}
.top-menu li div.menu-item {
        width: 100px;
        height: 100px;
        display: block;
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        -webkit-border-top-left-radius: 100px;
        -webkit-border-bottom-right-radius: 100px;
        -moz-border-radius-topleft: 100px;
        -moz-border-radius-bottomright: 100px;
        border-top-left-radius: 100px;
        border-bottom-right-radius: 100px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
}
.top-menu li:hover div.menu-item{
        -webkit-border-top-left-radius: 80px;
        -webkit-border-bottom-right-radius: 80px;
        -moz-border-radius-topleft: 80px;
        -moz-border-radius-bottomright: 80px;
        border-top-left-radius: 80px;
        border-bottom-right-radius: 80px;
                -webkit-transform: rotate(225deg);
        -moz-transform: rotate(225deg);
        -o-transform: rotate(225deg);
}
.top-menu li:active div.menu-item{
        -webkit-border-top-left-radius: 50px;
        -webkit-border-bottom-right-radius: 50px;
        -moz-border-radius-topleft: 50px;
        -moz-border-radius-bottomright: 50px;
        border-top-left-radius: 50px;
        border-bottom-right-radius: 50px;
}
#home { background: #41D05F; }
#cataloge { background: #E42B2B; }
#about { background: #ff8400; } 
#blogytricks  { background: #a800ff; }
#contact { background: #49a7f3; }

- Αποθηκεύστε το πρότυπο.

6) Παμε τωρα να το εφαρμοσουμε. Πηγαινουμε στο Στοιχεια Σελιδας/ Προσθηκη Gadget/ HTML/JavaScript και προσθετουμε τον παρακατω κωδικα:

<nav>
  <ul class="top-menu">
    <li><a href=#>Home</a><div class="menu-item" id="home"></div></li>
    <li><a href=#>Catalog</a><div class="menu-item" id="cataloge"></div></li>
    <li><a href=#>About</a><div class="menu-item" id="about"></div></li>
    <li><a href=#>Blogytricks</a><div class="menu-item" id="blogytricks"></div></li>
    <li><a href=#>Contact</a><div class="menu-item" id="contact"></div></li>
  </ul>
</nav>

Σημιωση:

- Προσοχή αμα θα αλλάξτε τα χρώματα.
- Τα κοκκινες γράμματα στη HTML (δηλαδη στον πρωτο κωδικα) δεν ειναι αναγκη να τα αλλαξετε για να αλλαξετε τα ονοματα αλλαξετε του δευτερου κωδικα μονο.


- Για το Demo ειναι το παρακατω βιντεο:

- Για ότι πρόβλημα υπάρξει μην διστάσετε να επικοινωνήστε μαζί μας μεσώ του

κουμπιού "Επικοινωνία" που θα βρείτε πάνω πάνω.
  
- Αμα σας αρεσε παρακαλω προωθηστε το Blog μας ή πατηστε παρακολουθηση.

  Ευχαριστω.

Copyrights: BlogyTricks© 

Πηγη κωδικα: paulsantosh