• Sabtu, Oktober 09, 2010
  • Administrator

Membuat footer 3 kolom dibawah postinganFooter 3 kolom yang saya maksud adalah kolom yang berada dibawah,jadi jika kamu pengen meletakkan widget anda yang pasti footer ini akan sangat berguna juga,saya juga baru menambahkan footer 3 kolom pada template saya ini, lhatlah keren gak ya ha ha ha.....Footer wraper dari template klasik hanya mempunyai satu widget, begitu pula template - template minima hasil design para master web.

Bagi anda yang ingin mengganti footer - nya menjadi 3,4,atau 5 kolom, anda bisa menggati kodenya dengan kode dibawah ini,caranya :

>>>login ke blog anda
>>>Klik Tata Letak
>>>Edit Html
>>>Cari kode #footer-wrapper atau yang mirip seperti itu, kalo sudah ketemu hapus kode tersebut dan ganti dengan kode dibawah ini:






/* ----- FOOTER ----- */

#footer-wrapper {
clear: both;width: 100%;
word-wrap: break-word;
overflow: hidden;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: #0000FF;
border: 1px solid $bordercolor;
}
#footer {
margin: 0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
text-align: left;width: 960px;
color: #000000;
font: $footerTextFont;
line-height: 1.6em;
}
#footer h2 {
margin: 10px 0px 0px 0px;
padding: 3px 0px 3px 0px;
color: #cc0000;
font: $footerTextFont;
}
#footer1 {width:320px;float:left;background:#FFFFFF; padding: 0px;border: 1px solid #cccccc;}
#footer2 {width:320px;float:right;background:#FFFFFF; padding: 0px;border: 1px solid #cccccc;}
#footer3 {width:320px;float:left;background:#FFFFFF; padding: 0px;border: 1px solid #cccccc;}
#footer1 .widget-content {margin:0 .5em 0 ;}
#footer2 .widget-content {margin:0 .5em 0 ;}
#footer3 .widget-content {margin:0 .5em 0 ;}
#footer a { color: #3D81EE; text-decoration: none; }
#footer a:hover { color: #cc0000; text-decoration: none; }
#footer a:visited { color: #3D81EE; text-decoration: none;}





>>Kemudian cari kode yang mirip dengan kode diwah ini:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

>>>setalah menemukan code diatas selanjutnya ganti dengan code dibawah ini:

<div id='footer-wrapper'>
<div id='footer'>

<b:section class='footer' id='footer1' preferred='yes'>
</b:section>


<b:section class='footer' id='footer2' preferred='yes'>
</b:section>

<b:section class='footer' id='footer3' preferred='yes'>
</b:section>

</div>
<div style='clear:both;'/>
</div><!-- end footer-wrapper -->

>>>Simpan template
>>>Selesai,Kode di atas untuk membuat footer 3 kolom

NB:agar sesui pada blog anda sebaiknya anda ukur dulu lebar pada blog kamu, sesuaikan juga warna pada kode css seperti yang anda inginkan, lihat blog saya ini ini juga hasil otakatik aja seperti tutorial ini bagus gak,,he he he...
semoga bermanfaat.

Related Posts:

  • CARA MEMASANG DAN JENIS JAM UNTUK BLOGCaranya : 1. Masuk ke Dasbor 2. Pilih Tata Letak 3. Tambah Gadget / Add as Target 4. Pilih HTML/Java Script Ni kode beserta contoh jamnya Jam Analog <embed src=http://fc02.deviantart.com/fs48/f/2009/196/1/3/applea… Read More
  • CARA MEMASANG EFEK SALJU DI BLOGSPOTLangsung aJjah yUa..!!! Caranya : 1. Masuk ke Blog 2. Klik Tab Tata Letak 3. Klik Edit/HTML 4. Cari kode seperti ini : </head> 5. Kalau sudah ketemu, letakkan script di bawah ini tepat di bawah kode </head> &g… Read More
  • MUNCULKAN ADSENSE AKIBAT PSA GOOGLE IKLAN MASYARAKATMemunculkan Google adsense karena PSA, Iklan layanan Masyarakat, Kotak kosong. Diterima menjadi publisher google adsense merupakan kebanggaan tersendiri bagi pemilik web blog.  Karena kita dapat memasang iklan google d… Read More
  • CARA MENGETAHUI BERAT BLOG Berat tidaknya Suatu Web/Blog itu akan mempengaruhi saat loading ketika web/blog tersebut di akses, biasanya banyaknya aksesoris di web/blog itu sangat mempengaruhi berat suatu web/blog, seperti pemasangan kalender, jam… Read More
  • CARA MEMBUAT DILARANG KLIK KANAN ( DISABLE ) DI BLOGCara membuat Disable Klik Kanan ini,, agar semua data yang kita punya ini aman dari sang pencuri yang bisanya cuma Copy Paste ajah,, hehe becanda ya,, itu cuma sekedar penjelasan doank ko^_^,, klo blog saya ini FREE Copy P… Read More

BTemplates.com

Categories

Kamera CCTV Palembang

Popular Posts

Blog Archive