Cara Membuat Tampilan Footer Seperti Kurazone - Bagian #1

KURAZONE ~ Halo sahabat Kurazer. Menanggapi banyak sekali yang menanyakan bagaimana cara membuat tampilan footer seperti yang digunakan oleh blog Kurazone maka pada kesempatan kali ini saya bagikan "Cara Membuat Tampilan Footer Seperti Kurazone - Bagian #1". Pada artikel bagian pertama ini adalah pemasangan struktur CSS dan HTML pada template. Mengenai tampilannya nanti akan sedikit berbeda tergantung template yang kalian gunakan.

Oke, langsung to the point saja...
1. Buka akun Blogger
2. Pilih Menu Tema
3. Pilih Edit HTML
4. Copy 1 Paket kode CSS dan HTML dibawah ini :
<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'>Kurazone #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'>Kurazone #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'>Kurazone #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. Paste kode tersebut berada dibawah kode <footer atau <footer> pada template blog kalian. Perlu diketahui bahwa tidak semua template menggunakan tag <footer>, jadi apabila didalam template kalian tidak terdapat <footer> maka coba cari <div id='footer'>

6. Simpan template. Hasil jadinya akan tampak seperti dibawah ini :

Via Desktop

Via Mobile

Ingat ! Artikel bagian pertama ini hanya pemasangan CSS dan HTML nya saja. Alhasil tampilan footernya masih belum sempurna seperti Kurazone.
Selanjutnya coba check bagian menu Tata Letaknya, kalian akan menjumpai 3 kolom bagian footer seperti dibawah ini :



Jika kalian ingin merapikan tampilan footer di tata letaknya, gunakan kode dibawah ini lalu letakkan didalam template blog kalian
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;}
Kode diatas biasanya diletakkan pada segerombolan komunitas body#layout atau bikin aja baris baru dibawah kode body#layout (lihat gambar dibawah ini)


Maka hasilnya akan seperti dibawah ini :


NOTE :
Supaya tidak bentrok dengan footer bawaan pada template blog yang sedang kalian gunakan, maka alangkah baiknya jika kalian menghapus footer bawaan template blog terlebih dahulu. Baik CSS maupun HTML nya.

Itulah informasi mengenai "Cara Membuat Tampilan Footer Seperti Kurazone - Bagian #1", sisanya lanjut ke artikel bagian #2.






Lebih baru Lebih lama