dee-nesia
mencari dan berbagi

Cara Membuat Footer 3 Kolom di Blogspot

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>

Loading...

Semoga berguna ….

Technorati Tags: Optimasi Blogspot,3 Colomn Footer,SEO
(Visited 98 times, 1 visits today)
You might also like