×

Author / Admin / Editor

     Jagoan Redesign    

Blog yang membahas Tutorial Blogger, Games, Template, Tips Adsense, SEO, Web Design dan Teknologi

Iklan Bawah Posting

Cara Membuat Footer 3 Kolom Responsive keren di Blogger

Jagoan Redesign - Kali ini saya akan membagikan sebuah tutorial Cara Membuat Footer 3 Kolom Responsive keren di Blogger para blogger pastinya tidak asing lagi dengan namanya Widget Footer.

Cara Membuat Footer 3 Kolom Responsive keren di Blogger

Footer adalah bagian dasar atau paling bawah dari sebuah blog. Fungsi utamanya adalah sebagai berisi informasi hak cipta atau credit blog dan dijadikan sebagai tempat untuk menampilkan widget blog.


Cara Membuat Footer 3 Kolom Responsive keren di Blogger 

1. Silahkan Login ke Blogger kamu.
2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.
3. Cari kode berikut ini ]]></b:skin> atau </style>dan pastekan kode dibawah ini tepat DIATAS kode tersebut. 
/* Footer Keren by Jagoan Redesign*/
#footer{background:#0c0c0c;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}}
3. Silahkan kamu cari<div id='footer'>....   </div>atau kode dibawah ini, dan Hapus kode tersebut agar tidak terjadi bentrok dengan footer tersebut.

  <div id='footer-navmenu'>
  <nav id='footer-navmenu-container'>
  
<!-- menu navigasi footer start -->
<ul>
  <li><a href='#'>About</a></li>
  <li><a href='#'>Contact</a></li>
  <li><a href='#'>Privacy Policy</a></li>
  <li><a href='#'>Disclaimer</a></li>
</ul>
<!-- menu navigasi footer end -->

  </nav>
  </div>
4. Selanjutnya, silahkan kamu copy kode dibawah ini dan paste di tempat kode yang kamu hapus tadi.
<!-- Footer keren -->
<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>Nama Anda<br/>
<label><span><i class='fa fa-map-marker'/></span></label>Alamat Anda</p>
<p class='phone'><label><i class='fa fa-whatsapp'/></label>
<span>Nomor Telpon Anda</span><br/>
<label><i class='fa fa-facebook-official'/></label>
<span>Alamat Facebook Anda</span><br/>
<label><i class='fa fa-envelope-o'/></label>
<span>Alamat Email Anda</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=XXX' target='_blank'>Follow Blog</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>Title</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='/p/jasa-optimasi-template-blogger.html' style='color:white' target='_blank' title='Home'>Title Menu<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='/p/css-minifier.html' style='color:white' target='_blank' title='CSS Minifier'>Title Menu<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='/p/color-picker.html' style='color:white' target='_blank' title='Color Picker'>Title Menu<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='/p/parse-html.html' style='color:white' target='_blank' title='Parse HTML'>Title Menu
<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='/p/words-counter.html' style='color:white' target='_blank' title='Ebook'>Title Menu<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'/>
Navigasi</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='#' 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='#' 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='#' 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='#' 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='#' 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>

Jika kamu ingin merapikan tampilan footer tersebut, masukkan kode CSS ini dibawah kode  /* CSS FOR LAYOUT */
/* Layout by Jagoan Redesign */
body#layout .foooter {
  display:none;
}

body#layout #lower {
  display: none;
}

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

5. Kalau sudah silahkan klik SIMPAN dan Selesai.

Nah, itu adalah tutorial Cara Membuat Footer 3 Kolom Responsive keren di Blogger, apabila kamu memiliki pertanyaan silahkan tanya di kolom komentar dibawah artikel ini.
Previous
Next Post »
avatar
Penulis Blog dan redesigner template blogger.

Related Posts

Komentar
Tutup Komentar

Komentar

  • Berkomentarlah secara bijaksana dan bertanggung jawab.
  • Tidak diperbolehkan mempromosikan barang atau berjualan.
  • Tulis komentar Anda untuk hal yang masih berhubungan dengan posting pada halaman ini.
  • Dilarang memuat Link Aktif pada kolom komentar
  • Komentar dengan link aktif akan otomatis dihapus.
  • Jika ingin menulis kode silahkan anda parse terlebih dulu (terutama Javascript dan HTML)
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel