Cara membuat footer keren responsive di blogger
Footer sangat berperan penting untuk sebuah website atau blog. Dengan adanya footer, visitor yang singgah di suatu website untuk mencari informasi dapat dengan mudah mendapatkan apa yang dia dicari.
 |
| TechPapuaID |
Footer juga dapat dibuat sedemikian rupa agar menjadi lebih keren untuk sebuah website atau blog tersebut.
Bagi kalian yang ingin mendaftarkan blog atau website kalian ke AdSense, ada baiknya kalian melihat dulu apakah footer kalian sudah cukup baik untuk mendaftarkan AdSense atau belum.
Selain Footer ada beberapa juga yang menjadi pertimbangan pihak AdSense untuk approve blog atau website kalian, contoh kecil adalah sitemap, kalian bisa baca Sitemap responsive untuk blogger. disana ada beberapa script sitemap responsive yang bisa kalian pakai untuk blog atau website kalian agar menjadi peluang besar untuk di terimanya AdSense.
Berbeda dengan Footer pada template-template pada umumnya, Footer yang akan kita terapkan di template Viomagz kali ini sangat keren dan responsive.
Jika kalian ingin mempunyai Footer yang keren silahkan baca artikel ini baik-baik agar tidak terjadi eror ketika ingin di terapkan ke blog atau website kalian
Langkah pertama yang harus kalian lakukan adalah login ke blog atau website kalian masing-masing.
Selanjutnya kalian menuju ke halaman Tema Lalu klik Edit HTML.
Langkah selanjutnya kalian cari code :
]]></b:skin>/* CSS Footer By TechPapuaID */
#footer{background:#000000;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}
.sect-left h2 svg {width: 14px;height: 14px;margin-right: 3px;fill: #ffffff;}
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,#1a73e8,#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}}<!-- footer nav menu -->
<!-- Footer keren by TechPapuaID-->
<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><a href="https://api.whatsapp.com/send?phone=+62xxx" target='_blank'>Whatsapp</a></span><br/>
<label><i class='fa fa-facebook-official'/></label>
<span><a href="#" target='_blank'>Facebook</a></span><br/>
<label><i class='fa fa-envelope-o'/></label>
<span>NAMA@MAIL.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=ID BLOG ANDA' 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>Halaman</h2>
<div class='foooter'>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #ee0979;padding-left:5px;border-left:5px solid #ee0979;'>
<a class='murub' href='#' style='color:white' title='Home'>Home<span class='sasabilo' style='background:#ee0979'><i class='fa fa-home'/></span></a>
</div>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #ee0979;padding-left:5px;border-left:5px solid #ee0979;'>
<a class='murub' href='#' style='color:white' title='CSS Minifier'>CSS Minifier<span class='sasabilo' style='background:#ee0979'><i class='fa fa-css3'/></span></a>
</div>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #ee0979;padding-left:5px;border-left:5px solid #ee0979;'>
<a class='murub' href='#' style='color:white' title='Color Picker'>Color Picker<span class='sasabilo' style='background:#ee0979'><i class='fa fa-paint-brush'/></span></a>
</div>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #ee0979;padding-left:5px;border-left:5px solid #ee0979;'>
<a class='murub' href='#' style='color:white' title='Parse HTML'>Parse HTML
<span class='sasabilo' style='background:#ee0979'><i class='fa fa-html5'/></span></a>
</div>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #ee0979;padding-left:5px;border-left:5px solid #ee0979;'>
<a class='murub' href='#' style='color:white' title='Ebook'>Ebook<span class='sasabilo' style='background:#ee0979'><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 #ee0979;padding-left:5px;border-left:5px solid #ee0979;'>
<a class='murub' href='#' style='color:white' title='About'>About<span class='sasabilo' style='background:#ee0979'><i class='fa fa-user-circle-o'/></span></a>
</div>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #ee0979;padding-left:5px;border-left:5px solid #ee0979;'>
<a class='murub' href='#' style='color:white' title='Contact'>Contact Us<span class='sasabilo' style='background:#ee0979'><i class='fa fa-address-card'/></span></a>
</div>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #ee0979;padding-left:5px;border-left:5px solid #ee0979;'>
<a class='murub' href='#' style='color:white' title='Privacy'>Privacy Policy<span class='sasabilo' style='background:#ee0979'><i class='fa fa-lock'/></span></a>
</div>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #ee0979;padding-left:5px;border-left:5px solid #ee0979;'>
<a class='murub' href='#' style='color:white' title='Disclaimer'>Disclaimer<span class='sasabilo' style='background:#ee0979'><i class='fa fa-coffee'/></span></a>
</div>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #ee0979;padding-left:5px;border-left:5px solid #ee0979;'>
<a class='murub' href='#' style='color:white' title='Sitemap'>Sitemap<span class='sasabilo' style='background:#ee0979'><i class='fa fa-sitemap'/></span></a>
</div>
</div>
</div>
</div>
</div>
</div>Silahkan kalian ganti sesuai kebutuhan blog atau website kalian yang sudah saya beri tanda MERAHJika semuanya sudah terpasang langkah terakhir adalah memasang CSS lagi, agar tampilan pada mobile lebih responsive dan tidak acak-acakan.
Silhakan kalian cari code :
/* CSS FOR LAYOUT */Jika sudah dapat, Silahkan kalian copy code CSS di bawah ini dan letakkan tepat di bawah code tersebut
body#layout .foooter {
display:none;
}
body#layout #lower {
display: none;
}
body#layout .footer-sections {
display: none;
}Jika semua sudah beres dan icon pada footer tidak muncul, silahkan kalian copy code dibawah ini lalu letakan tepat di atas code </head> ( Jika Belum Ada )
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
