√ Inilah Cara Membuat Widget Footer Tiga Kolom Responsive dan Keren di Blog - AdityaTekno

Social Items

footer tiga kolom

Welcome back sahabat setia AdityaTekno.com. Di kesempatan kali ini saya mau berbagi tentang Desain Blog yaitu Cara membuat footer tiga kolom yang tentunya sudah responsive plus keren. Nah, mantab bukan kan. Hehe. Ini bertujuan untuk mempercantik tampilan blog anda, sehingga visitor bisa lebih nyaman dan berlama-lama di blog anda. 

Tak jarang juga pemilik blog yang ingin menambah widget pada bagian tertentu pada blognya itu. Sampai-sampai mencari cara agar bisa membuat sebuah tempat widget seperti yang di inginkan.

Salah satunya yang banyak dicari adalah memasang sebuah widget pada bagian footer. Dan kebanyakan widget footer ini banyak dipakai oleh web/blog yang bergaya megazine (berita). Oleh karenanya banyak blogger lain atau blogger pemula yang ingin sekali memasang widget di bagian footer blog mereka. 

Buat anda yang sudah tidak sabar lagi ingin membuat widget dibagian footer dengan widget tiga kolom responsive dan keren dari CB bisa mengikuti cara yang saya bagikan dibawah ini.


footer tiga kolom responsive


Inilah Cara Membuat Widget Footer Tiga Kolom Responsive dan Keren 


1. Pertama harus sudah Log In ke Blogger.
2. Kemudian masuk ke Menu Template dan Pilih Edit HTML.
3. Setelah itu cari kode ]]></b:skin> atau lebih mudah pake kombinasi shortcut (Ctrl+F). Jika sudah ketemu, copy kode CSS dibawah lalu paste dan simpan di atas kode ]]></b:skin> 

CSS Footer Tiga Kolom Responsive + Keren


/* Footer Tiga Kolom Responsive dan Keren by BroGerrr */
#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;}
}

4. Langkah selanjutnya adalah memunculkan widget pada footer. Caranya Copy Kode HTML dibawah ini lalu Paste dan Simpan di atas kode </body> atau di atas kode </div> paling akhir/paling bawah atau di atas kode <div id='footer'> (coba saja 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'/>


Note:
Ganti kode tanda pagar (#) dan xxxxx dengan link akun media sosial dan link yang akan Anda tampilkan. 

Sekian Cara Membuat Widget Footer Tiga Kolom Responsive dan Keren. Semoga bisa terbantu dengan cara yang saya bagikan ini dan Good Luck. Sampai jumpa di postingan selanjutnya. Salam AdityaTekno.com.

Inilah Cara Membuat Widget Footer Tiga Kolom Responsive dan Keren di Blog

footer tiga kolom

Welcome back sahabat setia AdityaTekno.com. Di kesempatan kali ini saya mau berbagi tentang Desain Blog yaitu Cara membuat footer tiga kolom yang tentunya sudah responsive plus keren. Nah, mantab bukan kan. Hehe. Ini bertujuan untuk mempercantik tampilan blog anda, sehingga visitor bisa lebih nyaman dan berlama-lama di blog anda. 

Tak jarang juga pemilik blog yang ingin menambah widget pada bagian tertentu pada blognya itu. Sampai-sampai mencari cara agar bisa membuat sebuah tempat widget seperti yang di inginkan.

Salah satunya yang banyak dicari adalah memasang sebuah widget pada bagian footer. Dan kebanyakan widget footer ini banyak dipakai oleh web/blog yang bergaya megazine (berita). Oleh karenanya banyak blogger lain atau blogger pemula yang ingin sekali memasang widget di bagian footer blog mereka. 

Buat anda yang sudah tidak sabar lagi ingin membuat widget dibagian footer dengan widget tiga kolom responsive dan keren dari CB bisa mengikuti cara yang saya bagikan dibawah ini.


footer tiga kolom responsive


Inilah Cara Membuat Widget Footer Tiga Kolom Responsive dan Keren 


1. Pertama harus sudah Log In ke Blogger.
2. Kemudian masuk ke Menu Template dan Pilih Edit HTML.
3. Setelah itu cari kode ]]></b:skin> atau lebih mudah pake kombinasi shortcut (Ctrl+F). Jika sudah ketemu, copy kode CSS dibawah lalu paste dan simpan di atas kode ]]></b:skin> 

CSS Footer Tiga Kolom Responsive + Keren


/* Footer Tiga Kolom Responsive dan Keren by BroGerrr */
#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;}
}

4. Langkah selanjutnya adalah memunculkan widget pada footer. Caranya Copy Kode HTML dibawah ini lalu Paste dan Simpan di atas kode </body> atau di atas kode </div> paling akhir/paling bawah atau di atas kode <div id='footer'> (coba saja 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'/>


Note:
Ganti kode tanda pagar (#) dan xxxxx dengan link akun media sosial dan link yang akan Anda tampilkan. 

Sekian Cara Membuat Widget Footer Tiga Kolom Responsive dan Keren. Semoga bisa terbantu dengan cara yang saya bagikan ini dan Good Luck. Sampai jumpa di postingan selanjutnya. Salam AdityaTekno.com.

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Notifications

Disqus Logo