Saturday, 29 September 2012

Blogger Post Tabs Widget By Techsoulz

13:18
Searching for Post Tabs for your Blogger? 
Wordpress has a Post Tabs Plugins but Blogger dont have any Post Tabs Widget till now,Latest Blogger Templates Have Tabs at sidebar see the image below
If you want to use Tabs in your Posts then what you will do,if you have knowledge on coding part then you will search its html code in the Template..But if your Blog Template doesn't contain any Tabs then you need three types of codes CSS (for style), Javascript (for Function) and HTML (To put your info in Tabs)

How To Install Post Tabs Widget for Blogger?
  • If your Blog Template already contains Tabs in Sidebar (like above image) then you have to put only the HTML code in your Posts where you want to use these TABS
Copy the below code and paste it in your Blog Post put in HTML mode not in compose mode

POST TABS HTML CODE:
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>TabName1</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>TabName2</a></li>
</ul>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>

Your Info Here will display when first Tab is clicked that is "TabName1"

</div>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>

Your Info Here will display when 2nd Tab is clicked that is "TabName2"

</div>
  • You can Add Tabs and remove tabs in above code you should have some coding knowledge,see this below code (Brief Explanation)
<li><a href='#widget-themater_tabs-1432447472-id1'>TabName1</a></li>
  • This is for first Tab with name"TabName1" and Tab id is "1" and for inserting information in this Tab we use this below code.
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>

Your Info Here will display when first Tab is clicked that is "TabName1"

</div>
  • Hope you understand,if you want to add a Tab then you have to add two codes which i gave above and Tab id should be increasing we allot id1 for Tab1 and id2 for Tab2
NOTE: If your Blog Template already have Tabs in Sidebar then id1 id2 and id3 are alloted to those three Tabs,you have to use from id4 onwards.

POST TABS FULL WIDGET:
  • If your Blog Template dosn't contain Tabs Then use these Three codes CSS, Javascript and HTML
POST TABS CSS CODE :

.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#E12626;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgchu5Mk45dQcZQbq7tZgbPI1mRlEqCFYfi1guHWwMyOyq_N012ISajy2L34kSCBB9jVb9hyrvGfIhPthgWkuplgR3Hjuo8bdRtJwn1qOsCOdX7tVFpa4H2LeDXYzcKpMF-kiu723ZiQDc/s1600/tabs-bg.png) left top repeat-x;border:1px solid #EFE7E7;padding:6px 16px;display:block;text-decoration:none;font:bold 12px/12px Arial,Helvetica,Sans-serif}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgchu5Mk45dQcZQbq7tZgbPI1mRlEqCFYfi1guHWwMyOyq_N012ISajy2L34kSCBB9jVb9hyrvGfIhPthgWkuplgR3Hjuo8bdRtJwn1qOsCOdX7tVFpa4H2LeDXYzcKpMF-kiu723ZiQDc/s1600/tabs-bg.png) left -126px repeat-x;border:1px solid #E12626;color:#fff;text-shadow:0px 1px 0px #000;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}
  • Backup Your Template first.
  • Go to your Blog Template and search for this code <style type='text/css'> Paste the above CSS code Just Below The code which you have finded.
  • Now you have to put Javascript Code in template. 
Javascript Code:
<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
      
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
                    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
                    $(this).addClass(&quot;tabs-widget-current&quot;);
                    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>
  • Now In Template Search for this code </body> Paste the above javascript code just Above the code you have finded.
  • Now Preview your Template if nothing is wrong then save the Template.
To Display Post Tabs in you blog Posts Use the HTML Code Which I have gave at first. 

You can see the Demo in my blog i.e Sidebar Tabs

These Tabs look Smart and works Smart so dont think the above Procedure is tough or confusing its very simple if you any queries Please post your comments or you can message us on Facebook : https://www.facebook.com/Techsoulz

Blogger Posts Tabs Widget By Techsoulz,First On Techsoulz By Mohan Pendyala

comments