1 Cara Membuat Kolom Footer Keren dan Elegan

PanduanTop - 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.

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

Pandua

Komentar →