Cara Menambahkan 4 elemen Baru di Atas Footer

Selamat sore sobat, setelah hujan ga turun-turun hari ini, rasanya pengen ngeposting sesuatu nih, untuk mengelngakpi tutorial blog, hehe dalam kesempatan kali ini saya akan membagikan cara menambahkan halaman baru di atas footer.

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




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>

/* --- LOWER --- */
/* --- CSS modified by: Vandepenter --- */
#lower {
     border-top:10px solid #F781F3;
     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: #FBEFF5;
     -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:#F781F3;
     -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--- */
/* --- End Lower--- */

Catatan: Silahkan edit kode CSS diatas, untuk menyesuaikan tampilan kolom dengan template anda.
Perhatikan tulisan yang berwarna merah 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.

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   Cara Menambah 4 Elemen Baru di Atas Footer : ini kami sajikan, semoga bermanfaat. Silahkan anda baca artikel yang sebelumnya yang bisa membuat anda mengetahui lebih banyak tips kesehatan, di antaranya Cara Mempercantik Widget Contact From dan Cara Membuat Tombol Join This Site Tanpa Poto Follower :

: