Cara Membuat Widget Footer Tiga Kolom Responsive

Baca Juga

Cara Membuat Widget Footer Tiga Kolom Responsive di Blogger.

Sebelumnya CB sudah share cara membuat footer empat kolom dan tiga kolom. Itu jenis widget footer dengan tampilan "biasa".

Kali ini CB share tampilan footer tiga kolom seperti screenshot berikut ini. Demonya bisa dilihat di Footer Widget Template Blog SEO Fixtures.

Cara Membuat Widget Footer Tiga Kolom Responsive

CSS Footer Responsive Tiga Kolom
Simpan di atas kode ]]></b:skin>

#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;}
}

Kode HTML
Simpan di atas kode </body> atau di atas kode </div> paling akhir/paling bawah atau di atas kode <div id='footer'> (coba aja satu per satu mana yang cocok dengan template Anda).

<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'>
Deskripsi blog dan profil ringkas Admin Blogger di sini. Menjelaskan konten blog dan tujuan blogging dengan blog ini.
<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'/>

Demikian Cara Membuat Widget Footer Tiga Kolom Responsive. Anda harus mengedit kode tanda pagar (#) dan xxxxx dengan link akun media sosial dan link yang Anda akan tampilkan.

Footer Empat Kolom Responsive

Berikut ini Cara Membuat Widget Footer Empat Kolom Responsive dari MBT. Karena kolomnya kecil, maka sebaiknya diisi link, misalnya link label, seperti gambar berikut ini.

Kode Layout

body#layout #lower-wrapper {width:100%}
body#layout #lowerbar-wrapper {width: 25%;float: left;}

Kode CSS:

#lower{margin:auto;padding:0 0 10px;width:100%;background:#333}
#lower-wrapper{background:#333;margin:auto;padding:20px 0;width:100%;border:0}
#lowerbar-wrapper{background:#333;float:left;margin:0 5px auto;padding-bottom:20px;width:23%;text-align:justify;color:#ddd;font:bold 12px Arial,Tahoma,Verdana;line-height:1.6em;word-wrap:break-word;overflow:hidden}
.lowerbar{margin:0;padding:0}
.lowerbar .widget{margin:0;padding:10px 20px 0}
.lowerbar h2{margin:0 0 10px;padding:3px 0;text-align:left;border:0;color:#ddd;text-transform:uppercase;font:bold 14px Arial,Tahoma,Verdana}
.lowerbar ul{color:#fff;margin:0 auto;padding:0;list-style-type:none}
.lowerbar li{display:block;color:#fff;line-height:1.6em;margin-left:0!important;padding:6px;border-bottom:1px solid #222;border-top:1px solid #444;list-style-type:none}
.lowerbar li a{text-decoration:none;color:#DBDBDB}
.lowerbar li a:hover{text-decoration:underline}
.lowerbar li:hover{display:block;background:#222}
@media only screen and (max-width:768px) {
#lower, #lower-wrapper, #menubottom-container, #credits-wrap {overflow:hidden!important;width:100%!important;}
#lowerbar-wrapper{overflow:hidden!important;width:90%!important;padding:20px}
#credits p{text-align:center!important}
}

Kode HTML:

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
  <b:section class='lowerbar' id='lowerbar1' preferred='yes'/>
</div>
<div id='lowerbar-wrapper'>
  <b:section class='lowerbar' id='lowerbar2' preferred='yes'/>
</div>
<div id='lowerbar-wrapper'>
  <b:section class='lowerbar' id='lowerbar3' preferred='yes'/>
</div>
<div id='lowerbar-wrapper'>
  <b:section class='lowerbar' id='lowerbar4' preferred='yes'/>
</div>
<div style='clear: both;'/>
</div> </div>

Demikian Cara Membuat Widget Footer Tiga dan Empat Kolom Responsive di bagian bawah blog Anda.

Good Luck & Happy Blogging! (www.contohblog.com).*