Judul : Cara Membuat Widget Footer Tiga Kolom Responsive

Cara Membuat Widget Footer Tiga Kolom Responsive

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.

Lihat: Demo Footer Tiga Kolom Latar Warna

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://ift.tt/1gGj0w2'>
<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='http://ift.tt/2xmmOiU' 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://ift.tt/2zOt7NX' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
  <a class='linkedin' href='http://ift.tt/1BlHBTd' 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='http://ift.tt/2zOFHg8' 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='http://ift.tt/1xpGGyt' method='post' onsubmit='window.open(&apos;http://ift.tt/2xnP04W;, &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.

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

Judul artikel terkait :Cara Membuat Widget Footer Tiga Kolom Responsive
Alamat link terkait :Cara Membuat Widget Footer Tiga Kolom Responsive

Tweet

Subscribe to receive free email updates: