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

Multi Tab Widget ব্লগার, ওয়ার্ডপ্রেস এবং যে কোন ওয়েবসাইটের জন্য অত্যান্ত Common এবং গুরুত্বপূর্ণ একটি উইজেট

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

আপনি যদি Google এ সার্চ দেন তাহলে এ ধরনের কয়েকশত উইজেট পেয়ে যাবেন, কিন্তু বিষয়টি হতাশ হওয়ার মত হলেও সত্য যে, ১০০ ভাগ কার্যকরী একটি পোষ্টও খুজে পাবেন না। আমার ব্লগে যুক্ত করার জন্য আমি নিজেও গুগলে অনেক সার্চ করেছি, কিন্তু ২২-২৪ টির মত চেষ্টা করেও কোন কাজ হয়নি। কয়েকটি যুক্ত করতে পেরেছিলাম তবে খুবই স্লো গতির ছিল। এই জন্য শেষ পর্যন্ত আমাকে ঘাম ঝরানো পরিশ্রম করে নিজেই তৈরী করে নিতে হলো।
Blogger-Multi-Tab-Widget
উইজেটটি মূলত আমার ব্লগের জন্য তৈরী করেছিলাম। এর ডেমো আমার ব্লগের সাইডবারে দেখতে পাচ্ছেন। পরবর্তীতে অনেকের অনুরোধে আমি এটি সাবার সাথে শেয়ার করলাম। এ উইজেটটি তৈরী করতে অর্থাৎ পরিপূর্ণভাবে গঠন করতে আমাকে প্রায় ০২ দিন পরিশ্রম করতে হয়েছে। আমি গ্যারান্টি দিয়ে বলতে পারি এটি আপনার ব্লগের কোন অংশই শ্লো করবে না।

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

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

  • প্রথমে আপনার ব্লগে লগইন করুন।
  • এরপর Template > Edit Html এ ক্লিক করুন।
edit-blogger-template
  • তারপর কিবোর্ড হতে 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> অংশটি সার্চ করুন।
ব্লগারের সাইডবারে যুক্ত করুন Multi Tab Widget
  • এখন নিচের কোডগুলি উপরের চিত্রের যে স্থানে লাল চিহ্ন দ্বারা মার্ক করা হয়েছে ঠিক সেই জায়গায় পেষ্ট করুন।
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 করে নিবেন। তাহলে অবশ্যই দেখতে পাবেন।
Blogger-Multi-Tab-Widget
  • উপরের চিত্রে নাম সহকারে পর পর ০৩ টি Gadget যুক্ত করার অপশন দেখতে পাচ্ছেন। এই তিনটি গেজেট হতে আপনার পছন্দমত যে কোন Widget যুক্ত করতে পারবেন।
বিশেষ দ্রষ্টব্যঃ সবশেষে একটি ছোট সমস্যার সম্মুখিন হতে পারেন। সেটি হচ্ছে আপনি যখন কোন উইজেট হেডিংসহ যুক্ত করবেন, তখন ট্যাবের ভীতরে ঐ উইজেটটির নাম দেখতে পাবেন। এটি সরানোর জন্য আপনাকে ছোট ধাপ অনুসরন করতে হবে।
  • আবার ব্লগের Template এ যাবেন অথবা সহজভাবে করতে চাইলে এই পোষ্টটি পড়ুন।
  • সেখান হতে Jump to Widget অপশনের মাধ্যমে উইজেটটি মার্ক করবেন। এর পর উইজেটটি Expand করলে নিচের ছোট্ট লাইনটি দেখেতে পাবেন।
<b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  • এই লাইনটি ডিলিট করে দিয়ে Save করলেই আর Title শো করবে না। এটি নিয়ে পরবর্তীতে অন্য কোন পোষ্টে আমরা বিস্তারিত আলোচনা করবো। এই ধাপে কোন সমস্যা হলে আমাদের কমেন্ট করে জানাতে পারেন। আমরা এই সহজ সমস্যার সামাধান যে কোন সময়ই আপনাকে করে দেব।
ভিডিও টিউটরিয়াল দেখুন
Subscribe on Youtube

COMMENTS

BLOGGER: 24
  1. Hello, Thanks for your hard work, it's helping me a lot.
    I have a problem with the body#layout It is not found.
    I'll understand this better if you make a video of It like the once you have on Youtube
    Thank you!

    ReplyDelete
    Replies
    1. Thanks buddy. There has a small mistake on your blogger template. You should search another parts.

      1. Search /* Variable definitions
      2. Then just above it past these part of code.

      Now your problem must be solve.

      Delete
  2. I have done it and it appears alright but noting shows inside.
    Also the Widget does not show in the Layout
    Am testing it here: http://metrogh2015.blogspot.com/
    Please can you share your blog template?

    ReplyDelete
    Replies
    1. I have not found your testing blog. Please give me your blogger Url. Finally I have try to solve your problem. Thank you...

      Delete
  3. Am very sorry I set it private. It's now visible at http://metrogh2015.blogspot.com
    Thank you

    ReplyDelete
    Replies
    1. Thanks Domey. You have a small mistake. In fact, it's not your fault. Probably you may not understand the language of my blog.

      You have added Html part above "div class='column-right-inner" That's your fault. You should add it after "div class='column-right-inner"

      I think now solve your problem.

      Delete
  4. Yes the language is one of the reasons why am not able to understand the guide line.
    I did it again as you said but still not working. Please I will like very much if you make a video
    so that I can see. thanks for your time.

    ReplyDelete
    Replies
    1. As your request finally I have added a video tutorial and update all code. Thanks...

      Delete
    2. Thank you. Am able to do it now. Just some little problem. The three consecutive Gadget didn't appear right. http://i.imgur.com/dL9iTaN.jpg

      Delete
  5. খু্বই হেল্পফুল পোষ্ট । আপনাকে অনেক ধন্যবাদ শেয়ার করার জন্য ।

    ReplyDelete
  6. http://new-tuner-page.blogspot.com

    ReplyDelete
  7. WONDERFUL POST
    thanks for your tutorial
    100% working

    ReplyDelete
  8. আমার দু কলামই পছন্দ। আর এখানকার কালারটাও সুন্দর না। এই ব্লগে যেমন আছে তেমন কীভাবে লাগাবো সেটাই যদি বলতেন।

    ReplyDelete
    Replies
    1. আপাতত এটাই সেট করেন। Css সম্পর্কে ধারনা থাকলে নিজেই কালার সহ ডিজাইন পরিবর্তন করতে পারবেন। তাছাড়া কন্টের মাধ্যমে এটাকে তিন হলাম হতে দুই কলাম করে দেওয়া সম্ভব হবে না। এটা সমাধানের জন্য একটি পূর্ণাঙ্গ পোষ্ট করা প্রয়োজন হবে।

      Delete
  9. buddy its not working to me... can u please solve it

    ReplyDelete
    Replies
    1. It's still working. Follow video tutorial...

      Delete
  10. ভাইয়া খুব সুন্দর একটি পোষ্ট উপহার দেওয়ার জন্য ধন্যবাদ। আপনার সকল পোস্টই কার্যকরী। কাজ করে না এমন কোন পোস্ট আমি পাইনি। একটি অনুরোধ। যদি আপনার ব্লগের মত দুই কলাম বিশিষ্ট ট্যাবের একটি পূর্ণাংগ পোস্ট দিতেন তাহ

    ReplyDelete
    Replies
    1. এ সংক্রান্ত একটি পোস্ট শেয়ার করার চেষ্টা করব। তবে আপনি একটু চেষ্টা করলে তিন ট্যাবকে পরিবর্তন করে দুটি করতে পারবেন। ধন্যবাদ...

      Delete
  11. আমার ব্লগের ঠিকানা www.legalvoicebd.com আমি অনেক কিছুই আপনার টিউটোরিয়াল দেখে করেছি।উপকারও পেয়েছি। কিন্তু একটা সমস্যা। multi tab বসালাম। পিসিতে ঠিকই আছে। কিন্তু মোবাইল এবং ট্যাবে multi tab এর টাইটেল টা পুরো স্ক্রিন জুড়ে আসছে না। ফলে খারাপ দেখাচ্ছে। আর social share বাটন যোগ করেছি। কিন্তু আপনার মত লিংকগুলি সোজাভাবে না এসে বাকাভাবে আসছে। একটু সমাধান করে দিবেন প্লিজ

    ReplyDelete
    Replies
    1. ব্লগার থিমস হতে ul.navtab অংশটির width:300px এর পরিবর্তে 100% করে দিলেই ঠিক হয়ে যাবে।

      Delete

Name

Adsense,16,Affiliate,1,Android Tricks,1,Blog Design,35,Blogger Theme,9,Blogger Widgets,25,Create Blog,3,Earnings,19,Mim,5,Pro News,8,Responsive,5,SEO,55,Social Media,2,Tech,1,WordPress,3,YouTube,3,
ltr
item
ব্লগার বাংলাদেশ: ব্লগারের সাইডবারে যুক্ত করুন Multi Tab Widget
ব্লগারের সাইডবারে যুক্ত করুন Multi Tab Widget
Multi Tab Widget ব্লগার, ওয়ার্ডপ্রেস এবং যে কোন ওয়েবসাইটের জন্য অত্যান্ত Common এবং গুরুত্বপূর্ণ একটি উইজেট
https://3.bp.blogspot.com/-9-fiN0P-0dY/VwX4HwZdq3I/AAAAAAAAHZw/mYD7cD2VDS4Ei8zA9dtUybgrOGTWdDcjw/s320/Multi-min.png
https://3.bp.blogspot.com/-9-fiN0P-0dY/VwX4HwZdq3I/AAAAAAAAHZw/mYD7cD2VDS4Ei8zA9dtUybgrOGTWdDcjw/s72-c/Multi-min.png
ব্লগার বাংলাদেশ
https://www.bloggerbangladesh.com/2015/07/multi-tab-widget-for-blogger.html
https://www.bloggerbangladesh.com/
https://www.bloggerbangladesh.com/
https://www.bloggerbangladesh.com/2015/07/multi-tab-widget-for-blogger.html
true
1297988252866731047
UTF-8
Loaded All Posts Not found any posts VIEW ALL বিস্তারিত পড়ুন Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy