Cara Membuat FOOTER Responsive Cantik di Blogger - d-ii

Cara Membuat FOOTER Responsive Cantik di Blogger

Cara Membuat FOOTER Responsive Cantik di Blogger
Pernah ga sih? melihat footer yang keren gitu, kalo belum pernah coba memasang footer berikut ini pasti keren deh ?
mau dipasang 4 kolom sampai 10 kolom , no problem .!! semua ok saja,,he
cara nya sebagai berikut :

1.Login Ke Blogger kemudian edit html
kemudian perhatikan dibawah ini :

#footer {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#00FFFF;
}
#footer-wrapper {
background:#00FFFF;
margin:auto;
padding: 20px 0px 20px 0px;
width: 970px; // Sesuaikan dengan lebar blog Anda
border:0;
}
#footerbar-wrapper {
background:#00FFFF;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%; // Sesuaikan
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.footerbar {margin: 0; padding: 0;}
.footerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.footerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.footerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.footerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.footerbar li a {
text-decoration:none; color: #DBDBDB;
}
.footerbar li a:hover {
text-decoration:underline;
}
.footerbar li:hover {
display:block;
background: #222;
}

2.Cari Kode ]]></b:skin> dan pastekan Tepat diatas nya
3.Setelah itu Perhatikan berikut ini :

<div id='footer'>
<div id='footer-wrapper'>
<div id='footerbar-wrapper'>
<b:section class='footerbar' id='footer1' preferred='oke icha'/>
</div>
<div id='footerbar-wrapper'>
<b:section class='footerbar' id='footer2' preferred='oke icha'/>
</div>
<div id='footerbar-wrapper'>
<b:section class='footerbar' id='footer3' preferred='oke icha'/>
</div>
<div id='footerbar-wrapper'>
<b:section class='footerbar' id='footer4' preferred='oke icha'/>
</div>
<div style='clear: both;'/>
</div> </div>

4.Kemudian Cari Kode </body> Pastekan Tepat diatas </body> setelah itu save template kemudian masuk Tata Letak dan silahkan menambahkan footer sesuai kesukaan dan lihat hasilnya

Untuk merubah banyak nya widget footer, musalkan ingin membuat 3 atau 4 atau 6 sekaligus perhatikan dibawah ini :

<div id='footerbar-wrapper'>
<b:section class='footerbar' id='footer5' preferred='icha oke'/>
</div>

Jika ingin menambahkan wiget lebih dari 4 tambahkan diatas Tepat dibawah </div>
Jika ingin Mengurangi Jumlah widget footer tinggal hapus seperti ini :

<div id='footerbar-wrapper'>
<b:section class='footerbar' id='footer4' preferred='icha oke'/>
</div>

Menambah widget footer / menguranginya Usahakan selalu berawalan </div> dan berakhiran </div>
Dan apa bila ingin mengubah warna dari Background nya perhatikan berikut :

background:#00FFFF

Ubah warna tersebut sesuai dengan selera masing masing dengan mencari kode warna html di pencarian Google, ubah juga "oke icha"heem kalo pengin diubah yah? begitulah cara membuat footer di blog responsive cantik blogger


Semoga bermanfaat & salam inspirasi
 Cara membuat footer responsive cantik di blogger

Author:

#

Artikel Menarik Banget ? d-ii , Suka...

Scroll to top