Sobat tahukan kalau tema contempo bawaan blogger itu nyaris tidak memiliki footer yang menarik? Akan tetapi dengan CSS hasil ramuan ini, hal itu langsung berubah. Dan menariknya apa yang pernah menjadi perbincangan panas di diskusi Google Forum ternyata hanya membutuhkan pemecahan yang sangat sederhana.
MEMBUAT FOOTER UNTUK CONTEMPO DENGAN CSS
Rahasianya adalah CSS! Perhatikan kode yang saya buat:
<style>
.footer {
position: relative;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
background:-webkit-linear-gradient(right,#E6E6FA 0%,#5093C4 75%);
color: black;
text-align: center;
}
</style>
Sangat sederhana bukan? Dimana meletakannya?
Gampang sobat masuk ke pengaturan blogger >> pilih tema >> dan lalu pilih edit HTML, cari kode </body> pada Tema Contempo letaknya selalu ditempat paling bawah halaman HTML, scroll saja halaman ke atas sampai habis! Letakan kode diatas tepat diatas </body>
Lho bukankah itu CSS mengapa tidak diletakan di atas </head>? Sobat perhatikan kode pembuka dan penutup kode yang saya sorot merah? Itu menandakan bahwa kode dapat diletakan pada tag tag tertentu seperti </body>
Kalau sobat terbiasa memperhatikan bagaimana kode kode disusun, sobat juga sering melihat kode javascript di buka dengan <script> dan ditutup dengan </script> bukan? jadi semua itu tidak akan menyakiti apa apa. OK save saja template Contempo sobat dan lihat hasilnya.
MEMODIFIKASI KODE CSS UNTUK FOOTER
Perhatikan kembali kodenya:
<style>
.footer {
position: relative;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
background:-webkit-linear-gradient(right,#E6E6FA 0%,#5093C4 75%);
color: black;
text-align: center;
}
</style>
Jika sobat merobah perintah: relative; menjadi fixed; Maka yang terjadi adalah, footer akan menjadi selalu terlihat pada saat halaman konten di scroll keatas dan kebawah. Dan jika sobat merobah: height: 50px; menjadi: height 100px; maka bar footer yang berwarna gradient menjadi menebal atau meninggi.
Jika sobat ingin merobah warna background ganti kode warna HEX yang saya sorot hijau dengan warna yang sobat sukai, cari kode warnanya di internet.
Dan jika sobat ingin mengganti warna tulisan ganti: black; misalnya menjadi blue; atau white; begitulah seterusnya.
EFEK LAIN DARI KODE CSS FOOTER
Efek lain yang terjadi karena penerapan kode ini pada template CONTEMPO HYBRID buatan saya adalah:
KELEMAHAN:
Pada browser tertentu warna tidak bisa tampil.
 |
| Aduh apa apan footernya beginian? |
MEMBUAT FOOTER UNTUK CONTEMPO DENGAN CSS
Rahasianya adalah CSS! Perhatikan kode yang saya buat:
<style>
.footer {
position: relative;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
background:-webkit-linear-gradient(right,#E6E6FA 0%,#5093C4 75%);
color: black;
text-align: center;
}
</style>
Sangat sederhana bukan? Dimana meletakannya?
Gampang sobat masuk ke pengaturan blogger >> pilih tema >> dan lalu pilih edit HTML, cari kode </body> pada Tema Contempo letaknya selalu ditempat paling bawah halaman HTML, scroll saja halaman ke atas sampai habis! Letakan kode diatas tepat diatas </body>
Lho bukankah itu CSS mengapa tidak diletakan di atas </head>? Sobat perhatikan kode pembuka dan penutup kode yang saya sorot merah? Itu menandakan bahwa kode dapat diletakan pada tag tag tertentu seperti </body>
Kalau sobat terbiasa memperhatikan bagaimana kode kode disusun, sobat juga sering melihat kode javascript di buka dengan <script> dan ditutup dengan </script> bukan? jadi semua itu tidak akan menyakiti apa apa. OK save saja template Contempo sobat dan lihat hasilnya.
MEMODIFIKASI KODE CSS UNTUK FOOTER
Perhatikan kembali kodenya:
<style>
.footer {
position: relative;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
background:-webkit-linear-gradient(right,#E6E6FA 0%,#5093C4 75%);
color: black;
text-align: center;
}
</style>
Jika sobat ingin merobah warna background ganti kode warna HEX yang saya sorot hijau dengan warna yang sobat sukai, cari kode warnanya di internet.
Dan jika sobat ingin mengganti warna tulisan ganti: black; misalnya menjadi blue; atau white; begitulah seterusnya.
EFEK LAIN DARI KODE CSS FOOTER
Efek lain yang terjadi karena penerapan kode ini pada template CONTEMPO HYBRID buatan saya adalah:
Pada komentar. Saat belum ada komentar pada suatu postingan kolom komentar seolah "hidup" dan minta di isi dengan komen (bagi saya ini keren) namun setelah ada komentar, kolom komentar kembali berprilaku normal. Keren bukan?Efek "memaksa" sesuai dengan fungsi fitur ini telah lama saya pikirkan namun secara kebetulan saya temukan pada saat pemasangan footer pada template contempo.
KELEMAHAN:
Pada browser tertentu warna tidak bisa tampil.
.png)
