Cara Buat dan Rombak Footer Simple Minimalis di Blog - Mediaachmad

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

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}

3. ~ Untuk template yang lain silakan letakan kode dibawah ini di ATAS </style>.

/* 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}

4. Simpan Tema, Lihat Hasilnya.

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