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
.png)
