Cara Membuat Footer Simple dan Keren Seperti Arlina Design di Blogger

Jagoandzgn.com - Pada kesempatan kali ini saya memberikan sebuah tutorial bagaimana Cara Membuat Footer Simple dan Keren di Blog Seperti Arlina Design dengan mudah. Tapi sebelum itu saya akan memberitahukan apa sih itu footer dan fungsi dari footer tersebut.

Apa Itu Footer ?

Footer adalah bagian kaki dari body sebuah blog, sebuah space atau ruang yang berada pada bagian bawah dari batang tubuh sebuah blog. Posisinya berlawanan dengan Header Blog yang terletak pada bagian paling atas.

Fungsi dari Footer

Footer memiliki banyak fungsinya. Yang jelas, sebuah Footer pada blog tetap bisa diisi dengan teks, gambar, animasi dan video. Sama dengan bagian bagian lainnya. Tapi lazimnya bagian tersebut digunakan para Blogger untuk menampilkan fitur dan tampilan pendukung tertentu untuk kelengkapan sebuah blog.

Cara Membuat Footer Simple dan Keren di Blog Seperti Arlina Design

1. Silahkan kamu login ke Blogger.com dan masuk ke dashboard blogger.

2. Masuk ke menu TEMA > klik Edit HTML [untuk tema baru silahkan klik titik 3 diatas].
3. Tutorial ini untuk viomagz, apabila kamu mau template lain silahkan di sesuaikan.
4. Silakan cari kode berikut /* FOOTER NAV MENU */ Lalu HAPUS kode dibawah ini yang hampir mirip dengan kode tersebut.

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

5. Lalu Ganti dengan kode dibawah ini.

/* FOOTER NAV JAGOANDZGN.COM */
#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}

6. Silakan cari kode berikut /* FOOTER */ Lalu HAPUS kode dibawah ini yang hampir mirip dengan kode tersebut.

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

7. Lalu Ganti dengan kode dibawah ini

/* FOOTER JAGOANDZGN.COM */
#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}

8. Kalau sudah silahkan klik SIMPAN dan Selesai.

1. Untuk kamu pengguna template yang lain, silakan letakan kode dibawah ini tepat DIATAS </style> atau ]]></b:skin>

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

2. Kalau sudah silahkan klik SIMPAN dan Selesai.

Untuk penampilannya kamu bisa lihat Gambar dibawah ini.

Bagaimana mudah bukan tutorial bagaimana Cara Membuat Footer Simple dan Keren di Blog Seperti Arlina Design untuk kamu yang error dalam penerapan kode, silahkan komen di kolom komentar dibawah ini.