Inilah Cara Menciptakan Widget Footer Tiga Kolom Responsive Dan Keren Di Blog

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

Welcome back sobat setia . Di kesempatan kali ini saya mau menyebarkan wacana Desain Blog yaitu Cara menciptakan footer tiga kolom yang tentunya sudah responsive plus keren. Nah, mantab bukan kan. Hehe. Ini bertujuan untuk mempercantik tampilan blog anda, sehingga visitor dapat lebih nyaman dan berlama-lama di blog anda.

Tak jarang juga pemilik blog yang ingin menambah widget pada bab tertentu pada blognya itu. Sampai-sampai mencari cara semoga dapat menciptakan sebuah daerah widget ibarat yang di inginkan.

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

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

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 isyarat ]]></b:skin> atau lebih gampang pake kombinasi shortcut (Ctrl+F). Jika sudah ketemu, copy isyarat CSS dibawah kemudian paste dan simpan di atas isyarat ]]></b:skin>

CSS Footer Tiga Kolom Responsive + Keren

/* Footer Tiga Kolom Responsive dan Keren by */
#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 yakni memunculkan widget pada footer. Caranya Copy Kode HTML dibawah ini kemudian Paste dan Simpan di atas isyarat </body> atau di atas isyarat </div> paling akhir/paling bawah atau di atas isyarat <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('https://feedburner.google.com/fb/a/mailverify?uri=xxxxxx', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='email' onblur='if (this.value == "") {this.value = "Email address";}' onfocus='if (this.value == "Email address") {this.value = "";}' 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 isyarat tanda pagar (#) dan xxxxx dengan link akun media umum dan link yang akan Anda tampilkan.

Sekian Cara Membuat Widget Footer Tiga Kolom Responsive dan Keren. Semoga dapat terbantu dengan cara yang saya bagikan ini dan Good Luck. Sampai jumpa di postingan selanjutnya.
(https://broggerku.blogspot.com)