Responsive widget footer 3 kolom

Responsive widget footer 3 kolom - Template Responsive, fast loading, valid html5, seo friendly, mobile friendly, google index, breadcrumb seo, meta tag seo, markup schema org dan macam-macam lagi yang telah dilakukan terhadap template blog untuk menyeragamkan kecanggihan dan keunggulan teknologi terkini.

Bahkan ada juga penyedia-penyedia template hebat ini yang telah menerapkan ciri-ciri yang dinyatakan di atas, hanya tinggal download sahaja. Namun, terdapat juga beberapa template yang tidak dilengkapi responsive widget footer 3 kolom | tutorial blogspot malaysia ini.

Pelajari dan ketahui langkah-langkah memasang widget simple footer 3 kolom ini dengan mudah.

Nak contoh? Tengok dekat blog yang korang tengah baca ni, ada dekat bawah tu..

Baca juga : tutorial cara cek broken link dalam blog

WIDGET FOOTER 3 KOLOM RESPONSIVE

1. Pergi ke tab navigation blogger anda : Template > Edit Html

2. Klik mana-mana bahagian dalam code html tersebut, CTRL + A > CTRL + F dan cari code ini </style>

3. Dah jumpa? Copy code bawah ni dan Paste atas code </style> tadi.

#footer-wrapper{background:#fff;overflow:hidden;margin:0 auto;padding:20px 15px 0;color:#666;}
#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}

Yang ni code css media screen untuk tujuan responsive.

@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}
}

4. Terakhir letak code ni di atas code </body>

<div id='footer-wrapper'>
<b:section class='left' id='left' preferred='yes'/>
<b:section class='center' id='center' preferred='yes'/>
<b:section class='right' id='right' preferred='yes'/>
</div><div class='clear'/>

5. Preview, tiada error terus la save. sekian..