Membuat Footer Keren Responsive Tanpa Edit HTML

Memodifikasi template blog adalah suatu yang menyenangkan. Selain untuk memperindah tampilan blog agar tampak lebih keren di mata pengunjung blog juga akan memberikan kesan elegan dan profesional. Merubah tampilan navmenu footer dan footer juga akan berpengaruh pada tampilan blog agar tampak lebih cantik dan elegan.

Selain tampilan yang cantik juga perlu di perhatikan elemen-elemen code yang dimasukkan kedalam Template agar tidak ada kode yang menumpuk yang justru akan merusak Template blog kita.

Setelah kita bahas Cara Menyembunyikan Header dan NavMenu Template LinkMagz. Kali ini saya akan berikan panduan cara membuat Footer keren responsive pada Template LinkMagz tanpa edit HTML.

Pertama tentunya sudah punya blog dong.. kemudian kita masuk dan menuju ke menu "Tata Letak" Blog. Lalu ke "Custom CSS" yang berada di paling atas. Klik dan Pastekan Code CSS dibawah ini dan Simpan.

body#layout .foooter{display:none;}body#layout #lower{display:none;}body#layout .footer-sections{display:none;}#footer{background:#103142;color:#fff;padding:0;margin:0 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(0,129,200,0.8),rgba(0,38,60,0.8),rgba(0,25,40,0.8));}.footer-sections{overflow:hidden;margin:0 auto;padding:50px;}.sect-left{display:inline-block;float:left;width:48%;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 i{width:14px;height:14px;margin-right:3px;color:#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:15px;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 (min-width:481px) and (max-width:1099px){.sect-left{width:48%;}.footer-contact{width:100vw;left:50%;align-item:center;}.footer-sections{padding:30px;}}@media only screen and (max-width:480px){.sect-left{width:100%;margin-right:0;margin-bottom:20px;}.sect-left:last-child{margin-bottom:0;}.footer-sections{padding:10px;}}

Masih di Menu Tata Letak, Kita menuju Ke Footer yang berada di bagian paling Bawah Menu Tata Letak. Klik dan paste semua Kode dibawah ini kedalam nya dan Simpan.

<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'>
<div class='foooter'>
<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><i class="fas fa-tools"></i> PERALATAN</h2>
<div class='foooter'>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #0081c8;padding-left:5px;border-left:5px solid #0081c8;'>
<a class='murub' href='# style='color:white' title='Color Picker'>Color Picker<span class='sasabilo' style='background:#0081c8'><i class='fa fa-paint-brush'/></i></span></a>
</div>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #0081c8;padding-left:5px;border-left:5px solid #0081c8;'>
<a class='murub' href='# style='color:white' title='Parse HTML'>Parse HTML<span class='sasabilo' style='background:#0081c8'><i class='fa fa-html5'/></i></span></a>
</div>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #0081c8;padding-left:5px;border-left:5px solid #0081c8;'>
<a class='murub' href='#' style='color:white' title='CSS Minifier'>CSS Minifier<span class='sasabilo' style='background:#0081c8'><i class='fa fa-css3'/></i></span></a>
</div>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #0081c8;padding-left:5px;border-left:5px solid #0081c8;'>
<a class='murub' href='#' style='color:white' title='Rgb Converter'>Rgba Converter<span class='sasabilo' style='background:#0081c8'><i class="fas fa-palette"></i></span></a>
</div>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #0081c8;padding-left:5px;border-left:5px solid #0081c8;'>
<a class='murub' href='#' style='color:white' title='CSS Segitiga'>CSS ⛰ Generator<span class='sasabilo' style='background:#0081c8'><i class="fas fa-shapes"></i></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</i></h2>
<div class='foooter'>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #0081c8;padding-left:5px;border-left:5px solid #0081c8;'>
<a class='murub' href='#' style='color:white' title='About'>About<span class='sasabilo' style='background:#0081c8'><i class='fa fa-user-circle-o'/></i></span></a>
</div>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #0081c8;padding-left:5px;border-left:5px solid #0081c8;'>
<a class='murub' href='#' style='color:white' title='Contact'>Contact Us<span class='sasabilo' style='background:#0081c8'><i class='fa fa-address-card'/></i></span></a>
</div>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #0081c8;padding-left:5px;border-left:5px solid #0081c8;'>
<a class='murub' href='#' style='color:white' title='Privacy'>Privacy Policy<span class='sasabilo' style='background:#0081c8'><i class='fa fa-lock'/></i></span></a>
</div>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #0081c8;padding-left:5px;border-left:5px solid #0081c8;'>
<a class='murub' href='#' style='color:white' title='Disclaimer'>Disclaimer<span class='sasabilo' style='background:#0081c8'><i class='fa fa-coffee'/></i></span></a>
</div>
<div style='padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #0081c8;padding-left:5px;border-left:5px solid #0081c8;'>
<a class='murub' href='#' style='color:white' title='Sitemap'>Sitemap<span class='sasabilo' style='background:#0081c8'><i class='fa fa-sitemap'/></i></span></a>
     </div>
    </div>
   </div></div>
<div class='footer-contact'>
<p><label><i class='fa fa-rss'/></i></label>
<span class='sotabilo aa'><a class='murub' href='http://www.blogger.com/follow-blog.g?blogID=BLOG ID ANDA' target='_blank'>Follow Blog</a></span>
</p>
</div>
        <p>&copy; 2020. | Designed by: <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlmur-7Ggv9XF6bdEIev_gD1Byfk1sK8OQ1UAL2NQPcNwAmRXOQMeZIbo0NfMELS0jnXbAxC98A6C68pTi-ewM11sA0yJ4oIt1vB4G9fCOm0iIGP6RmgTFR5mrxgJeXjaUx0kCFfhMkpw/s200/IMG_20200727_091338.png" width="25" height="16" alt="logo" /> All Rights Reserved.</p>
  
 </div>
</div>

Tambahan: Jika blog belum terpasang kit script dari font awesome untuk menampilkan icon, anda bisa mendapatkan script nya gratis di website nya. Dan setelah mendapatkan script kit nya silahkan masukkan script yang telah diperoleh kedalam Custom Javascript Footer di Menu Tata Letak blog Template LinkMagz. Selesai.

Setelah semua selesai silahkan lihat footer blog anda dengan tampilan baru yang lebih elegan. Untuk modifikasi selanjutnya silahkan terus ikuti blog ini.