Skip to content Skip to sidebar Skip to footer

Cara Membuat Widget Footer 3 Kolom Responsive Di Blogger

Input Learn - Cara membuat widget footer 3 kolom responsive di blogger, widget footer merupakan bagian terpenting dari sebuah blog kita, yaitu berfungsi sebagai pemercantik blog yang posisinya terdapat di paling bawah dari tempilan blog kita.

Cara Membuat Widget Footer 3 Kolom Responsive Di Blogger

Footer biasanya di gunakan sebagai widget copyright, label, about me, dan feed berlangganan. Nah itulah tadi fungsi - fungsi yang terdapat dalam widget footer tersebut. Hanya mempercantik tampilan blog kita agar terlihat lebih elegan.

Baca Juga : Cara Membuat Favicon Di blogger 

Sekarang adalah untuk cara menambahkan Widget footer 3 kolom di blog, simak caranya.

1. Masuk ke Blogger kalian dengan Gmail kalian lalu pilih menu Tema ~ Lalu Edit HTML dan copy script CSS dibawah ini di atas ]]></b:skin> untuk mempermudah pencarian ketikkan CTRL + F di template.

  /* -- 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:#242424;;background-repeat:repeat-x;background-position:top center;overflow:hidden;margin:0 auto;
padding:20px 15px 0;color:#dddddd;border-top:5px solid #07ACEC}
#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:#07ACEC;bottom:-2px}
@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}
}

2. Masih di edit HTML, selanjutnya masukkan kode JS di bawah ini untuk memanggil kode css di atas copas pas di atas kode </HEADER> 



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

3. Selesai Simpan Tema
4. Masuk ke Tata Letak ~ Add Widget, pilih sesuai yang kalian inginkan.

Nah itulah tadi cara termudah menambahkan menu widget footer di dalam blog, jika ada pertanyaan silahkan komen dibawah. Terimakasih
Paijem
Paijem Saya adalah Blogger pemula yang ingin share informasi sebisa saya, lewat pengalaman selama ini.

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

Berlangganan via Email