Cara Menciptakan Multi Kolum Footer Widgets - Terbaru!

Widget gres ini boleh menjadi tiga medan, empat medan atau berapa banyak medan yang anda inginkan. Selanjutnya widget  footer yang gres memiliki beberapa kesan CSS yang besar ditambah ke dalamnya yang membuatnya lebih baik. Pertama melihat demo untuk mengetahui apa yang sangat berbeza wacana 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 lalu HTML. Kaprikornus 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 gres ditambah bahawa akan kelihatan ibarat 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 lalu 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 yaitu 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 bab kod, 

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

3. Atau jikalau anda ingin menambah medan perhiasan lalu 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. Kaprikornus jikalau 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 aku cukup hanya empat medan sahaja,ia sudah cukup menarik.....
Sumber http://johanrakyat.blogspot.com

Share this post

Berlangganan update artikel terbaru via email: