Cara Membuat 3 Halaman Footer di Blog Responsive
3 Kolom Footer Blog, ini adalah MemperGanteng blog anda. Biasanya para Blogger Menggunakan 3 kolom Footer dibawah untuk RSS Feed Contohnya Berita : Sepak Bola Magz atau Islam Magz. Selain itu, anda juga bisa memasang Seperti Label, About Aurthor, Contact Us, Disclaimer dan Lain-lain. Bagaimana cara membuatnya? Oke langsung saja kita praktekan..
Screenshoot :
Cara Pertama :
1. Buka Blogger - Login!
2. Dashboard - Template - Edit HTML.
3. Temukan kode ]]></b:skin> atau </style>
4. Copy-Paste kode berikut ini, dan Letakkan diatas kode ]]></b:skin> atau </style>
Screenshoot :
Cara Pertama :
1. Buka Blogger - Login!
2. Dashboard - Template - Edit HTML.
3. Temukan kode ]]></b:skin> atau </style>
4. Copy-Paste kode berikut ini, dan Letakkan diatas kode ]]></b:skin> atau </style>
#footer-wrapper{background:#242424;overflow:hidden;margin:0 auto;padding:20px 15px 0;color:#dddddd;}
#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}
@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}
}
#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}
@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}
}
5. Copy - Paste kode berikut ini, dan letakkan diatas Link Credit/Copyright anda.
Atau bisa anda mencari kode <div class=footer-outer>
<!-- Footer Widget MayCyber-Download -->
<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/>
<!-- Footer Widget End -->
<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/>
<!-- Footer Widget End -->
6. Simpan Template!
7. Silakan Check Tata Letak/Layout anda apakah ada yang berubah? Jika berubah tandanya berhasil^.^.
8. Buatkan Add Gadged di Tata Letak yang baru untuk menguji cobanya.
Bagaimana? Mudah bukan? Sekian Tips Blogger dari saya, Semoga Bermanfaat!
�MayCyber-Download. - All Right Reserved