Skip to content Skip to sidebar Skip to footer

Cara Membuat Widget Footer 2 Kolom Responsive Blogger

Input Learn - Cara Membuat Widget Footer 2 Kolom Responsive Blogger, Footer merupakan widget yang letaknya di paling bawah bagian halaman yang berfungsi sebagai mempercantik tampilan sebuah blogger dan agar tampak elegan.

Widget footer biasanya berisi Copyright, About me, Feed burner, Labels dll. Sebagai pelengkap sebuah blog. Namun biasanya juga memasang link footer dari para pembuat template.

Cara Membuat Widget Footer 2 Kolom Responsive Blogger

Selanjutnya bagaimana sih cara membuat footer 2 kolom di blog ? Perhatikan DEMO dibawah ini.

Cara Membuat Widget Footer 2 Kolom Responsive Blogger

1. Masuk ke blogger kalian dengan Gmail kalian,
2. Lalu pilih Menu Tema ~ Edit HTML,
3. Copy kode CSS di bawah ini tepat di Atas ]]></b:skin> atau </style>


 #footernya-masyadi{width:100%;background:#111 url(http://3.bp.blogspot.com/-XH2hBNMtXBA/U6_EpW3r0gI/AAAAAAAAAJk/mQFHapyZWj8/s1600/footer.jpg) repeat-x top;margin:0 auto;text-align:left;border-top:7px solid #1658A0;overflow:hidden}
#footernya-masyadi a{color:#9c9c9c}
#footer-inners{overflow:hidden;padding:10px 20px}
.footer .widget{padding:0 1px}
.footer .widget-content{padding:0}
.footer li{list-style:none;border-bottom:1px dotted #666;padding:3px 0}
.footer h4{font-size:150%;font-weight:400;color:#fff;font-family:Oswald,Arial,Sans-serif;text-transform:uppercase;padding-bottom:10px}
#footer-left{width:34.5%;float:left;overflow:hidden}
#footer-right{float:right;width:64.5%;overflow:hidden}
@media only screen and (max-width:700px){
.footer{width:100%!important;float:none!important}
}

4. Masih di Edit HTML, jika kalian ingin menghapus footer yang lama silahkan hapus saja footer yang lama kodenya di atas <BODY> dan jika ingin menambahkan lagi bisa langsung pastekan kode dibawah ini pas di atas kode penutup </FOOTER> 


  <div class='clear'/>
<footer id='footernya-masyadi'>
<b:section class='footer' id='footer-left' showaddelement='yes'/>
<b:section class='footer' id='footer-right' showaddelement='yes'/>
</footer>

5. Selesai simpan Tema, dan lihat hasilnya di Tata Letak dan tambahkan gedjet. Seperti Popular post, labels dan about me.

Baca Juga : Cara Membuat 3 kolom Footer Responsive Di Blogger

Jika kalian pandai desain silahkan edit kode css di atas tadi sesuai keinginan. Untuk pembahasan Cara Membuat Footer 2 kolom cukup sekian, semoga bermanfaat.
Paijem
Paijem Saya adalah Blogger pemula yang ingin share informasi sebisa saya, lewat pengalaman selama ini.

Post a Comment for "Cara Membuat Widget Footer 2 Kolom Responsive Blogger"

Berlangganan via Email