اعتذر عن التأخير ..
تبع يا أخي هاذا الكود من موقع فيتنامي .. الشكل النهائي تقريبا راح يكون هكذا :
https://lh5.googleuser*******.com/-BDnXrkQUslY/TYugVVwEsVI/AAAAAAAAAb4/K3wWWc_F3E4/s1600/tabs2.jpg
يمكنك التحكم فيه حسبما تريد ,,, غير فقط في Css أي في الجزء الأول من الكود
إبحث عن الكود التالي في قالبك :
<div id='sidebar-wrapper'>
أضف بعده الكود التالي :
<style type='text/css'>
ul.tabs-widget{padding:0}
.tabs-widget li{margin:0 10px 10px 0;background:#fff;float:left;list-style-type:none;display:block;height:30px;line-height:30px;width:60px;border:4px solid #3c5670;text-align:center}
.tabs-widget li a{display:block;color:#3c5670;font-size:14px;text-decoration:none}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:#ff8053;color:#fff}
#sidebartab1 h2, #sidebartab2 h2, #sidebartab3 h2{display:none}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){$(".tabs-widget-*******-widget-themater_tabs-1432447472-id").hide();$("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();$(".tabs-widget-*******-widget-themater_tabs-1432447472-id:first").show();$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function(){$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");$(this).addClass("tabs-widget-current");$(".tabs-widget-*******-widget-themater_tabs-1432447472-id").hide();var activeTab=$(this).attr("href");$(activeTab).fadeIn ();return false;});});
</script>
<h2><ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>التبويب الأول </a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>التبويب الثاني</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'> التبويب الثالث</a></li>
</ul></h2>
<div class='clear'/>
<div class='tabs-widget-******* tabs-widget-*******-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' maxwidgets='1' preferred='yes'/>
</div>
<div class='tabs-widget-******* tabs-widget-*******-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' maxwidgets='1' preferred='yes'/>
</div>
<div class='tabs-widget-******* tabs-widget-*******-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' maxwidgets='1' preferred='yes'/>
</div>
و هكذا ستحصل على الشكل المطلوب في الموضوع
موفق