Showing posts with label Drop & Down Menu For Blogger. Show all posts
Showing posts with label Drop & Down Menu For Blogger. Show all posts

Friday, April 25, 2014

// // Leave a Comment

Css Animated Menu Widget for Blogger

Blog navigate is very important. Readers loves to stay those blog that's have easy navigate Menu and if you put cool CSS Animated Menu to your blogger its attract the user mind totally in your blog.

You also read my previous article about Simple settings for Firefox and Internet Explorer on Blogger

Let's see how to add CSS Animated Menu in Blogger


Just Follow These Simple Steps

  • Go to Blogger Dashboard
  • Click on Drop & Down Menu of your blog
  • Click layout >> and click Add a Gadget >> Html/Javascript 
  • Then paste the below code on it

<style>
#fbt-nav {margin:0 auto;list-style: none;width: 965px;height: 86px;overflow-y: hidden;}
#fbt-nav li {float: left;}
#fbt-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;}
#fbt-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#fbt-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#fbt-nav li a:hover {cursor: pointer;}
#fbt-nav li a:hover img {top: -85px;}
#fbt-nav li a:hover .aname {top: 85px;}
#fbt-nav li:nth-child(1) a {background: #150517;border-radius: 5px 0 0 5px;}
#fbt-nav li:nth-child(2) a {background: #3E3535;}
#fbt-nav li:nth-child(3) a {background: #4A4344;}
#fbt-nav li:nth-child(4) a {background: #595454;}
#fbt-nav li:nth-child(5) a {background: #616D7E;}
#fbt-nav li:nth-child(6) a {background: #5E5A80;}
#fbt-nav li:nth-child(7) a {background: #2B60DE;}
#fbt-nav li:nth-child(8) a {background: #38ACEC;border-radius: 0 5px 5px 0;}
</style>

<div id="fbt-nav">
<li> <a href="/"><span class="aname">Homepage</span> <img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/48/Places-user-home-icon.png" /> </a> </li>

<li> <a href="#"> <span class="aname">Archive</span> <img src="http://icons.iconarchive.com/icons/kearone/comicons/48/zip-software-icon.png" /> </a> </li>

<li> <a href="#"> <span class="aname">About me</span> <img src="http://icons.iconarchive.com/icons/aha-soft/standard-portfolio/48/About-icon.png" /> </a> </li>

<li> <a href="#"> <span class="aname">Our Blog</span> <img src="http://icons.iconarchive.com/icons/scoyo/badge/48/My-Blog-icon.png" /> </a> </li>

<li> <a href="#"><span class="aname">Science</span> <img src="http://icons.iconarchive.com/icons/iconshock/real-vista-education/48/technology-icon.png" /> </a> </li>

<li> <a href="#"><span class="aname"> Sports  </span> <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/48/Games-Soccer-icon.png" /> </a> </li>

<li> <a href="#"><span class="aname">Photos</span> <img src="http://icons.iconarchive.com/icons/apathae/satellite/48/2-Pictures-icon.png" /> </a> </li>

<li> <a href="#"> <span class="aname">Contact</span> <img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/48/Email-Download-icon.png" /> </a> </li>
</div>
  • Then Click Save
  • View Your blog.
You have done!

If you need more help please hit a comment below i will reply you by same :)
Read More

Sunday, October 6, 2013

// // Leave a Comment

Add Multi Tabbed Navigation Widget To Blogger / Blogspot Blogs Sidebar




Hi Friends, Today I am going to share how to add multi tabbed widget for blogger. I have seen that there are so many tutorials on the web regarding this. But as I thought these are really complicated.I am writing very easy and simple tutorial which will guide you to add this widget to your blog’s sidebar.It looks very nice in your sidebar. This widget works based on jQuery and jQueryUI.





How to Install This Widget on Blogger?

Steps...

A. Adding Script Code

B. Adding CSS Theme Code

C. Adding HTML Code
Adding Script Code

I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout.Backup your template before attempting this tutorial.

Step 1:

In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.



http://infoblogmaz.blogspot.com/

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.




http://infoblogmaz.blogspot.com/

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">

</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$("#tabs").tabs();
});
</script>

Adding CSS Theme Code
Select One Theme and Place Theme code before </head> tag


Adding CSS Theme Code
Select One Theme and Place Theme code before </head> tag




<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" />




<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/black-tie/jquery-ui.css" type="text/css" />




<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/blitzer/jquery-ui.css" type="text/css" />




<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/dark-hive/jquery-ui.css" type="text/css" />




<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/dot-luv/jquery-ui.css" type="text/css" />



<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/eggplant/jquery-ui.css" type="text/css" />




<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/excite-bike/jquery-ui.css" type="text/css" />




<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/flick/jquery-ui.css" type="text/css" />






<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/hot-sneaks/jquery-ui.css" type="text/css" />




<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/le-frog/jquery-ui.css" type="text/css" />




<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/mint-choc/jquery-ui.css" type="text/css" />




<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/pepper-grinder/jquery-ui.css" type="text/css" />





<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/redmond/jquery-ui.css" type="text/css" />




<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/smoothness/jquery-ui.css" type="text/css" />



<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/south-street/jquery-ui.css" type="text/css" />





<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/start/jquery-ui.css" type="text/css" />




<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/sunny/jquery-ui.css" type="text/css" />



<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/swanky-purse/jquery-ui.css" type="text/css" />




<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/trontastic/jquery-ui.css" type="text/css" />



<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-darkness/jquery-ui.css" type="text/css" />




<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css" type="text/css" />




<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css" type="text/css" />


 Adding HTML Code


I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout. So, let's see how to install this cool widget in your blog..



Step 1:


If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.



Add a Gadget of HTML/JavaScript type.


If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget




2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

4. Now Click On Save 'JavaScript' You are done.



<a href="http://bloggerntricks.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><!-- Tabbed Navigation Widget For Blogger By http://24work.blogspot.com -->
<div id="tabs">
<ul><li><a href="#tabs-1">Tab1</a></li><li><a href="#tabs-2">Tab2</a></li><li><a href="#tabs-3">Tab3</a></li></ul>

<div id="tabs-1">Tab 1 content goes here</div>
<div id="tabs-2">Tab 2 content goes here</div>
<div id="tabs-3">Tab 3 content goes here</div>

<span style="font-size:10px;float:right;margin:5px;font-style:italic;"><a targer="_blank" href="http://bloggerntricks.blogspot.com">+ Grab this</a></span>
<noscript><span style="font-size:10px;float:right;margin:5px;font-style:italic;"><a targer="_blank" href="http://bloggerntricks.blogspot.com">+ Grab this</a></span></noscript>
</div>
<!-- Tabbed Navigation Widget For Blogger http://bloggerntricks.blogspot.com -->



Note:
Replace these with your tab titles


Tabs-1 , Tabs-2  , Tabs-3

Replace these with your widget codes.

Tab 1 content goes here , Tab 2 content goes here ,  Tab 3 content goes here
Read More