Rabu, 13 Juni 2012

Tutorial Cara Membuat Footer 3 Kolom Terbaru - Update

Tutorial Cara Membuat Footer 3 Kolom Terbaru - Update : Selamat malam sobat-sobat bloger., Kalian lagi pada nyari Tutorial Cara Membuat Footer 3 Kolom ya? #iyalah dra, kalo ga, ngapain juga masuk kesini, !!# cikikik,. bercanda dikit gan walaupun garing, biar ga selek ya ga. wawaw

ok langsung ke pokok pembahasannya,. sedikit pertanyaan ato sekedar pernyataan dari ane, apa sih fungsinya footer itu? biar loadingnya ga lambat? ato cuman sekedar memperindah blog aja? setau ane sih biar memperindah blog ajah,. ngasih banyak ruang kosong buat di pasangin widget., xixi ga tau deh dari kalian apa fungsinya.

Begini gan tutorialnya, silahkan disimak dengan cermat : 
  • login dulu ke akun blog sobat (sudah pasti)
  • pilih rancangan atau tataletak atau layout
  • pilih yang edit html
  • centang expand template widget
  • cari kode ]]></b:skin> (biar gampang, tekan CTRL+F kemudian paste ]]></b:skin>)
  • kalau sudah ketemu, tinggal pelototin ajah gan ,.  wakakak
  • Bercanda, kalo udah ketemu paste kode ini dibawah  ]]></b:skin> tadi.
#bottom{background:#444 url(http://4.bp.blogspot.com/_C6KkooKXCEw/TICgrtGXyRI/AAAAAAAAGzU/enOVeXD63p0/s1600/buttommenu-c.png) no-repeat; width:900px; position:relative; clear:both; margin:0 auto; float:left; padding:5px 0 10px 0; color:#fff}
#bottom a:link{color:#fff; text-decoration:none}
#bottom a:hover{color:#C0C0C0; text-decoration:underline}
#bottom a:visited{color:#C0C0C0; text-decoration:none}
#bottom h2{padding:15px 0 0 10px; margin:0 0 10px 0; font-weight:bold; line-height:1.4em; text-transform:uppercase; border-bottom:0px dotted #fff}
#bottom ul{padding:0; margin:0; color:#F93}
#bottom ul li{list-style-type:square; border-bottom:0px solid #626200; padding-left:5px; margin:3px 0 0 22px}
#left-bottom{width:280px; float:left; padding-left:22px}
#center-bottom{width:280px; float:left; padding-left:0px}
#right-bottom{width:280px; float:left; padding:0 5px 0 50px}
#left-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#center-bottom2{width:760px; font-size:90%; padding-top:16px; float:left; padding-left:30px}
#right-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#category{width:860px; float:left; padding:0px 0 20px 20px}
#upper-footer{width:860px; margin:0 auto; padding:0px; clear:both; line-height:1.3em; letter-spacing:.0em; font-size:95%; border-top:1px solid #c0c0c0; padding-top:10px}
Catatan :
kode yang berwarna biru adalah link background, kalo agan mau ganti silahkan saja sesuai selera.
kode yang berwarna merah adalah keterangan dari masing-masing kolom.
kode yang berwarna hijau atau 280 adalah lebar dari masing-masing kolom footer. silahkan sobat rubah berdasarkan kapasitas lebar template sobat
  • cari kode <!-- end content-wrapper --> ato apa ajah yang mirip kaya gitu
  • terus paste kode dibawah setelah kode </div> <!-- end content-wrapper-->
<div id='bottom'>
<b:section class='category' id='category'/>
<b:section class='left-bottom' id='left-bottom' preferred='yes' showaddelement='yes'/>
<b:section class='center-bottom' id='center-bottom' preferred='yes' showaddelement='yes'/>
<b:section class='right-bottom' id='right-bottom' preferred='yes' showaddelement='yes'/>
</div>
  • terakhir save dan lihat hasilnya
Ok gan, sekian postingan saya tentang -  Tutorial Cara Membuat Footer 3 Kolom Terbaru - Update  - semoga bermanfaat
sumber : http://kode-blogger.blogspot.com 

    Tidak ada komentar:

    Poskan Komentar