Cara Membuat Tampilan Footer 3 Kolom Seperti Jagoandzgn #1

Jagoandzgn.com - Untuk para blogger pastinya tidak asing lagi dengan namanya Widget Footer di blog, widget sendiri yang bisa kita atur pada bagian menu TATA LETAK. Berbagai macam widget ini kita bisa buat sendiri untuk mempercantik tampilan blog kita. Waktu itu ada yang mengirim email melalui email cs Jagoan yang meminta untuk membuat tutorial ini.

Nah, untuk template yang belum memakai Footer 3 Kolom versi Jagoan ini bisa kalian bisa buat sendiri dengan tutorial bagaimana cara membuatnya, selain itu footer tersebut saya dapatkan di salah satu blog legendaris yang memberikan banyak manfaat untuk saya yang Newbie yaitu kurazone. Blog Jagoandzgn akan memberikan artikel bagaimana cara membuat widget footer tersebut.

Cara Membuat Tampilan Footer 3 Kolom Seperti Jagoandzgn #1

1. Silahkan kamu login ke Blogger.com dengan menggunakan Gmail kamu.
2. Masuk ke menu TEMA > Klik Edit HTML
3. Silahkan kamu cari kode dibawah ini, dan Hapus kode tersebut agar tidak terjadi bentrok dengan footer tersebut.

  <div id='footer-navmenu'>
  <nav id='footer-navmenu-container'>
  
<!-- menu navigasi footer start -->
<ul>
  <li><a href='#'>About</a></li>
  <li><a href='#'>Contact</a></li>
  <li><a href='#'>Privacy Policy</a></li>
  <li><a href='#'>Disclaimer</a></li>
</ul>
<!-- menu navigasi footer end -->

  </nav>
  </div>

4. Selanjutnya, silahkan kamu copy kode dibawah ini dan paste di tempat kode yang kamu hapus tadi.

<style>
#footer{background:#000;color:#fff;padding:0;margin:10px 0 0}
#footer h2:after{content: &#39;&#39;;display: inline-block;position: absolute;height: 20px;top: 0;margin: 1px 0 12px 10px;width: 100%;background: url(https://4.bp.blogspot.com/-R2WTW6O9E1o/VX7dqIGT1eI/AAAAAAAACc4/pyvQDMMLX3E/s1600/repeat-bg.png)repeat;}
.footer-sections {overflow: hidden;margin: 0 auto;padding: 50px 120px;}
.sect-left{display:inline-block;float:left;width:31.655%;margin-right:25px}.sect-left:nth-child(3){margin-right:0}
.sect-left h2{position: relative;background:none;overflow: hidden;padding: 0 0 10px 0;color: #fff;font: 700 14px "Roboto Slab",sans-serif;display: inline-block;-webkit-flex: 0 auto;-ms-flex: 0 auto;flex: 0 auto;margin: 0;text-transform: uppercase;font-size: 1rem;
font-weight: 700;white-space: nowrap;width: 100%;}
.sect-left h2 a{color:#E4E4E4}
a.murub{font-size: 14px;text-decoration:none;-webkit-transition:all .1s ease-out;-moz-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out}
a.murub:hover{color:#fff;text-shadow:0 1px 0 #0972cd,0px 0 3px #0972cd,0px 0 5px #0972cd,0px 0 30px #0972cd,0px 3px 50px #0972cd}
.aa{background: linear-gradient(to right,#111,#111,#111,#111,#007bfd,#111,#111,#111,#111);background-size: 400% 400%;-webkit-animation: Gradient 2s ease infinite;-moz-animation: Gradient 2s ease infinite;animation: Gradient 2s cubic-bezier(0.47, 0, 0.75, 0.72) infinite;}
.footer-contact p a{color:white !important;}
.footer-contact p {clear: both;color: #fff;overflow: hidden;font-size: 14px;font-weight: normal;line-height: 22px;}
.footer-contact p {margin-bottom: 13px;margin-top: -5px;padding-bottom: 13px;border-bottom: 1px solid #222;}
.footer-contact label {color: #fff;float: left;font-size: 14px;font-weight: normal;margin-right: 20px;max-width: 80px;display: inline-block;}
.footer-contact:last-child p.web {border: medium none;margin: 0;padding: 0;}
.sasabilo{padding: 1px 4px;float:right;color: #fff;width: 50px;text-align: center;}
@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
@media only screen and (max-width:1099px){.sect-left{width:31.55%}.footer-sections{padding:30px}}
@media only screen and (max-width:979px){.sect-left{width:100%;margin-right:0;margin-bottom:20px}.sect-left:last-child{margin-bottom:0}.footer-sections{padding:30px}}
</style>
<div id='footer' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
    <div class='footer-sections row'>
      <b:section class='sect-left' id='footer-sec1' maxwidgets='3' name='Widget 1' showaddelement='yes'>
        <b:widget id='HTML991' locked='false' title='KONTAK' type='HTML' version='1'>
          <b:widget-settings>
            <b:widget-setting name='content'>Jagoandzgn #1
</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2><i class='fa fa-coffee'/> <data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
        </b:widget>
       </b:section>
      <b:section class='sect-left' id='footer-sec2' maxwidgets='3' name='Widget 2' showaddelement='yes'>
        <b:widget id='HTML992' locked='false' title='TOOLS' type='HTML' version='1'>
          <b:widget-settings>
            <b:widget-setting name='content'>Jagoandzgn #2
</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2><i class='fa fa-cogs'/> <data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
        </b:widget>
      </b:section>
      <b:section class='sect-left' id='footer-sec3' maxwidgets='3' name='Widget 3' showaddelement='yes'>
        <b:widget id='HTML993' locked='false' title='Navigasi' type='HTML' version='1'>
          <b:widget-settings>
            <b:widget-setting name='content'>Jagoandzgn #3</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2><i class='fa fa-cogs'/> <data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div> 
</b:includable>
        </b:widget>
      </b:section>
  </div></div>

5. Kalau sudah silahkan klik SIMPAN dan Selesai. untuk melihat hasilnya kamu bisa melihat gambar dibawah ini.

Tampilan Desktop

Tampilan Mobile

Maaf! Untuk artikel pada bagian pertama ini hanya pemasangan CSS dan HTMLnya saja. Alhasil tampilan footernya masih belum sempurna seperti Jagoandzgn.

Selanjutnya silahkan kamu check pada bagian menu TATA LETAK, kalian akan menemukan 3 kolom bagian footer seperti gambar dibawah ini.

Jika kamu ingin merapikan tampilan footer tersebut di menu TATA LETAK, Silahkan kamu gunakan kode dibawah ini, biasanya kode ini diletakkan pada segerombolan komunitan body#layout atau kamu bisa membuat baris baru dibawah kode body#layout seperti gambar dibawah ini.

body#layout div#footer-sec1 {width: 27.3% !important;float: left !important;}
body#layout div#footer-sec2 {width: 27.3% !important;float: left !important;}
body#layout div#footer-sec3 {width: 27.3% !important;float: left !important;}

Maka Hasilnya ketika kamu menambahkan kode tersebut seperti gambar dibawah ini.

Bagaimana mudah bukan untuk tutorial Cara Membuat Tampilan Footer 3 Kolom Seperti Jagoandzgn #1, nah untuk lanjutannya kamu bisa mengklik bacaan berikut Cara Membuat Tampilan Footer 3 Kolom Seperti Jagoandzgn #2 apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.