Saturday, January 4, 2020

Cara Membuat Widget Footer 3 Kolom Responsive Di Blogger

Your Ads Here

Cara Membuat Widget Footer 3 Kolom Responsive Di Blogger
Paijem
Your Ads Here

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

Blog ini adalah tempat untuk penyedia berbagai macam tutorial, tips, dan info menarik lainnya. Admin berharap pengunjung dapat lebih mudah mencari apa yang di inginkan dan mendapatkan informasi yang menarik di blog ini.