Cara Menambahkan 4 elemen Baru di Atas Footer

Selamat sore kawan, pada kesempatan kali ini saya akan membagikan cara menambahkan halaman baru di atas footer.

Untuk lebih jelasnya anda bisa lihat seperti gambar di bawah ini.

banyak kegunaan yang sering dilakukan pengguna web atau blog dalam penambahaan halaman baru di atas footer ini, salah satunya bagi saya sebagai tempat untuk memasarkan produk sesuai label atau kategori.

Berikut adalah langkah-langkah untuk menambahkan 4 element baru di atas footer

1. Langkah yang pertama, silahkan anda >> Masuk atau Login ke Blogger.com
2. Setelah masuk, silahkan anda pilih blog yang akan di pasangi footer 4 kolom.
3. Pada Dasbor blog pilih Menu >> Template, kemudian >> Unduh template lengkap.
4. Jika sudah, silahkan anda klik >> Edit HTML.
5. Kemudian cari kode ]]></b:skin> (Gunakan CTRL + F untuk mempercepat pencarian).
6. Setelah ketemu, langkah yang selanjutnya silahkan anda tambahkan semua kode berikut diatas atau sebelum kode ]]></b:skin>

/* CSS modified menambah elemen baru ------------------------------ */
#lower {
     border-top:2px solid #651715;
     margin:0 0 10px 0;
     -moz-border-radius-bottomleft:10px;
     -moz-border-radius-bottomright:10px;
}
#lower-wrapper {
     margin:auto;
     padding: 0px 0px 20px 0px;
     width: 960px;
     background: #f1370e;
     -moz-border-radius-bottomleft:10px;
     -moz-border-radius-bottomright:10px;
     -webkit-border-bottom-left-radius:10px;
     -webkit-border-bottom-right-radius:10px;
}
#lowerbar-wrapper {
     float: left;
     margin: 0px 0px 0px 0px;
     padding: 10px 0px 0px 0px;
     width: 25%;
     text-align: justify;
     font-size:100%;
     color:#333;
     line-height: 1.6em;
     word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
     overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.lowerbar {
     margin: 0;
     padding: 0;
}
.lowerbar .widget {
     margin: 0;
     padding: 10px 20px 0px 20px;
}
.lowerbar h2 {
     background:#651715;
     -moz-border-radius-bottomleft:6px;
     -moz-border-radius-bottomright:6px;
     -webkit-border-bottom-left-radius:6px;
     -webkit-border-bottom-right-radius:6px;
     margin: -10px 0px 10px 0px;
     padding: 3px 0px 3px 0px;
     text-align: center;
     color:#fff;
     font-size:16px;
     font-weight:bold;
     text-transform:lowercase;
}
.lowerbar ul {
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     list-style-type: none;
}
.lowerbar li {
     margin: 0px 0px 2px 0px;
     padding: 0px 0px 1px 0px;
     border-bottom:1px dotted #DF0101;
}
.lowerbar a {
     color: #FA58F4;
     text-decoration: none;
}
.lowerbar a:hover {
     text-decoration: underline;
     color: #F7BE81;
}
.lowerbar a:visited {
     text-decoration: none;
     color: #5858FA;
}
/* ---Modefied: http://vandepenter.blogspot.com--- */

Catatan: Silahkan edit kode CSS diatas, untuk menyesuaikan tampilan kolom dengan template anda.

Perhatikan tulisan pada lower wrapper, widht (lebar) 960px ganti dengan lebar footer anda.

7. Langkah yang ke tujuh, masih dalam Edit HTML. Silahkan sobat cari kode berikut di bawah ini. (Gunakan CTRL + F kembali untuk memudahkan pencarian). Cari salah satu kode saja.

<div id='footer-wrapper'>

<b:section class='footer' id='footer' showaddelement='yes'/>

</div>

atau

<div id='footer'>

<b:section class='footer' id='footer' showaddelement='yes'/></div>

8. Jika sudah ketemu, untuk membuat footer 3 kolom di blog, anda  harus menambahkan kode berikut dibawah atau sesudah kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' /> 

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'> 
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'> 
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'> 
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'> 
</b:section>
</div>
<div style='clear: both;'/>
</div> </div><!-- end lower-wrapper -->

Catatan:

Jika pada template blog yang anda gunakan tidak ada kode <b:section class='footer' id='footer' showaddelement='yes'/> Maka tambahkan saja kode-nya dibawah atau sesudah kode <div id='footer'>

9. Sebelum sobat klik Simpan, sebaiknya klik dulu Preview atau Pratinjau. Jika tidak terjadi eror pada blog sobat saat Edit HTML Template, silahkan anda klik Simpan Template.

sumber gambar: www.multazamsemarang.blogspot.com

10. Selesai dan lihat hasilnya pada Dasbor Tata letak blog anda. Jika sudah jadi seperti yang ada pada contoh gambar screenshot diatas, itu artinya anda sudah berhasil Membuat Dan Memasang Footer 4 Kolom Pada Blog anda.

Demikian pembahasan tentang Menambahkan 4 elemen Baru di Atas Footer ini kami sajikan, semoga bermanfaat.

sumber artikel dengan beberapa perubahan