Cara Merubah Layout Footer Menjadi 3 Kolom di Template Linkmagz

Posting Komentar
Fernn.id - Pada kesempatan kali ini admin ingin berbagi sedikit seputar redesign yang masih berkaitan dengan blogging dan lebih tepatnya yaitu Cara Redesign Footer 3 Kolom di Template Linkmagz yang banyak dicari para blogger terutama pengguna template tersebut.

Tutorial kali ini, kami ambil dari blog sempetin.my.id dan sekaligus blog pertama kami yang tentunya mempunyai kemiripan pada tampilan, CSS, dan juga HTML nya.

Sedikit membahas atau review tentang Linkmagz, yaitu sebuah template blogger yang memiliki banyak sekali ke istimewaan terutama di segi struktur dan tak luput pada fiturnya, jadi jangan heran apabila banyak blogger yang berminat memiliki template ini.

Pembahasan dan Fungsinya

Footer merupakan suatu bagian dari kaki situs web atau sebuah ruang kosong yang berada dibagian bawah dari batang tubuh sebuah situs web. Posisi ini berbanding terbalik dengan Header yang terletak pada bagian atas di sebuah situs web.

Fungsinya sendiri bisa beragam tergantung keinginan si pemilik situs web, tetapi yang paling sering digunakan ialah sebagai berikut ini.
  • Menyematkan catatan kaki.
  • Menyematkan widget tambahan contohnya subscription box, dan lain-lain.
  • Biografi web dan penulis.
  • Menyematkan link, gambar, video, dan lain-lain.
Berikut ini adalah contoh tata letak footer pada sebuah situs web.

Contoh Tata Letak Footer

Pada umumnya sebuah template blogger bawaan atau hasil buatan desainer template sekalipun, hampir semua tidak ada yang menggunakan layout footer 3 kolom.

Sehingga hal inilah yang akhirnya memaksa kalian agar mengerti dengan struktur template, kode CSS, dan juga HTML supaya bisa merombak sendiri layout footer. Tapi tenang saja sob, karena di postingan kali ini admin akan membahasnya secara tuntas bagaimana cara membuat layout footer 3 kolom di Linkmagz buatan Mas Sugeng.

Tutorial !!

Pastikan sudah membackup template yang saat ini anda gunakan untuk berjaga-jaga jika terjadi kesalahan saat mengikuti tutorial kali ini.

1. Silahkan masuk ke dashboard blogger terlebih dahulu.

2. Lalu pilih menu Template > Edit HTML

3. Kemudian salin kode CSS berikut ini, dan letakkan tepat sebelum 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. Lanjutkan dengan mengikuti arahan seperti berikut.
// Hapus kode HTML Berikut 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>
<!-- Batas akhir -->


// Ganti semua kode HTML 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>
<!-- Batas akhir -->
Keterangan:
Ubah tulisan URL_BLOG sesuai alamat / link website kalian masing-masing.

5. Terakhir, klik tombol Save Template.

Penutup

Disini anda tlah berhasil membuat layout footer menjadi 3 kolom di template linkmagz, apabila ada kesulitan dan pertanyaan silahkan langsung bertanya melalui kolom komentar yang ada dibawah artikel ini.

Mungkin sekian dahulu artikel dari Cara Merubah Layout Footer Menjadi 3 Kolom di Template Linkmagz, semoga bermanfaat dan jangan lupa share artikel ini.
Terimakasih
Fernand
Fernand
Hanya seorang blogger yang hobinya coding

Related Posts

Posting Komentar

Dapatkan artikel terbaru!