Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget Atas Posting

Beranda / Blogger / Widget

Membuat Footer 3 Kolom Di Viomagz

Posting Komentar
Membuat Footer 3 Kolom Di Viomagz -Pada kesempatan kali ini saya akan membuat tutorial seperti judul artikel ini, yap di dunia blogger merombak atau Meredesign Template tidak akan pernah habis nya apalagi yang sedang belajar merobak tampilan blogger maka tidak akan pernah puas dan ingin belajar lagi dan lagi

Footer merupakan elemen penting di sebuah blog yang berada di bagian paling bawah dan mempunyai fungsi untuk menampilkan informasi blog dan masih banyak lagi, untuk Demo silahkan lihat di bawah ini



Membuat Footer 3 Kolom Di Viomagz 

1. Pertama, Login ke Blogger
2. Pada menu dashboard pilih Tema > Edit Html
3. Salin kode CSS di bawah ini dan taruh di atas kode  ]]></b:skin>
/* Footer 3 Kolom*/
#arsadpediaFooter .attribution .left { display: inline-block; }
#arsadpediaFooter .attribution .right { float: right; }
#arsadpediaFooter li svg { width: 20px; height: 20px; margin-right: 7px; fill: #fff; }
.widget .title svg {float:right; width: 40px; height: 40px; margin-right: 3px; }
#arsadpediaFooter a{
color:#fff;
}
#arsadpediaFooter a:hover{
color:#fff;
}
#arsadpediaFooter .widget .title svg path{
fill:#fff;
}
#arsadpediaFooter { background-color: #424a56; color: #fff; margin-top: 20px; background: #424a56 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNQc7w8pDJgaXaXNlCu3lUevLeHjy93JqjPK-VFI0R3WesqEghaCxHx1tW7RHQkuLi2IcZjjMcuNgR2b38wZRaxYOfH3C0BpYWjPlfzEOO2iwB1uG4GRuH0Hiyj3AUS1633Bi-aNDwzgk/s320/footer-arik.png); }
#arsadpediaFooter .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; }
#arsadpediaFooter .footer-inner .section { width: 100%; }.section, .widget { margin: 0; padding: 0; padding-left: 0; }
#arsadpediaFooter .footer-inner .section .widget { margin: 20px; }
#arsadpediaFooter .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; }
#arsadpediaFooter ul { line-height:2.4em;padding-left:0; margin: 0; }
#arsadpediaFooter li { list-style: none; } li { margin: 0; }
#arsadpediaFooter .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){#arsadpediaFooter .footer-inner { display: block; padding: 1px;}}
}

4. Silahkan cari kode seperti gambar di bawah ini kemudian ganti dengan kode di bawah ini 


<footer id='arsadpediaFooter'>
<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'>ArsadPedia - 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 Kamu

Penutup

Demikian lah tutorial kali ini trimakasih sudah mampir membaca silahkan berkomentar jika ada yang di rasa tidak tahu

Posting Komentar untuk "Membuat Footer 3 Kolom Di Viomagz "