Cara Membuat Widget Footer Responsive 3 Kolom di Blogger

Widget Footer merupakan salah satu bagian yang terpenting dalam sebuah blog, selain untuk mempercantik tampilan blog, widget footer ini juga berfungsi untuk meletakkan feed blog yang disusun dalam satu label, atau tidak jarang juga widget footer di isi dengan widget lain seperti author box, subscribe box dan lain-lain.

Pada artikel kali ini, penulis akan memberikan sedikit tutorial Cara Membuat Widget Footer 3 Kolom Responsive di Blogger. Jika template blog kamu gunakan belum mempunyai widget footer 3 kolom dan ingin membuatnya menjadi 3 kolom, kamu bisa mengikuti tutorial di bawah ini.

Cara Membuat Widget Footer 3 Kolom

1. Log in ke akun Blogger  – Tema  – Edit HTML.

Masuk ke blogger

2. Copy dan Pastekan Style CSS di bawah ini sebelum kode ]]></b:skin>

style css footer 3 kolom

/* -- 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}
}

3. Masukan kode pemanggil html di bawah ini dan taruh di atas kode <footer>

kode pemanggil footer 3 kolom

<!-- 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 -->

4. Simpan Tema. 

Sampai disini kamu sudah berhasil membuat widget footer 3 kolom, langkah selanjutnya adalah menambahkan widget baru, contoh disini penulis akan menambah widget Subscribe Box Via EmailAbout Profile, dan Label di footer.

Berikut adalah tampilan Widget Footer Responsive 3 Kolom yang telah terpasang di blogger.

tampilan widget footer 3 kolom di blogger

Sekian tutorial Cara Membuat Widget Footer Responsive 3 Kolom di Blogger yang penulis bagikan untuk kamu. Jika kamu memiliki pertanyaan perihal artikel ini, jangan sungkan untuk berkomentar di bawah ya. Semoga bermanfaat.

Komentar

Leave a Reply

Your email address will not be published. Required fields are marked *

Trending Minggu Ini

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Ikuti Kami di Sosmed

Inwepo Navigasi

Tentang Kami             Beranda

Hubungi Kami             Panduan Penulis

Kebijakan Privasi

FAQ

Partner

Copyright © 2014 - 2023 Inwepo - All Rights Reserved.

To Top