Cara Buat dan Rombak Footer Simple Minimalis di Blog

Cara Buat dan Rombak Footer Simple Minimalis di Blog. pada kesempatan kali ini, saya akan memberikan Tutorial buat dan rombak tampilan Footer Simple Minimalis di Blog. Untuk pemasangannya cukup mudah. Jadi silakan simak tutorial dibawah ini baik – baik.

Untuk tampilannya hampir seperti Footer arlina desain. Oke langsung saja.

Cara Buat dan Rombak Footer Simple Minimalis di Blog

  1. Masuk ke Blogger, klik TEMA, lalu pilih EDIT HTML. (Untuk tema blogger baru edit html terletak di dalam titik 3 vertikal kanan atas).
  2. ~ Untuk template Viomagz
  3. Silakan cari /* FOOTER NAV MENU */ HAPUS kode dibawah ini yang hamper mirip – mirip.

    
    /* 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 dengan dibawah ini
    
    /* FOOTER NAV */
    #footer-navmenu{border-bottom:1px dotted rgba(0,0,0,0.08);background:#282828;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:#ffffff;margin:0 1px;padding:9px 12px;border-radius:3px;background:#2f2f2f}
    #footer-navmenu ul li a:hover{color:#ffffff;background:#373636}
    

    Silakan cari /* FOOTER*/ HAPUS kode dibawah ini yang hamper mirip – mirip.

    
    /* FOOTER */
    #footer-container {
    background: #222222;
    padding: 20px 5px;
    overflow: hidden;
    color: #dddddd;
    font-size: 12px;
    text-align: center;
    }
    #footer-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    }
    #footer-wrapper a {
    color: #dddddd;
    }
    #footer-wrapper a:hover {
    color: #ffffff;
    }
    
    Ganti dengan dibawah ini
    
    /* FOOTER */
    #footer-container{background:#282828;color:#dddddd;padding:35px 5px;border-top:1px dotted rgba(255,255,255,0.12);overflow:hidden;font-size:12px;text-align:center}
    #footer-wrapper{max-width:1000px;margin:0 auto}
    #footer-wrapper a{color:#dddddd}
    #footer-wrapper a:hover{color:#ffffff}
    
  4. ~ Untuk template yang lain silakan letakan kode dibawah ini di ATAS </style>.
  5. 
    /* FOOTER NAV */
    #footer-navmenu{border-bottom:1px dotted rgba(0,0,0,0.08);background:#282828;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:#ffffff;margin:0 1px;padding:9px 12px;border-radius:3px;background:#2f2f2f}
    #footer-navmenu ul li a:hover{color:#ffffff;background:#373636}
    /* FOOTER */
    #footer-container{background:#282828;color:#dddddd;padding:35px 5px;border-top:1px dotted rgba(255,255,255,0.12);overflow:hidden;font-size:12px;text-align:center}
    #footer-wrapper{max-width:1000px;margin:0 auto}
    #footer-wrapper a{color:#dddddd}
    #footer-wrapper a:hover{color:#ffffff}
    
  6. Simpan Tema, Lihat Hasilnya.

Mungkin itu yang dapat admin sampaikan semoga dapat bermanfaat sekian dan terima kasih.

Cara Buat dan Rombak Footer Simple Minimalis di Blog
Wahyu Achmad
Her Blue Sky

Postingan Terkait

5 komentar

  1. tutorialnya bermanfaat gan.. terima kasih

    BalasHapus
  2. Kak punya saya kok footer nav nya jadi berdekatan ya?

    BalasHapus
    Balasan
    1. 1. tambahkan kode css ini gan..
      #footer-navmenu ul li a {display: inline-block;}
      2. cari kode dibawah ini, kemudian hapus

      #footer-navmenu ul li a {
      margin: 0px 8px;
      }

      pastikan footer-navmenu ul li a yang ada di dalam tag @media only screen and (max-width: 480px);

      biasanya seperti ini


      @media only screen and (max-width: 480px){
      ...
      #footer-navmenu ul li a {
      margin: 0px 8px;
      }
      ...
      }

      Hapus

Posting Komentar