×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Cara Membuat Menu Footer Minimalis Ala Arlinadzgn

November 26, 2019   • 2 Comments

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, 
  4. /* 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

  2. /* 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;
    }
  3. Ganti dengan kode css ini.

  4. /* 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

Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

2 Responses to "Cara Membuat Menu Footer Minimalis Ala Arlinadzgn"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

  1. Replies
    1. lihat yang ada di pict, punya saya sudah dilepas, karna gak masang tool blogger lagi

      Delete

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

© Copyright 2020 Anirock Site - All Rights Reserved Created With