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
Follow These Step to Install this widget >>
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>
|
Loading...
|
Comments :
Post a Comment