New Published Post: How To Fix Adsense Not Showing After Redirecting Blogger To Custom Domain
Like Us:
Facebook



How to Add Fancy CSS3 & jQuery Lavalamp Menu For Blogger


In my previous tweak, I have shared to you on how to add Drop down menu and it is useful especially if you have many clutters that disturbed the eyes of your readers. Today , I will share a  menu bar which I hve learnt across my research in the web. I believe you will find it more interesting than before.This trick uses  an amazing CSS3 & jQuery lavalamp .You can use this menu in six (6) different colors by just changing the div class word in the HTML code.This menu is originally designed by Insidesigns and Helperblogger made it bloggerized  to work perfectly with any blogger templates. With no so much word, let's us now go to the tutorial and see how to add this menu to your blogger blog.
jquery lavalamp menubar


How to Add Fancy CSS3 & jQuery Lavalamp Menu For Blogger


Step 1.  Adding the Script

A. Go to your Blogger Dashboard >> Template Click
B. Hit the  Edit HTML button
C. Find or Control F the code below in your template
</head>
D. After finding the above code, place the code below code just above the code in Step 1 C.

<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>

If you have already added a jQuery library to your blog then delete the highlighted code in orange)

Step 2. Adding Cascading Style Sheet (CSS)

A. Look for the code below
]]></b:skin>
B. Add the following code below just above the code in Step 2 A.


/*LAVALAMP MENU BY http://www.bloggingtipsandtrix.blogspot.com/ STARTS here*/ 

.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; 

/*LAVALAMP MENU BY http://www.bloggingtipsandtrix.blogspot.com/ ENDS here*/ 
C. You may now save your template

Step 3. Adding this widget on your blog

A. Now go back to your Blogger Dashboard
B. Click Lay-out  button >> Add a Gadget. Choose HTML/JavaScript
C. Copy the code below and paste it inside the empty space and drag it below Header section.


<div class="lavalamp dark">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Free Templates</a></li>
<li><a href="#">Recipes</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
<div class="floatr"></div>
</div>

Customizations:


  • Replace # with your (URL) link
  • Replace Home, About, Contact. 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 dark">  with one of the code below.
<div class="lavalamp dark">
<div class="lavalamp magenta dark">
<div class="lavalamp cyan">
<div class="lavalamp yellow">
<div class="lavalamp orange">
D. Click Save Arrangement
About the Author:
tilt  hover effect
Hello folks! This is Viral Apps, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook


Express yourself!
4 comments : Post Your's Buddies!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please Keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

Cerwenlloyd Gefjun
  1. im not able to click on the links of the menu plz help me

    ReplyDelete
    Replies
    1. i followed all the steps given above

      Delete
    2. Hi!, Alex good day, to make your link clickable, dont forget to replace the symbol (#) with your desired link or URL.
      Hope it helps you.

      Delete
  2. very nice post bro. keep up the best work. good luck!

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...