Sepertinya ada banyak blogger yang membutuhkan cara membuat footer 3 kolom di blogspotnya. Seperti saya yang baru saja mengubah template blog dee-nesia menjadi lebih sederhana tanpa banyak widget. Perubahan ini saya buat untuk membuat loadingnya lebih cepat sehingga blog tersebut lebih ramah buat pengunjung dengan akses internet yang tidak terlalu cepat. Kecepatan loading sebuah blog menjadi sangat penting untuk mempertahankan pengunjung yang datang.
Footer 3 kolom menjadi sangat populer saat ini. Beberapa suhu blogger menyarankan keberadaan footer 3 kolom ini untuk memperbaiki SEO suatu blog. Biasanya footer 3 kolom ini diisi dengan widget Google Friend Connect, Komentar Terakhir (Recent Comments), dan Bllogroll. Tentu saja anda bisa mengisinya dengan widget-widget yang lain. Selain menghemat tempat, footer 3 kolom juga membuat blog anda terlihat simple dan manis. Dan satu hal lagi, keberadaan 3 kolom di footer anda akan membuat pengunjung lebih mudah membaca navigasi blog anda. Navigasi atau penataan dan penempatan link untuk memudahkan pengunjung melihat sebagian atau kalau bisa keseluruhan isi blog anda juga menjadi salah satu poin penting demi SEO blog. Blog dee-nesia saya juga baru saya pasangi footer 3 kolom ini. Silahkan dikunjungi seperti apa bentuknya.
Mau memasang footer ciamik ini? Mudah saja kog. Ikuti cara membuat footer 3 kolom di blogspot berikut ini. (saya andaikan anda sudah tahu cara membuka halaman Edit HTML di dashboard Blogspot, kalau belum, silahkan ikuti cara mengedit template blogspot)
Langkah pertama:
Seperti biasa, backup dulu template utama blog anda. Supaya jika nanti ada hal yang tidak diinginkan terjadi anda bisa mengembalikan template sebelumnya.
Langkah kedua:
temukan kode berikut:
<div id=’footer-wrapper’>
<b:section class=’footer’ id=’footer’/>
</div>beberapa template menggunakan juga kode "footer" selain "footer-wrapper". Cari saja dengan Ctrl+F di Mozilla Firefox.
Langkah ketiga:
gantilah kode berwarna merah dengan kode berikut 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 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>Kalau sudah, simpan template anda.
Langkah keempat:
temukan tag ini:
]]></b:skin>
Tempatkan kode dibawah ini sebelum kode di atas,
#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}Simpan kembali template anda.
Kalau semuanya baik-baik saja, anda sudah berhasil melakukan cara membuat footer 3 kolom di blogspot kesayangan anda. Untuk mengecek, klik saja di tab “Page Elements”, anda akan menemukan 3 kolom di footer blog anda.
Catatan:
Anda juga akan mendapati sebuah garis dibawah ketiga kolom tersebut, untuk menghilangkannya, hapuslah baris kode
<p>
<hr align=’center’ color=’#5d5d54′ width=’90%’/></p>
Semoga berguna ….
Gan Klo Cara Buat footer gmn
template q gak ada footernya mana bisa cari footer-wraper orang footer nya aja gk ada ada solusi buat footer???
http://www.oshama.co.cc
@Oshama:
kalau yang di http://www.oshama.co.cc ada tuh footernya, kalau adiknya bisa pasang Copyright (c) Oshama | Sharing itu brarti ada dunk footernya.
Silahkan dicoba lagi, mungkin lupa mencentang pilihan Expand Widget Templates kali ya …
Saya juga pernah pakai template iMobile ini kog dan bisa, hehe ….
Tetep semangat! Jangan lupa belajar ya …
oh iya bisa gak cariin q template yang baguss hehehehe
ngarep
angkat tangan ~_~
Terimakasih gan tutorialnya,