Cara Membuat Widget Footer 3 Kolom Responsive di Blogger

Imamkunblog | Pada kesempatan kali ini saya akan membagikan Cara Memasang Widget Footer Responsve Keren di Blogger dengan 3 kolom seperti yang ada di blog imamkunblog ini. Widget Footer 3 kolom kali ini terdiri dari teks, navigasi dan juga Kotak Subscribe atau berlangganan blog.

Footer atau kaki terletak di bagian paling bawah blog. Fungsi Footer di blog sangat banyak sekali salah satunya untuk memberikan navigasi atau tentang mengenai blog anda dan juga masih banyak lagi fungsi Footer untuk Blog.

Untuk tutorial blogger cara membuat footer di blog kali ini sudah sangat responsive baik di tampilan Dekstop maupun tampilan mobile. Anda juga dapat mengganti menu di Footer sesuai dengan keinginan anda masing-masing.

Baiklah, tidak perlu berlama-lama lagi mari kita langsung saja masuk ke tahap pemasangan Widget Footer 3 kolom di blogger.

Cara Memasang Footer tiga kolom di Blogger Responsive

1. Pertama, Login ke Blogger.com
2. Pada menu dashboard pilh Tema > Edit HTML
3. Cari kode ]]></b:skin> dan pastekan kode dibawah ini tepat diatas kode itu.

/* DesignzChan Footer Wrapper */
#footer-wrapper{text-align:center;padding:10px;max-width:1040px;font-size:12px;font-weight:500px;color:#fff;background: #438e68;background-image: linear-gradient(110deg,rgba(255,255,255,0.1) 16%,rgba(255,255,255,0.1) 17%,rgba(255,255,255,0.05) 17%,rgba(255,255,255,0.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,0.05) 78%,rgba(255,255,255,0.05) 84%,rgba(255,255,255,0.1) 84%,rgba(255,255,255,0.1));
transition: all .5s ease;}
#footer-wrapper a {color:#fff;}
.designzchanmedsos a{display:inline-block;text-align:center;margin-top:10px;margin-right:5px;color:#fff;border-radius:100%;opacity:.9;}
.designzchanmedsos a i{font-family:Fontawesome;width:32px;height:32px;line-height:32px;display:block}
.designzchanmedsos a:hover{color:#fff;opacity:1;transform:rotate(360deg);}
.designzchanmedsos .facebook{background:#3b5998}
.designzchanmedsos .twitter{background:#00aced}
.designzchanmedsos .googleplus{background:#dd4b39}
.designzchanmedsos .rssfeed{background:#ee802f}
#footme{max-width:970px;height:auto;padding:0;margin:0 auto;overflow:hidden;font-size:13px;color:#fff;line-height:1.8}
#footme a{color:#fff}
.footmekiri{text-align:left;float:left}
.footmekanan{text-align:right;float:right;}
.footmekanan a{color:#fff;}
.footmekanan a:hover{color:#fff;}
.footmekanan a:before{content:"\b7";padding-right:0.5em;display:inline-block}
.footmekanan a:first-child:before{content:"";}
.footer-column{color:#fff;position:relative;margin:0 auto 8px auto;clear:both;font-size:14px;line-height:24px;overflow:hidden;text-align:left;border-bottom:1px solid #fff;}
.footer-column h3{position:relative;overflow:hidden;margin:0 0 10px 0;font-size:1rem;border-bottom:1px solid #fff;border-radius:unset;color:#fff;box-shadow:none;background:unset}
.footer-column h3:before{content:'';position:absolute;bottom:-1px;left:0;right:0;background:#009aff;width:16%;height:1px}
.footer-column h3:after{content:'';display:inline-block;position:absolute;height:15px;top:0;margin:3px 0 12px 10px;width:100%;background:url(//4.bp.blogspot.com/-R2WTW6O9E1o/VX7dqIGT1eI/AAAAAAAACc4/pyvQDMMLX3E/s1600/repeat-bg.png)repeat}
.footer-menu{float:left;width:31%;margin:0 20px 20px 0}
.footer-menu p.footer2{margin:5px auto}
.footer-menu ul{margin:0}
.footer-menu ul li{list-style-type:inherit;margin:0 0 0 15px}
.footer-menu ul li a{color:#fff}
.footer-menu ul li a:hover{color:#fff}

4. Kemudian, kita pasang juga kode CSS untuk Responsive ditampilan mobile dengan cara cari kode ]]></b:skin> dan pastekan kode dibawah ini tepat diatas kode tersebut.

/* DesignzChan Global Responsive */
@media screen and (max-width:800px) {
#footer-wrapper{padding:20px 0;border:0}
#footme{padding:0 20px}}
@media only screen and (max-width:768px) {
.footer-menu,#subscribe-footer{float:none;width:auto;margin:0 20px 20px 20px}}
@media screen and (max-width:640px) {
#footer-wrapper{margin:auto;border-top:1px solid rgba(0,0,0,0.1)}
#footer-wrapper .footmekiri,#footer-wrapper .footmekanan{float:none;text-align:center}
.designzchantotop{width:32px;height:32px;line-height:32px}
#footme {padding:0 10px;}}
@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}}

5. Kemudian kita masukkan kode CSS Untuk widget subscribe di tempat kode yang sama. Letakkan diatas kode ]]></b:skin>

/* Subscribe Footer */
#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:#333;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:#009aff;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:#141514;color:#fff;}

6. Setelah itu barulah kita masukkan kode HTMLnya di Footer blog dengan cara, Cari kode berikut.

<!-- footer wrapper start -->
sampai kode
<!-- footer wrapper end -->

7. Jika sudah ketemu, ganti kode tersebut dengan kode HTML berikut ini.

<!-- footer wrapper start -->
<footer id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter' role='contentinfo'>
<div id='rapilah'>
<div class='footer-column'>
<div class='footer-menu'>
<h3><svg style='width: 22px;height: 22px;vertical-align: -7px;transition: all .3s ease;float: right;' viewBox='0 0 24 24'><path d='M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z' fill='#fff'></path></svg>Tentang Blog Ini</h3>
<p class='footer2'>
      Blog yang membahas Tutorial Blogger, Tips Blogging, Tips Internet, dan artikel menarik lainnya yang menarik untuk dipelajari.
<div class='clear'></div>
</p>
</div>
<div class='footer-menu'>
<h3><svg style='width: 22px;height: 22px;vertical-align: -7px;transition: all .3s ease;float: right;' viewBox='0 0 24 24'><path d='M3,3H11V7.34L16.66,1.69L22.31,7.34L16.66,13H21V21H13V13H16.66L11,7.34V11H3V3M3,13H11V21H3V13Z' fill='#fff'></path></svg>Navigasi</h3>
<div class='navigasifooterwrapper'>
<div class='navigasifooter'>
<a href='/p/about.html' itemprop='url' title='About Me'>
<svg style='width: 22px;height: 22px;vertical-align: -5px;margin-right: 10px;transition: all .3s ease;' viewBox='0 0 24 24'><path d='M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M16.5,16.25C16.5,14.75 13.5,14 12,14C10.5,14 7.5,14.75 7.5,16.25V17H16.5M12,12.25A2.25,2.25 0 0,0 14.25,10A2.25,2.25 0 0,0 12,7.75A2.25,2.25 0 0,0 9.75,10A2.25,2.25 0 0,0 12,12.25Z' fill='#fff'></path></svg>
<span itemprop='name'>About</span></a>
</div>
<div class='navigasifooter'>
<a href='/p/contact.html' itemprop='url' title='Contact'>
<svg style='width: 22px;height: 22px;vertical-align: -5px;margin-right: 10px;transition: all .3s ease;' viewBox='0 0 24 24'><path d='M4,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4M12,11L20,6H4L12,11M4,18H20V8.37L12,13.36L4,8.37V18Z' fill='#fff'></path></svg>
<span itemprop='name'>Contact</span></a>
</div>
<div class='navigasifooter'>
<a href='/p/disclaimer.html' itemprop='url' title='Disclaimer'>
<svg style='width: 22px;height: 22px;vertical-align: -5px;margin-right: 10px;transition: all .3s ease;' viewBox='0 0 24 24'><path d='M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z' fill='#fff'></path></svg>
<span itemprop='name'>Disclaimer</span></a>
</div>
<div class='navigasifooter'>
<a href='/p/privacy-policy.html' itemprop='url' title='Privacy Policy'>
<svg style='width: 22px;height: 22px;vertical-align: -5px;margin-right: 10px;transition: all .3s ease;' viewBox='0 0 24 24'><path d='M12,17C10.89,17 10,16.1 10,15C10,13.89 10.89,13 12,13A2,2 0 0,1 14,15A2,2 0 0,1 12,17M18,20V10H6V20H18M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10C4,8.89 4.89,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z' fill='#fff'></path></svg>
<span itemprop='name'>Privacy Policy</span></a>
</div>
<div class='navigasifooter'>
<a href='/p/sitemap.html' itemprop='url' title='Sitemap'>
<svg style='width: 22px;height: 22px;vertical-align: -5px;margin-right: 10px;transition: all .3s ease;' viewBox='0 0 24 24'><path d='M7,5H21V7H7V5M7,13V11H21V13H7M4,4.5A1.5,1.5 0 0,1 5.5,6A1.5,1.5 0 0,1 4,7.5A1.5,1.5 0 0,1 2.5,6A1.5,1.5 0 0,1 4,4.5M4,10.5A1.5,1.5 0 0,1 5.5,12A1.5,1.5 0 0,1 4,13.5A1.5,1.5 0 0,1 2.5,12A1.5,1.5 0 0,1 4,10.5M7,19V17H21V19H7M4,16.5A1.5,1.5 0 0,1 5.5,18A1.5,1.5 0 0,1 4,19.5A1.5,1.5 0 0,1 2.5,18A1.5,1.5 0 0,1 4,16.5Z' fill='#fff'></path></svg>
<span itemprop='name'>Sitemap</span></a>
</div>
<div class='navigasifooter'>
<a href='#' itemprop='url' title='Partner'>
<svg style='width: 22px;height: 22px;vertical-align: -5px;margin-right: 10px;transition: all .3s ease;' viewBox='0 0 24 24'><path d='M16 17V19H2V17S2 13 9 13 16 17 16 17M12.5 7.5A3.5 3.5 0 1 0 9 11A3.5 3.5 0 0 0 12.5 7.5M15.94 13A5.32 5.32 0 0 1 18 17V19H22V17S22 13.37 15.94 13M15 4A3.39 3.39 0 0 0 13.07 4.59A5 5 0 0 1 13.07 10.41A3.39 3.39 0 0 0 15 11A3.5 3.5 0 0 0 15 4Z' fill='#fff'></path></svg>
<span itemprop='name'>Partner</span></a>
</div>
</div>
</div>
<div class='footer-menu' id='subscribe-footer'>
<h3><svg style='width: 22px;height: 22px;vertical-align: -7px;transition: all .3s ease;float: right;' viewBox='0 0 24 24'><path d='M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M6,10V7H4V10H1V12H4V15H6V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z' fill='#fff'></path></svg>Follow Blog Ini </h3>
<p>Langsung dapatkan informasi update terbaru dengan cepat dengan isi data email kalian!</p>
<div class='emailfooter'>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;https://feedburner.google.com/fb/a/mailverify?uri=IMAMKUNBLOG&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);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='your_feed'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitfooter' type='submit' value='Submit'/>
</form>
</div>
</div>
</div>
<div id='footme'>
<div class='footmekiri'>
Copyright &#169; <span id='current-year'></span>
<a href='https://www.imamkunblog.com/' itemprop='creator' itemscope='itemscope' itemtype='http://schema.org/Person'><span itemprop='name'>Imamkunblog.com</span></a> All Right Reserved.
</div>
<div class='footmekanan'><a class='deletedirect'></a> Published by <a href='https://www.imamkunblog.com/' target='_blank' title='FLYTemplate'>Imamkunblog</a><svg style='width: 15px;height: 15px;vertical-align: -3px;transition: all .3s ease;padding-left: 2px;' viewBox='0 0 24 24'><path d='M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z' fill='#ea1b1b'></path></svg></div>
</div>
</div>
</footer>
<!-- footer wrapper end -->

8. Langkah terakhir klik Simpan dan lihat hasilnya!

9. Selesai!

Untuk mengganti warna Footernya anda bisa mengedit di kode CSS seperti pada langkah nomor tiga diatas. Ganti kode #438e68 sesuai dengan keinginan, untuk mengetahui kode Warna anda bisa pergi ke Kode Warna klik disini.

Nah, untuk melakukan editing lainnya anda dapat menyesuaikan sendiri, anda dapat menggunakan Inspect Element untuk melakukan Editing yang anda inginkan.

Baca Juga: Cara Membuat Halaman Kode Warna di Halaman Statis Blog

Demikianlah artikel kali ini cara membuat footer tiga kolom keren responsive di blogger. Apabila anda memiliki kendapa pada saat pemasangannya silahkan komen saja dibawah.

Share this post