Cara Membuat Footer Responsive Di Blogger : 100% KEREN - Jejakdzgn

Cara Membuat Footer Responsive Di Blogger : 100% KEREN

Jejakdzgn.my.id - Pada kesempatan kali ini, saya akan membahas cara membuat footer responsive di blogger.

cara-membuat-footer-responsive-di-blogger.

Sepeti yang kita ketahui, bahwa footer dapat membantu kita untuk membuat template menjadi lebih keren, Footer  merupakan bagian dasar atau paling bawah dari sebuah website.

Untuk fungsi dari footer ini banyak sekali, salah satu nya adalah untuk menaruh informasi hak cipta. Nah, jika anda ingin membuat footer responsive dan menjadi keren seperti saya, anda bisa menerapkannya di blog anda, untuk menerapkan nya bisa lihat cara nya dibawah ini.

Cara Membuat Footer Responsive Di Blogger

Untuk membuat nya cukup mudah, hanya menambahkan kode CSS nya saja.

Langkah 1 : masuk ke akun blogger anda

Langkah 2 : jika sudah masuk, Buka TEMA > Edit HTML.

Langkah 3 : copy kode dibawah ini, lalu tempelkan diatas kode ]]></b:skin>.

/* CSS Footer Keren Jejakdzgn */
#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}}

Langkah 4 : selanjutnya anda copy kode dibawah ini, lalu tempelkan diatas kode <!-- footer nav menu -->.

<!-- 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='#' 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='#' 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='#' 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='#' 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='#' 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>

Langkah 5 : Jika sudah, jangan lupa tambahkan kode dibawah ini dibawah kode /* CSS FOR LAYOUT */.

body#layout .foooter {
display:none;
}

body#layout #lower {
display: none;
}

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

Langkah 6 : Simpan.

Akhir Kata :

Sampai disini tutorial Cara Membuat Footer Responsive Di Blogger, jika ada pertanyaan mengenai tutorial diatas, bisa komentar dibawah ini.
Show Comments
Hide Comments

Belum ada Komentar untuk "Cara Membuat Footer Responsive Di Blogger : 100% KEREN"

Posting Komentar

Catatan Untuk Para Jejaker
  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel