☁Script footer 3 kolom responsive★★★ ➤ ☁Surau Kampung★★★

Baca juga

Terbaru dari surau kampung

Pada halaman ini saya menulis artikel dengan judul script footer 3 kolom responsive, script 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:"";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;}
</style>

<Kode HTML B>
 <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> 

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

Demikian semoga bermanfaat

Surau Kampung

Script footer 3 kolom responsive

Tentang Zulkifli

Pengunjung