Cara Mudah Membuat Footer ala KompiAjaib.com

Sejak awal blog ini menggunakan template kompi flexible, saya merasa kurang pas dengan tampilan footernya sehingga saya menemukan website-website yang menurut saya memiliki footer yang elegan dan minimalis menggunakan background gelap dengan lebar 100% full. Awalnya sih tetap 3 kolom widget dengan lebar 313px karena lebar template ini 980px, Masih ingat kan tampilan blog ini kemarin waktu saya membuat widget alexa dan histat berdampingan? Tidak ingat? minum obat dulu ya.

Beberapa hari yang lalu blog KompiAjaib.com merubah tampilan footer yang cocok buat saya sehingga saya tertarik lagi untuk merubah footer dengan 4 kolom widget berbeda berupa gambar judul blog dan teks menu link, karena menurut saya hal ini tidak menambah beban loading blog. Dan akhirnya sukses juga otak-atik footer lagi seperti yang bisa anda lihat dibawah.

Nah bagi yang ingin membuat footer KompiAjaib seperti blog ini, utamanya bagi pengguna template kompi flexible karena prakteknya saya menggunakan template itu. silahkan ikuti langkah-langkahnya:

1. Silahkan ganti kode ini:

#footer1,#footer2,#footer3{float:left;width:30%;}

dengan ini:

#footer1,#footer2,#footer3,#footer4{float:left;width:19%;}

2. Silahkan cari dan sesuaikan kode CSS seperti dibawah ini:


#footer-wrapper{width:100%;overflow:hidden;margin:30px auto 0;padding:0}

#footer1,#footer2{float:left;width:313px;margin-right:20px}

#footer3{float:right;width:313px;margin:0}

.credit,.footer .widget-content{line-height:1.5em}

.footer ul{margin:0;padding:0}

.footer a:link,.footer li a:visited{color:#666;text-decoration:none}

.footer li a:hover{color:#333}

.creditpic{width:100%;margin:0;padding:10px 0 30px;position:relative;color:#888}

.credit{font-size:12px;overflow:hidden;clear:both;margin:0 5px;padding:0}

.credit a:link,.credit a:visited{color:#888;text-decoration:none}

.credit a:hover{color:#f4782c;text-decoration:none}

.credit-left{float:left}

.credit-right{float:right}

hingga menjadi seperti ini


.creditpic{background:#212121;width:100%;padding-top:1px;border-top:5px solid #999;}

.credit{background:#000;width:100%;font-family:Roboto,sans-serif;font-size:12px;margin:0;padding:20px 0 30px;position:relative;color:#fff;min-height:10px;text-align:center}

.credit,.footer .widget-content{line-height:1.5em}

.footer .widget{background:none;margin:5px 5px 0;padding:0 10px 0}

.credit a:link,.credit a:visited{color:#fff;text-decoration:none}

.credit a:hover{color:#fc0;text-decoration:none}

#footer-wrapper{width:100%;overflow:hidden;margin:10px auto 0;padding:0}

#footer-wrapper p{margin:0!important;font-size:16px}

#footer1 a,#footer2 a,#footer3 a,#footer4 a{font-weight:300;color:#ccc;}

#footer1 a:hover,#footer2 a:hover,#footer3 a:hover,#footer4 a:hover{color:#fefefe;}

#footer1 ul,#footer2 ul,#footer3 ul,#footer4 ul{list-style:none;padding:0!important;margin:5px 0!important}

#footer1{width:40%;padding:10px 30px 10px 0;display:inline;float:left;color:#ccc;font-size:14px;font-weight:300;line-height:1.6em;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

#footer2,#footer3,#footer4{width:20%;padding:10px 0 10px 30px;display:inline;float:left;color:#ccc;font-size:14px;font-weight:300;line-height:1.6em;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

#footer1 #logo-footer{clear:both;text-align:left;display:block}

#footer1 #logo-footer img{height:40px}

#footer1 h2,#footer2 h2,#footer3 h2,#footer4 h2{font-family:Roboto,sans-serif;font-size:16px;font-weight:700;color:#fefefe;margin:0!important;text-transform:none!important}

@media print{#footer-wrapper,.creditpic{display:none!important}}

3. Silahkan ganti kode HTML seperti dibawah ini:

<div class='content-wrapper'>

<footer itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WPFooter'>

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.isMobileRequest == &quot;false&quot;'>

<div id='footer-wrapper'>

....................

....................

....................

</footer>

</div>

</div>

dengan ini:

<div class='creditpic'>

<div class='content-wrapper'>

<footer itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WPFooter'>

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.isMobileRequest == &quot;false&quot;'>

<div id='footer-wrapper'>

<b:section class='footer' id='footer1' preferred='yes'/>

<b:section class='footer' id='footer2' preferred='yes'/>

<b:section class='footer' id='footer3' preferred='yes'/>

<b:section class='footer' id='footer4' preferred='yes'/>

  </div>

    <div class='clear'/>

</b:if>

</footer>

</div>

</div>

<div class='credit'>

<div class='content-wrapper'>

Copyright &#169; <span itemprop='copyrightYear'><script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script></span> <span itemprop='copyrightHolder' itemscope='itemscope' itemtype='https://schema.org/Organization'><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'><span itemprop='name'><data:blog.title/></span></a></span> | Proudly powered by <a href='//www.blogger.com' target='_blank' title='Blogger'>Blogger</a>

</div>

</div>

4. Terakhir, untuk footer1 buat gambar blog dengan ukuran 347 x 40 px, kemudian copas kode dibawah ini ke widget HTML dan sesuaikan dengan blog anda:

<div id="logo-footer">

<a href="https://www.nomifrod.com/" title="Nom Ifrod"><img alt="Logo Footer Nom Ifrod" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7eG8_fa594IvtiNqCUSewIp8Fv7WxDqa2ZYmnP0chSCDe3xWVCuJCJ4egnWtMI-VXC3HgdRZItXQXj00eatIfslw0y0ibK-oCRJSOgijQ97rZ12xQxhHZ45xA1VzWrgQyxke4EZaaBu6D/s1600/footer.png" height="50" title="Nom Ifrod" width="347" /></a>

</div>

<p>Blog berbagi aplikasi dan dokument pendidikan, perangkat dan metode belajar, serta kajian agama dan muslimah.</p>

untuk footer2,3 dan 4 gunakan kode dibawah ini dan sesuaikan dengan keinginan anda:

<ul>

<li><a href='https://www.nomifrod.com/p/about-me.html' target='_blank' title='Tentang Nom Ifrod'>Tentang Nom Ifrod</a></li>

<li><a href='https://www.nomifrod.com/p/kontak-kami.html' target='_blank' title='Hubungi Saya'>Hubungi Saya</a></li>

<li><a href='https://www.nomifrod.com/p/daftar-isi.html' target='_blank' title='Daftar Isi'>Daftar Isi</a></li>

<li><a href='https://www.nomifrod.com/p/kontak-layanan.html' target='_blank' title='Pasang Iklan'>Pasang Iklan</a></li>

<li><a href='https://eepurl.com/bTZ0GD' target='_blank' title='Langganan'>Langganan</a></li>

</ul>

Bagi pengguna template lain (bukan kompi flexible), bisa anda coba otak-atik CSS dan HTMLnya karena struktur template tidak sama. Karena kode diatas saya praktek pake template kompi flexible, saya tidak menjamin 100% bisa saja ada kode lain (bawaan template) yang mempengaruhi. Oke selamat mencoba...

Referensi: www.kompiajaib.com