Cara Membuat Widget Footer 4 Kolom Seperti Blog Kompi Ajaib

Cara Membuat Widget Footer 4 Kolom Seperti Blog Kompi Ajaib - Di fanspage musafus ada yang bertanya mas gimana cara bikin footer kaya di blog musafus, nah di artikel kali ini akan saya jawab pertanyaannya.

Tidak ada habis - habisnya modifikasi template yang dilakukan blog Kompi Ajaib, kali ini kita akan membahas bagaimana cara membuat widget footer 4 kolom seperti di blog Kompi Ajaib, di footer ini terdapat juga tempat untuk meletakkan logo blog kita beserta dengan deskripsi blog kita, sehingga membuat blog kita terlihat lebih professional, mungkin akan ada sedikit perbedaan karena setiap template berbeda - beda. mari disimak tutorialnya.

Membuat Footer 4 Kolom Seperti Kompi Ajaib

1. Masuk ke Blogger > Template > Edit HTML
2. Copy kode CSS di bawah ini dan letakkan tepat di atas kode </style>

.creditpic{background:#212121;width:100%;padding-top:1px;border-top:5px solid #999;}
#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. Letakkan kode HTML diatas credit link blog sobat

<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>

4. Untuk membuat widget logo blog dan deskripsi blog silahkan ambil dan sesuaikan kode di bawah ini

<div id="logo-footer">
<a href="http://www.musafus.web.id/" title="Musafus"><img alt="Logo Footer Musafus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiroPvB-qQqGF5vwFjKGr4E3WpoLg6FRDlzFwfvnEAmHpNu4f2JVubjUBAKyNq3OK60ytHQ3coibt_0XM0y4d5PqZ4Z4oWE7LmNKWDWKTEnmJKxP0V0QEdyi7Uhzo8oLZPyV6up1RHJcQ7t/s1600/musafus-logo-footer.png" height="50" title="Musafus" width="347" /></a>
</div>
<p>Berbagi Tips Dan Tutorial Seputar Dunia Teknologi, Internet, Dan Pelajaran.</p>

5. Untuk widget daftar link seperti follow us, dukunga, tools, dan lain - lain sobat bisa menggunakan kode di bawah ini

<ul>
<li><a href="http://www.musafus.web.id/p/about.html" title="Tentang Musafus">Tentang Musafus</a></li>
<li><a href="http://www.musafus.web.id/p/contact.html" title="Hubungi Saya">Hubungi Saya</a></li>
<li><a href="http://www.musafus.web.id/p/sitemap.html" title="Daftar Isi">Daftar Isi</a></li>
<li><a href="http://www.musafus.web.id/p/disclaimer.html" title="Disclaimer">Disclaimer</a></li>
</ul>

Seperti yang saya bilang di atas tadi, mungkin diperlukan otak atik css atau html lagi karena struktur templatenya tidak sama, jika ada pertanyaan jangan sungkan bertanya melalui kotak komentar, semoga bermanfaat.

Sumber kode : Kompiajaib.com, Nomifrod.com