Membuat kolom footer keren dan elegan

Pada artikel sebelumnya gaptek32 pernah membahas tentang Membuat 2 kolom footer keren dan elegan juga Membuat 3 kolom footer keren dan elegan, namun judul tersebut hanya untuk template bawaan oleh blogger. dengan sedikit pengeditan dan tambahan, untuk itu gaptek32 kembali membahas tentang membuat kolom footer keren dan elegan bagi sobat yang sedang menggunakan hasil template download yang telah disediakan Free oleh sobat blogger lainnya.

Membuat kolom footer keren dan elegan

Menuju TKP ;
Langkah pertama

  • Log In Blog, Buka template -> Edit HTML -> Kasih tanda centang pada menu "expand widget tempate".
  • kemudian Copas CSS dibawah ini di atas kode script ]]></b:script>
#footek { background: #ccc; margin:auto; padding: 10px 0px 0px 0px; width: 990px; border-top:1px solid #000000;}
#footek-wrapper { margin:auto;width: 990px; border:0; }
#tabfootek-wrapper { float: left; margin: 0px 5px auto; padding-bottom: 5px; width: 320px;color:#333; font: 12px verdana,arial,Sans-erif;line-height: 1.6em; word-wrap: break-word; overflow: hidden; }
.tabfootek {margin: 0; padding: 0;}
.tabfootek .widget {background: #FFF top no-repeat;float: left;width: 300px;margin: 0 0 10px;padding: 10px;border: 1px solid #DDD;}
.footek h2 {background:url(http://i1247.photobucket.com/albums/gg623/Gaptek32/sidegaptek.jpg) left top repeat-x;margin:0 0 10px 0;padding:9px 0 9px 10px;color:#FFF;text-shadow:0px 1px 0px;#000;font-size:16px;line-height:16px;font-family:'Oswald',sans-serif;font-weight:normal;text-decoration:none;text-transform:uppercase;}

Note CSS
  1. Warna merah adalah lebar pembatas antara main dengan footer
  2. Warna hijau adalah lebar keseluruhan footer
  3. Warna biru adalah max. lebar dari widget / gadget footer
  4. Warna orange adalah lebar dari widget / gadget footer, dan usahakan lebar ini lebi kecil dari Warna biru
  5. Sesuaikan lebar dan tinggi footer ini dengan milik template blog sobat
  6. Untuk merubah kode warna yang di inginkan seperti contoh kode #000000; DSB silahkan klik link hex color blogspot
  • Setelah selesai, lanjutkan untuk mencari kode </body> dan
  • masukkan kode dibawah ini di atas kode </body>
<!-- awal kolomfootergaptek32 -->
<div id='footek'>
    <div class='footek h2'>
<div id='tabfootek-wrapper'>
<b:section class='tabfootek' id='tabfootek1' preferred='yes'/>
</div>
<div id='tabfootek-wrapper'>
<b:section class='tabfootek' id='tabfootek2' preferred='yes'/>
</div>
<div id='tabfootek-wrapper'>
<b:section class='tabfootek' id='tabfootek3' preferred='yes'/>
</div>
<div style='clear: both;'/>
   </div></div> <!-- end kolomfootergaptek32-->

Note kolomfootergaptek32
  1. Kalo bisa penempatan kolomfootergaptek32 ini di atas credit footer.
  2. Bila ingin menambahkan 1 kolom footer, sobat hanya menambahkan kode dibawah ini tepat dibawah kode yang saya beri text bacgroun kuning, dan mengatur kembali pada lebar pada point NOTE CSS yang berwarna biru dan orange di atas
<div id='tabfootek-wrapper'>
<b:section class='tabfootek' id='tabfootek4' preferred='yes'/>
</div>
  • Untuk mengantisipasi gagal silahkan review terlebih dahulu
  • Bila berhasil yang harus sobat lakukan adalah menyimpan / save pengeditan dan
  • Selamat ber eksperimen

Terkait dengan ini

3 komentar:

  1. Tampilan blog yang simple tapi menarik

    BalasHapus
  2. thanks infonya,,,sangat membantu
    ditunggu kunjungan baliknya,,,
    salam blogger

    http://bilogizma.blogspot.com/

    BalasHapus
  3. yappp, ini sesuai dengan judul "Membuat kolom footer keren dan elegan" \m/
    mantappp gan.... visit back ya bos adiesign.blogspot.com

    BalasHapus

Saya mohon maaf atas ketidak terurusnya blog ini, dan saya pun tidak tahu kapan ada waktu luang agar blog ini dapat membalas kritik dan pertanyaan, apalagi untuk melanjutkan postingan saya yang sempat tertunda pada akhir-akhir ini.
Kemungkinan besar blog ini tidak akan aktif selama paling sebentar 2-3bulan karena saya (admin) sibuk mencari nafkah di dunia nyata.
Saya mohon maaf yang sebesar-besarnya karena tidak bertanggung jawab dalam hal yang seperti ini.

Untuk menyisipkan kode <i rel="pre">KODE ANDA YANG TELAH DI PARSE...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>

Link hidup akan terhapus secara otomatis
Convert kode terlebih dahulu bila komentar anda mengandung kode HTML/JScript pada tombol di bawah ini

Parse HTML