Content feed Comments Feed
Related Posts Plugin for WordPress, Blogger...

Warning !

Buat semua pengunjung yang ingin copy-paste diperbolehkan asal mencantumkan url http://4llstars.blogspot.com/. Hal ini untuk menjaga sportivitas dan solidaritas sesama blogger di Indonesia.

Membuat Footer 3 Kolom dengan Background - Setelah mencari-cari tutorial membuat footer 3 kolom dengan background di google akhirnya saya menemukannya. ternyata sekarang cukup sulit untuk menemukan tutorial yang tepat di google, selain dikarenakan maraknya blog auto content juga di karenakan banyak blogger yang menembak keyword demi kepentingan pribadi. Saya menemukan beberapa tutorial membuat footer tiga kolom di google tapi hanya beberapa yang dapat di praktekkan dan yang lainnya bermasalah. Beberapa masalah itu adalah sebagai berikut:

* 1. Bukannya tiga kolom, tetapi footer 3 baris. Haha, buatnya 3 kolom, kok jadinya 3 baris. Saya sampe bingung, apalagi saya belum ahli dengan kode CSS template blogger.
* 2. Warna atau tampilan background tidak dapat diganti. Inilah yang mendorong saya untuk mencari tutorial membuat footer 3 kolom dengan background di google, karena tutorial saya tentang menambah footer 3 kolom yang dahulu backgroundnya tidak dapat diganti.
* 3. Template tidak dapat disimpan karena Error. Tapi akhirnya bisa, fyuh....

Setelah belajar CSS blogger template , akhirnya saya sedikit mengerti cara membuat footer 3 kolom dengan background di blogspot dan jadi juga footer 3 kolom blog forantum ini. Walaupun saya belum mengerti benar, berikut ini cara Membuat Footer 3 Kolom dengan Background di blogspot:

* 1. Login ke blogger dan masuk ke Dasbor.
* 2. Klik Rancangan, lalu pilih menu Edit HTML (Jangan Centang "Expand
      Template Widget")
* 3. Cari kode ]]></b:skin>
* 4. Letakkan kode CSS berikut ini diatas ]]></b:skin>


#footer-column-container {
clear:both;
}
.footer-column {
background:#444 url(http://img169.imageshack.us/img169/937/footerbawah.jpg) no-repeat; width:900px; position:relative; clear:both; margin:0 auto; float:left; padding:5px 0 10px 0; color:#fff
}

* 5. Cari kode <b:section class='footer' id='footer'> dan ganti dengan kode pengganti di bawah ini:


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

* 6. Apabila tidak ada kode yang saya maksud, letakkan kode pangganti diatas kode <!-- end content-wrapper -->
* 7. Apabila masih belum ketemu, letakkan kode yang pengganti tadi dibawah kode CSS bagian footer atau bottom.
* 8. Lalu simpan....

Maaf ya tutorial ini agak membingungkan, karena saya sendiri bingung, hehehe. Yang penting sobat belajar saja mempelajari kode-kodenya, semoga berhasil aja ya....

0 Responses to Css | Membuat Footer 3 Kolom dengan Background

Post a Comment

Powered by Blogger.
Related Posts Plugin for WordPress, Blogger...
Selamat Datang Jgn Lupa Comment

About Us

My Photo
CZ AllStar's
Semarang, Jawa Tengah, Indonesia
No man is a good physician who has never been sick !?
View my complete profile

You Are Visitor :

Translate

Blog Archive

corps blogger indonesia