Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε πως μπορούμε να
κρύψουμε την navbar της blogger από την κορυφή του blog μας!Εάν
χρησιμοποιείται πρότυπο(Template)της Blogger η default θέση της navbar
είναι στην κορυφή(top) του προτύπου σας!


Μέσω κώδικα Css μπορούμε να "εξαφανίσουμε" την navbar από την κορυφή
και να την έχουμε σε μορφή κουμπιού πάνω αριστερά στην σελίδα μας:





και πατώντας το να αναδύεται η navbar σε στυλ slide-out effect




 Η εφαρμογή του τρικ είναι απλή και για να γίνει πρέπει μόνο να εγκαταστήσουμε
τον κώδικα Css!


Αντιγράψτε τον ακόλουθο κώδικα:


..........................................................................................................................................................

#navbar {
width: 36px;
border-top: 1px solid #888888;
border-right: 5px solid #888888;
position: fixed;
top: 0px;
left: -6px;
background: #fe6602;
border-radius : 0 5px 5px 0;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);

-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;

-moz-transition-delay: 1.3s;
-ms-transition-delay: 1.3s;
-o-transition-delay: 1.3s;
-webkit-transition-delay: 1.3s;
transition-delay: 2.5s;

z-index: 10;
}

#navbar:hover {
width: 96%;

-moz-transition: all 0.6s linear;
-ms-transition: all 0.6s linear;
-o-transition: all 0.6s linear;
-webkit-transition: all 0.6s linear;
transition: all 0.6s linear;
}

...............................................................................................................................................

και για να τον επικολλήσετε ακολουθήστε τον






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


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




 Edit by