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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhddDvo9Wcnzt-CheHlOwHO75Ql5CfPal4h3r3FCBilfMjAIRPvBgbdSt1oHsuskeBowUjnLF5CbMZhcFvksJm9OCj70Cjub-qR60xjp-xEL3ghFcaBbuz4g5cW5v3WCqYptB-GfWT6XOak/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('https://feedburner.google.com/fb/a/mailverify?uri=IMAMKUNBLOG', '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='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 © <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!