Panduan Membuat Widget Footer 4 Kolom Responsive di blog

Sebelumnya saya sudah membagikan panduan mengenai cara membuat widget footer 3 kolom yang responsive, anda bisa lihat di sini cara membuat widget footer 3 kolom untuk pengguna template viomagz.

Namun di kesempatan kali ini saya akan memberikan panduan bagaimana cara membuat widget footer 4 kolom dan responsive, Untuk cara pembuatannya atau menambahkan widget footer di blog sendiri agar terlihat keren sesuai keinginan kita, menambahkan icon sosial media atau box subecribe dan label pada widget footer kita, dengan cara menambahkan kode html dan css pada template blog kita, dan di sini saya akan memberikan tutorial berdasarkan pengalaman sendiri. ok kita lansung saja ikuti panduan berikut.

Cara Membuat Footer 4 Kolom Responsive yang Keren di Blogger.

Css footer 4 kolom responsive  keren blogger

Sama seperti di atas copy dan paste kode css di bawah ini dan tempatkan tepat di atas </head>

<style>
/* -- css footer 4 kolom --*/
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
max-width: 950px;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 950px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar 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;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar 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;
text-align: left;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}
@media only screen and (max-width:768px) {
#lower, #lower-wrapper, #menubottom-container, #credits-wrap {overflow:hidden!important;width:100%!important;}
#lowerbar-wrapper{overflow:hidden!important;width:90%!important;padding:20px}
#credits p{text-align:center!important}
}
/* -- End css footer 4 kolom --*/
</style>

Kemudian copy kode html di bawah ini lalu paste di atas kode <footer>

Html footer 4 kolom responsive keren blogger

<!-- footer 4 kolom -->
<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'/>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'/>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'/>
</div>
<div style='clear: both;'/>
</div> </div>
<!-- End footer 4 kolom -->

Nah Kini anda sudah membuat footer 4 kolom yang responsive dan keren di blog anda, cukup sekian dulu dari saya semoga bermanfaat.

Jika anda bukan pengguna Template Viomagz bisa buka pandung membuat widget footer 3 kolom yang responsive,

Terima kasih sudah berkunjung di blog tutorial ini berdasarkan pengalaman yang minim, Wassalam.