-->
Cara Membuat Footer 3 Kolom di LinkMagz

Cara Membuat Footer 3 Kolom di LinkMagz

Footer ini memiliki letak paling bawah dalam sebuah blog dan mempunyai fungsi untuk menampilkan informasi berupa hak cipta, iklan, kontak, dan link tambahan lainnya.

Tampilan footer yang menarik dan mudah diakses oleh pengunjung merupakan salah satu poin penting dalam mendapatkan banyak pengunjung. Banyak sekali para blogger tidak memperhatikan hal ini padahal mereka bisa saja mengubahnya dan membuatnya lebih menarik lagi agar para pengunjung bisa melihat apa saja isi dari blog yang dikunjunginya.

Seperti yang kita tahu Footer pada Template LinkMagz ini terlalu kecil sekali dan sempit banget untuk meletakkan banyak link disitu

Jadi untuk membuatnya lebih menarik, hari ini saya akan mengajarkan Cara Membuat Footer Lebih Menarik dan Lengkap dengan 3 Kolom Pada Template LinkMagz.

Kita langsung saja ke tutorialnya.

Membuat Footer 3 Kolom di LinkMagz

1. Pertama-tama pergi ke Dasbor Blogger > Tema > Edit HTML.

2. Cari kode ]]></b:skin> dan letakkan kode ini tepat diatasnya.

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

3. Setelah itu kalian cari kode 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>

4. Setelah itu ganti kode tersebut dengan kode dibawah 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'>FaishalKC - Blog yang membahas seputar 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='/'><data:blog.title/></a>
</div>
</div>
</footer>

5. Simpan Template dan aturlah sesuai kebutuhan kalian. Seperti inilah tampilannya.

Penutup

Tampaknya begini dulu untuk tutorial hari ini. Semoga bermanfaat buat kalian semuanya dan jika ada yang ingin ditanyakan silakan berkomentar di bawah.

Seorang Blogger Pemula yang sedang belajar
  • Facebook
  • WhatsApp
  • Instagram
  • DONASI VIA OVO Bantu berikan donasi untuk blog ini agar bisa tetap semangat memberikan artikel terbaru
    Tampilkan Komentar
    Sembunyikan Komentar

    10 Komentar

    1. Balasan
      1. Sudah ada kok gambarnya
        Saya screenshot sendiri itu 😅

        Hapus
    2. Ini hanya bisa untuk Template LinkMagz ya kak?

      BalasHapus
      Balasan
      1. Bisa juga untuk template lain
        Tapi tutorial ini saya khususkan untuk LinkMagz agar lebih mudah dipahami

        Hapus
    3. Coba saya pasang di linkmagz tapi eror, thumbnail gambar di hompe page jadi full dan tulisan jadi mojok ke kanan...kira2 kenapa ya bang? Mksih

      BalasHapus
      Balasan
      1. Mungkin ada kesalahan disaat kamu memasangnya

        Hapus
      2. Sudah saya coba berkali kali bang...di linkmagz yang 2.3

        Hapus
      3. Bisa minta tolong bantu cek bang fi masdjo.com

        Hapus
      4. Kayaknya gak bisa lagi untuk LinkMagz versi terbaru

        Ane coba cek dulu kodenya
        Kalau memang ada yg error nanti ane coba update kodenya

        Hapus
      5. Ok bang kamsia....kasih update kalau sdh bisa

        Hapus
    Catatan
    • Mohon Tinggalkan komentar sesuai dengan judul artikel.
    • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
    • Dilarang mencantumkan link aktif di komentar.
    • Komentar dengan link aktif akan otomatis dihapus
    • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel