Tips Blogspot

Cara ampuh nambah 3 kolom footer Viomagz

Tuesday, May 18, 2021, Tuesday, May 18, 2021 WAT
Last Updated 2021-06-24T17:12:24Z

 

Footer Viomagz
Contoh hasil footer 3 kolom Viomagz

Pengguna template viomagz tentu sudah pada tau bagaimana kehebatan dari template viomagz ini. dengan menggunakan template viomagz ini, website terlihat elegan, cantik, profesional dan Seo Frendly banget tentunya.

nah, bagi kamu yang ingin mencoba merubah template viomagz atau memofifikasi tampilan template Viomagz terutama ingin menambah bagian foternya, maka silahkan ikutin cara yang akan admin berikan.

Untuk menambah 3 kolom footer pada template viomagz anda hanya perlu menambahkan kode . kode ini berguna untuk menambah footer template viomagz menjadi 3 kolom footer viomagz.

Pertama untuk menambah 3 kolom footer di template viomagz silahkan buka "edit HTML"

kemudian cari Kode   </head>


setelah itu pastekan kode berikut tepat diatas kode  </head> tadi.


<style>
/* -- css footer 3 kolom --*/
#footer-wrapper {background: #fafafc;text-align: center;padding: 5px;width: 100%;color: #666;border-top: 0px solid #ddd;clear: both;font-size: 90%;margin: 0 auto;margin-top: 15px;}
.medsos a{display:inline-block;text-align:center;margin-top:10px;margin-right:5px;color:#fff;border-radius:100%;opacity:.9;border:2px solid #ddd;overflow:hidden}
.medsos a i{font-family:Fontawesome;width:32px;height:32px;line-height:32px;display:block}
.medsos a:hover{color:#fff;opacity:1;transform:rotate(360deg);}
.medsos .facebook{background:#3b5998}
.medsos .twitter{background:#00aced}
.medsos .googleplus{background:#dd4b39}
.medsos .linkedin{background:#135d95}
.medsos .youtube{background:#c00}
.medsos .instagram{background:#333}
.footer-column{position:relative;margin:0 auto;clear:both;font-size:14px;line-height:24px;overflow:hidden;text-align:left;padding: 10px 15px 0 15px;}
.footer-column h3{position:relative;overflow:hidden;margin:0 0 10px 0;font-size:1rem;padding:0 0 10px 0;color:#444;font-family: Oswald;font-weight: 500;}


.footer-menu{float:left;width:30%;margin:0 20px 20px 0}
.footer-menu p.footer2{margin:5px auto}
.footer-menu ul{margin:0 0 0 15px}
.footer-menu ul li{list-style-type:square;margin:0}
.footer-menu ul li a{color:#333}
.footer-menu ul li a:hover{color:#138be6}
#subscribe-footer{overflow:hidden;margin:0 0 20px 0;width:33.4%}
#subscribe-footer p{margin:1em 0}
#subscribe-footer .emailfooter{margin:auto;text-align:center;}
#subscribe-footer .emailfooter form{margin:0;padding:0;float:left}
#subscribe-footer .emailfooter input{background:rgba(255,255,255,1);padding:9px 12px;color:#999;font-size:14px;margin-bottom:10px;border:1px solid rgba(0,0,0,0.14);transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
#subscribe-footer .emailfooter input:hover{border-color:rgba(0,0,0,.34);}
#subscribe-footer .emailfooter input:focus{color:#ddd;outline:none;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6);}
#subscribe-footer .emailfooter .submitfooter{background:#e74c3c;color:#fff;margin:0 0 0 5px;font-size:14px;cursor:pointer;border:1px solid rgba(0,0,0,0.05);border-radius:3px;transition:all .3s}


#subscribe-footer .emailfooter .submitfooter:active,#subscribe-footer .emailfooter .submitfooter:hover{background:#c0392b;color:#fff;}
@media screen and (max-width:800px) {
#footer-wrapper{width:100%}
.footer-menu {width:29%;margin:0 15px 10px 0}
}
@media only screen and (max-width:768px) {
.footer-menu,#subscribe-footer{float:none;width:auto;}
}
@media screen and (max-width:640px) {
#footer-wrapper{margin:auto;border-top:1px solid rgba(0,0,0,0.1)}
}
@media screen and (max-width:480px) {
#subscribe-footer .emailfooter input{width:100%}
#subscribe-footer .emailfooter .submitfooter{margin:0}
#subscribe-footer .emailfooter form{margin:auto;float:none}
#footer-wrapper {width:100%;}
.footer-menu {margin:0;padding:0}
.footer-menu, #subscribe-footer {margin:10px 0;}
}
 /* -- End css footer 3 kolom --*/
</style> 


Selanjutnya untuk menambah 3 kolom footer pada template viomagz , silahkan cari kode 

<!-- footer nav menu -->

kemudian pastekan kode ini tepat diatasnya


<!-- footer 3 kolom --> 
<footer id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
<div class='footer-column'>
<div class='footer-menu'>
<h3>About This Blog</h3>
<div class='footer2'>
Silahkan di ganti dengan Deskripsi blog anda disini
<div class='clear'/>
<div class='medsos'>
<a class='facebook' href='https://www.facebook.com/xxxx' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='twitter' href='https://twitter.com/xxxxx' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='googleplus' href='http://plus.google.com/xxxxx/' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
  <a class='linkedin' href='http://www.linkedin.com/in/xxxxx' rel='nofollow' target='_blank'><i class='fa fa-linkedin'/></a>
  <a class='youtube' href='https://www.youtube.com/user/xxxxx' rel='nofollow' target='_blank'><i class='fa fa-youtube'/></a>
  <a class='instagram' href='https://www.instagram.com/xxxxx' rel='nofollow' target='_blank'><i class='fa fa-instagram'/></a>
</div>
</div>
</div>
<div class='footer-menu'>
    <h3>Web Links</h3>
    <ul class='footer2 line'>
      <li><a href='#' target='_blank' title='Link 1'>Link 1</a></li>
      <li><a href='#' target='_blank' title='Link 1'>Link 2</a></li>
      <li><a href='#' target='_blank' title='Link 1'>Link 3</a></li>
      <li><a href='#' target='_blank' title='Link 1'>Link 4</a></li>
      <li><a href='#' target='_blank' title='Link 1'>Link 5</a></li>
</ul>
</div>
<div class='footer-menu' id='subscribe-footer'>
    <h3>Follow by Email</h3>
    <p>Subsribe to get post update from this blog in your email inbox. Free and safe!</p>
    <div class='emailfooter'>
    <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=xxxxxx&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
        <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email address&quot;;}' onfocus='if (this.value == &quot;Email address&quot;) {this.value = &quot;&quot;;}' type='text' value='Email address'/>
        <input name='uri' type='hidden' value='xxxxxx'/>
        <input name='loc' type='hidden' value='en_US'/>
        <input class='submitfooter' type='submit' value='Submit'/>
</form>
</div>
</div>
</div>
</footer>
<div class='clear'/>
<!-- End footer 3 kolom -->

selanjutnya Simpan /save

seperti itulah cara ampuh nambah 3 kolom footer Viomagz. dijamin ara ampuh nambah 3 kolom footer Viomagz pasti berhasil .......


TrendingMore