Cara Membuat Footer Responsive dengan HTML dan CSS di Template Free
Footer Html CSS Template Free Salah satu cara terbaik untuk membuat tampilan halaman website atau blog yang menarik adalah dengan mendesain salah satu bagian widget (footer) yang terletak di bagian bawah dengan semenarik mungkin sehingga dapat menarik perhatian pengunjung. Seperti halnya Cara Membuat Footer Responsif dengan HTML dan CSS di Template Gratis, Anda bisa melakukannya dengan membuat footer keren html css di halaman blog agar terlihat berbeda dengan yang lain.
Sebenarnya ada banyak cara membuat footer dengan html dan css di blog. Anda dapat menggunakan plugin yang disediakan pada platform tempat Anda menggunakan blog. Seperti Blogger, Wordpress, Github, dll. Namun menurut saya cara ini kurang efisien karena sebagian pengguna belum memahami struktur kode template blog yang digunakan. Jadi tidak ada pelajaran yang bisa dipetik dari penggunaan metode ini. Kita dapat menggunakan kode html dan css untuk membuat footer responsif agar tampilan halaman web menjadi lebih menarik.
Pada postingan kali ini Admin akan memposting tentang Cara Membuat Responsive Footer dengan HTML dan CSS di Template Gratis yang oke tentunya. Anda bisa membuat footer responsive dengan menggunakan kode html dan css untuk mendesain tampilan halaman blog dari template gratisan yang anda gunakan. Sebelum membahas secara tuntas, ada baiknya Anda memahami apa itu footer? Sekarang mari kita lihat penjelasannya di bawah ini.
Apa itu Footer?
Footer adalah bagian bawah dokumen. Letaknya di bawah badan utama atau body. Tag <footer> mendefinisikan footer untuk dokumen atau bagian. Anda dapat memiliki beberapa elemen <footer> dalam satu dokumen. Biasanya footer berisi informasi dari website atau blog yang dikelola. Posisi footer sendiri berada di bagian bawah tampilan halaman sebuah website. Seperti contoh footer responsive mobile css yang bisa Anda lihat di blog ini.
Fungsi dari widget Footer itu sendiri adalah sebagai catatan kaki dari bagian tampilan website. bertujuan untuk membantu pengunjung mengetahui berbagai informasi terkait topik pembahasan yang dibuat. Selain itu, dengan menambahkan informasi dan pilihan navigasi di bagian bawah halaman web (footer) dapat mempercantik tampilan halaman blog layaknya website profesional. Tapi itu tergantung bagaimana Anda mendesain bagian footer semenarik mungkin agar terlihat seperti layaknya blogger profesional.
Baca juga : Cara Menambahkan Progress Scroll Bar Di Blogger
Footer Elements
Biasanya footer berisi elemen-elemen pendek untuk memperkaya informasi dari sebuah halaman website. Ini akan terlihat menarik di mata pengguna jika Anda mengurutkannya dengan cara yang benar. Untuk itu simak ulasan berikut tentang Elemen di Footer.
Biasanya Elemen <footer> berisi :
- Hak Cipta (Copyright)
- Kebijakan Privasi
- Kontak
- Alamat
- Nomor Telepon dan Faks
- Navigasi
- Ikon Sosial
- Pendaftaran Email
- Misi dan Nilai Anda
Footer dapat menempel di bagian bawah dengan cara yang sama seperti navigasi menempel di bagian atas halaman. Selain itu, untuk mengasah kemampuan Anda, Anda juga dapat mempelajari Cara Membuat Menu Navigasi Sticky di Blogger. Footer selalu berada di bagian bawah halaman, tidak peduli kedalaman gulir. Footer selalu terlihat di setiap halaman website atau blog.
Pada artikel kali ini Admin akan membuat responsive footer menggunakan HTML dan CSS. Jika Anda belum familiar dengan bahasa-bahasa tersebut atau ingin meningkatkan kemampuan Anda, Anda bisa membaca postingan sebelumnya tentang Pengenalan Dasar HTML & CSS lengkap dengan contoh khusus untuk Pemula yang bisa Anda pelajari secara GRATIS!
Untuk membuat footer html css template free, kita bisa menggunakan kode html dan css. Anda tidak perlu khawatir karena kami telah menyiapkan kode html dan css untuk membuat footer responsive. Anda juga bisa membuat kerangka web html dan xml dengan menggunakan tools sederhana yang sedang saya kembangkan untuk membuat baris kode yang sederhana dengan alat (Blogger Template Generator PushTheme). Oke sekarang kita bisa kembali ke topik pembahasan tentang Cara Membuat Footer Responsive dengan HTML dan CSS di Template Free.
Baca juga : Cara Membuat Tabel of Content di Blogger
Cara Membuat Footer Responsive dengan HTML dan CSS
Perhatikan baik-baik metode ini adalah teknik sederhana yang biasa saya gunakan untuk mendesain website. Semuanya dimulai dari dasar untuk membuat sesuatu yang akan lebih sempurna dari pengetahuan yang kita pelajari. Cara membuat footer responsive dengan html dan css bisa anda terapkan sekarang dari sini. Mulai dari membuat blog gratis di blogspot dan menggunakan template blogger bawaan atau anda bisa menggunakan template premium yang bisa anda dapatkan secara gratis disini. Anda bebas memilih template yang saya bagikan di blog ini dan bisa Anda gunakan secara gratis untuk blogging.
Biasanya dalam dunia blogging, Anda perlu mempelajari struktur kode yang digunakan untuk membangun sebuah blog atau website yang ingin Anda seriusi agar bisa menghasilkan uang. Percuma juga jika Anda membeli template premium berbayar jika Anda tidak memahami cara kerja sistem blog di setiap perangkat seperti desktop dan mobile. Bagian terindah dari blogging adalah mendesain komponen web menjadi lebih sempurna. Dengan begitu kita dapat mengedepankan kemampuan kita dalam membangun struktur kode dalam membuat website yang baik dan bisa bermanfaat untuk diri sendiri ataupun banyak orang. Anda juga bisa membaca postingan kami sebelumnya tentang Tips Menjadi Blogger Pemula dan Menghasilkan Uang.
Sampai di sini, jika Anda tertarik untuk membuat footer responsif, Anda bisa melanjutkan membaca. Tetapi jika Anda bosan, Anda dapat meninggalkan posting ini. Agar anda bisa mendapatkan ilmu yang bermanfaat yang akan saya berikan, mari lanjutkan membaca sampai selesai. Disini saya akan memberikan contoh agar anda paham cara membuat footer responsive dengan kode html dan css yang berfungsi. Jadi disini Admin menggunakan salah satu template untuk memodifikasi tampilan halaman web di bagian footer. Sebagai contoh, saya memilih dan rekomendasikan memakai Oreo Blogger Template untuk mendesain bagian footer.
Anda bisa melihat hasil tampilan blog dari template Oreo yang keren dan ringan. Kecepatan dan struktur juga oke, 100% cocok untuk mendapatkan SEO blogger. Tapi saya kurang tertarik dengan bagian footer yang saya tandai persegi dari gambar di atas. Jadi disini saya akan mencoba untuk memodifikasi bagian footer yang menurut saya kurang responsive.
Jadi Mari kita mulai dengan Coding! Ada 2 kode yang saya perlukan untuk membuat footer dengan html dan css. Berikut kode yang dapat Anda gunakan untuk membuat Responsive Footer dengan HTML dan CSS dari Template Free:
1. Kode HTML
2. Kode CSS
Berikut ini kode style css yang diperlukan:
Sampai disini belum selesai, sekarang saatnya kita menambahkan kode html terlebih dahulu pada template blog. Perhatikan kode HTML di atas! Untuk menempatkannya ke dalam template blog (OREO) yang kita gunakan, kita dapat mengambil kode dari <footer class="footer-distributed"> sampai dengan tag penutup </footer> dan tidak perlu menyalin semua kode. Karena disni kita hanya memodifikasi bagian footer saja bukan bagian yang lain. Bagi Anda yang mungkin masih bingung, Anda bisa mengikuti cara di bawah ini.
Cara Memasang Kode Footer HTML CSS Template Blogger
Untuk cara memasang kode html dan css footer dari kode diatas ke dalam template blogger caranya cukup mudah, anda bisa mengambil kode html dan css diatas dan meletakkannya di blog. Disini Admin akan memberikan contoh cara membuat footer 3 kolom.
Berikut ini Cara Memasang Kode Footer HTML CSS Template Blogger:
- Pertama login ke Blogger
- Pada dashboard pilih menu Tema > klik tab SESUAIKAN > Pilih Edit HTML
- Selanjutnya salin Kode HTML di atas dari <footer class="footer-distributed"> sampai dengan tag penutup </footer>
- Kemudian pada editor html di blogger cari kode <footer> sampai dengan tag penutup </footer>
- Hapus kode tersebut dan ganti dengan kode html yang tadi di salin
- Sebelum menempatkan kode html diatas, Parse terlebih dahulu kodenya di Tools Parse HTML untuk mengkompres kode.
- Setelah itu salin semua kode css diatas dan letakkan tepat di atas kode ]]></b:skin> pada template yang digunakan.
- Selesai...
Baca juga : Cara Memasang Histats di Website
Hasil Tampilan Footer Responsive dengan HTML dan CSS
Berikut adalah hasil tampilan responsive footer 3 kolom dari kode html dan css diatas yang kita pasang di template blogger.
Hasilnya keren banget kan? Ya, tentu lebih baik dari sebelumnya. Sekarang coba bandingkan dengan tampilan sebelumnya pada gambar di atas.
Selain itu, ada banyak karya yang bisa kita buat untuk membuat berbagai website atau aplikasi mini dengan menggunakan kode pemrograman seperti HTML dan CSS. Anda tidak perlu menjadi ahli untuk memecahkan masalah besar. Karena tidak peduli seberapa bagus programmernya, dia pasti akan mendapatkan kesalahan. Tetapkan pikiran Anda untuk mempelajari kode pemrograman jika Anda ingin terjun ke dunia blogging untuk menghasilkan uang. Bangun tujuan Anda mulai sekarang dan putuskan yang terbaik untuk ide yang Anda miliki dengan membuat website pribadi atau kebutuhan bisnis lainnya. Ubah hobi Anda menjadi Penghasilan!
Sampai disini saya kurang puas dengan hasil tampilan footer responsive dengan html dan css diatas. Karena setelah saya amati sepertinya ada yang kurang dari hasil diatas. Yah benar! Saya melihat bagian footer perlu menambahkan ikon.
Oke, baiklah! agar tidak ada yang aneh saya akan mencoba menambahkan icon dengan boostrapcdn di footer. Untuk membuatnya terlihat lebih menarik, buat tampilan halaman. Ini juga cukup mudah! Anda hanya perlu menyalin kode di bawah ini dan menempelkannya di template. Salin kode dibawah ini dan pastekan di atas kode </head> atau diatas kode css yang disalin tadi. Sebelum meletakkan kode dibawah ini jangan lupa di parse terlebih dahulu.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
Jika Anda mengikuti panduan dari awal hingga akhir, kami jamin footer html css akan menempel tepat di bawah dengan tampilan responsive. Sekarang Anda dapat melihat hasil akhirnya akan tampak seperti pada gambar di bawah ini.
Baca juga : 13 Elemen Dasar Website yang Harus Anda Ketahui
Maka hasil footer dengan html dan css akan menjadi lebih sempurna seperti pada gambar di atas. Dengan menggunakan tampilan halaman website menggunakan footer responsive maka blog atau website yang Anda kelola akan tampak seperti layaknya website profesional.
Sebenarnya saya sudah banyak membuat aplikasi berbasis web, tapi saya lupa membackupnya. Seperti Cara membuat kalkulator dengan HTML, CSS, JavaScript di Notepad, WhatsApp Link Generator, Parse Tools, Color Picker Tools, CSS Minifer Tools, dll. Jadi saya harus memulai lagi dari awal demi portofolio. Selain sebagai portofolio, saya juga bisa menggunakan contoh aplikasi ini sebagai latihan untuk mengasah kemampuan coding saya.
Jika Anda masih pemula, baru memulai blogging, dan bingung harus mulai dari mana, Anda tidak perlu khawatir. Anda bisa memulainya dari sekarang! Tetapi apabila Anda perlu pembimbing untuk membangun blog secara serius, Anda bisa menggunakan jasa kami dan bisa mengirim pesan di halaman kontak blog ini. Untuk biaya tidak perlu khawatir! semua tergantung dengan upah normal. Kalo Anda belum mempunyai uang! jangan di paksakan. Anda juga bisa belajar dari blog ini. Karena disini kami akan selalu update postingan yang bermanfaat untuk Anda pelajari secara gratis.
Mungkin masih ada yang belum paham bahwa kita bisa menghasilkan uang dari blogging dengan mudah jika kita serius dengan niat dan komitmen untuk melakukannya. Saya pernah mendengar blog disebut beberapa kali baru-baru ini sebagai campuran antara seni dan sains. Jika itu benar dan menurut saya demikian, tidak ada cara yang tepat untuk melakukan pendekatan blogging jika Anda ingin sukses.
Terlihat jelas Orang yang mau Serius pasti Tekun dan Komitmen. Sebaliknya orang yang hanya bernafsu Uang akan Stop dan Menghilang.
"Learn By Doing And Learn By Error :)
Kesimpulan
Jadi, itulah Cara Membuat Footer Responsif dengan HTML dan CSS di Template Gratis! Ini adalah cara untuk membuat footer responsif untuk situs web menggunakan HTML dan CSS. Semoga ini bisa membantu dan jika Anda ingin membuat beberapa proyek keren seperti Formulir Pendaftaran, Kartu Profil, Slideshow, Menu Hamburger (3D) dan banyak lagi menggunakan HTML, CSS, dan JavaScript, Anda dapat mengikuti blog ini untuk mendapatkan banyak teknik blogging lainnya yang akan selalu saya posting di blog sederhana ini.
Selain itu Anda juga bisa membaca postingan kami sebelumnya tentang Cara Membuat Animasi Loading Page dengan HTML, CSS, dan JavaScript. Artikel ini akan mengajarkan Anda cara menampilkan animasi loading atau progress bar ke website. Jangan khawatir apakah Anda baru mengenal CSS, HTML, dan Javascript atau ingin membuat situs web Anda lebih ramah pengguna dengan menggunakan animasi pemuatan halaman.
Demikian posting kali tentang Cara Membuat Footer Responsive dengan HTML dan CSS di Template Free. Semoga artikel ini bermanfaat dan dapat membantu Anda. Yuk share artikel ini untuk membantu teman-teman yang lain. Terima kasih!
samuelpasaribu.com
samuelpasaribu.com working in the Search Engine Optimization field since 2019. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on samuelpasaribu.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.
bisakah saya minta kode CSS untuk footer diblog ini?
Untuk itu coba di cek sendiri di template jettheme
oke mantap thanks Min
Iya sama-sama. Semoga bermanfaat
Mantap gan, untuk membuat tampilan dibawah navigasi postingan blog gambar full disertai judul dan yang artikel lainnya judul disertai gambar kecil, bagai mana cara mendesainnya?
Untuk menyesuaikan lebar pinggir footer agar sama dengan sisi postingan blog, Sobat perlu mengubah beberapa properti CSS pada elemen footer. Pada kode CSS saat ini, footer memiliki class footer-distributed, dan Sobat dapat mengatur lebar sisi kiri dan kanan footer menjadi sama dengan sisi postingan blog
terimakasih banyak,
Tapi bagaimana cara menyesuaikan lebar pinggir footer agar sama dengan sisi postingan blog
Hapus properti width: 100%; dari .footer-distributed untuk mengizinkan footer mengambil lebar kontennya.
.footer-distributed {
background-color: #2c292f;
box-sizing: border-box;
text-align: left;
font: bold 16px sans-serif;
padding: 50px 50px 60px 50px;
margin-top: 80px;
}
Sesuaikan lebar .footer-left, .footer-center, dan .footer-right dengan sisi postingan blog. Sobat dapat mengatur lebar ini dalam persentase tertentu sesuai dengan desain. Misalnya, jika sisi postingan blog Sobat memiliki lebar 70%, Sobat dapat mengatur lebar footer menjadi 70% dengan memberikan masing-masing elemen footer lebar 33.33%.
.footer-distributed .footer-left {
width: 33.33%;
}
.footer-distributed .footer-center {
width: 33.33%;
}
.footer-distributed .footer-right {
width: 33.33%;
}
Dengan mengikuti langkah-langkah ini, Sobat dapat menyesuaikan lebar pinggir footer agar sama dengan sisi postingan blog. Pastikan untuk mengganti persentase lebar sesuai dengan desain dan layout halaman.