Membuat footer 3 kolom di Viomagz

Membuat footer 3 kolom di Viomagz - Pada kesempatan kali ini saya akan memberikan tutorial sesuai dengan judul pada postingan kali ini, Memang benar adanya jika di dunia blogger merombak dan meredesign tampilan  template sering sekali dilakukan oleh pemilik situs agar tempilannya menjadi lebih menarik dan juga berbeda dari situs lainya.

Belajar merombak template serta memodifikasinya merupakan salah satu dasar yang harus di miliki seorang blogger terutama para pemula, karena banyak ilmu yang bisa di peroleh. 

Salah satu element penting yang terdapat pada template adalah footer. Footer terletak di bagian paling bawah pada blog, Footer memiliki banyak fungsi salah satunya menampilkan informasi blog serta banyak lagi. 

Untuk memaksimalkan kegunaan footer, Anda bisa ikuti tutorial berikut ;

 Membuat footer 3 kolom di Viomagz 

1. Anda login blogger
2. Buka bagian tema lalu klik edit HTML
3. Salin kode CSS di bawah ini dan letakan sebelum ]]></b:skin> 

 
.widget .title svg {float:right; width: 40px; height: 40px; margin-right: 3px; }
#blogsantaiFooter a{
color:#fff;
}
#blogsantaiFooter a:hover{
color:#fff;
}
#blogsantaiFooter .widget .title svg path{
fill:#fff;
}
#blogsantaiFooter { background-color: #424a56; color: #fff; margin-top: 20px; background: #424a56 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXDHNr6KdqRsBxVe_FdWqVItmGFpqYmF7ZwjoZnaClypMeU7uwyTMeqoRba9Jf6hoq3QRb0p2LGmPsf8EDUXkYcWrh2A-osmLskRAmKZh56abC2YeqFiehcQm5o2fxy6qGUvI33MgErtvd/s320/footer-arik.png); }
#blogsantaiFooter .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; }
#blogsantaiFooter .footer-inner .section { width: 100%; }.section, .widget { margin: 0; padding: 0; padding-left: 0; }
#arsadpediaFooter .footer-inner .section .widget { margin: 20px; }
#blogsantaiFooter .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; }
#blogsantaiFooter ul { line-height:2.4em;padding-left:0; margin: 0; }
#arsadpediaFooter li { list-style: none; } li { margin: 0; }
#blogsantaiFooter .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){#blogsantaiFooter .footer-inner { display: block; padding: 1px;}}
}

4. Kemudian cari kode pembuka <!--footer nav menu --> Sampai kode  <!--footer wrapper end -->  Bila sudah ketemu, Anda ganti dengan kode di bawah ini.

<footer id='blogsantaiFooter'>

<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'>blogsantaiFooter - Ubah Melalui Tata Letak .</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>

Silahkan ganti tulisan URL_BLOG dengan link punya anda 

Terakhir Save, Pastikan semua kode yang anda tempatkan sudah benar, Sekian tutorial Membuat footer 3 kolom di Viomagz