Promo artikel menutup otomatis setelah 5 detik
loading...

Kode HTML footer 3 kolom responsive

Pada halaman ini saya menulis artikel dengan judul kode HTML footer 3 kolom responsive, kode ini bisa di terapkan untuk anda pemilik blog atau situs dengan template 3 kolom, terdiri dari 1 kolom main posting, dan 2 kolom sidebar di kiri dan kanan blog



Di katakan responsive karena ketika blog atau situs anda di akses dari smartphone 3 kolom footer tersebut ikut tampil seperti komponen lain dalam blog, contohnya halaman posting blog anda



Atau perhatikan gambar di bawah ini









Script footer 3 kolom responsive seperti tertulis di bawah ini :





<Kode HTML A>

/* Footer 3 Coloum */
#footer-wrapper{width:100%}
#footer-wrapper .left{float:left;width:34%}
#footer-wrapper .center{float:left;width:34%}
#footer-wrapper .right{float:right;width:32%}
#footer-wrapper{background:#000000;;background-repeat:repeat-x;background-position:top center;overflow:hidden;margin:0 auto;
padding:20px 15px 0;color:#dddddd;border-top:5px solid #000000}
#footer-wrapper .left{float:left;width:34%}
#footer-wrapper .center{float:left;width:34%}
#footer-wrapper .right{float:right;width:32%}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 15px 15px 0;clear:both}
#footer-wrapper .right .widget{margin:0 0 15px 0;clear:both}
#footer-wrapper h2{margin:0 0 10px 0;padding:0 0 5px;border-bottom:3px solid #555;text-transform:uppercase:none;position:relative;color:#eeeeee}
#footer-wrapper ul,#footer-wrapper ol{list-style:none;margin:0 0 0 0;padding:0 0 0 0}
#footer-wrapper li{margin:5px 0;padding:0 0 0 0}
#footer-wrapper a{color:#dddddd}
#footer-wrapper a:hover{color:#ffffff}
#footer-wrapper h2:before {content:&quot;&quot;;position:absolute;left:0;width:180px;height:2px;
background:#000000;bottom:-2px}
@media screen and (max-width:1024px){
#footer-wrapper .left{float:none;width:100%;}
#footer-wrapper .center{float:none;width:100%;}
#footer-wrapper .right{float:none;width:100%;}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 0 15px;clear:both;}
}
 @media screen and (max-width:880px){
#footer-wrapper .left{float:none;width:100%;}
#footer-wrapper .center{float:none;width:100%;}
#footer-wrapper .right{float:none;width:100%;}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 0 15px;clear:both;}
}

 @media screen and (max-width:768px){

#footer-wrapper .left{float:none;width:100%;}
#footer-wrapper .center{float:none;width:100%;}
#footer-wrapper .right{float:none;width:100%;}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 0 15px;clear:both;}
}
 @media screen and (max-width:480px){
#footer-wrapper .left{float:none;width:100%;}
#footer-wrapper .center{float:none;width:100%;}
#footer-wrapper .right{float:none;width:100%;}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 0 15px;clear:both;}
}
 @media screen and (max-width:320px){
#footer-wrapper .left{float:none;width:100%;}
#footer-wrapper .center{float:none;width:100%;}
#footer-wrapper .right{float:none;width:100%;}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 0 15px;clear:both;}
}





<Kode HTML B>

<!-- Footer Widget 3 Coloum --> <footer id="footer-wrapper">   <b:section class='left section' id='left' preferred='yes' showaddelement='yes'>     </b:section>   <b:section class='center section' id='center' preferred='yes' showaddelement='yes'>     </b:section>   <b:section class='right section' id='right' preferred='yes' showaddelement='yes'>     </b:section> </footer>  <!-- End Footer Widget 3 Coloum -->





Lantas bagaimana menerapkannya pada blog atau situs anda ?, temukan jawabnnya dengan membaca artikel saya yang berjudul cara membuat footer 3 kolom responsive untuk mendapatkan jawabannya






Demikian semoga bermanfaat
Artikel unik dari sampingkanan.com
loading...

Berlangganan artikel sampingkanan.com via email:

Iklan Atas Artikel

loading...

Iklan Bawah Artikel

loading...