Cara buat Footer Banyak di Kolom Cara buat Footer Banyak di Kolom - mizipediacom mizipediacom: Cara buat Footer Banyak di Kolom
loading...

KATEGORI


HIBURAN


  • RCTI












  • VIDEO

    Iklan Semua Halaman

    Cara buat Footer Banyak di Kolom

    Monday, 27 February 2017


    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.