Cara Membuat Footer 3 Kolom di Linkmagz
Beranda / Blogging

Cara Membuat Footer 3 Kolom di Linkmagz

6 komentar
Cara Membuat Footer 3 Kolom di Linkmagz - Untuk seorang blogger pasti tidak asing lagi dengan yang namanya footer, kalian bisa menambahkan beberapa widget terutama yang paling sering ditemukan adalah widget subscription box seperti pada blog arlinadzgn.

Widget sendiri jika anda memasang dengan jumlah yang tidak sedikit akan menimbulkan masalah misal seperti load page menjadi lama. Lalu apakah baik jika membuat footer menjadi tiga kolom dan di pasang widget semua pada kolom tersebut? tentu tidak, tapi akan jadi lebih baik jika anda menambahkan navigasi ke dalam tiga footer tersebut, seperti di blog ini.

Pengetahuan


Footer merupakan hal terpenting pada sebuah blog yang memiliki letak paling bawah, dan mempunyai fungsi untuk menampilkan informasi hak cipta, iklan, kontak, dan link tambahan lainnya seperti yang biasa kita temui pada sebuah blog.

Bagi anda yang suka design tampilan blog pasti tidak asing lagi dengan ciri-ciri footer, fungsinya, letaknya, dan macam-macamnya.

Desktop Mode

Tutorial Pemasangan

  1. Pertama, login ke Blogger.com
  2. Pada menu dashboard pilih Tema > Edit HTML
  3. Salin CSS dibawah ini, dan letakkan diatas kode ]]></b:skin>
    /* 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;}}
}
  4. Cari kode dibawah 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>
  5. Ganti kode diatas dengan kode HTML 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'>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>
  6. Simpan Template.
Ganti tulisan URL_BLOG dengan link blog anda.

Penutup

Mudah kan cara membuatnya? jika anda mengalami kesulitan bisa ditanyakan dikolom komentar dibawah artikel ini. Sebisa mungkin akan kami balas jika tidak ada kesibukan.

Sekian dulu artikel dari Cara Membuat Footer 3 Kolom di Linkmagz, jika dirasa bermanfaat silahkan share artikel ini ke sosial media kalian.
Terima kasih

Fernand
Fernand Kecanduan berbagi ilmu!

6 komentar

  1. Faishal Hady07 April, 2020

    Izin minta postnya ya mas 😁👍

    BalasHapus
  2. Rendyilyasa20 Juni, 2020

    bang kenapa pas saya udah pasang kok tulisan artikel jadi mepet ya itu kenapa?

    BalasHapus
    Balasan
    1. Fernand06 Juli, 2020

      mungkin karena sudah beda versi template gan

      Hapus

Posting Komentar