Cara menggunakan footer di html

Saat Anda mengintegrasikan situs web Anda ke Facebook Pixel, Google Analytics, Google Adsense, dll., Anda akan diminta untuk menambahkan kode verifikasi ke header atau footer situs web

Daftar isi

Bagi pengguna Blogspot, menambahkan kode pada header atau footer bisa dikatakan cukup mudah, karena hanya perlu di paste di satu tempat yaitu Theme dengan cara edit HTML. Lalu bagaimana jika website yang Anda bangun menggunakan WordPress?

Pada kesempatan kali ini Rumahweb akan membahas tentang cara menambahkan kode pada header atau footer di WordPress. Berikut panduannya,

Menambahkan Kode Secara Manual

Untuk menambahkan kode ke WordPress secara manual dilakukan dengan mengedit file header. php atau footer. php

Untuk mengedit file dilakukan melalui halaman Dashboard admin WordPress pada menu Appearance > Theme Editor seperti tampak pada gambar berikut,

Setelah masuk ke menu Theme Editor, akan muncul popup notifikasi yang berisi peringatan bahwa Anda akan melakukan perubahan pada file tema yang digunakan. Silakan klik "Saya Mengerti" untuk melanjutkan

Sebelum mengedit file header. php atau footer. php kami sarankan untuk membackup file terlebih dahulu

Setelah berhasil masuk ke menu Theme Editor, silahkan masuk ke tab Theme Header untuk menambahkan kode pada header

Pada text editor akan tampil isi dari file header.php, Silahkan anda menempatkan kode diantara tag dan dan klik Update File jika sudah selesai menambahkan. Seperti gambar berikut,

Begitu juga jika diminta menambahkan kode pada Footer. Silakan masuk ke tab Theme Footer, dan tambahkan kode di atas tag

Menambahkan Kode menggunakan Plugin

Selain menambahkan kode secara manual dengan langsung mengedit file header. php atau footer. php, Anda juga dapat menambahkan kode menggunakan Plugin

Plugin yang digunakan dalam panduan ini adalah Insert Header and Footers. Untuk menginstall plugin dapat dilakukan melalui Dashboard admin WordPress > Plugins > add new, kemudian pada kolom pencarian ketik Insert Header and Footers seperti pada gambar berikut ini,

Setelah berhasil menginstal dan mengaktifkan Plugin. Untuk menambahkan kode dapat dilakukan melalui Setting > Insert Header and Footer

Silakan masukkan kode pada kolom yang tersedia di halaman pengaturan, dan klik Simpan untuk menyimpan perubahan

Itulah panduan cara menambahkan kode pada Header atau Footer Wordpress, selamat mencoba. Jika ada masalah saat menambahkan kode, silakan hubungi kami melalui Livechat, email, atau telepon

Tahukah Anda bahwa desain footer adalah bagian dari website yang paling banyak mendapat perhatian pengunjung?

Saat Anda membuka situs web, header adalah hal pertama yang menyapa Anda. Oleh karena itu, mungkin sedikit mengejutkan jika Anda mengetahui bahwa bagian atas sebenarnya 20% lebih sedikit terlihat daripada footer

Bisa jadi penyebabnya karena pengunjung terlalu malas menunggu header selesai loading. Alhasil, mereka memilih scroll langsung untuk melihat isi website

Artinya, akan rugi besar jika menyepelekan keberadaan footer. Oleh karena itu, penting untuk membuat desain footer terbaik yang dapat mengoptimalkan kinerja website

Nah, melalui artikel ini, Anda akan mengetahui contoh desain footer terbaik yang layak dijadikan inspirasi dan referensi

Daftar Isi

Anda pasti pernah melihat footer di sebuah website. Namun, apa sebenarnya yang dimaksud dengan footer?

Ya, seperti namanya, footer itu seperti kaki sebuah website. Footer selalu ada di akhir setiap halaman website

Footer adalah bagian bawah halaman website. Tepat setelah badan situs web

Ketika Anda tidak dapat menemukan informasi tertentu pada sebuah desain website, apa yang Anda lakukan sebelum memutuskan untuk pindah ke website lain?

"Mungkin, saya akan menggulir ke bagian bawah situs web untuk memastikan informasi yang saya inginkan benar-benar tidak ada. “

Nah, itu artinya footer adalah harapan terakhir pengunjung ketika mereka tidak menemukan apa yang mereka cari di website

Dengan kata lain, area ini adalah peluang emas untuk mencegah pengunjung menjelajahi situs web Anda

Selain itu, footer juga memberikan manfaat seperti

Meningkatkan kesadaran merek;
Memberikan informasi tambahan yang cukup penting seperti disclaimer, privacy policy, dan lain-lain;
Memasang link atau navigasi untuk mengarahkan pengunjung ke halaman lain;
Tingkatkan pengalaman pengguna sehingga menghabiskan waktu meningkat;
Tingkatkan konversi melalui tombol Ajakan Bertindak;
Mencetak lead

Setelah memahami pentingnya footer, Anda pasti ingin mengetahui contoh desain footer terbaik saat ini bukan? .

Berikut adalah 11+ situs inspirasi desain footer yang harus Anda coba

1. tombol CTA

Desain Footer Fokus. Tingkatkan konversi dengan menyorot tombol CTA

Apa hal pertama yang Anda lihat ketika menemukan desain footer Walking Men?

Kemungkinan besar, perhatian Anda langsung tertuju pada tombol Ajakan Bertindak (CTA) di tengah footer. Tombolnya tampak mencolok pada latar belakang putih lebar pada desain footer ini

Selain itu, Walking Men juga memasang kalimat ajakan 'Come walk with us' yang eye-catching dan memperkuat efek persahabatan

Nah contoh desain footer seperti ini sangat cocok untuk anda yang mengutamakan konversi website. Bahkan, tombol CTA di footer bisa meroketkan konversi hingga 50% lho

Namun, jika Anda ingin menggunakan desain footer ini, sebaiknya Anda memahami tips membuat CTA terbaik. Dengan begitu, Anda akan lebih pandai membuat desain tombol CTA yang paling cocok untuk website Anda

Kiat
Gunakan spasi yang cukup dan pemilihan warna yang tepat agar tombol CTA menonjol

2. Formulir Keikutsertaan

Desain Footer Fokus. Kumpulkan prospek kontak dengan formulir opt-in

Ada berbagai cara untuk meningkatkan konversi dan brand awareness. Salah satu caranya adalah dengan rutin mengirimkan update perusahaan melalui email lead

Kalau mau begini, desain footer seperti Orbit Media's cocok untuk website kamu lho. Mengapa demikian?

Alasannya adalah Orbit Media memasang formulir opt-in untuk mengumpulkan prospek kontak. Calon pelanggan hanya perlu memasukan email dan secara otomatis buku kontak akan semakin gemuk

Nah, footer memang merupakan area strategis untuk opt-in form. Coba tebak apa alasannya?

Orang yang menggulir ke akhir situs web biasanya lebih tertarik pada informasi. Oleh karena itu, formulir opt-in akan membantu mereka untuk lebih mudah mendapatkan informasi terbaru melalui email. Informasi tersebut akan semakin menarik pengunjung untuk menggunakan produk Anda

Kiat
Pelajari copywriting yang menarik untuk memperkuat minat pengunjung berlangganan newsletter. Misalnya, Orbit Media memikat prospek dengan tulisan 'Bergabunglah dengan 16.000+ orang yang mendapatkan kiat pemasaran web kami dua kali sebulan'

Desain Footer Fokus. Memasang menu utama dan menambah jumlah unduhan

Apakah Anda memiliki aplikasi buatan sendiri dan ingin memudahkan siapa saja untuk mendownloadnya melalui website Anda?

Jika iya, coba amati strategi yang dilakukan Roblox pada desain footer mereka. Oh ya, Roblox merupakan platform game online yang memungkinkan siapa saja untuk membuat game sesuai dengan imajinasinya

Oke, kembali ke desain footer Roblox. Hal paling menarik yang bisa Anda temukan adalah Roblox menempatkan menu utama di bagian footer, bukan di header

Ini akan mendorong pengunjung untuk menggulir ke ujung hingga menemukan menu utama. Sebelum mencapai ujung, pengunjung pasti akan menemukan beberapa tombol download aplikasi

Ibarat mendayung melintasi dua pulau, Roblox berhasil menyediakan menu yang dicari pengunjung sekaligus mengarahkan mereka untuk mengunduh aplikasinya.

Sekadar info, Roblox sudah diunduh oleh lebih dari 100 juta orang di dunia lho. Hmmm, strategi footer ampuh yang patut dicoba 😀

Kiat
Jika Anda ingin meletakkan menu utama di bagian footer, sebaiknya halaman website dibuat pendek. Ini mencegah pengunjung tersesat karena malas menggulir terlalu jauh dan terlalu lama

4. Informasi Pendukung Lengkap

Desain Footer Fokus. Berikan informasi pendukung yang super lengkap

Apakah bisnis Anda memiliki layanan atau informasi tambahan yang cukup?

Tentu menjadi dilema jika Anda menampilkan daftar layanan atau banyak kolom informasi di header, sidebar, atau body. Selain bisa memecah fokus pengunjung, website terlihat rewel

Oleh karena itu, footer merupakan area yang tepat untuk melengkapi informasi. Seperti yang bisa Anda lihat di footer website Niagahoster

Melalui footernya, Niagahoster menyediakan informasi pendukung seperti daftar kontak, jenis layanan, tombol media sosial, bahkan undangan untuk berlangganan newsletter.

Ini tidak hanya memberikan informasi tambahan kepada pengunjung, tetapi juga membuka pintu navigasi ke halaman lain. Dengan begitu, informasi yang sampai ke khalayak akan lebih maksimal

Kiat
Buat pemisahan yang jelas antara setiap kelompok informasi. Itu bisa dilakukan dengan penggunaan judul, jarak yang cukup, permainan warna, dll

Desain Footer Fokus. Berikan informasi dan menu yang super lengkap, serta kumpulkan prospek kontak

L'Oréal Paris mungkin memiliki footer dengan informasi dan fitur terlengkap

Di footer L'Oréal Paris, Anda menemukan formulir opt-in, tombol media sosial, hak cipta, menu footer, bahkan sub footer. Jangan lupa, ada tombol back to top sehingga pengunjung tidak perlu scroll up secara manual

Sampai disini mungkin kalian bertanya-tanya, apa sih sub footer itu?

Nah, sub footer adalah baris terakhir sebelum footer selesai. Di L'Oréal Paris, Anda akan menemukannya sebagai area yang dipenuhi deretan menu dan hak cipta

Dengan menggunakan sub footer, menu tambahan dapat tampil selengkap mungkin tanpa membuat footer terlihat sesak. Menarik, bukan?

Kiat
Footer seperti ini membutuhkan ruang yang cukup besar. Jika ukuran footer terlalu kecil maka konten akan terlihat terlalu ramai dan padat

6. Grup Informasi

Desain Footer Fokus. Menyajikan informasi yang lengkap tanpa membingungkan audiens

Pernahkah Anda bertanya-tanya, apakah pengunjung akan bingung ketika melihat beragam pilihan informasi di footer website?

Akibatnya, pengunjung mungkin hanya melihat footer sekilas. Informasi yang diberikan kurang optimal

Nah, untuk meminimalisir kebingungan pengunjung, strategi footer yang dilakukan Makeup ini cukup keren. Tata rias menekankan pembagian kelompok informasi dengan memberikan garis pemisah

Panduan ini akan membantu pengunjung membedakan dan mengidentifikasi setiap kelompok informasi. Seperti yang dilakukan Makeup untuk memisahkan kolom formulir opt-in, menu tambahan, tombol media sosial, dan filter

Di bawah empat kelompok informasi, Makeup juga menambahkan widget hak cipta dan terjemahan. Footer juga menjadi lebih lengkap dan cukup membantu pengunjung

Kiat
Gunakan garis pemisah secukupnya. Terlalu banyak garis bantu akan membuat footer terlihat kurang minimalis

7. Penyaring Produk

Desain Footer Fokus. Memudahkan pengunjung untuk menemukan produk yang diinginkan

Apakah Anda memiliki website toko online dengan produk yang bervariasi?

Mungkin, footer situs web Smalley layak untuk referensi Anda. Alasannya adalah Smalley menggunakan area footer untuk menempatkan widget filter produk

Sebagai informasi, Smalley merupakan perusahaan yang menyediakan suku cadang untuk kebutuhan manufaktur. Mereka menyediakan berbagai macam cincin dan pegas dalam beberapa ukuran

Nah, dengan menyematkan product filter pada footer, pengunjung akan terbantu saat mencari produk. Eitss, kenapa harus di footer?

Yap, umumnya product filter ada di area sidebar. Namun, menambahkannya ke area footer juga akan sangat bermanfaat

Pasalnya, footer akan selalu terlihat di setiap halaman website. Jadi, pengunjung selalu dapat menggunakan filter produk di bagian footer

Kiat
Anda dapat dengan mudah membuat widget filter produk. Caranya cukup instal plugin WOOF di WordPress, lalu atur sesuai kebutuhan

8. Tautan Situs

Desain Footer Fokus. Menyediakan pilihan menu lengkap dengan tampilan minimalis dan menyertakan informasi legal website

Ingin menyajikan banyak pilihan menu namun tetap terlihat minimalis, sebaiknya sesuaikan footer Isitwp. Alih-alih menampilkan menu listicle, IsitWP memasang tautan situs dalam bentuk menu drop down

Dengan menu drop down, footer memiliki sisa ruang yang cukup sehingga footer tidak terlihat sesak. Anda juga dapat menggunakan sisa ruang ini untuk menaruh informasi lain, seperti tagline perusahaan

Baca Juga. Pengusaha Wajib Tahu. Berikut tips membuat tagline yang menarik pelanggan

Hal menarik lainnya, kita bisa melihat Isitwp memasang informasi hukum di akhir desain footer mereka. Yang jelas, Isitwp ingin menampilkan informasi penting tersebut tanpa merusak fokus pengunjung pada konten utama website

Nah, strategi ini bisa Anda gunakan sebagai inspirasi untuk meletakkan hak cipta, disclaimer, atau informasi hukum lainnya di bagian footer. Dengan begitu, pengunjung tetap dapat dengan mudah menemukannya dan tampilan website pun semakin optimal

Kiat
Pahami cara membuat drop down menu di WordPress agar tampilan menu tetap sederhana

9. Transisi Warna

Desain Footer Fokus. Tingkatkan pengalaman pengguna pengunjung

Ingin desain footer situs web interaktif?

Mengusung konsep penuh gairah dan energi, perusahaan informasi hiburan ini memoles footernya dengan warna-warna cerah

Hal yang paling menarik adalah Fandom memperhatikan user experience pengunjung dengan memberikan sentuhan transisi warna. Teks di footer akan berubah warna saat Anda mengarahkan kursor ke sana

Selain menonjolkan efek menyenangkan, efek transisi warna juga membantu penonton memastikan bahwa mereka mengklik menu yang tepat

Tak lupa, Fandom juga menampilkan tombol download yang cukup mencolok di footer-nya. Ini akan sangat memudahkan pengunjung untuk mengunduh aplikasi

Kiat
Pilih kombinasi warna yang sesuai agar teks tetap terbaca dengan jelas oleh audiens

10. Animasi

Desain Footer Fokus. Menyajikan informasi yang lengkap, meningkatkan kesadaran merek, serta meningkatkan pengalaman pengguna audiens

Bluestag mungkin salah satu footer situs web paling 'kosong' yang pernah Anda lihat. Terlihat di atas, Bluestag memiliki space yang cukup besar di area tengah footer mereka

Eitss, meski begitu, bukan berarti Bluestag tidak bisa menampilkan informasi lengkap di footer mereka ya.

Cukup berbeda dengan footer kebanyakan, Bluestag mengusung konsep animasi. Widget juga diatur secara interaktif. Seperti tombol CTA, ulasan Google, bahkan ada pengaturan mode malam / cahaya

Dengan konsep footer animasi, pengunjung akan betah berlama-lama di footer. Sebab, tidak menutup kemungkinan penonton akan memainkan widget satu per satu. Alhasil, hal ini juga akan membuka pintu informasi kepada audiens

Tak hanya itu, Bluestag juga meningkatkan brand awareness dengan menganimasikan logo perusahaan di footer. Rusa biru yang terlihat terus berlari menimbulkan kesan yang melekat di benak penonton

Kiat
Jauhkan animasi untuk latar belakang cukup sederhana. Jadi, fokus audiens tidak terlalu terserap pada animasi background, melainkan informasi dan widget di footer

11. Posting Blog Terbaru

Desain Footer Fokus. Menyediakan navigasi ke info terbaru

Bagi Anda yang rutin memublikasikan konten terbaru di website, contoh footer dari Awwwards ini pasti cukup menginspirasi

Seperti yang Anda lihat, footer Awwwards cukup sederhana. Informasi di sana cukup sederhana. Mudah juga, Anda dapat menemukan navigasi ke acara Awwwards terbaru

Tentunya hal ini akan membuat pengunjung berlama-lama berada di website tersebut. Sebab, website terus memberikan pintu navigasi ke konten terbaru Anda

Tidak hanya rata-rata waktu yang dihabiskan, peluang Anda untuk memamerkan informasi terbaru juga semakin besar

Kiat
Gunakan ikon yang unik dan menarik untuk mengarahkan pengunjung ke konten yang Anda inginkan. Semacam seperti panah, kalender seperti yang digunakan Awwwards, dll

12. Posting Media Sosial

Desain Footer Fokus. Berikan update media sosial terbaru

Selain menggunakan tombol navigasi seperti pada pembahasan sebelumnya, Anda juga bisa menggunakan footer untuk memberikan update terbaru dari sosial media

Tengok saja footer Random Ize yang terintegrasi dengan akun Twitter mereka. Situs web akan segera melemparkan Anda ke akun Twitter Random Ize sesaat setelah Anda mengkliknya

Footer cocok untuk Anda yang ingin mempromosikan akun media sosial tanpa kehilangan fokus pengunjung

Sebab, Anda membiarkan pengunjung menikmati konten website terlebih dahulu hingga scroll ke bawah halaman website. Setelah itu, barulah Anda mengajak mereka untuk melihat-lihat konten media sosial

Kiat
Fokus pada media sosial tertentu agar pengunjung tidak kebingungan
Anda dapat mengintegrasikan WordPress dengan media sosial menggunakan plugin Media Sosial WordPress

Setelah melihat contoh desain footer terbaik saat ini, tentunya Anda tidak ingin website Anda kalah bersaing. Namun, sebelum memodifikasi desain footer website, ada baiknya Anda menyimak beberapa trik desain footer berikut ini

1. Instal Elemen yang Sesuai dengan Kebutuhan Anda

Apa kebutuhan utama website Anda?

Nah, pastikan pertanyaan ini sudah terjawab sebelum Anda memodifikasi footer website. Dengan mengetahui tujuan utama website, Anda bisa menentukan elemen yang tepat untuk dipasang di footer

Elemen apa yang dapat Anda tempel di footer situs web?

Kesadaran MerekInformasi tambahanWidget tambahanHabiskan waktuKonversiKeterlibatan dan prospekLogo perusahaan;
Tagline;
Ulasan Google;
Prestasi. Daftar menu;
Daftarkan kontak;
Hak cipta;
pribadi;
Syarat Penggunaan;
Penafian. Peta Situs;
peta Google;
Alat pencarian situs;
Tombol navigasi;
tombol Terjemahkan. Tombol CTA posting blog terbaru;
Iklan. Tombol media sosial;
Posting media sosial;
Formulir keikutsertaan

Baca Juga. Berikut adalah 10+ Tips Desain Situs Web Terbaik yang Dapat Anda Terapkan

2. Rekap Informasi Utama Website

Trik untuk mendesain footer berikutnya adalah menangkap informasi utama dari website. Artinya, Anda menyorot ulang informasi utama website Anda

Awwwards, misalnya, menyematkan tagline 'Penghargaan untuk desain, kreativitas, dan inovasi di Internet' di footernya.

Dengan begitu, audiens akan 'diingatkan' kembali dengan pesan utama dari website tersebut yaitu Awwwards yang memberikan apresiasi terhadap segala bentuk desain web di internet.

3. Sematkan Tombol Kembali ke Atas

Tombol back to top adalah fitur yang membawa pengunjung kembali ke halaman atas website tanpa harus scroll satu per satu

Ini adalah widget penting terutama jika situs web Anda memiliki halaman yang panjang. Hanya dengan sekali klik, pengunjung bisa langsung kembali ke atas

4. Pahami Navigasi Keset

Navigasi Keset adalah pengelompokan menu menurut kategorinya. Menu anak disusun dalam bentuk daftar dengan judul kategori di bagian atas

Navigasi keset penting karena memudahkan pengunjung untuk menavigasi situs web. Karena menunya ada di header dan footer website

Artinya, bisa jadi navigasi ini adalah hal pertama yang dilihat audiens saat membuka website, sekaligus hal terakhir yang mereka lihat saat keluar.

Dengan navigasi keset, pengunjung lebih cepat diarahkan ke halaman lain tanpa menggulir atau menekan tombol back to top. Isi menu juga terlihat sehingga pengunjung bisa langsung mengkliknya

Misalnya seperti yang dilakukan Niagahoster, terutama untuk menu produknya. Niagahoster menghadirkan menu dropdown di header dan navigasi keset di footer

Selanjutnya, rancang footer agar lebih menarik. Dengan desain yang menawan, footer akan menonjol sehingga dapat menarik perhatian penonton

Pertahankan desain sesederhana mungkin. Pastikan teks dan elemen di footer menonjol dengan warna latar belakang. Jika perlu, tambahkan beberapa ilustrasi, efek, atau animasi untuk meningkatkan pengalaman pengguna pengunjung

Agar desain footer Anda lebih estetik, silahkan kunjungi beberapa referensi berikut ini

Templat Situs Web Gratis
Cara Membuat Template WordPress Responsif dengan HTML5
Cara Menghapus Didukung oleh WordPress

Hingga saat ini, Anda telah mengantongi 11+ desain footer terbaik untuk situs web. Mana yang paling sesuai dengan kebutuhan website Anda?

Apapun pilihan Anda, tidak ada salahnya menguji setiap jenis footer. Dengan begitu, Anda akan tahu mana yang paling cocok untuk mengakomodir kebutuhan website

Jika itu tidak cukup, Anda juga dapat membuat footer terbaik versi Anda sendiri. Siapa tahu footer website Anda akan masuk dalam daftar website inspirasi desain footer terbaik berikutnya bukan?

Nah, agar visi desain web Anda lebih luas, Anda juga harus memahami inspirasi desain tajuk situs web terbaik tahun ini serta tata letak situs web terbaik untuk meningkatkan konversi dan UX

Sampai jumpa di artikel berikutnya, ya

Membagikan

Benefita Ikuti Benefita adalah seorang gadis Pisces. Dia bermimpi hidup di dunia Harvest Moon.

Berlangganan sekarang

Dapatkan berbagai artikel tutorial, insight dan tips menarik seputar dunia online langsung melalui email Anda. Berlangganan sekarang dan raih kesuksesan bersama kami

HTML footer adalah elemen struktural yang digunakan untuk mengidentifikasi bagian footer halaman, dokumen , seksi, atau artikel. Elemen footer biasanya ditempatkan di bagian bawah halaman HTML .

Apa itu header dan footer dalam HTML?

Header adalah bagian dokumen yang muncul di margin atas, sedangkan footer adalah bagian dokumen yang muncul di margin bawah .

HTML

Posisi footer sendiri berada di bagian bawah tampilan halaman website. Seperti contoh footer responsive mobile css yang bisa anda lihat di sini blog. Fungsi dari widget Footer sendiri adalah sebagai footnote dari bagian tampilan website.