কিভাবে ব্লগস্পট ব্লগে তিনটি বা তার বেশি সুন্দর ফুটার বার যুক্ত করবেন

ফুটার হচ্ছে ব্লগে এক্সট্রা widget যুক্ত করার অপশন যেখানে আমরা সহজে বাড়তি widget যুক্ত করে ব্লগকে আরও সুন্দর ভাবে গড়ে তোলা যায়। এক্সট্রা ফুটার থাকলে আপনি আপনার বিভিন্ন অ্যাড কিংবা প্রয়োজনীয় তথ্য ফুটারে যুক্ত করে ব্লগের মান উন্নত করতে পারবেন। আমরা অনেকে যারা প্রোগ্রাম জানি না তাদের কাছে এই কাজটি খুব শক্ত। আজ আমার দেখবো কিভাবে সহজ উপায়ে আপনার ব্লগে নিজেরাই দুটি ,তিনটি কিংবা তার বেশি ফুটার যুক্ত করবেন।

কিভাবে ব্লগস্পট ব্লগে তিন সারীতে footer বার তৈরি করবো?

• প্রথমে আপনার Blogger ব্লগের ড্যার্শবোর্ডে প্রবেশ করুন।
• তারপরে ড্রাপ ডাউন বাটন হতে Template নির্বাচন নির্বাচন করুন ।
• Template নির্বাচন করার পরে আপনাকে Edit HTML ট্যাব ক্লিক করে body Tags খুঁজে বের করতে হবে।
• Body Tags হতে ফুটার বা নিচের Code টুকু খুঁজে বের করতে হবে। অথবা Ctrl+F চেপে নিচের কোডটি search বক্সে পেস্ট করুন।

    <div id='footer-wrapper'>
    <b:section class='footer' id='footer'/>
    </div

• যদি উপরের code টি খুঁজে না পান তাহলে নিচের code গুলো হুবাহু কপি করে আপনার ব্লগ Template ফুটার বারে পেষ্ট করবেন। বা </body> ট্যাগ এর উপরে পেস্ট করবেন ।
  

    <!-- three column footer HTML Start by projuktimela.blogspot.com -->
    <div id='new-footer-wrapper'>
    <div id='column1-wrapper'>
    <b:section class='new-footer' id='new-footer1' preferred='yes'/>
    </div>

    <div id='column2-wrapper'>
    <b:section class='new-footer' id='new-footer2' preferred='yes'/>
    </div>

    <div id='column3-wrapper'>
    <b:section class='new-footer' id='new-footer3' preferred='yes'/>
    </div>
    <div style='clear: both;'/>
    </div>
    <!-- three column footer HTML End -->

নোট - ফুটার বার কালার করার জন্য CSS Style কোড ব্যবহার করতে হবে। নিম্নে কোডটি দেওয়া হল।

• এবার কালার করার জন্য আপনাকে Template হতে নিচের দেওয়া কোডটি খুঁজে বের করতে হবে।

    ]]></b:skin>

• তারপরে নিচের CSS কোডটুকু কপি করে  ]]></b:skin> এর উপরে পেষ্ট করুন।

    /* three column footer CSS Start by computeruptodate.blogspot.com */
    #new-footer-wrapper {background: #E1E2B8; margin: 0 auto;width:98%; padding: 0 10px  10px 0;}
    #column1-wrapper, #column2-wrapper, #column3-wrapper { float: left; display:inline-block; width: 33%;padding: 0px 0px 0px 0px; text-align: left; word-wrap: break-word; overflow: hidden;} 
    .new-footer h2 { margin: 0px 0px 0px 0px; padding: 4px 10px 4px 10px; text-align: left; color: #222222; background: #C1C298; font-weight: bold;font-size: 0.9em;}
    .new-footer .widget { margin: 10px 0 0 10px; border: 1px solid #F1F5CA; background: #F7FCDF;}
    .new-footer .widget-content { padding: 0px 5px 5px 5px; }
    .new-footer ul { list-style-type:square; margin-left:15px; }
    /* three column footer CSS End by computeruptodate.blogspot.com */

• এবার আপনি Template টিকে সেভ করে বের হয়ে আসবেন। ব্যস এখন আপনার  কাজ শেষ।

কোন কিছু জানার বা অসুবিধে হলে কমেন্ট এর মাধ্যমে জানতে ভূলবেন না। তাই আজ এই পর্যন্ত ভালো লাগলে শেয়ার করবেন । আপনারা সকলে ভাল থাকুন ধন্যবাদ ।