ব্লগের নিচে অতিরিক্ত কলাম তৈরি করার পদ্ধতি

এর আগে আমরা ব্লগার.কম ব্লগে আরেকটি সাইডবার তৈরি করার পদ্ধতি শিখেছি। আশা করি আপনারা সফলভাবেই নিজেদের ব্লগে অতিরিক্ত একটি সাইডবার তৈরি করতে পেরেছেন। আজ আসুন জেনে নিই কিভাবে ব্লগের নিচে কয়েকটি কলামের বটমবার (Bottom bar for bottom columns) তৈরি করা যায়।

ব্লগের নিচে বটমবার থাকলে বেশ কিছু দিক দিয়ে সুবিধা আছে। "বাংলা হ্যাকস" ব্লগের নিচে দেখুন।
how to create 3 column on the bottom of blogger blogspot blog
তিন কলামের একটি বার আছে। এখানকার কলামগুলোতে আমি গুরুত্বপূর্ণ কিছু গেজেট ও লিংক রেখে দিয়েছি। ফলে ব্লগের দুইপাশের সাইডবারের আকার দৃষ্টিকটুভাবে লম্বা হয়ে যায়নি। এরকম একাধিক (একের বেশি) কলাম আপনিও নিজের ব্লগে অন্যের দ্বারস্থ না হয়ে তৈরি করে নিতে পারেন। কিভাবে ব্লগের নিচে একাধিক কলাম তৈরি করা যায়, তাই আজ আমি বর্ণনা করবো।
How to create extra bottom columns on blogger blogspot blog. Here is the easiest method.
  • যথারীতি গুগল আইডি ও পাসওয়ার্ড দিলে লগইন হয়ে নিন।
  • Layout > Edit HTML ট্যাবে যেতে হবে। Expand Widget Templates এর পাশের চেকবক্সে টিক চিহ্ন দিতে হবে না।
  • ]]></b:skin> লেখার উপরে নিচের কোডটি সম্পূর্ণ লিখে দিন।
  • /* bottom
    ==================== */

    #bottom {
    width: 970px;
    position: relative;
    clear:both;
    margin: 0 auto;
    color:#4E0038;
    float: left;
    background:#efefef;
    padding: 5px 0 5px 0;
    }

    #bottom h2 {
    padding: 4px;
    margin: 0 auto;
    color:#884218;
    background-color: #addfff;
    font-size: 100%;
    color: #ff0000;
    font-weight:bold;
    border-bottom: 1px solid #ffffff;
    letter-spacing: 0px;
    }

    #bottom ul {
    padding: 0;
    margin: 0;
    }

    #bottom ul li {
    line-height: 26px;
    list-style-type: none;
    border-bottom: 1px dashed #031c5d;
    }

    #bottom ul li a {
    display: block;
    padding: 0 10px;
    color:#062D4E;
    text-decoration: none;

    }
    #bottom ul li a:hover {
    background: #B1ACB1;
    padding-left:5px;
    }

    #bottom1 {
    width: 250px;
    float: left;
    padding-left:10px;
    }

    #bottom2 {
    width: 250px;
    float: left;
    padding-left:10px;
    }

    #bottom3 {
    width: 220px;
    float: left;
    padding-left:10px;
    }

    #bottom4 {
    width: 200px;
    float: left;
    padding-left:10px;
    }
  • সেভ করবেন না।
  • এখানে আপনার ব্লগের আকার বুঝে #bottom {width: 970px; এবং bottomগুলোর width পরিবর্তন করে নিন। এই পরিবর্তনটি একটু সতর্ক হয়ে করতেই হবে। না হলে ব্লগের আকার এলোমেলো হয়ে যেতে পারে। এছাড়াও color:#4E0038; এবং background:#efefef; ইত্যাদির কালার কোড কালার চার্ট দেখে পরিবর্তন করতে পারবেন। চারটির জায়গায় তিনটি কলাম চাইলে যে কোন একটি কলামের সম্পূর্ণ কোড অর্থাৎ #bottom4 {
    width: 200px;
    float: left;
    padding-left:10px;
    } সম্পূর্ণটুকু মুছে দিতে পারবেন। এখানে মুছে দিলে নিচের অংশেও মুছে দিতে হবে।
  • এবার আরও নিচে নেমে </div></div> <!-- end outer-wrapper --> লেখাটির ঠিক উপরে নিচের কোডগুলো বসিয়ে দিন।
  • <div id='footer-wrapper'> কোডটির উপরেও বসাতে পারেন। আপনার কোন জায়গাটি পছন্দ তা নির্বাচন করে নিন।
  • <div id='bottom'>

    <b:section class='bottom' id='bottom1'></b:section>

    <b:section class='bottom' id='bottom2'></b:section>

    <b:section class='bottom' id='bottom3'></b:section>

    <b:section class='bottom' id='bottom4'></b:section>
    </div>
  • আমি চারটি কলাম তৈরি করার কোড দিয়েছি। যদি তিনটি কলাম চান, তাহলে <b:section class='bottom' id='bottom4'></b:section> এই রকম একটি লাইন সম্পূর্ণ মুছে ফেলতে হবে।
  • আশা করি আমি সহজভাবে ব্লগার.কম এর ব্লগের নিচে অতিরিক্ত কলাম তৈরির পদ্ধতি বর্ণনা করতে পেরেছি। কোন জায়গায় খটকা থাকলে জানাতে ভুলবেন না যেন।
 

পাঠকের প্রতিক্রিয়া

কিছু কথা

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

Search This Blog

© 2009-2014 Bangla Hacks | Design by: Bangla Hacks. Powered by: Blogger