I've a whole new modern style you need to use on your
current blogs Navbar, the actual
slide out there. Slide out there menus are getting to be popular with modern
web design so you will want to? The slide out Navbar will likely be simply the actual blogger logo inside the top
corner in the screen but on hover it'll slide out there to complete size. It's
a straightforward trick to help implement and I've a movie tutorial at the end
below the actual code in case you're having difficulties.
Steps To add Latest Beautiful Blogger Navbar With a Slide
Out Effect.
- Log in to Blogger=>Template=>Edit Template.
- Find ]]></b:skin>
- Copy the below code and paste it above ]]></b:skin>
/*CSS image zoom effect http://www.simbh.com */
#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;
}
- save template
- that's it
I hope this article should be helpful to our beloved readers I wish you all the
best for your blogging , please feel free to ask if you have any questions
thanks !
Like the Post? Share with your Friends:-
0 comments: