Untuk memperindah tampilan dan mempermudah navigasi, perlu kiranya ada Footer pada Blog
Pada postingan kali ini saya akan mejelasakan Cara Bagaimana Membuat Footer 3 Kolom di Blog, sesuai request dari Mas Gio Lesmana. Hasilnya mirip-mirip dengan blog ini, tapi hanya 3 kolom.
Menambahkan CSS
Tambahkan CSS ini di atas ]]></b:skin>
/* Footer */
.ft{background:#333e5a;color:#fbfbfb;font-size:95%;width:100%}
.container{max-width:900px;margin:0 auto;padding:20px 0}
.footerInner{display:flex;flex-wrap:wrap;position:relative;line-height:1.5em;}
.footerInner .widget .title {color: inherit;margin-bottom: 12px;font-weight: 700;font-size: 14px;}
.footerInner >*:first-child {width: calc(50% - 30px);}
.footerInner >* {width: calc(25% - 30px);margin: 0 15px;}
.footerInner .widget{margin-bottom: 30px}
.footerInner ul {list-style: none;margin: 0;padding: 0;}
.footerInner ul li{line-height:1.8em}
.footerInner ul li a{color:#fbfbfb}
.footerInner ul li a:hover{text-decoration:underline}
footer .LinkList ul:not(.socLink) li::before {content: '\2013';opacity: .3;}
footer .socLink {display: flex;flex-wrap: wrap;align-items: baseline;font-size: 13px;opacity: .8;}
footer .socLink li {display: inline-flex;align-items: baseline}
footer .socLink li:not(:first-child)::before {content: '/';margin: 0 5px}
footer .socLink li >*::before {content: attr(data-text);}
footer .LinkList a, footer .socLink li >* {display: inline-block;color: inherit;line-height: 20px;}
.widget .title {margin: 0 0 25px;font-size: 13px;font-weight: 700;position: relative}
.widget .title::after {content: '';display: inline-block;vertical-align: middle;width: 30px;margin: 0 10px;border-bottom: 1px solid #fbfbfb;opacity: .3;}
.aboutMe {max-width: calc(100% - 25px);margin-top:5px}
.aboutMe::before{content: attr(data-text);font-size: 13px;display: block;margin-bottom: 3px;}
.aboutMe >* {align-items: center;display: flex;justify-content: space-between;margin: 15px 0;}
.aboutLogo{flex: 0 0 70px;width: 70px;height: 70px;background-repeat: no-repeat;background-size: 100%;background-position: center;border-radius: 10px;}
.aboutText{flex: 0 0 calc(100% - 82px);}
.aboutText .tl{color: inherit;font-size: 1.3rem;margin-top:0;margin-bottom: 0.5rem;}
.aboutDesc {-webkit-box-orient: vertical;-webkit-line-clamp: 2;display: -webkit-box;line-height: 1.4em;overflow: hidden;margin:4px 0 0;}
/* Footer Credit */
.creditInner{position:relative} .creditInner >*{margin:0 10px} .creditInner .HTML{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
footer .credit a{display:inline-flex;align-items:center;color:#dbd400} footer .credit a svg{width:13px;height:13px;margin:0 3px;fill:#dbd400}
/* Responsive Footer */
@media screen and (max-width: 500px){
.footerInner>*{width: calc(50% - 30px)}
.footerInner >*:first-child {width: calc(100% - 30px)}
.footerInner, .creditInner {padding:0 10px;}
}Menambahkan HTML / XML
Untuk menambahkan kode dibawah ini, harus di luar
main-wrapper atau bungkus dengan nama class yang lain, supaya blok 100%<!--[ Footer Start ]-->
<footer class='ft'>
<div class='container'>
<div class='footerInner'>
<b:section id='footer-widget-1' maxwidgets='2' showaddelement='true'>
<b:widget id='HTML77' locked='false' title='Made with Love by' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'><div><div class='aboutLogo' style='background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBEuW-gmD-awChMJ8tGYi87JhJ-YLm1ufHYp2XP8zzna2QDmlYnQnI72tvnI2jGVex4sZ-XouPiXyfpHiCFR3DKesi2Z_NParONeOpYWMr5iHhDOkPJSgoSYSPIOx64F9kS_KDO_dvh3mqnZgncYHOE8-JmRdtyMcmLFbzBLTzBpUDqJTMsGSOgXFc/s100-rw/ki-logo2.png)'></div><div class='aboutText'><h2 class='tl'>Kang Ismet</h2><p class='aboutDesc'>Hanya seorang Blogger pemula.</p></div></div>
<p>Selamat datang di Blog Demo, Blog ini hanya untuk demo tutorial yang alakadarnya. </p></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content aboutMe' expr:data-text='data:title'><data:content/></div>
</b:includable>
</b:widget>
<b:widget id='LinkList1' locked='false' title='Social Media Link' type='LinkList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='link-3'>https://www.kang-ismet.com</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='text-1'>Instagram</b:widget-setting>
<b:widget-setting name='link-1'>https://www.kang-ismet.com</b:widget-setting>
<b:widget-setting name='text-0'>Facebook</b:widget-setting>
<b:widget-setting name='link-2'>https://www.kang-ismet.com</b:widget-setting>
<b:widget-setting name='text-3'>Youtube</b:widget-setting>
<b:widget-setting name='link-0'>https://www.kang-ismet.com</b:widget-setting>
<b:widget-setting name='text-2'>Twitter</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<ul class='socLink'>
<b:loop values='data:links' var='link'>
<li>
<b:tag class='l' expr:data-text='data:link.name' expr:name='data:link.target != "#" ? "a" : "span"'>
<b:attr cond='data:link.target != "#"' expr:value='data:link.target' name='href'/>
<b:attr cond='data:link.target != "#"' expr:value='data:link.name' name='aria-label'/>
<b:attr cond='data:link.target != "#"' name='target' value='_blank'/>
<b:attr cond='data:link.target != "#"' name='rel' value='noopener'/>
</b:tag>
</li>
</b:loop>
</ul>
</b:includable>
</b:widget>
</b:section>
<b:section id='footer-widget-2' maxwidgets='2' showaddelement='true'>
<b:widget id='LinkList2' locked='false' title='Blog' type='LinkList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='link-3'>/p/privacy-policy.html</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='text-1'>Contact</b:widget-setting>
<b:widget-setting name='link-1'>https://tutorial.kang-ismet.com/contact</b:widget-setting>
<b:widget-setting name='text-0'>About</b:widget-setting>
<b:widget-setting name='link-2'>/p/sitemap.html</b:widget-setting>
<b:widget-setting name='text-3'>Privacy</b:widget-setting>
<b:widget-setting name='link-0'>/about</b:widget-setting>
<b:widget-setting name='text-2'>Sitemap</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='widget-title'/>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li>
<a expr:href='data:link.target'>
<span><data:link.name/></span>
</a>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section id='footer-widget-3' maxwidgets='2' showaddelement='true'>
<b:widget id='LinkList3' locked='false' title='Tool' type='LinkList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='text-1'>Color Picker</b:widget-setting>
<b:widget-setting name='link-1'>/p/color-picker.html</b:widget-setting>
<b:widget-setting name='text-0'>Arabic Keyboard</b:widget-setting>
<b:widget-setting name='link-2'>/p/hljs-parse.html</b:widget-setting>
<b:widget-setting name='link-0'>https://arabickeyboard.kang-ismet.com/</b:widget-setting>
<b:widget-setting name='text-2'>HLJS Parse</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='widget-title'/>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li>
<a expr:href='data:link.target'>
<span><data:link.name/></span>
</a>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<!--[ Credit ]-->
<b:section class='creditInner' id='credit-widget' maxwidgets='2' showaddelement='false'>
<b:widget id='HTML88' locked='true' title='Credit' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'/>
</b:widget-settings>
<b:includable id='main'>
<span class='credit'>
<b:if cond='data:content == ""'><span style='font-family:Arial, Helvetica, sans-serif'>©</span> <span id='getYear'><b:if cond='data:view.url != data:view.url params { amp: "1" }'><script>/*<![CDATA[*/ var d = new Date(); var n = d.getFullYear(); document.getElementById('getYear').innerHTML = n; /*]]>*/</script><b:else/>2022</b:if></span> ‧ <bdi><a expr:href='data:blog.homepageUrl.canonical'><data:blog.title/><svg viewBox='0 0 24 24'><path d='M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14i.17L16.59,7.58L18,9L10,17Z'/></svg></a></bdi> ‧ All rights reserved.<b:else/><data:content/></b:if>
</span>
</b:includable>
</b:widget>
</b:section>
</div>
</footer>
<!--[ Footer End]-->Kostumisasi CSS
Pada CSS, yang perlu di kostum yaitu lebar .container sesuaikan dengan lebar CSS blog Anda.
Kostumisasi Widget
Untuk Widget Logo dan Link Lists edit melalui Tata Letak, format penulisan pada Widget Logo:
<div>
<div class='aboutLogo' style='background-image:url(url_logo)'></div>
<div class='aboutText'>
<h2 class='tl'>Kang Ismet</h2>
<p class='aboutDesc'>Hanya seorang Blogger pemula.</p>
</div>
</div>
</div>
<p>Selamat datang di Blog Demo, Blog ini hanya untuk demo tutorial yang alakadarnya. </p>Kalau masih ada yang dipertanyakan silahkan share di kolom komentar