১১ জুলাই, ২০১৫

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

ব্লগারের সাইডবারে যুক্ত করুন Multi Tab Widget
4/ 5 stars - "ব্লগারের সাইডবারে যুক্ত করুন 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
Subcribe to our all updates

and Share on
পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট

16 টি মন্তব্য: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

  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!

    উত্তরমুছুন
    উত্তরগুলি
    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.

      মুছুন
  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?

    উত্তরমুছুন
    উত্তরগুলি
    1. I have not found your testing blog. Please give me your blogger Url. Finally I have try to solve your problem. Thank you...

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

    উত্তরমুছুন
    উত্তরগুলি
    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.

      মুছুন
  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.

    উত্তরমুছুন
    উত্তরগুলি
    1. 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

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

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

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

      মুছুন

 
Subscribe for all Updates

Subscribe Now

কপিরাইট © 2015- প্রযুক্তি ডট কম ™, সর্বস্বত্ব সংরক্ষিত

Powered by: