The New Amazing CSS3 & JQUERY Navigation Menu For Your Blog | Tricky Tricks4You - Latest Internet Tricks, Computer Tricks, Mobile Tricks, Hacking, Money Online Tricky Tricks4You - Latest Internet Tricks, Computer Tricks, Mobile Tricks, Hacking, Money Online: The New Amazing CSS3 & JQUERY Navigation Menu For Your Blog
Skillblogger

LiveZilla Live Help

Sunday, February 17, 2013

The New Amazing CSS3 & JQUERY Navigation Menu For Your Blog



                                                          LIVE DEMO CLICK HERE


ADDING THIS MENU TO YOUR BLOG!!!

 This widget installation bit tough therefore i divided this into 3 parts for easy understanding
  1. Adding Scripts
  2.  Adding  attractive Styles
  3. Adding The new CSS3  Menu

1. Adding Scripts

  1. Go to Blogger Dashboard > Template
  2. Click on Edit HTML
  3. Hit Proceed
  4. Find below piece of code


</head>

Add below code just above it,(If you have already added a jQuery library to your blog then delete the highlighted code)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.helperblogger.com/lavalamp-menu.js" type="text/javascript"></script>

2. Adding Attractive Styles


Now find below piece of code,

]]></b:skin>




add below CSS code  before it,

/*NAVIGATION MENU BY http://trickytechspot.blogspot.com START*/

.lavalamp {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
 -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
 height: 18px;
        font-family: calibri;
}

.magenta {
 background : rgb(190,64,120);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 border: 1px solid #841144;
 
}

.cyan {
 background : rgb(64,181,197);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 border: 1px solid #2f8893;
 
}

.yellow {
 background : rgb(255,199,79);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 border: 1px solid #c08c1f;
 
}

.orange {
 background : rgb(255,133,64);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 border: 1px solid #c04f11;
 
}

.dark {
 background : rgb(89,89,89);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 border: 1px solid #272727;
 
}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
 color: #fff;
 text-shadow: 0 -1px 0 rgba(0,0,0,.40);
 
}

.lavalamp a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}

.lavalamp ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}

.lavalamp ul li {
    list-style: none;
    float:left;

    text-align: center;
    }

.lavalamp ul li a {
    padding: 0 20px;
    text-align: center;
    }

.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}

/*NAVIGATION MENU BY http://trickytechspot.blogspot.com/ END*/


Now save your template and Exit.

3. Adding The new CSS3  Menu


Now come to Layout Page

  • Now come to Page Layout
  • Click on Add a Gadget (Below Header)
  • Choose HTML/JavaScript
  • Copy and paste below code inside it,

<div class="lavalamp orange">
 <ul>
  <li class="active"><a href="">Home</a></li>
  <li><a href="http://trickytechspot.blogspot.com">About Me</a></li>
  <li><a href="http://trickytechspot.blogspot.com">Sitemap</a></li>
  <li><a href="http://trickytechspot.blogspot.com">Services</a></li>
  <li><a href="http://trickytechspot.blogspot.com">Advertise Here</a></li>
  <li><a href="http://trickytechspot.blogspot.com">Contacts</a></li>
  <li><a href="http://trickytechspot.blogspot.com">Back to Article</a></li>
  <li><<a href="http://trickytechspot.blogspot.com">Review ME?</a></li>
 </ul>
 <div class="floatr"></div>
</div>

  • Replace  "http://trickytechspot.blogspot.com" with the links
  • Replace About me,sitemap,serices. etc. with your link text which you want to appear on the menu.
  • If you want to change background color of the menu then replace <div class="lavalamp orange"> with one of the code below.


<div class="lavalamp">
<div class="lavalamp magenta">
<div class="lavalamp cyan">
<div class="lavalamp yellow">
<div class="lavalamp orange">
<div class="lavalamp dark">

 At last finally save your widget and you are done.

I HAVE TRIED MY BEST FOR EASY UNDERSTANDING THIS INSTALLATION,
If you still are getting any problem with installation then comment it below,we will reply you as fast as we can



Happy Blogging

Like the Post? Share with your Friends:-

Team SB
Posted By: Ramees Kaztro

0 comments:

POST A COMMENT

Contact Us

Name

Email *

Message *

 

Flag Counter

Free counters!

About Me

My photo

He is the content writer and admin of this gaming blog who helps to free download latest full version PC games for his fellow Gamers. He is a BCA(Bachelor Of Computer Application) student and started blogging from since 2013 and he looks forward all his Gamer's support, for encouraging him to provide more games for you..
Connect Him On @ Facebook.com/rameeskaztro , Instagram.com/rameeskaztro

Sie Info

Copyright © . SkillBlogger. All Rights Reserved.
Designed by :-Ramees Kaztro