Cara Membuat Footer Simple dan Keren Seperti Arlina Design di Blogger

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 SHOWDZGN */
#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 SHOWDZGN */
#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.
Tampilkan Komentar
Sembunyikan Komentar

2 Responses to "Cara Membuat Footer Simple dan Keren Seperti Arlina Design di Blogger"

  1. Kalau bikin footer seperti showdzgn caranya bagaimana mas?

    ReplyDelete
  2. I love this info presented and possesses given me some type of resolve forpersistance to succeed i really enjoy seeing, so sustain the excellent work. ui design agency san francisco

    ReplyDelete

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar semua.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel