Cara Membuat 3 KOLOM diatas FOOTER


Sebuah blog tanpa pernak-pernik widget didalamnya ibarat kata"sayur tanpa garam " kurang "maknyus" bila dilihat.maka dariitu diperlukan kreatifitas dan ketelatenan seorang bloger untuk menjadikan/make over tampilan blognya menjadi enak dilihat dan menarik untuk dibaca artikel didalamnya.untuk itu bila menggunakan template bawaan blogspot sendiri dirasa kurang maksimal maka dari itu disini ada 1 cara untuk menambahkan 3 kolom diatas footer yang berguna untuk menempatkan widget tambahan tadi tanpa harus mengurangi fungsi dari blog itu sendiri.cara membuatnya gampang dan simple,langsung aja ke tkp untuk mempelajarinya




langkah-langkah membuat 3 kolom bawah footer   

1.masuk kedalam dashbor bloger./
2.masuk ke dalam rancangan->edit HTML-->ceklist kotak atas dalam HTML tadi(disarankan back up dulu template sebelum utak-atik template)
3.cari kode ]]></b:skin>
4.masukkan kode dibawah ini DIATAS kode ]]></b:skin> tadi

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

5.cari kode yang mirip dengan kode berikut

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

6.kalau sudah ketemu pastekan kode dibawah ini tepat DIATAS nya

<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<p> <hr align='center' color='#5d5d54' width='90%'/></p>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>

<div style='clear:both;'/>
</div>

7.simpan dan lihat apakah elemen sudah bertambah/belum jika belum berarti ada langkah yang terlewatkan,ulangi dari awal lagi.
8.jangan lupa berdoa dan semoga berhasil

  segala sesuatu yang diikuti dengan niat akan terwujud dan tercapai sobat ,salam bloger indonesia


9 komentar:

ucil said... Replay

makasih gan, itu ngomong2 yg 90% itu lebar keseluruhan footer apa buat yg mana ya?

Unknown said... Replay

@ucilterima kasih dah mereview gan,90% pembagian dari footer yang dibagi 3 bagian sehingga dihasilkan 3 kolom yang sama lebar.

boem bethem said... Replay

ane coba bisa 100% , thanks tutorialnya gan :)

http://boem-bethem.blogspot.com/

suwardi said... Replay

Saya coba di templete jason ini tidak bekerja dengan baik dan 3 kolom-nya pindah di atas header, mungkin ini perlu lagi di uji kebenran-nya dan work untuk templete jenis apa saja. terima kasih.

Unknown said... Replay

@boem bethemsama-sama gan terima kasih sudah berkunjung di blog ini

Unknown said... Replay

@suwardiscript ini tepatnya digunakan untuk template minimalis gan dan kalaupun dipraktekan untuk template bawaan blogspot kurang berfungsi dengan baik.

alfians said... Replay

tengkiyu gan blgo ane udah terpasang 3 kolom

Unknown said... Replay

@alfianssama-sama gan syukur dah bisa membantu blog agan

Limit Post said... Replay

kok ditempat saya gak ada kode ini b:section class='footer' id='footer'

Post a Comment

Silahkan anda berkomentar, namun tetap jaga kesopanan dengan tidak melakukan komentar spam nyepam dosa tau!!!,mari jadikan bloger indonesia lebih baik!

Related Posts Plugin for WordPress, Blogger...
 
© 2009 Enthik Rulez[ E.R] | Powered by Blogger | Built on the Blogger Template Valid X/HTML (Just Home Page) | Design: Choen | PageNav: Abu Farhan
Suka enthik rulez? Follow @dikutip