Jadi Terpelajar Cara Gampang Menciptakan Footer Ala Kompiajaib.Com

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

Beberapa hari yang kemudian blog KompiAjaib.com merubah tampilan footer yang cocok buat aku sehingga aku tertarik lagi untuk merubah footer dengan 4 kolom widget berbeda berupa gambar judul blog dan teks hidangan link, sebab berdasarkan aku hal ini tidak menambah beban loading blog. Dan balasannya sukses juga otak-atik footer lagi menyerupai yang dapat anda lihat dibawah.

Nah bagi yang ingin menciptakan footer KompiAjaib menyerupai blog ini, utamanya bagi pengguna template kompi flexible sebab prakteknya aku memakai template itu. silahkan ikuti langkah-langkahnya:

1. Silahkan ganti aba-aba ini:

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

dengan ini:

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

2. Silahkan cari dan sesuaikan aba-aba CSS menyerupai 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} 

sampai menjadi menyerupai 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 aba-aba HTML menyerupai 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 aba-aba dibawah ini ke widget HTML dan sesuaikan dengan blog anda:

<div id="logo-footer">
 <a href="https://www.nomifrod.com/" title=""><img alt="Logo Footer " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilRnl_dJCMy8nBaJvKT4H_zU5U5HgZRPKZohyphenhyphenKtjrr979ixjskR94oFVw1cGlozwvqAZrguW4-VU9YB2chBZEd6iVCGSqw3_DtfrbhyphenhyphenKC8Fl_xeN3dcBljs7cWZLAXIkA2GTum2jtFENs7/s1600/footer.png" height="50" title="" width="347" /></a>
 </div>
 <p>Blog mengembangkan aplikasi dan dokument pendidikan, perangkat dan metode belajar, serta kajian agama dan muslimah.</p>

untuk footer2,3 dan 4 gunakan aba-aba dibawah ini dan sesuaikan dengan harapan anda:

<ul>
 <li><a href='https://www.nomifrod.com/p/about-me.html' target='_blank' title='Tentang '>Tentang </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), dapat anda coba otak-atik CSS dan HTMLnya sebab struktur template tidak sama. Karena aba-aba diatas aku praktek pake template kompi flexible, aku tidak menjamin 100% dapat saja ada aba-aba lain (bawaan template) yang mempengaruhi. Oke selamat mencoba...

Referensi: www.kompiajaib.com