১৬ জানু, ২০১৬

ব্লগে Credits Info সহ ৩ কলামের Footer Widgets যুক্ত করুন

ব্লগে Credits Info সহ ৩ কলামের Footer Widgets যুক্ত করুন
4/ 5 stars - "ব্লগে Credits Info সহ ৩ কলামের Footer Widgets যুক্ত করুন" আজ প্রফেশনাল ব্লগার টেমপ্লেট তৈরির ৬ষ্ঠ পর্ব শুরু করছি। আমাদের ১ম সিরিজের সবগুলি টিউটরিয়াল প্রায় শেষ পর্যায়ে চলে এসেছে। আশা করছি খুব শীঘ্র...
-
আজ প্রফেশনাল ব্লগার টেমপ্লেট তৈরির ৬ষ্ঠ পর্ব শুরু করছি। আমাদের ১ম সিরিজের সবগুলি টিউটরিয়াল প্রায় শেষ পর্যায়ে চলে এসেছে। আশা করছি খুব শীঘ্রই আমাদের বাকী সবগুলি সিরিজ কমপ্লিট করব।
ব্লগে Credits Info সহ ৩ কলামের Footer Widgets যুক্ত করুন
সব ধরনের প্রফেশনাল ব্লগের Footer সেকশনে ৩/৪ কলামের Widgets ব্যবহার করা হয়ে থাকে। ফলে ব্লগের Footer সেকশনটি বড় হওয়ার পাশাপাশি অনেকগুলি Widgets একসাথে ব্যবহার করা সম্ভব হয়। পুরাতন ব্লগে সাধারণত ছোট আকারের Footer ব্যবহার করা হত কিন্তু সম্প্রতি সবাই বড় Footer ব্যবহার করতে চায়। বড় Footer ব্যবহার করার ফলে আপনি ইচ্ছে করলে আপনার ব্লগার প্রোফাইল, জনপ্রিয় পোষ্ট, সম্প্রতি পোষ্ট ইত্যাদি ধরনের Widgets ব্যবহার করতে পারবেন। তাছাড়া আমরা এটিতে Credits অপশনও ব্যবহার করেছি। এতেকরে আপনার ব্লগের Credits Information শো করাতে পারবেন।
সকল পোষ্ট দেখুন

কিভাবে করবেন?

  • প্রথমে আপনার ব্লগের ডিফল্ট Footer টি Remove করতে হবে।
  • Remove করার জন্য ব্লগে লগইন করুন।
  • তারপর Template > Edit Html এ ক্লিক করুন।
ব্লগে Credits Info সহ ৩ কলামের Footer Widgets যুক্ত করুন
  • এরপর কিবোর্ড হতে Ctrl+F চেপে <footer> অংশটি সার্চ করলে ডিফল্ট টেমপ্লেটের HTML কোডগুলি দেখতে পাবেন। কোডগুলি নিচের মত হবে-
 <footer>
  <div class='footer-outer'>
    <div class='footer-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left footer-fauxborder-left'>
    <div class='fauxborder-right footer-fauxborder-right'/>
    <div class='region-inner footer-inner'>
      <macro:include id='footer-sections' name='sections'>
        <macro:param default='2' name='num'/>
        <macro:param default='footer' name='idPrefix'/>
        <macro:param default='foot' name='class'/>
        <macro:param default='false' name='includeBottom'/>
      </macro:include>
    </div>
    </div>
    <div class='footer-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
  </div>
</footer>
  • এখন উপরের কোডগুলি Delete করে Template Save করুন।
  • তারপর টেমপ্লেট থেকে বেরিয়ে আসুন। তাহলে দেখতে পাবেন আপনার টেমপ্লেটের ডিফল্ট Footer রিমুভ হয়েগেছে।

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

  • ব্লগার ড্যাশবোর্ড হতে Template > Edit Html এ ক্লিক করুন।
  • কিবোর্ড হতে Ctrl+F চেপে <div class='content-cap-bottom cap-bottom'> অংশটি সার্চ করলে নিচের চিত্রের মত কোডগুলি দেখতে পাবেন।
ব্লগে Credits Info সহ ৩ কলামের Footer Widgets যুক্ত করুন
  • এখন উপরের চিত্রের মার্ক করা খালি জায়গাতে নিচের কোডগুলি কপি করে পেষ্ট করুন।
<div id='footer'>
<div class='footer-max'>
  <div id='footer-wrapper'>
    <div id='footerbar-wrapper'>
      <b:section class='footerbar' id='Footer-First' preferred='yes'/>
    </div>
    <div id='footerbar-wrapper'>
      <b:section class='footerbar' id='Footer-Midle' preferred='yes'/>
    </div>
    <div id='footerbar-wrapper'>
      <b:section class='footerbar' id='Footer-Last' preferred='yes'/>
    </div></div>
    <div style='clear:both;'/>
  </div>
<div id='credit'><span>কপিরাইট © <script type='text/javascript'>document.write(new Date().getFullYear());</script> <a expr:href='data:blog.homepageUrl'><data:blog.title/>™ </a>, অল রাইটস রিসার্ভড</span></div>
</div>
<div class='clear'/>
  • পুনরায় কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • এখন নিচের কোডগুলি ]]></b:skin> ট্যাগের ঠিক উপরে পেষ্ট করুন।
/* Footer Wrapper
-------------------------------------------------------- */
#footer{margin:auto;width:100%;background:#0caa8e}
#footer a{color:#272C2D}
#footer h2{margin:0 0 10px 0;padding:3px 0 3px 0;text-align:left;color:#303030;;text-transform:uppercase;font:bold 14px Arial,Tahoma,Verdana;border-bottom:1px solid #9ED8FB}
#footer-wrapper{margin:auto;padding:20px 0;width:100%}
#footerbar-wrapper{color:#2D2A2A;float:left;width:33%;text-align:justify;font-size:100%;line-height:1.6em;word-wrap:break-word;overflow:hidden}
#Footer-First{margin-left:5px;padding:10px 20px 0}
#Footer-Midle{margin:0;padding:10px 20px 0}
#Footer-Last{margin:0;padding:10px 23px 0}
.footerbar{margin:0;padding:0}
.footerbar ul{margin:0 0 0 0;padding:0 0 0 0;list-style-type:none}
.footerbar li{margin:0 0 2px 0;padding:0 0 1px 0;border-bottom:0 dotted #ccc}
.footerbar ul li a{color:#000}
.footer-max{max-width:1000px;margin:0 auto}
#credit{height:50px;margin:0;background:#0C9B81}
#credit span{display:table;color:#FFF;text-align:center;font-size:16px;line-height:50px;margin:auto}
  • আবার কিবোর্ড হতে Ctrl+F চেপে <b:skin> অংশটি সার্চ করুন।
ব্লগে Credits Info সহ ৩ কলামের Footer Widgets যুক্ত করুন
  • এখন নিচের কোডগুলি উপরের চিত্রের যে স্থানে লাল চিহ্ন দ্বারা মার্ক করা হয়েছে ঠিক সেই জায়গায় পেষ্ট করুন।
body#layout ul {display:none}
body#layout #footer-wrapper {overflow:hidden}
body#layout #footerbar-wrapper {width:31.6%;float:left;margin-left:10px}
body#layout ul.footerbar, body#layout #credit {display:none}
body#layout #footer-wrapper {margin:auto;padding:20px 0px;width:100%}
  • সবশেষে Save Template এ ক্লিক করলেই কাজ OK.

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

  • উপরের চিত্রের লাল চিহ্নিত background:#0caa8e হতে Footer এর Background কালার পরিবর্তন করা যাবে।
  • তারপর পিংক কালারের border-bottom:1px solid #9ED8FB হতে টাইটেলের Border কালার পরিবর্তন করা যাবে।
  • Credits Info এ কোন Date যুক্ত করতে হবে না। কারণ এটিতে Date এর Scripts ব্যবহার করা হয়েছে। ফলে সবসময় অটোমেটিক তারিখ আপডেট হবে। ইনফরমেশন পরিবর্তন করতে চাইলে আপনার পছন্দমত করতে পারেন।
Subcribe to our all updates

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

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

 
Subscribe for all Updates

Subscribe Now

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

Powered by: