Today we are going to add a navigation menu named Slick Menu using css3 as it is going towards success day by day. It is quite simple to add this it is clear from any thing no Javascript no images and as well as Jquery simple just Css.
The entire process involves simple steps. Follow these instructions:
- Go To Blogger > Settings > Template
- Backup your template
- Click Edit HTML > Proceed
- Search for ]]></b:skin>
- Just above it paste the following code:
.wrapper {width: 100%;height: 80px;background : #464646;background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));border-top: 2px solid #939393;position: relative;margin-bottom: 30px;}ul {margin: 0;padding: 0;}ul.menu {height: 80px;border-left: 1px solid rgba(0,0,0,0.3);border-right: 1px solid rgba(255,255,255,0.3);float:left;}ul.menu li {list-style: none;float:left;height: 79px;text-align: center;background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);}ul li a {display: block;padding: 0 20px;border-left: 1px solid rgba(255,255,255,0.1);border-right: 1px solid rgba(0,0,0,0.1);text-align: center;line-height: 79px;background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));-webkit-transition-property: background;-webkit-transition-duration: 700ms;-moz-transition-property: background;-moz-transition-duration: 700ms;}ul li a:hover {background: transparent none;}ul li.active a{background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);}
6. Now search for <body> and just below it paste it paste the following code:
<div class="wrapper"><div class="container"><ul class="menu" rel="sam1"><li class="active"><a href="#">Home</a></li><li><a href="#">About</a></li><li ><a href="#">Blog</a></li><li><a href="#">Services</a></li><li><a href="#">Portfolio</a></li><li><a href="#">Contacts</a></li><li><a href="#">Twitter @insic</a></li></ul></div></div>
Tips:
Replace'#' with your desired link
7. Save your template and all done!
Visit the new page and see if things are as you planned. :)
if you so please kindly ask your questions we will share a lot of other things with you in up coming tutorials take care peace buddies =)
No comments:
Post a Comment