ব্লগারের সাইডবারে যুক্ত করুন Multi Tab Widget

Multi Tab Widget ব্লগার, ওয়ার্ডপ্রেস এবং যে কোন ওয়েবসাইটের জন্য অত্যান্ত Common এবং গুরুত্বপূর্ণ একটি উইজেট। এটি আপনার ব্লগের সাইডবারে থাকা উইজেটগুলিকে দ্রুত লোড নিতে অনেক সাহায্য করে। কারণ Multi Tab Widget এর মাধ্যমে আপনি একটি ট্যাবের আধীনের তিন থেকে চারটি পর্যন্ত উইজেট যুক্ত করে রাখতে পারবেন। যার ফলে ব্লগের সাইডবারকে অনেক লম্বা এবং বড় হওয়া থেকে রক্ষা করতে পারবেন। তাছাড়া আপনার ব্লগকে যদি প্রফেশনাল Look দিতে চান তাহলে অবশ্যই Multi Tab Widget যুক্ত করতে হবে।

আপনি যদি Google এ সার্চ দেন তাহলে এ ধরনের কয়েকশত উইজেট পেয়ে যাবেন, কিন্তু বিষয়টি হতাশ হওয়ার মত হলেও সত্য যে, ১০০ ভাগ কার্যকরী একটি পোষ্টও খুজে পাবেন না। আমার ব্লগে যুক্ত করার জন্য আমি নিজেও গুগলে অনেক সার্চ করেছি, কিন্তু ২২-২৪ টির মত চেষ্টা করেও কোন কাজ হয়নি। কয়েকটি যুক্ত করতে পেরেছিলাম তবে খুবই স্লো গতির ছিল। এই জন্য শেষ পর্যন্ত আমাকে ঘাম ঝরানো পরিশ্রম করে নিজেই তৈরী করে নিতে হলো।

উইজেটটি মূলত আমার ব্লগের জন্য তৈরী করেছিলাম। এর ডেমো আমার ব্লগের সাইডবারে দেখতে পাচ্ছেন। পরবর্তীতে অনেকের অনুরোধে আমি এটি সাবার সাথে শেয়ার করলাম। এ উইজেটটি তৈরী করতে অর্থাৎ পরিপূর্ণভাবে গঠন করতে আমাকে প্রায় ০২ দিন পরিশ্রম করতে হয়েছে। আমি গ্যারান্টি দিয়ে বলতে পারি এটি আপনার ব্লগের কোন অংশই শ্লো করবে না।

আমার ব্লগে এটি দুটি ট্যাবে যুক্ত করা আছে কিন্তু আমি আপনাদের সাথে ০৩ টি ট্যাবের মাধ্যমে শেয়ার করবো। এর প্রত্যেকটি ট্যাবে Edit করার অপশন পাবেন। কাজেই Layout অপশনে না গিয়েও আপনার ব্লগ থেকে প্রত্যেকটি উইজেট Edit করতে পারবেন। তাছাড়া এর প্রত্যেকটি ট্যাব ব্লগার Layout এর এক সারিতে পাবেন।

সকল পোষ্ট দেখুন

কিভাবে ব্লগে যুক্ত করবেন?

প্রথমে আপনার ব্লগে লগইন করুন।
এরপর Template > Edit Html এ ক্লিক করুন।

তারপর কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
এখন ]]></b:skin> ট্যাগের ঠিক ‍উপরে নিচের Css কোডগুলি পেষ্ট করুন।

/* Pro Sidebar Multi Tab
-------------------------------------- */
ul.navtab,ul.navtab li {
   list-style:none;
   padding:0;margin:0;
}
ul.navtab {
   height:32px;
   width:300px;
   padding:0 0px;
   margin:0;
   border-bottom:5px solid #70cf0a;
   margin-bottom:5px;
}
ul.navtab li {
   float:left;
   width:33.3%;
   text-align:center;
}
ul.navtab li a {
   display:block;
   line-height:32px;
   height:32px;
   background-color:#2e2e2e;
   color:#FFF;
   text-decoration:none;
   font-size:14px;
}
ul.navtab li a.current,ul.navtab li a:hover {
   background-color:#70cf0a;
}
#sidebar-tengah .widget-content,#sidebar-tengah .widget {
   border:0;
   padding:0;
   margin:0;
}
#sidebar-tengah .widget-content {
   background-color:#000;
   background-color:transparent;
}
#sidebar-tengah {
   border:1px solid #93DAF8;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
}

আবার কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।
তারপর </head> ট্যাগের ঠিক ‍উপরে নিচের JavaScript গুলি পেষ্ট করুন।

<script type='text/javascript'>
//<![CDATA[
(function(b){b.organicTabs=function(c,l){var a=this;a.$el=b(c);a.$nav=a.$el.find(".navtab");a.init=function(){a.options=b.extend({},b.organicTabs.defaultOptions,l);b(".list-tabwrap .hide").css({position:"relative",top:0,left:0,display:"none"});a.$nav.delegate("li > a","click",function(){var c=a.$el.find("a.current").attr("href").substring(1),e=b(this),g=e.attr("href").substring(1),d=a.$el.find(".list-tabwrap"),f=d.height();d.height(f);g!=c&&0==a.$el.find(":animated").length&&a.$el.find("#"+c).fadeOut(a.options.speed,
function(){a.$el.find("#"+g).fadeIn(a.options.speed);var b=a.$el.find("#"+g).height();d.animate({height:b});a.$el.find(".navtab li a").removeClass("current");e.addClass("current")});return!1});b(".sidebarmd-widget .BlogArchive .toggle").length&&b(".sidebarmd-widget .BlogArchive .toggle").click(function(){var a=b(this).parents(".BlogArchive"),d=b(this).parent("li").children("ul"),c=function(){var c=a.height();b("#sidebar-tengah .list-tabwrap").animate({height:c})};b(this).children().is(".toggle-open")?
setTimeout(c,500):0<d.length?setTimeout(c,500):setTimeout(c,4E3)});var e,d,f,c=a.$el.find(".nav-one a"),h=a.$el.find(".nav-two a"),k=a.$el.find(".nav-three a");e=c.attr("href");d=h.attr("href");f=k.attr("href");e=a.$el.find(e);d=a.$el.find(d);f=a.$el.find(f);e=e.find(".widget > h2:first").html();d=d.find(".widget > h2:first").html();f=f.find(".widget > h2:first").html();c.html(e);h.html(d);k.html(f)};a.init()};b.organicTabs.defaultOptions={speed:300};b.fn.organicTabs=function(c){return this.each(function(){new b.organicTabs(this,
c)})}})(jQuery);
//]]>
</script>

এবার পুনরায় কিবোর্ড হতে Ctrl+F চেপে <b:skin> অংশটি সার্চ করুন।

এখন নিচের কোডগুলি উপরের চিত্রের যে স্থানে লাল চিহ্ন দ্বারা মার্ক করা হয়েছে ঠিক সেই জায়গায় পেষ্ট করুন।

body#layout #sidebar-tengah .sidebarmd-widget {width:33.33%; float:$startSide}
body#layout ul.navtab {display:none}
body#layout #sidebar-tengah {overflow:hidden}

এখন আবারও কিবোর্ড হতে Ctrl+F চেপে <div id='sidebar-wrapper'> অংশটি সার্চ করুন। এটি না পেলে এই <div class='column-right-inner'> অংশটি সার্চ করুন। (নোটঃ তারপরও যদি না পান তাহলে আপনাকে একটু কষ্ট করে আপনার ব্লগে Sidebar ট্যাগটি টি সার্চ করে নিতে হবে)।
নিচের কোডগুলি উপরের সাইডবারের নিচে পেষ্ট করুন।

<div id='sidebar-tengah'>
<ul class='navtab'>
<li class='nav-one'><a class='current' href='#populartab'>Populer</a></li>
<li class='nav-two'><a href='#commenttabs'>Comments</a></li>
<li class='nav-three'><a href='#archivetab'>Archive</a></li>
</ul>
<div class='list-tabwrap'>
<div class='sidebarmd-widget' id='populartab'>
<b:section class='sidebar tabct' id='Popular-Tab' maxwidgets='1' preferred='yes'/>
</div>
<div class='hide sidebarmd-widget' id='commenttabs'>
<b:section class='sidebar tabct' id='Comment-Tab' maxwidgets='1' preferred='yes'/>
</div>
<div class='hide sidebarmd-widget' id='archivetab'>
<b:section class='sidebar tabct' id='Archive-Tab' maxwidgets='1' preferred='yes'/>
</div>
</div></div>
<script class='jshilang' type='text/javascript'>
//<![CDATA[
jQuery("#sidebar-tengah").organicTabs();
//]]>
</script>

সবশেষে Save Template এ ক্লিক করে টেমপ্লেট Save করে বেরিয়ে আসুন।
এখন আপনার ব্লগের Layout অপশনে গেলে নিচের চিত্রেরমত পর পর তিনটি Gadget দেখতে পাবেন। যদি দেখতে না পান তাহলে পেজটি Refresh করে নিবেন। তাহলে অবশ্যই দেখতে পাবেন।

উপরের চিত্রে নাম সহকারে পর পর ০৩ টি Gadget যুক্ত করার অপশন দেখতে পাচ্ছেন। এই তিনটি গেজেট হতে আপনার পছন্দমত যে কোন Widget যুক্ত করতে পারবেন।

বিশেষ দ্রষ্টব্যঃ সবশেষে একটি ছোট সমস্যার সম্মুখিন হতে পারেন। সেটি হচ্ছে আপনি যখন কোন উইজেট হেডিংসহ যুক্ত করবেন, তখন ট্যাবের ভীতরে ঐ উইজেটটির নাম দেখতে পাবেন। এটি সরানোর জন্য আপনাকে ছোট ধাপ অনুসরন করতে হবে।

আবার ব্লগের Template এ যাবেন অথবা সহজভাবে করতে চাইলে এই পোষ্টটি পড়ুন।
সেখান হতে Jump to Widget অপশনের মাধ্যমে উইজেটটি মার্ক করবেন। এর পর উইজেটটি Expand করলে নিচের ছোট্ট লাইনটি দেখেতে পাবেন।

<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>

এই লাইনটি ডিলিট করে দিয়ে Save করলেই আর Title শো করবে না। এটি নিয়ে পরবর্তীতে অন্য কোন পোষ্টে আমরা বিস্তারিত আলোচনা করবো। এই ধাপে কোন সমস্যা হলে আমাদের কমেন্ট করে জানাতে পারেন। আমরা এই সহজ সমস্যার সামাধান যে কোন সময়ই আপনাকে করে দেব।

ভিডিও টিউটরিয়াল দেখুন