pro

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKa6Rc-ITWrzdtsubvGS1nkcG5TNik962gaCgzUL8fACF2SfvtyFOgW120M2oJdRjFTq2-tk9q-WsPHRVJ2EkJDneJ9Hc7fAi2d0jllYTdywGUHadXQTIB5QiUqeOxDYqVEJzlzaj6Q8fK/s1600/i_love_you_by_xxbeastofbloodxx2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="490" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKa6Rc-ITWrzdtsubvGS1nkcG5TNik962gaCgzUL8fACF2SfvtyFOgW120M2oJdRjFTq2-tk9q-WsPHRVJ2EkJDneJ9Hc7fAi2d0jllYTdywGUHadXQTIB5QiUqeOxDYqVEJzlzaj6Q8fK/s640/i_love_you_by_xxbeastofbloodxx2.jpg" width="640" /></a></div>
<b>There are lots of lots of different ways to earn 
money online, using ‘get paid to’ programs. Microworkers is a program 
where you get paid to complete short tasks, and if you want to increase 
your earnings, using a couple of this websites will enhance your chance 
of getting a bigger check.</b><b>There are lots of lots of different ways to earn 
money online, using ‘get paid to’ programs. Microworkers is a program 
where you get paid to complete short tasks, and if you want to increase 
your earnings, using a couple of this websites will enhance your chance 
of getting a bigger check.</b></div>

blo bla

There are lots of lots of different ways to earn money online, using ‘get paid to’ programs. Microworkers is a program where you get pa...

مزيد من المعلومات »

<div dir="rtl" style="text-align: right;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXM5khyixD1WsSUsBTm9dFvqSRusPZ9Kr5nuXVxBTcA0Gij5Hz-9r0HmSybXhvmAZaheZNSJpv8cyg_77DQp57D8s0HdxkjKY8EYx9-HnlLI_qLZM4BGB1ECgQ_I9ut1ls9wKVGpScPeQ/s1600/3-Tabbed-Menu-With-jQuery-And-CSS.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="3 Tabbed Menu With jQuery And CSS" border="0" height="237" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXM5khyixD1WsSUsBTm9dFvqSRusPZ9Kr5nuXVxBTcA0Gij5Hz-9r0HmSybXhvmAZaheZNSJpv8cyg_77DQp57D8s0HdxkjKY8EYx9-HnlLI_qLZM4BGB1ECgQ_I9ut1ls9wKVGpScPeQ/s320/3-Tabbed-Menu-With-jQuery-And-CSS.JPG" title="3 Tabbed Menu With jQuery And CSS" width="320" /></a></div>
<div style="text-align: left;">
<div class="post-body">
<div dir="ltr" style="text-align: justify; text-align: left;">
 Introducing a great Multi tabbed space efficient widget for blogger 
blogs. This multi tabbed widget will help you in decreasing your blog 
load time by combining your three <a href="http://www.ravisaive.in/2011/09/add-blogger-popular-posts-widget-with.html" target="_blank" title="Add Popular Posts To Blog">Popular posts</a>, <a href="http://www.ravisaive.in/2011/08/how-to-add-recent-posts-widget-in.html" target="_blank" title="Add Recent Posts To Blog">Recent Posts</a> and <a href="http://www.blogger.com/www.ravisaive.in/2011/07/how-to-add-random-posts-widget-to.html" target="_blank" title="Add Random Posts To Blog">Random Posts</a>
 widget into one. This tabbed menu widget features a tabbed content area
 with jQuery & CSS. When clicked to the tabs, content area switches 
to the new content with a slick accordion type effect. You can see the 
live demo of this widget in my blog sidebar. <a href="http://net.tutsplus.com/" target="_blank">Nettuts</a>
 is a great website for web design and development has created this 
tabbed widget by using jQuery & CSS and comptable with all major 
browsers. Follow below easy steps to add this widget in your blog.<br />
<h2>
How To Add 3 Tabbed Menu To Blog</h2>
1. Go to your <b style="color: purple;">Blogger Dashboard</b> click on ---> <b><span style="color: purple;">Design </span></b><span style="color: black;">tab</span> ---> <b style="color: purple;">Page Elements</b> tab.<br />
<br />
2. Click on "<b style="color: purple;">Add a Widget</b>" then select "<b style="color: purple;">HTML/Javascript</b>" Widget.<br />
<br />
3. Paste the entire following code inside the widget. (Note: <b>If you already using <b style="color: blue;">jQuery script</b> in your template then erase blue line of code</b>.)<br />
<pre><style>
#tabbed_box_1 {margin: 0px auto 0px auto;width:300px;}
.tabbed_box h4 {font-family:Arial, Helvetica, sans-serif;font-size:23px;color:#ffffff;letter-spacing:-1px;margin-bottom:10px;}
.tabbed_box h4 small {color:#e3e9ec;font-weight:normal;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;text-transform:uppercase;position:relative;top:-4px;left:6px;letter-spacing:0px;}
.tabbed_area {border:1px solid #494e52;background-color:#636d76;padding:8px;}
ul.tabs {margin:0px; padding:0px;margin-top:5px;margin-bottom:6px;}
ul.tabs li {list-style:none;display:inline;}
ul.tabs li a {background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;text-transform:uppercase;border:1px solid #464c54;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXC83YA30t-9EB0FdsdCnEN2o70ohTTiuwTber2x-zL4jVnEraUPVr155FYptanZD4mOVETDToYBBpWpUArMTkTcRZ5O44LAHoN0ly4GDAeRBwK3B-aCd91Ve0AwRIMiyIREOktx8WvSA/s1600/tab_off.jpg); background-repeat:repeat-x;background-position:bottom;}
ul.tabs li a:hover {background-color:#2f343a;border-color:#2f343a;}
ul.tabs li a.active {background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom: 1px solid #ffffff;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN03UihH4kMpWixnQAYgX10wXgOC4XN5Ae2ZQQS7pxaWxskRsKa1HzQQReJAsDdYifhDcXsxbG1H_h_k1LeCG1F7Y3uE10mWKyM7VBLDPhkIUgR9MtUOjRI-vtlUgqv0OaPvyI2iXy8ZU/s1600/tab_on.jpg);background-repeat:repeat-x;background-position:top; }
.content {background-color:#ffffff;padding:10px;border:1px solid #464c54;font-family:Arial, Helvetica, sans-serif; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1GsSICl5BDmSkP3J-CFUzSSRxlARYvACreavADzJu45TiNxtGA11sHCebxd4sZw-Lg6wH-f_ULsny0BodwZ702ciiAf66CRKPCgCHyrVzgrC_SKBIDEqwXVwvELxSpIzZLo2cDCOr994/s1600/content_bottom.jpg);background-repeat:repeat-x;background-position:bottom;}
#content_2, #content_3 { display:none; }
.content ul {margin:0px;padding:0px 20px 0px 20px;}
.content ul li {list-style:none;border-bottom:1px solid #d6dde0;padding-top:15px;padding-bottom:15px;font-size:13px;}
.content ul li:last-child { border-bottom:none;}
.content ul li a {text-decoration:none;color:#3e4346;}
.content ul li a small {color:#8b959c;font-size:9px;text-transform:uppercase;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;left:4px;top:0px;}
.content ul li a:hover {color:#a59c83;}
.content ul li a:hover small {color:#baae8e;}
</style>
<b style="color: blue;"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script></b>
<script>
// When the document loads do everything inside here ...
$(document).ready(function(){
// When a link is clicked
$("a.tab").click(function () {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all content up
$(".content").slideUp();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">
<ul class="tabs">
<li><a href="javascript:void(0);" title="content_1" class="tab active"><b style="color: green;">Tab 1</b></a></li>
<li><a href="javascript:void(0);" title="content_2" class="tab"><b style="color: green;">Tab 2</b></a></li>
<li><a href="javascript:void(0);" title="content_3" class="tab"><b style="color: green;">Tab 3</b></a></li>
</ul>
<div id="content_1" class="content">

<b style="color: red;">YOUR CONTENT GOES HERE</b>

</div>
<div id="content_2" class="content">

<b style="color: red;">YOUR CONTENT GOES HERE</b>
 
</div>
<div id="content_3" class="content">

<b style="color: red;">YOUR CONTENT GOES HERE</b>

</div>
<span style="color:#ddd; font-weight:bold; font-family:arial; font-size:11px;">Widget by: <a style="color:#f7f7f7; font-weight:bold" href="http://www.ravisaive.in">Ravi Saive</a></span>
</div>
</pre>
4. Replace <b style="color: green;">Tab 1</b>, <b style="color: green;">Tab 2</b>, and <b style="color: green;">Tab 3</b> texts with your own texts.<br />
<br />
5. Replace <b style="color: red;">YOUR CONTENT GOES HERE</b> with your own content.<br />
<br />
6. Save your widget.  <br />
<br />
If you are looking for three in widget like <b>Recent Posts</b>, <b>Random Posts</b> and <b>Popular Posts</b> widget into one together like shown in below screenshot, then follow below steps:<br />
<br />
<br />
<center>
<img alt="3 Tabbed Menu With Recent, Random and Popular Posts" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJf_rZJ7sj4Af3x29q6FDjplD4c1-AzLEP2cJaDfM0rsHQC2OhYjYb6Ge7LFMVMwqfUoz3hyC7WSzuKMCCCZP5sTHxrg_f9cbpUD6UbWUOOlDDURfZNSr3Rmmi8phDBTolm0mQ9xF6ezE/s1600/3-Tabbed-Menu-With-Recent-Random-and-Popular-Posts.JPG" style="float: none;" title="3 Tabbed Menu With Recent, Random and Popular Posts" /></center>
<br />
<h2>
3 Tabbed Menu With Recent, Random and Popular Posts</h2>
1. Paste the following code inside the "<b style="color: purple;">HTML/Javascript</b>" Widget.<br />
<pre><style>
/* Tabbed Menu CSS by www.ravisaive.in */
 #tabbed_box_1 {margin: 0px auto 0px auto;width:300px;}
.tabbed_box h4 {font-family:Arial, Helvetica, sans-serif;font-size:23px;color:#ffffff;letter-spacing:-1px;margin-bottom:10px;}
.tabbed_box h4 small {color:#e3e9ec;font-weight:normal;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;text-transform:uppercase;position:relative;top:-4px;left:6px;letter-spacing:0px;}
.tabbed_area {border:1px solid #494e52;background-color:#636d76;padding:8px;}
ul.tabs {margin:0px; padding:0px;margin-top:5px;margin-bottom:6px;}
ul.tabs li {list-style:none;display:inline;}
ul.tabs li a {background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;text-transform:uppercase;border:1px solid #464c54;background-image:url(http://nettuts.s3.amazonaws.com/001_Tabbed/site/images/tab_off.jpg); background-repeat:repeat-x;background-position:bottom;}
ul.tabs li a:hover {background-color:#2f343a;border-color:#2f343a;}
ul.tabs li a.active {background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom: 1px solid #ffffff;background-image:url(http://nettuts.s3.amazonaws.com/001_Tabbed/site/images/tab_on.jpg);background-repeat:repeat-x;background-position:top; }
.content {background-color:#ffffff;padding:10px;border:1px solid #464c54;font-family:Arial, Helvetica, sans-serif; background-image:url(http://nettuts.s3.amazonaws.com/001_Tabbed/site/images/content_bottom.jpg);background-repeat:repeat-x;background-position:bottom;}
#content_2, #content_3 { display:none; }
.content ul {margin:0px;padding:0px 20px 0px 20px;}
.content ul li {list-style:none;border-bottom:1px solid #d6dde0;padding-top:15px;padding-bottom:15px;font-size:13px;}
.content ul li:last-child { border-bottom:none;}
.content ul li a {text-decoration:none;color:#3e4346;}
.content ul li a small {color:#8b959c;font-size:9px;text-transform:uppercase;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;left:4px;top:0px;}
.content ul li a:hover {color:#a59c83;}
.content ul li a:hover small {color:#baae8e;}

/* Recent, Random & Popular Posts CSS by www.ravisaive.in */
#featured { color:#000;  margin: 1px 5px; line-height:1.5em;  font-size:13px}
#featured ol{ margin:0 15px; padding:0}
#featured li{border-bottom: 1px dashed rgba(0, 0, 0, 0.1);font-family: "Droid Sans",arial,sans-serif;font-weight:normal;font-size: 12px;line-height: 1.2em; margin:0 5px; padding:0 0 0.25em 0px}
#featured ol li a{color:#333; text-decoration:none}
#featured ol li a:hover{color:#dc0771; text-decoration:none}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
// When the document loads do everything inside here ...
$(document).ready(function(){
// When a link is clicked
$("a.tab").click(function () {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all content up
$(".content").slideUp();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">
<ul class="tabs">
<li><a href="javascript:void(0);" title="content_1" class="tab active">Recent</a></li>
<li><a href="javascript:void(0);" title="content_2" class="tab">Random</a></li>
<li><a href="javascript:void(0);" title="content_3" class="tab">Popular</a></li>
</ul>
<div id="content_1" class="content">
<script type="text/javascript">
function showrecentposts(json) {

for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }
    posttitle = posttitle.link(posturl);
    var readmorelink = "(more)";
    readmorelink = readmorelink.link(posturl);
    var postdate = entry.published.$t;
    var cdyear = postdate.substring(0,4);
    var cdmonth = postdate.substring(5,7);
    var cdday = postdate.substring(8,10);
    var monthnames = new Array();
    monthnames[1] = "Jan";
    monthnames[2] = "Feb";
    monthnames[3] = "Mar";
    monthnames[4] = "Apr";
    monthnames[5] = "May";
    monthnames[6] = "Jun";
    monthnames[7] = "Jul";
    monthnames[8] = "Aug";
    monthnames[9] = "Sep";
    monthnames[10] = "Oct";
    monthnames[11] = "Nov";
    monthnames[12] = "Dec";
    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
    var re = /<\S[^>]*>/g; 
    postcontent = postcontent.replace(re, "");

document.write(""+posttitle+"");
    if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);

if (showpostsummary == true) {

if (postcontent.length < numchars) {
          document.write('');
         document.write(postcontent);
          document.write('');}
      else {
          document.write('');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...' + readmorelink);
          document.write('');}
}
}
}
</script>
<script style='text/javascript'>var numposts = <b style="color: red;">10</b>;var showpostdate = <b style="color: red;">false</b>;var showpostsummary = <b style="color: red;">false</b>;var numchars = <b style="color: red;">100</b>;</script>
<div id="featured">
<script src='http://<b style="color: blue;">www.ravisaive.in</b>/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'></script>
<span id=rcw-cr><a href="http://www./2012/01/3-tabbed-menu-with-jquery-and-css.html">Recent Posts Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>
</div>
</div>
<div id="content_2" class="content">

3 Tabbed Menu With jQuery And CSS

Introducing a great Multi tabbed space efficient widget for blogger blogs. This multi tabbed widget will help you in decreasing your...

مزيد من المعلومات »

pro

opopo

tota

yeye yee

blo bla

bla blo

bla bla lba

3 Tabbed Menu With jQuery And CSS

[Widget_title][combine][recent][5]

[Title][featuredpost][random][5]

[Widget_title][gallery1][recent][10]