Subscribe For Free Updates!

We'll not spam mate! We promise.

Friday 24 June 2011

Professional Buttons Navigation Gadget for Blogger Templates


I know there are quite a few tutorials out there that demonstrate how to create tabs with CSS & jQuery ! but after my research on the net for blogger tabbed navigation content  ! finally i came out with the following source THIS WIDGET CREATED BY THE LAGENT SOHTANAKA.COM :

Simple Tabs w/ CSS & jQuery


1. Log in to your Blogger account

2. On your Blogger Dashboard, click on the "Layout" link as shown in the blow image


 
3. Click On "Add a Gadget" as displayed in the Below Image 

4.Scroll down the list and find "HTML/ Javascript" and click on the "+" button
FINALLY INSERT THIS CODE WHICH IS BELLOW AND SAVE IT ! THAN PREVIEW YOUR TEMPLATE :) DONE

<style type="text/css">
body {
    background: #f0f0f0;
    margin: 0;
    padding: 0;
    font: 10px normal Verdana, Arial, Helvetica, sans-serif;
    color: #444;
}
h1 {font-size: 3em; margin: 20px 0;}
.container {width: 500px; margin: 10px auto;}
ul.tabs {
    margin: 0;
    padding: 0;

float: left;
    list-style: none;
    height: 32px;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    width: 100%;
}
ul.tabs li {

float: left;
    margin: 0;
    padding: 0;
    height: 31px;
    line-height: 31px;
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px;
    background: #e0e0e0;
    overflow: hidden;
    position: relative;
}
ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid #fff;
    outline: none;
}
ul.tabs li a:hover {
    background: #ccc;
}    
html ul.tabs li.active, html ul.tabs li.active a:hover  {
    background: #fff;
    border-bottom: 1px solid #fff;
}
.tab_container {
    border: 1px solid #999;
    border-top: none;
    clear: both;

float: left; 
    width: 100%;
    background: #fff;
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}
.tab_content {
    padding: 20px;
    font-size: 1.2em;
}
.tab_content h2 {
    font-weight: normal;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ddd;
    font-size: 1.8em;
}
.tab_content h3 a{
    color: #254588;
}
.tab_content img {

float: left;
    margin: 0 20px 20px 0;
    border: 1px solid #ddd;
    padding: 5px;
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {


//Default Action
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content



//On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to 
identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content

return
false;
    });

});
</script>
</head>

<body>

<ul class="tabs">
    <li><a href="#tab1">Gallery</a></li>
    <li><a href="#tab2">Submit</a></li>
    <li><a href="#tab3">NEWS</a></li>
    <li><a href="#tab4">FAQ</a></li>
</ul>

<div class="tab_container">
    <div id="tab1"
class="tab_content">
        <!--Content-->
    </div>
    <div id="tab2"
class="tab_content">
       <!--Content-->
    </div>
<div class="tab_container">
    <div id="tab3"
class="tab_content">
        <!--Content-->
    </div>
<div class="tab_container">
    <div id="tab4"
class="tab_content">
        <!--Content-->
    </div>
</div>
</body>
</html>

NOTE : THIS WIDGET IS MADE ON WIDTH 500px SO IF YOUR SIDEBAR OR THE PLACE WHERE YOU WANT THIS WIDGET IS LESS OR MORE THAN YOU NEED TO ADJUST THE SIZE TO YOUR NEED !

Please Give Us Your 1 Minute In Sharing This Post!
SOCIALIZE IT →
FOLLOW US →
SHARE IT →
Powered By: BloggerYard.Com

1 comments:

  1. Thanks for the coding guidance.They are really nice.These navigation buttons are really very helpful.
    Website Designer Bahrain

    ReplyDelete