২৭ আগস্ট, ২০১৫

ব্লগস্পট ব্লগে ৩ কলামের Footer Widgets যুক্ত করুন

ব্লগস্পট ব্লগে ৩ কলামের Footer Widgets যুক্ত করুন
4/ 5 stars - "ব্লগস্পট ব্লগে ৩ কলামের Footer Widgets যুক্ত করুন" যত ধরনের প্রফেশনাল ব্লগ আছে প্রায় সবাই ব্লগের Footer সেকশনে ৩/৪ কলামের Widgets ব্যবহার করে থাকেন। এর ফলে ব্লগের Footer সেকশনটি বড় হওয়ার ...
-
ব্লগস্পট ব্লগে ৩ কলামের Footer Widgets যুক্ত করুন
যত ধরনের প্রফেশনাল ব্লগ আছে প্রায় সবাই ব্লগের Footer সেকশনে ৩/৪ কলামের Widgets ব্যবহার করে থাকেন। এর ফলে ব্লগের Footer সেকশনটি বড় হওয়ার পাশাপাশি অনেকগুলি Widgets একসাথে ব্যবহার করা সম্ভব হয়। আগেকার ব্লগে সাধারণত ছোট আকারের Footer ব্যবহার করা হতো কিন্তু বর্তমানে সবাই ব্লগে বড় Footer ব্যবহার করতে চায়। বড় Footer ব্যবহার করার ফলে আপনি ইচ্ছে করলে আপনার ব্লগার প্রোফাইল, জনপ্রিয় পোষ্ট, সম্প্রতি পোষ্ট ইত্যাদি ধরনের Widgets ব্যবহার করতে পারবেন। এটি আপনার ব্লগের সুন্দর্যও বৃদ্ধি করবে। নিচে আমাদের ব্লগের Footer সেকশনের একটি ছবি দেখুন-
ব্লগস্পট ব্লগে ৩ কলামের Footer Widgets যুক্ত করুন
এই ধরনের উইজেট বিভিন্ন ব্লগে দেখতে পাবেন, যেগুলি আমি নিজে যাচাই করে দেখেছি। প্রত্যেকটির Layout এ কিছু সমস্যা আছে। যার কারনে আমি এটির সমস্যাগুলি Fix করে সবার সাথে শেয়ার করছি। আপনার ব্লগে যুক্ত করলে নিজেই বুঝতে পারবেন এটি অন্যগুলির থেকে আলাদা কি না?
সকল পোষ্ট দেখুন

কিভাবে যুক্ত করবেনঃ

  • প্রথমে আপনার ব্লগে লগইন করুন।
  • এরপর Template > Edit Html এ ক্লিক করুন।
ব্লগস্পট ব্লগে ৩ কলামের Footer Widgets যুক্ত করুন
  • তারপর কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
ব্লগস্পট ব্লগে ৩ কলামের Footer Widgets যুক্ত করুন
  • এখন নিচের কোডগুলি ]]></b:skin> ট্যাগের ঠিক উপরে পেষ্ট করুন।
#lower {margin:auto; padding:0px 0px 10px 0px; width:100%; background:#42464a}
#lower-wrapper {margin:auto; padding:20px 0px 20px 0px; width:80%}
#lowerbar-wrapper {border:1px solid #dedede; background:#fff; float:left; margin:0px 5px auto; padding-bottom:20px; width:32%; text-align:justify; font-size:100%; line-height:1.6em; word-wrap:break-word; overflow:hidden}
.lowerbar {margin:0; padding:0}
.lowerbar .widget {margin:0; padding:10px 20px 0px 20px}
.lowerbar h2 {margin:0px 0px 10px 0px; padding:3px 0px 3px 0px; text-align:left; color:#0084ce; text-transform:uppercase; font:bold 14px Arial, Tahoma, Verdana; border-bottom:3px solid #0084ce}
.lowerbar ul {margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; list-style-type:none}
.lowerbar li {margin:0px 0px 2px 0px; padding:0px 0px 1px 0px; border-bottom:1px dotted #ccc}
  • আবার কিবোর্ড হতে Ctrl+F চেপে </body> অংশটি সার্চ করুন।
  • এখন নিচের কোডগুলি </body> ট্যাগের ঠিক উপরে পেষ্ট করুন।
<div id='lower'>
  <div id='lower-wrapper'>
    <div id='lowerbar-wrapper'>
      <b:section class='lowerbar' id='Lower-First' preferred='yes'></b:section>
    </div>
    <div id='lowerbar-wrapper'>
      <b:section class='lowerbar' id='Lower-Midle' preferred='yes'></b:section>
    </div>
    <div id='lowerbar-wrapper'>
      <b:section class='lowerbar' id='Lower-Last' preferred='yes'></b:section>
    </div>
    <div style='clear:both;'/>
  </div>
</div>
  • এতটুকো করে Template Save করলেও কাজ শেষ হবে। তবে আপনার ব্লগে Layout এ গেলে Widgets গুলি নিচের চিত্রেরমত বিশ্রি দেখাবে। নিচের চিত্রে দেখুন কিভাবে দেখাচ্ছে-
ব্লগস্পট ব্লগে ৩ কলামের Footer Widgets যুক্ত করুন
  • এই Layout কে পাশাপাশি দেখানোর জন্য আপনাকে আরও ছোট একটি ধাপ অনুসরণ করতে হবে।
  • কিবোর্ড হতে Ctrl+F চেপে <b:skin> অংশটি সার্চ করুন।
ব্লগস্পট ব্লগে ৩ কলামের Footer Widgets যুক্ত করুন
  • এখন নিচের কোডগুলি উপরের চিত্রের যে স্থানে লাল চিহ্ন দ্বারা মার্ক করা হয়েছে ঠিক সেই জায়গায় পেষ্ট করুন।
body#layout #lowerbar-wrapper {overflow:hidden}
body#layout #lowerbar-wrapper {width:33.33%;float:left}
body#layout ul.lowerbar {display:none}
  • সবশেষে Save Template এ ক্লিক করলেই কাজ শেষ।
  • এখন আপনার ব্লগের Layout এ Widgets গুলি নিচের চিত্রেরমত দেখতে পাবেন।
ব্লগস্পট ব্লগে ৩ কলামের Footer Widgets যুক্ত করুন
  • এরপরও যদি উপরের চিত্রেরমত Layout দেখতে না পান তাহলে পেজটি Refresh করে নেবেন। তাহলে অবশ্যই চিত্রেরমত দেখতে পাবেন।

কাষ্টোমাইজেশনঃ

  • উপরের চিত্রের লাল চিহ্নিত background:#42464a হতে Footer এর Background কালার পরিবর্তন করা যাবে।
  • তারপর পিংক কালারের border:1px solid #dedede, background:#fff হতে Widgets এর Border ও Background কালার পরিবর্তন করতে পারবেন।
  • নীল কালারের color:#0084ce হতে Widgets এর Title কালার পরিবর্তন করতে পারবেন।
Subcribe to our all updates

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

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

  1. Thank you Mim. অনেক দিন যাবৎ ভাবছিলাম আমি এ রকম একটি পোষ্ট সবার সাথে শেয়ার করবো কিন্তু সময়ের অভাবে পারছিলাম না। শেষ পর্যন্ত তুমি শেয়ার করলে। আমি তোমার পোষ্টটি ভালভাবে পড়েছি। খুবই ভাল হয়েছে।

    উত্তরমুছুন
    উত্তরগুলি
    1. ভালো করার জন্য আমার সাধ্যমত চেষ্টা করেছি।

      মুছুন

 
Subscribe for all Updates

Subscribe Now

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

Powered by: