Membuat Footer 3 Kolom dengan Logo dan Link List
Kang Ismet
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
Mantap kang. Nanti saya coba terapkan.
Oh iya kang, kayaknya lebih bagus untuk sosial media nya pakai logo svg aja. Jangan tulisan.
Mohon di update css dan kode nya kang🙏
Cerewet
hahaha santai Mas Dar... btw klo update ke svg, kayaknya tinggal oprek sendiri aja
Awas kang. Itu peniru template kang ismet dari dulu wkwk. Mending cerewet tapi gak cloning punya orang bro :v
Kan udah izin mas sambil belajar ngoding kalau gak gini kapan bisa nya
Itu bukan belajar ngoding. Tapi niru. Agan udah niru dari dulu sebelum kang ismet mulai aktif lagi wkwk
Raja cloning julukan ku dari dulu, template apa aja bisa ku clone
waduh rame... hihihi ikut nimbrung ah.. ternyata kang ismet sempet pedes masalah cloning https://www.google.com/search?q=clone+blogger+template+kang+ismet
Kang, saya lagi coba-coba oprek template HTML, request tutorial Bootsrap dong
Insya Allah, emang udah niat sih... cuman blom mulai :)