 |
| Sidebar Multitab- ebhabe |
How to create sidebar multi tab.
সবাই কেমন আছেন ? আজকে আমি Sidebar Multi Tab কিভাবে তৈরী করতে হয় তা জানানোর চেষ্টা করবো। এই পোস্টটি যারা জানেনা তাদের জন্য। এটি তৈরী করা খুব সহজ । কথা না বাড়িয়ে চলুন মূল পর্বে যাই..কাজের প্রথম ধাপ (1st step) :
টেমপ্লেট এ ক্লিক করুন (Template)>> Edit HTML>>
টেমপ্লেটে [Ctrl+F] চাপুন >>
টাইপ করুন ও খুঁজুন (Search) ]]></b:skin>
এরপর নিচের code গুলো (paste above) ]]></b:skin> এর ঠিক উপরে পেস্ট করুন।
<!--Best Tab widget by www.ebhabe.com-->
#sidebar-tab h2{display:none;}
#select-tab{margin:0 auto 10px}
#select-tab,#select-tab li{padding:0;margin:0;list-style:none;overflow:hidden}
#select-tab li{float:left;width:33.3%;text-align:center}
#select-tab a{line-height:32px;display:block;background-color:#404040;color:white;font-weight:bold;text-decoration:none}
#select-tab .selected a,#select-tab a:hover{background-color:#64A071}
#sidebar-main .widget1{background-color:#ffffff;width:100%;float:left;padding:5px}
#sidebar-main{overflow:hidden}
কাজের দ্বিতীয় ধাপ (2nd step) :
এবার নিচের কোডগুলো কপি করে আপনার সুবিধামতো Sidebar এ স্থাপন করুন।
(Copy and paste these code where you want..)
<!--www.ebhabe.com [Start] [Best Sidebartab]-->
<div id='sidebar-tab'>
<div id='tab'>
<div class='tab-widget-menu clear'>
<ul id='select-tab'>
<li class='tab1'><a href='#tab1'>Popular Post</a></li>
<li class='tab2'><a href='#tab2'>Comments</a></li>
<li class='tab3'><a href='#tab3'>Archive</a></li>
</ul>
</div>
<div id='sidebar-main'>
<div class='widget1' id='tab1'>
<b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'/>
</div>
<div class='widget1' id='tab2'>
<b:section class='sidebar' id='tab2-comments-posts' showaddelement='yes'/>
</div>
<div class='widget1' id='tab3'>
<b:section class='sidebar' id='tab3-archive-posts' showaddelement='yes'/>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){$("#select-tab li:first").addClass("selected");$("#sidebar-main > div").hide();$("#sidebar-main > div:first").show();$("#select-tab a").click(function(){$("#select-tab li").removeClass("selected");$(this).parent().addClass("selected");var a=$(this).attr("href");$("#sidebar-main > div:visible").hide();$(a).fadeToggle(1000);return false})});
//]]>
</script>
</div>
<!--www.ebhabe.com [End] [Best Sidebartab]-->
আমার মনে হয়, কাজটি করতে পেরেছেন। এখন সেভ করুন এবং সাইডবার দেখুন। (Now Save and see your Sidebar Multi Tab in layout.)
এটি আমার দেখা সবচেয়ে সহজ Sidebar Multi Tab.
(নোট) : আপনি চাইলে আরো ট্যাব বাড়াতে পারেন এবং আপনার ইচ্ছামতো রং পরিবর্তন করতে পারেন।