Membuat Footer 3 Kolom di Blogger

Sebuah tampilan blog yang menarik dan mudah di akses oleh pengunjung adalah point tersendiri untuk mempercantik blog. Salah satunya pada penempatan footer blog yang terkadang hanya itu-itu saja tidak menarik.

Dengan tutorial membuat footer 3 kolom dapat di terapkan di blogger ini memungkinkan kita untuk memodifikasi tampilan footer lebih menarik.

Manfaat dari memasang footer 3 kolom pada blog kita akan membuat lebih banyak widget yang dapat di pasang tetapi tidak mengganggu tampilan sidebar blog dan tetap terlihat propesional.

Beberapa template blogger memang sudah menyediakan footer yang menggunakan 3 kolom, tetapi tidak semua template blogger memiliki footer 3 kolom.

Jika kalian berminat menambahkan footer 3 kolom responsive berikut tutorialnya.

Cara membuat footer menjadi 3 kolom responsive

1. Masuk ke situs Blogger kalian

2. Masuk bagian Template

3. Klik Edit HTML

4. Copy kode dibawah ini dan letakkan di atas tag <footer> guanakan CTRL + F untuk mempermudah pencarian

<!-- Footer 3 kolom kenscripts START-->
  <footer id="kenscripts">
    <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 3 kolom kenscripts END -->

5. Copy kode CSS di bawah dan letakkan di atas kode </head>

<style>
  /* -- Footer 3 Coloum -- */
  #kenscripts{width:100%}
  #kenscripts .left{float:left;width:34%}
  #kenscripts .center{float:left;width:34%}
  #kenscripts .right{float:right;width:32%}
  #kenscripts{background:#CDDC39;;background-repeat:repeat-x;background-position:top center;overflow:hidden;margin:0 auto; padding:20px 15px 0;color:#dddddd;border-top:5px solid #000}
  #kenscripts .left{float:left;width:34%}
  #kenscripts .center{float:left;width:34%}
  #kenscripts .right{float:right;width:32%}
  #kenscripts .left .widget,#kenscripts .center .widget{margin:0 15px 15px 0;clear:both}
  #kenscripts .right .widget{margin:0 0 15px 0;clear:both}
  #kenscripts h2{margin:0 0 10px 0;padding:0 0 5px;border-bottom:3px solid #555;text-transform:uppercase:none; position:relative; color:#eeeeee}
  #kenscripts ul,#kenscripts ol{list-style:none;margin:0 0 0 0;padding:0 0 0 0}
  #kenscripts li{margin:5px 0;padding:0 0 0 0}
  #kenscripts a{color:#dddddd}
  #kenscripts a:hover{color:#ffffff}
  #kenscripts h2:before {content:"";position:absolute;left:0;width:180px;height:2px; background:#07ACEC;bottom:-2px}
  @media screen and (max-width:768px){
  #kenscripts .left{float:none;width:100%}
  #kenscripts .center{float:none;width:100%}
  #kenscripts .right{float:none;width:100%}
  #kenscripts .left .widget,#kenscripts .center .widget{margin:0 0 15px;clear:both}
  }
</style>

6. Done

Membuat Anti AdBlock Ala Kenny dengan Background Anime
Membuat Download Box Anime

Cara menggunakan widget footer 3 kolom

Cara menggunakannya sama seperti menambahkan widget blogger seperti biasa.

1. Masih di dalam Blogger kalian masuk ke Tata Letak

2. Gulir kebawah hingga pada bagian footer blog kalian

3. Tambahkan widget yang ingin kalian tambahkan ke dalam blog kalian seperti feed, social media, iklan dan sebagainya.

4. Simpan.

Begitulah cara membuat footer 3 kolom responsive di berbagai ukuran layar. Jika merasa tampilannya kurang memuaskan kalian bisa merubahnya pada bagian CSS sesuai keinginan kalian. Termasuk lebar dari footernya jika lebarnya melebihi ukuran layar atau kurang anda atur bagian CSS .left, .center, dan .right.