Perhatikan bagian bawah atau footer edit blog tema ini ada terdapat navigasi yang juga berfungsi sebagai footer link, sobat dapat saja memodifikasinya sesuai dengan selera. Kodenya bersih dan hanya terdiri dari dua elemen dasar: CSS+HTML, tidak ada JavaScript yang diperlukan. Saya telah menyempurnakannya dan tentu saja telah mengujinya.
Untuk menerapkannya tentu saja sobat harus berani mengedit HTML blogger, jika ragu silahkan backup terlebih dahulu templatenya. Beruntungnya kode CSS tidak akan melukai template sobat sampai error. Saya akan memberikan dukungan melalui tanya jawab komentar dibawah konten atau artikel ini:
1. Berani memulai.
- Masuk kepengaturan blogger
- Pilih Tema atau Theme
- Pilih Edit HTML.
Sekali sobat memilih "edit HTML" maka yang muncul adalah halaman editorial HTML blogspot berisikan seluruh kode template sobat. Sobat hanya perlu mencari dua kode untuk meletakan kode kode yang telah saya buat. Jadi tetaplah pada posisi edit HTML ini, mari kita lanjutkan membacanya:
2. Tambahkan HTML
(Maaf, saya sertakan menjadi dua bahasa Inggris dan Indonesia karena ada permintaan dari teman yang bukan orang Indonesia)Put the HTML code below the tag <body> for new blogspot theme, or if you don’t have it in your theme because of old version, the tag will seem like: <body expr:class='"loading" + data:blog.mobileClass'> and just put the following HTML codes below it.
(Letakakan kode HTML dibawah kode <body> untuk template blogspot versi baru, atau jika sobat tidak menemukannya karena menggunakan tema blogspot model lama cari kode: <body expr:class='"loading" + data:blog.mobileClass'> dan letakan saja kode HTML dibawah ini tepat di bawah kode tersebut.):
<div class='navbar'>
<a class='active' href='#your own link'>👤Privasi</a>
<a href='#your own link'>🌐Perihal</a>
<a href='#your own link'>👫Follow US</a>
</div>
Put the following codes below above the tag </head>:
Put the following codes below above the tag </head>:
(Letakan kode berikut diatas kode </head>:)
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color:white;
position: fixed;
bottom: 0;
width: 100%;
z-index:90;
}
.navbar a {
float: left;
display: block;
color: #333;
text-align: center;
padding: 14px 14px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: grey;
color: black;
}
.navbar a.active {
background-color: #FFF0F5;
color: #333;
}
.main {
padding: 16px;
margin-bottom: 30px;
}
</style>
Save theme (Simpan Tema)
That's All, Selesai.
That's All, Selesai.
Fiturnya:
- Responsive
- Mobile
- Fixed (artinya footer akan selalu tampil saat halaman blog/konten di scroll keatas dan kebawah)
Bagaimana mudah bukan? itu bukan kode yang panjang dan rumit, dan jika ada pertanyaan mengapa, kenapa, bagaimana, silahkan ajukan pertanyaan.
Rahasia atau teknik "fixed"-nya
Buat yang sedikit mengerti CSS, rahasianya terletak pada kode aba-aba CSS : z-index dan fixed. Perhatikan kode yang saya sorot hijau terang dibawah:.navbar {
overflow: hidden;
background-color:white;
position: fixed;
bottom: 0;
width: 100%;
z-index:90;
}
.navbar a {
float: left;
display: block;
color: #333;
text-align: center;
padding: 14px 14px;
text-decoration: none;
font-size: 17px;
}
Posisi saya berikan aba aba: fixed
Tumpukan layer tampilan saya beri aba aba menggunakan z-index 90 karena nilai 90 itu berarti sudah berada paling depan halaman konten.
www.editblogtema.net
link footer ini memang bagus banget kalau dikasih menu ya gan, jadi bisa bikin pembaca klik itu mennu kalau udah selesai membaca seluruh konten artikel, mungkin kepo ingin tahu admin blog, atau ingin kontak yang punya blog, jadi bagus nya memang menu tsb bisa ditaruh di footer blog ya ;)
BalasHapusDan sangat enteng, setelah saya tambahkan ke blog tidak ngaruh sama loading, jelaslah karena hanya CSS simple saja.
Hapusbenar banget itu gan, blog sekarang memang harus cepat, harus gesit jika tidak maka hancurlah sudah,...seperti blog agan ini contohnya, cepat oi larinya, loadingnya seperti torpedo, jadi suka kunjungan ke blog ini,..ea
BalasHapusJadi malu...ini blog tidak cepat karena banyak dipasangi kode buat contoh
Hapuseh iya yaaaa, footernya tetap muncul nih, jadi gak ribet nyekrol sampai bawah baru keliatan.
BalasHapusBetewe, kalau masang2 tambahan kayak gini bakalan mempengaruhi loading ga ya?
Saya jadi ga utak atik karena takut berat loadingnya :D
Tidak, foooter ini tidak bakalan mempengaruhi loading blog, alasannya:
Hapus1. karena tulis berdasarkan standar dan basis elemen blog itu sendiri.
2. Hanya sedikit style (tidak terlalu banyak penggunaan style) CSS yang support hampir semua browser termasuk browser jadul seperti internet explorer.
3. Minus JavaScript. JavaScript sangat penting dalam menjalankan fungsi fungsi pada HTML, namun pada navigasi bagian footer ini saya hanya membuatnya dengan dua elemen HTML dan CSS saja.