Cara Membuat Footer 3 Kolom di Template Linkmagz

Cara Membuat Footer 3 Kolom di Template Linkmagz

Mendesain sebuah blog agar terlihat lebih menarik adalah salah satu peranan penting setelah konten, dan optimasi template. Jika kalian memiliki desain blog yang menarik, dan juga navigasi yang lengkap, tentu hal inilah yang akan membuat blog menjadi ramai pengunjung dan disukai oleh Google.

Pada umumnya seorang blogger mendesain karena supaya blog mereka terlihat rapi, menarik, dan tidak membosankan saat dikunjungi. Jika anda seorang blogger, atau mungkin seorang designer web pasti tidak akan asing lagi dengan yang namanya footer.

Apabila anda belum mengetahui apa itu footer, dan juga fungsinya, maka anda tepat untuk membaca artikel ini. Karena pada artikel ini akan admin bahas semua tentang apa itu footer, dan fungsinya.

Pengertian dan Fungsi Footer

Secara bahasa, Footer berasal dari kata Foot yaitu Kaki, tetapi pada lembaran kerja. Tetapi jika pada sebuah web? Footer adalah suatu pembatas antara halaman konten dan frame web yang terletak pada bagian paling bawah di sebuah website.

Jika anda masih belum paham dengan letak footer, silahkan lihat contoh struktur website dibawah ini.



Sedangkan untuk fungsinya sendiri, footer ini bisa anda gunakan untuk
  • Memberikan teks tambahan seperti rincian alamat, kontak, deskripsi web, dan lain-lain.
  • Menampung widget seperti subscription, atau widget profil dari penulis.
  • Sebagai navigasi website berupa teks yang di sertai dengan link.
  • Menampilkan hak cipta
Selain yang sudah disebutkan diatas, tentu fungsi dari footer ini masih banyak, dan tidak bisa admin sebutkan secara keseluruhan.

Pada umumnya template default blogger memiliki footer 1 sampai 2 kolom saja seperti template lain yang banyak tersebar di google. Namun jika kalian ingin yang beda terutama pada template Linkmagz, anda bisa ikuti tutorial berikut ini.

Tutorial Membuat Footer 3 Kolom

Sebelum melanjutkan ke tutorialnya, pastikan anda menggunakan template Linkmagz, dan juga sudah membackup terlebih dahulu.
  1. Pertama, silahkan login ke Blogger.com
  2. Pada menu dashboard, pilih Template > lalu pilih Edit HTML
  3. Cari kode ]]></b:skin> pada template.
    Untuk memudahkan pencarian, gunakan tombol pintasan CTRL+F di keyboard.
  4. Salin kode CSS berikut ini, dan letakkan tepat diatas kode (langkah no.3)
    /* Betalinkmagz footer */
    #betalinkmagzFooter .attribution .left { display: inline-block; }#betalinkmagzFooter .attribution .right { float: right; }#betalinkmagzFooter li svg { width: 20px; height: 20px; margin-right: 7px; fill: #fff; }.widget .title svg {float:right; width: 40px; height: 40px; margin-right: 3px; }#betalinkmagzFooter a{
    color:#fff;
    }
    #betalinkmagzFooter a:hover{
    color:#fff;
    }
    #betalinkmagzFooter .widget .title svg path{
    fill:#fff;
    }
    #betalinkmagzFooter { background-color: #424a56; color: #fff; margin-top: 20px; background: #424a56 url(https://3.bp.blogspot.com/-jlcKIZCfrDQ/WtzDK-6gopI/AAAAAAAABbM/G_i_u9ObEzUORoYivnCX0RJ-j3_AY3aNwCLcBGAs/s320/footer-arik.png); }#betalinkmagzFooter .footer-inner { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: flex-start; justify-content: space-between; max-width: calc(1130px + 60px); margin: auto; }#betalinkmagzFooter .footer-inner .section { width: 100%; }.section, .widget { margin: 0; padding: 0; padding-left: 0; }#betalinkmagzFooter .footer-inner .section .widget { margin: 20px; }#betalinkmagzFooter .title { background-color: transparent; text-align:left; background-size: 20px; color: #fff; margin-bottom: 15px; border-bottom: 1px dashed rgba(255,255,255,.35); padding-bottom: 10px; font-size: 15px; }#betalinkmagzFooter ul { line-height:2.4em;padding-left:0; margin: 0; }#betalinkmagzFooter li { list-style: none; } li { margin: 0; }#betalinkmagzFooter .attribution { font-size: .85rem; display: block; padding: 15px 20px; margin: auto; border-top: 1px solid rgba(0,0,0,.25); }
    @media only screen and (max-width:640px){#betalinkmagzFooter .footer-inner { display: block; padding: 1px;}}
    }
  5. Kemudian cari kode yang mirip seperti ini,
    <footer id="footer-outer">
            <div id='footer-content'>
              <b:section class='page-navmenu' id='page-navmenu' maxwidgets='1' name='Menu Halaman Statis' showaddelement='no'>
                  <b:widget id='PageList1' locked='true' title='Menu Halaman Statis' type='PageList' visible='true'>
                  </b:widget>
              </b:section>
              <b:section class='footer-text' id='footer-text' maxwidgets='1' name='Teks Footer (edit sesuai kebutuhan)' showaddelement='no'>
                  <b:widget id='HTML80' locked='true' title='Footer' type='HTML' visible='true'>
                    <b:widget-settings>
                      <b:widget-setting name='content'>
                          © 2020 - &lt;a href="https://blogger.com/"&gt;Powered by Blogger&lt;/a&gt;
                      </b:widget-setting>
                    </b:widget-settings>
                    <b:includable id='main'>
                      <div class='footer-text'>
                        <data:content/>
                      </div>
                    </b:includable>
                  </b:widget>
                </b:section>
                <b:section class='navbarrr' id='navbarrr' maxwidgets='1' name='Navbar (edit dan pilih OFF untuk mempercepat loading)' showaddelement='no'>
                  <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar' visible='false'>
                  </b:widget>
                </b:section>
            </div>
          </footer>
  6. Ganti semua kode tersebut dengan kode HTML berikut ini.
    <footer id='betalinkmagzFooter'>
    <div class='footer-inner'>
    <b:section class='footerLeft' id='footerLeft'>
      <b:widget id='HTML7' locked='false' title='Tentang Kami' type='HTML' version='1'>
        <b:widget-settings>
          <b:widget-setting name='content'>Sempetin.my.id - Blog yang membahas seputar android, games, tutorial blogging dan tentunya saling berbagi pengalaman dari masing-masing penulis.</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 class='title'><svg style='width:20px;height:20px;vertical-align:-4px' viewBox='0 0 24 24'><path d='M19 17V19H7V17S7 13 13 13 19 17 19 17M16 8A3 3 0 1 0 13 11A3 3 0 0 0 16 8M19.2 13.06A5.6 5.6 0 0 1 21 17V19H24V17S24 13.55 19.2 13.06M18 5A2.91 2.91 0 0 0 17.11 5.14A5 5 0 0 1 17.11 10.86A2.91 2.91 0 0 0 18 11A3 3 0 0 0 18 5M7.34 8.92L8.5 10.33L3.75 15.08L1 12.08L2.16 10.92L3.75 12.5L7.34 8.92' fill='currentColor'/></svg> <data:title/></h2>
      </b:if>
      <div class='widget-content'>
        <data:content/>
      </div>
    
    </b:includable>
      </b:widget>
    </b:section>
    <b:section class='footerMiddle' id='footerMiddle'>
      <b:widget id='HTML8' locked='false' title='Navigasi' type='HTML' version='1'>
        <b:widget-settings>
          <b:widget-setting name='content'>&lt;ul&gt;
    &lt;li&gt;&lt;svg style=&#39;width:17px;height:17px;vertical-align:-2px&#39; viewbox=&#39;0 0 24 24&#39;&gt;
    &lt;path d=&#39;M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z&#39;&gt;&lt;/path&gt;
    &lt;/svg&gt;&lt;a href=&#39;/p/about-us.html&#39;&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;svg style=&#39;width:17px;height:17px;vertical-align:-2px&#39; viewbox=&#39;0 0 24 24&#39;&gt;
    &lt;path d=&#39;M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z&#39;&gt;&lt;/path&gt;
    &lt;/svg&gt;&lt;a href=&#39;/p/contact-us.html&#39;&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;svg style=&#39;width:17px;height:17px;vertical-align:-2px&#39; viewbox=&#39;0 0 24 24&#39;&gt;
    &lt;path d=&#39;M12,1A5,5 0 0,0 7,6V8H6A2,2 0 0,0 4,10V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V10A2,2 0 0,0 18,8H17V6A5,5 0 0,0 12,1M12,2.9C13.71,2.9 15.1,4.29 15.1,6V8H8.9V6C8.9,4.29 10.29,2.9 12,2.9M11,11H13V15H11V11M11,17H13V19H11V17Z&#39;&gt;&lt;/path&gt;
    &lt;/svg&gt;&lt;a href=&#39;/p/privacy-poli.html&#39;&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;svg style=&#39;width:17px;height:17px;vertical-align:-2px&#39; viewbox=&#39;0 0 24 24&#39;&gt;
    &lt;path d=&#39;M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M13,17H11V15H13V17M13,13H11V7H13V13Z&#39;&gt;&lt;/path&gt;
    &lt;/svg&gt;&lt;a href=&#39;/p/disclaimer.html&#39;&gt;Disclaimer&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;svg style=&#39;width:17px;height:17px;vertical-align:-2px&#39; viewbox=&#39;0 0 24 24&#39;&gt;
    &lt;path d=&#39;M9,2V8H11V11H5C3.89,11 3,11.89 3,13V16H1V22H7V16H5V13H11V16H9V22H15V16H13V13H19V16H17V22H23V16H21V13C21,11.89 20.11,11 19,11H13V8H15V2H9Z&#39;&gt;&lt;/path&gt;
    &lt;/svg&gt;&lt;a href=&#39;/p/sitemap.html&#39;&gt;Sitemap&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;</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 class='title'><svg style='width:20px;height:20px;vertical-align:-4px' viewBox='0 0 24 24'><path d='M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z'/></svg> <data:title/></h2>
      </b:if>
      <div class='widget-content'>
        <data:content/>
      </div>
    
    </b:includable>
      </b:widget>
    </b:section>
    <b:section class='footerRight' id='footerRight'>
      <b:widget id='HTML5' locked='false' title='Tools Blogging' type='HTML' version='1'>
        <b:widget-settings>
          <b:widget-setting name='content'>&lt;ul&gt;
    &lt;li&gt;&lt;svg style=&#39;width:17px;height:17px;vertical-align:-2px&#39; viewbox=&#39;0 0 24 24&#39;&gt;
    &lt;path fill=&quot;currentColor&quot; d=&quot;M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z&quot; /&gt;&lt;/path&gt;&lt;/svg&gt;&lt;a href=&#39;#&#39;&gt;Parse HTML&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;svg style=&#39;width:17px;height:17px;vertical-align:-2px&#39; viewbox=&#39;0 0 24 24&#39;&gt;
    &lt;path fill=&quot;currentColor&quot; d=&quot;M20.71,4.63L19.37,3.29C19,2.9 18.35,2.9 17.96,3.29L9,12.25L11.75,15L20.71,6.04C21.1,5.65 21.1,5 20.71,4.63M7,14A3,3 0 0,0 4,17C4,18.31 2.84,19 2,19C2.92,20.22 4.5,21 6,21A4,4 0 0,0 10,17A3,3 0 0,0 7,14Z&quot; /&gt;&lt;/path&gt;&lt;/svg&gt;&lt;a href=&#39;#&#39;&gt;Color Picker&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;svg style=&#39;width:17px;height:17px;vertical-align:-2px&#39; viewbox=&#39;0 0 24 24&#39;&gt;
     &lt;path fill=&quot;currentColor&quot; d=&quot;M13,19V16H21V19H13M8.5,13L2.47,7H6.71L11.67,11.95C12.25,12.54 12.25,13.5 11.67,14.07L6.74,19H2.5L8.5,13Z&quot; /&gt;
    &lt;/path&gt;&lt;/svg&gt;&lt;a href=&#39;#&#39;&gt;CSS Minifier&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;svg style=&#39;width:17px;height:17px;vertical-align:-2px&#39; viewbox=&#39;0 0 24 24&#39;&gt;
    &lt;path fill=&quot;currentColor&quot; d=&quot;M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z&quot; /&gt;
    &lt;/path&gt;&lt;/svg&gt;&lt;a href=&#39;#&#39;&gt;Words Counter&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;</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 class='title'><svg style='width:20px;height:20px;vertical-align:-4px' viewBox='0 0 24 24'><path d='M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z' fill='currentColor'/></svg> <data:title/></h2>
      </b:if>
      <div class='widget-content'>
        <data:content/>
      </div>
    
    </b:includable>
      </b:widget>
    </b:section>
    </div>
    <div class='attribution'>
    <div class='left'>
              Copyright &#169; 2020
            </div>
    <div class='right'>
    <svg style='width:17px;height:17px;vertical-align:-4px' viewBox='0 0 24 24'><path d='M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z' fill='red'/></svg> <a href='URL_BLOG'><data:blog.title/></a>
    </div>
    </div>
    </footer>
    Keterangan:
    Ganti tulisan yang di marking dengan URL blog anda, selebihnya sesuaikan.
  7. Save Template.
Jika anda berhasil menerapkannya, kurang lebih tampilan footer anda akan menjadi seperti gambar dibawah ini.


Penutup

Jika ada yang ingin ditanyakan silahkan bisa kalian ajukan melalui kolom komentar, jangan ragu selagi kami mempersilahkan. Dengan senang hati akan saya bantu jika tidak ada kesibukan diluar aktifitas blogging.

Mungkin sekian dulu artikel yang bisa saya berikan, semoga bisa membantu dan semoga bermanfaat.
Terima kasih

Baca juga

Posting Komentar