Cara Membuat Menu Navigasi Footer Blog Keren ( 3 column )

==Iklan Dipate Disini===

Cara Membuat Menu Navigasi Footer Blog Keren ( 3 column ) Lapakinfo.net - Kali ini saya akan membagikan tutorial Cara Membuat Menu Navigasi Footer Blog Keren ( 3 column ) yang sangat responsive dan keren, selain responsive tutorial ini bisa membuat blog kalian lebih menarik dan lebih profesional tentunya. Footer ialah bagian kaki pada blog atau bagian dasar blog yang berisikan informasi tentang sumber daya, sponsor, dll. Tapi footer juga bisa di isi dengan tempat menampilkan widget.

Menu navigasi footer ini sudah banyak digunakan oleh kalangan blogger seperti jagoandzgn, showdzgn, dan saya sendiri ( lapakinfo.net ). Karena dengan memasang menu navigasi ini pada footer blog kalian itu akan memberikan kesan yang lebih profesional. Jika kalian mau memasang menu navigasi footer ini silahkan ikuti langkahnya di bawah ini.

Cara Membuat Menu Navigasi Footer Blog Keren ( 3 column )

1. Buka Blog kalian
2. Pilih Tema lalu pilih Edit HTML
3. Cari kode ]]></b:skin> jika sudah ketemu salin kode di bawah ini dan letakan di atas kode ]]></b:skin>

/* CSS Footer Keren by lapakinfo.net */
#footer{background:#000;color:#fff;padding:0;margin:0px 0 0}
#footer h2:after{content: '';display: inline-block;position: absolute;height: 20px;top: 0;margin: 1px 0 12px 10px;width: 100%;background:linear-gradient(to right,rgba(12, 12, 12, 0),rgb(70, 70, 70),rgb(136, 136, 136));}
.footer-sections {overflow: hidden;margin: 0 auto;padding: 50px 120px;}
.sect-left{display:inline-block;float:left;width:31.655%;margin-right:25px}.sect-left:nth-child(3){margin-right:0}
.sect-left h2{position: relative;background:none;overflow: hidden;padding: 0 0 10px 0;color: #fff;font: 700 14px "Roboto Slab",sans-serif;display: inline-block;-webkit-flex: 0 auto;-ms-flex: 0 auto;flex: 0 auto;margin: 0;text-transform: uppercase;font-size: 1rem;
font-weight: 700;white-space: nowrap;width: 100%;}
.sect-left h2 a{color:#E4E4E4}
a.murub{font-size: 14px;text-decoration:none;-webkit-transition:all .1s ease-out;-moz-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out}
a.murub:hover{color:#fff;text-shadow:0 1px 0 #0972cd,0px 0 3px #0972cd,0px 0 5px #0972cd,0px 0 30px #0972cd,0px 3px 50px #0972cd}
.aa{background: linear-gradient(to right,#111,#111,#111,#111,#1589E3,#111,#111,#111,#111);background-size: 400% 400%;-webkit-animation: Gradient 2s ease infinite;-moz-animation: Gradient 2s ease infinite;animation: Gradient 2s cubic-bezier(0.47, 0, 0.75, 0.72) infinite;}
.footer-contact p a{color:white !important;}
.footer-contact p {clear: both;color: #fff;overflow: hidden;font-size: 14px;font-weight: normal;line-height: 22px;}
.footer-contact p {margin-bottom: 13px;margin-top: -5px;padding-bottom: 13px;border-bottom: 1px solid #222;}
.footer-contact label {color: #fff;float: left;font-size: 14px;font-weight: normal;margin-right: 20px;max-width: 80px;display: inline-block;}
.footer-contact:last-child p.web {border: medium none;margin: 0;padding: 0;}
.sasabilo{padding: 1px 4px;float:right;color: #fff;width: 50px;text-align: center;}
@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
@media only screen and (max-width:1099px){.sect-left{width:31.55%}.footer-sections{padding:30px}}
@media only screen and (max-width:979px){.sect-left{width:100%;margin-right:0;margin-bottom:20px}.sect-left:last-child{margin-bottom:0}.footer-sections{padding:30px}}

4. Lanjut cari kode <!-- footer nav menu --> atau <!-- footer --> atau bisa juga Footer jika sudah ketemu pastekan kode di bawah ini dan letakan di atas kode tersebut

<!-- Footer keren Lapajinfo.net -->
<div id='footer' itemscope='itemscope' itemtype='https://schema.org/WPFooter'>
<div class='footer-sections row'>
<div class='sect-left section' id='footer-sec1' name='Widget 1'><div class='widget HTML' data-version='1' id='HTML991'>
<h2><i class='fa fa-home'/>
KONTAK</h2>
<div class='foooter'>
<div class='footer-contact'>
<p><label><span><i class='fa fa-user'/></span></label>Yusril Esmod<br/>
<label><span><i class='fa fa-map-marker'/></span></label>Ujung Berung - Bandung</p>
<p class='phone'><label><i class='fa fa-whatsapp'/></label>
<span>0877-1026-6952</span><br/>
<label><i class='fa fa-facebook-official'/></label>
<span>https://www.facebook.com/lapakinfodotcom</span><br/>
<label><i class='fa fa-envelope-o'/></label>
<span>Lapak_1nfo@outlook.com</span><br/>
<label><i class='fa fa-rss'/></label>
<span class='sotabilo aa'><a class='murub' href='http://www.blogger.com/follow-blog.g?blogID=6479446256188251383' target='_blank'>Follow Blog Lapak Info</a></span>
</p>
</div>

<style>.sotabilo{padding:1px 4px 2px;border-radius:3px;color:#fff;font-weight:bold}</style>
</div>
</div></div>
<div class='sect-left section' id='footer-sec2' name='Widget 2'><div class='widget HTML' data-version='1' id='HTML992'>
<h2>Tools</h2>
<div class='foooter'>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #1589E3;padding-left:5px;border-left:5px solid #1589E3;'>
<a class='murub' href='https://www.lapakinfo.net/' style='color:white' target='_blank' title='Home'>Home<span class='sasabilo' style='background:#1589E3'><i class='fa fa-home'/></span></a>
</div>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #1589E3;padding-left:5px;border-left:5px solid #1589E3;'>
<a class='murub' href='https://www.lapakinfo.net/p/css-minifer.html' style='color:white' target='_blank' title='CSS Minifier'>CSS Minifer<span class='sasabilo' style='background:#1589E3'><i class='fa fa-css3'/></span></a>
</div>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #1589E3;padding-left:5px;border-left:5px solid #1589E3;'>
<a class='murub' href='https://www.lapakinfo.net/p/color-picker.html' style='color:white' target='_blank' title='Color Picker'>Color Picker<span class='sasabilo' style='background:#1589E3'><i class='fa fa-paint-brush'/></span></a>
</div>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #1589E3;padding-left:5px;border-left:5px solid #1589E3;'>
<a class='murub' href='https://www.lapakinfo.net/p/parse-html.html' style='color:white' target='_blank' title='Parse HTML'>Parse HTML
<span class='sasabilo' style='background:#1589E3'><i class='fa fa-html5'/></span></a>
</div>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #1589E3;padding-left:5px;border-left:5px solid #1589E3;'>
<a class='murub' href='https://www.lapakinfo.net/p/words-counter.html' style='color:white' target='_blank' title='Ebook'>Words Counter<span class='sasabilo' style='background:#1589E3'><i class='fa fa-coffee'/></span></a>
</div>
</div>
</div></div>
<div class='sect-left section' id='footer-sec3' name='Widget 3'><div class='widget HTML' data-version='1' id='HTML993'>
<h2><i class='fa fa-sitemap'/>
About Blog</h2>
<div class='foooter'>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #1589E3;padding-left:5px;border-left:5px solid #1589E3;'>
<a class='murub' href='https://www.lapakinfo.net/p/about.html' style='color:white' target='_blank' title='About'>About<span class='sasabilo' style='background:#1589E3'><i class='fa fa-user-circle-o'/></span></a>
</div>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #1589E3;padding-left:5px;border-left:5px solid #1589E3;'>
<a class='murub' href='https://www.lapakinfo.net/p/contact-us.html' style='color:white' target='_blank' title='Contact'>Contact Us<span class='sasabilo' style='background:#1589E3'><i class='fa fa-address-card'/></span></a>
</div>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #1589E3;padding-left:5px;border-left:5px solid #1589E3;'>
<a class='murub' href='https://www.lapakinfo.net/p/privacy-policy_24.html' style='color:white' target='_blank' title='Privacy'>Privacy Policy<span class='sasabilo' style='background:#1589E3'><i class='fa fa-lock'/></span></a>
</div>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #1589E3;padding-left:5px;border-left:5px solid #1589E3;'>
<a class='murub' href='https://www.lapakinfo.net/p/disclaimer.html' style='color:white' target='_blank' title='Disclaimer'>Disclaimer<span class='sasabilo' style='background:#1589E3'><i class='fa fa-coffee'/></span></a>
</div>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #1589E3;padding-left:5px;border-left:5px solid #1589E3;'>
<a class='murub' href='https://www.lapakinfo.net/p/sitemap.html' style='color:white' target='_blank' title='Sitemap'>Sitemap<span class='sasabilo' style='background:#1589E3'><i class='fa fa-sitemap'/></span></a>
</div>
</div>
</div>
</div>
</div>
</div>

5. Untuk meratakan kode tersebut agar responsive di mobile silahkan kalian salin kode di bawah ini dan letakan tepat di bawah kode /* CSS FOR LAYOUT */.

/* Fix Berantakan Layout */
body#layout .foooter {
  display:none;
}

body#layout #lower {
  display: none;
}

body#layout .footer-sections {
  display: none;
}

6. Simpan template kalian dan selesai.

Jika kalian menggunakan template selain Viomagz silahkan sesuaikan penempatan kode <Footer> agar tampil sempurna.

Itulah Cara Membuat Menu Navigasi Footer Blog Keren ( 3 column ) Jika kalian masih bingung silahkan bertanya di kolom komentar. Terimakasih dan semoga bermanfaat

==Iklan Dipate Disini===