Cara Membuat Menu Footer Minimalis Ala Arlinadzgn

Pada postingan kali ini saya akan membagikan tutorial bagaimana cara membuat menu footer minimalis ala Arlinadzgn.

Jika kalian pernah mengunjungi situs blog Arlinadzgn, pasti kalian pernah melihat dibagian footer ada menu footer minimalis. Jika kalian tertarik ingin membuat menu footer seperti itu, kalian dapat membuatnya sekarang juga dengan mengikuti tutorial ini, Selain terlihat menarik, cara pemasangannya juga cukup mudah & simple. Ikuti tutorial dibawah ini jika ingin memiliki mini footer seperti Arlina.

Cara Membuat Menu Footer Ala Arlinadzgn
Cara ini khusus untuk template Viomagz, jika kalian menggunakan template lain, silahkan skip cara ini, dan lanjutkan ke cara berikutnya.

1. Login ke  Blogger,
2. Masuk ke menu Tema Kemudian Pilih Edit HTML,
3. Cari Kode  /*  FOOTER NAV MENU  */, Kemudian hapus kodenya ( kodenya mirip seperti yang sudah saya HIGHLIGHT dibawah ini, 

/* FOOTER NAV MENU */
#footer-navmenu {
background: #292929;
padding: 25px 0px;
font: bold 14px Raleway, Arial, sans-serif;
color: #ffffff;
}
#footer-navmenu-container {
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
#footer-navmenu ul {
list-style: none;
margin: 0;
}
#footer-navmenu ul li {
display: inline-block;
margin: 6px 0;
}
#footer-navmenu ul li::after {
content:"/";
}
#footer-navmenu ul li:last-child::after {
content:"";
}
#footer-navmenu ul li a {
color: #ffffff;
margin: 0 15px;
}
#footer-navmenu ul li a:hover {
color: #ffffff;
border-bottom: 2px solid #ffffff;
}

Ganti Menjadi Kode Dibawah Ini .

/* FOOTER NAV MENU */
#footer-navmenu{background:#FF69B4;padding:30px 0;font:bold 14px Roboto, Arial, sans-serif;color:#ffffff;}
#footer-navmenu-container{max-width:1000px;margin:0 auto;text-align:center}
#footer-navmenu ul{list-style:none;margin:0}
#footer-navmenu ul li{display:inline-block;margin: 2px 0;}
#footer-navmenu ul li a{color:#ff6984;margin:0 1px;padding:9px 12px;border-radius:100px;background:#fff;box-shadow: 0 2px 7px rgba(255,255,255,.28), inset 0 2px 7px #FFC0CB;}
#footer-navmenu ul li a:hover{color:#ff69b4;background:#fff;box-shadow: 0 2px 7px rgba(255,255,255,.28), inset 0 2px 7px #ff69b4;}

Untuk template yang bukan Viomagz, ikuti tutorial ini.
Dan Biasanya css footernya hampir hampir mirip yang beda cuman id nya aja,  

1. Cari kode css  /*  FOOTER  */ kurang lebih seperti dibawah ini



/* FOOTER */
#footer-container {
background: #555;
padding: 20px 5px;
overflow: hidden;
color: #fff;
font-size: 14px;
text-align: center; !important;
}
#footer-wrapper {
max-width: 100%;
margin: 0 auto;
}
#footer-wrapper a {
color: #ddd;
}
#footer-wrapper a:hover {
color: #fff;
}

2. Ganti dengan kode css ini.



/* Footer Menu Minimalis */
#footer-container{
background:linear-gradient(to right,#9b50e2,#3c4cdd);
color:#fff;
padding:35px 5px;
overflow:hidden;
font-size:14px;
text-align:center;
}
#footer-wrapper{
max-width:1000px;
margin:0 auto;
}
#footer-wrapper a{
color:#fff;
}
#footer-wrapper a:hover{
color:#fff;
}

Untuk HTMLnya, kalian dapat menggunakan yang sudah ada dibawaan template, atau jika HTMLnya sudah kalian hapus atau memang tidak ada, kalian dapat mengcopy kode HTML dibawah ini :

<!-- footer nav menu -->
<div id='footer-navmenu'>
<nav id='footer-navmenu-container'>
<!-- menu navigasi footer start -->
<ul>
<li><a href='https://www.anirocksite.com/p/about.html'>About</a></li>
  <li><a href='https://www.anirocksite.com/p/contact-us.html'>Contact</a></li>
  <li><a href='https://www.anirocksite.com/p/Disclaimer.html'>Disclaimer</a></li>
<li><a href='https://www.anirocksite.com/p/privacy-policy.html'>Privacy Policy</a></li>
  </ul>
<!-- menu navigasi footer end -->
</nav>
</div>
<!-- footer nav menu end -->

Setelah selesai jangan lupa Simpan.
Itulah tutorial singkat bagaimana cara membuat Menu Footer Minimalis.

Semoga bermanfaat :D