Cara buat Footer Banyak di Kolom




Cara buat Footer Banyak di Kolom

Cara buat Footer Banyak di Kolom


di bawah ini tutorial lengkap bagaimana cara membuat 4 footer banyak kolom, di sini saya akan mencontohkan cara membuat footer banyak di kolom.
Ikutin langkah-langkah sebagai berikut:

1. Masuk ke akun  Blogger sobat > Klik Design/Rancangan > Edit HTML
2. Backup  Template sobat
3. cari kode  ]]></b:skin>
4. sebelum kode ]]></b:skin> masukkan kode di bawah ini;
  1.  #kaki {
        margin:auto;
        padding: 0px 0px 10px 0px;
        width: 100%;
        background:#333333;
        }
        #kaki-wrapper {
        background:#333333;
        margin:auto;
        padding: 20px 0px 20px 0px;
        width: 960px;
        border:0;
        }
        #kakibar-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;
        }
        .kakibar {margin: 0; padding: 0;}
        .kakibar .widget {margin: 0; padding: 10px 20px 0px 20px;}
        .kakibar 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;
        }
        .kakibar ul {
        color:#fff;
        margin: 0 auto;
        padding: 0;
        list-style-type: none;
        }
        .kakibar 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;
        }
        .kakibar li a {
        text-decoration:none; color: #DBDBDB;
        }
        .kakibar li a:hover {
        text-decoration:underline;
        }
        .kakibar li:hover {
        display:block;
        background: #222;
        } 
5. Kemudian cari kode </body> dan masukkan kode di bawah ini di atasnya kode </body>
  1.  <div id='kaki'>
        <div id='kaki-wrapper'>
        <div id='kakibar-wrapper'>
        <b:section class='kakibar' id='kakibar1' preferred='yes'>
        </b:section>
        </div>
        <div id='kakibar-wrapper'>
        <b:section class='lowerbar' id='kakibar2' preferred='yes'>
        </b:section>
        </div>
        <div id='kakibar-wrapper'>
        <b:section class='kakibar' id='kakibar3' preferred='yes'>
        </b:section>
        </div>
        <div id='kakibar-wrapper'>     <b:section class='kakibar' id='kakibar4' preferred='yes'>     </b:section>     </div>
        <div style='clear: both;'/>
        </div> </div>
6. Simpan template dan selesai.

Modifikasi dan pengaturan footer;
  • untuk menambah atau mengurangi lebar seluruh widget silakan ubah lebar / width 960px; dan sesuaikan dengan lebar template sobat.
  • jika sobat ingin membuat 3 kolom saja hapus kode berwarna hijau di atas, namun juga sesuaikan ukuran widgetnya yang awalnya 23% menjadi 30%
<div id='kakibar-wrapper'>
    <b:section class='kakibar' id='kakibar4' preferred='yes'>
    </b:section>
    </div>
  • sedangkan jika ingin menambahnya menjadi 5 kolom copy saja kode di atas, kemudian ubah  menjadkakibar5dan ubah persentasenya menjadi 16% atau 17%
  •  selamat mencoba. 

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.

Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>

+ Follow
Join on this site

with Google Friend Connect