Cara Membuat Multi Kolum Footer Widgets - Terbaru!

Widget baru ini boleh menjadi tiga medan, empat medan atau berapa banyak medan yang anda inginkan. Selanjutnya widget  footer yang baru mempunyai beberapa kesan CSS yang besar ditambah ke dalamnya yang membuatnya lebih baik. Pertama melihat demo untuk mengetahui apa yang sangat berbeza tentang hal itu. Lihat widget di bahagian bawah blog Demo berikut,

Cara Tambah Multi Kolum Footer Widgets Untuk Blogger ? Pertama kita akan menambah kod CSS untuk anda blogger template dan kemudian HTML. Jadi tanpa membuang masa membolehkan melompat terus ke langkah-langkah berikut,
1. Go To Blogger> Design> Edit HTML
2. Backup Template anda
3. Search for ]]></b:skin>
4. Tepat di atas ]]></b:skin> paste kod di bawah ini,

  /*----- MBT MULTI COLUMN FOOTER WIDGET -----*/

    #lower {
    margin:auto;
    padding: 0px 0px 10px 0px;
    width: 100%;
    background:#333333;
    }
    #lower-wrapper {
    background:#333333;
    margin:auto;
    padding: 20px 0px 20px 0px;
    width: 960px;
    border:0;
    }
    #lowerbar-wrapper {
    background:#333333;
    float: left;
    margin: 0px 5px auto;
    padding-bottom: 20px;
    width: 23%;
    text-align: justify;
    color:#ddd;
    font: bold 12px Arial, Tahoma, Verdana;
    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;
    border:0;
    color:#ddd;
    text-transform:uppercase;
    font: bold 14px Arial, Tahoma, Verdana;
    }
    .lowerbar ul {
    color:#fff;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    }
    .lowerbar li {
    display:block;
    color:#fff;
    line-height: 1.6em;
    margin-left: 0 !important;
    padding: 6px;
    border-bottom: 1px solid #222;
    border-top: 1px solid #444;
    list-style-type: none;
    }
    .lowerbar li a {
    text-decoration:none; color: #DBDBDB;
    }
    .lowerbar li a:hover {
    text-decoration:underline;
    }
    .lowerbar li:hover {
    display:block;
    background: #222;
    }

5 Sekarang cari. </body> dan paste kod berikut persis di atas </body>

<div id='lower'>
<div id='lower-wrapper'>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'> </b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

<div style='clear: both;'/>

</div> </div>

6. Simpan template anda dan anda selesai!
Sekarang, masuklah ke Elemen Laman dan menambah widget anda ke Footer Widgets baru ditambah bahawa akan kelihatan seperti ini,

Anda boleh mengamati bahawa ada empat medan secara lalai dan anda boleh menambah widget yang anda inginkan untuk setiap medan. Jika anda ingin menambah atau mengurangkan jumlah medan menegak kemudian ikuti langkah-langkah di bawah ini.

Cara Customize Widget itu?

Simple jer...Saya fikir warna dan keseluruhan saiz dan padding dan margining cukup sempurna. Satu-satunya hal yang anda perlu menyesuaikan dengan template anda adalah lebar widget dan jumlah medan menegak.

 
1. Dalam rangka mengurangkan atau menambah lebar keseluruhan widget hanya menukar width: 960px;
2. Jika anda ingin mengurangkan jumlah widget ke tiga maka cukup hapuskan bagian kod, 

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

3. Atau jika anda ingin menambah medan tambahan kemudian tambah kod di bawah ini tepat di atas <div style='clear: both;'/>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar#' preferred='yes'>
</b:section>
</div>

Ingat bahawa lowerbar # merujuk pada jumlah medan. Jadi jika anda ingin menambah medan kelima maka cukup mengganti lowerbar # dengan lowerbar5. Selepas anda telah menambah medan kelima maka ingatlah untuk menukar width: 23%; dengan width: 17%;

Pada pendapat saya cukup hanya empat medan sahaja,ia sudah cukup menarik.....