Blogger Tips And Tricks|Latest Tips For Bloggers

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Don't Click on "Expand Widget Templates"

3.Scroll down to where you see ]]></b:skin> tag:

4.Copy below code and paste it just before the ]]></b:skin> tag.

/* pageTabs*/.pageTabs {width: 760px; height:150px; margin: 10px auto 0;  font-size:11px;}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: 5px;border-bottom: 1px dashed #ddd;font-size: 1.8em;}.tab_content h3 a{line-height: 2em;color: #254588;}.tab_content img {float: left;margin: 10px 20px 20px 0;border: 1px solid #ddd;padding: 5px;}.tab_content p{padding-bottom:10px;}/*

5.Scroll down to where you see </head> tag:

6.Copy below code and paste it just before the </head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>$(document).ready(function(){$(&quot;.tab_content&quot;).hide();$(&quot;ul.tabs li:first&quot;).addClass(&quot;active&quot;).show();$(&quot;.tab_content:first&quot;).show();$(&quot;ul.tabs li&quot;).click(function(){$(&quot;ul.tabs li&quot;).removeClass(&quot;active&quot;);$(this).addClass(&quot;active&quot;);$(&quot;.tab_content&quot;).hide();var activeTab=$(this).find(&quot;a&quot;).attr(&quot;href&quot;);$(activeTab).fadeIn(1000)})});</script>

7.Now Click on "Save Templates"

8.Now go to Layout-->page elements and Click on 'Add a Gadget'.

9.Now Select 'HTML/Javascript' and add the code given below and click save.

<ul class="tabs"><li><a href="#tab1">TAB1</a></li><li><a href="#tab2">TAB2</a></li><li><a href="#tab3">TAB3</a></li><li><a href="#tab4">TAB4</a></li><li><a href="#tab5">TAB5</a></li></ul>

<div class="tab_container"><div id="tab1" class="tab_content">ENTER TAB 1 CONTENT</div>

<div id="tab2" class="tab_content">ENTER TAB 2 CONTENT</div>

<div id="tab3" class="tab_content">ENTER TAB 3 CONTENT</div>

<div id="tab4" class="tab_content">ENTER TAB 4 CONTENT</div>

<div id="tab5" class="tab_content">ENTER TAB 5 CONTENT</div>

</div>

Now you are done.It will look like this :

File Under : jquery, widget