Dunia Programming - Hai sobat setia Dunia Programming, kali ini saya akan membahas bagaimana cara membuat Footer blog atau website kita dengan Bootstrap. apa itu mungkin. ?
sebelum kita masuk ke cara membuatnya mari kita bahas apa itu footer. ? . ?, mari kita bahas satu per satu
Footer Bootstrap
Pengertian Footer sendiri adalah footer pada blog atau website, footer sendiri juga berbeda dengan header, jika header berada di atas dirinya sendiri, sedangkan footer berada di bawah bodyLalu, apa saja manfaat Footer untuk blog atau website Anda sendiri?. ?"
Tentunya footer memiliki banyak fungsi, pada dasarnya footer dapat diisi apa saja, seperti teks, gambar, formulir komentar melalui email, menu pelengkap seperti About, Privacy, atau bisa juga digunakan untuk menempatkan Hak Cipta seperti DMCA, Copyscape atau bisa juga digunakan untuk menempatkan postingan terkait, Facebook Pages dan masih banyak lagi. Intinya footer tidak digunakan untuk menempatkan artikel postingan blog
"Bagaimana membuatnya. ?"
Oke langsung saja kita mulai cara membuat footer pada blog atau website dengan menggunakan Bootstrap Framework
1). Masuk ke akun dasbor blog Anda
2). Kemudian klik bagian menu Tata Letak
3). Kemudian, buat widget baru di bagian bawah blog atau website Anda
4). Kemudian copyscript footer yang sudah saya buat
Salin Script CSS di bawah ini dengan cara ini
1). Klik bagian menu Tcontoh > Edit HTML
2). Masukkan skrip ini tepat di atas
3). untuk lebih cepat tekan CTRL + F lalu ketik lalu paste kode CSS di bawah ini.
skrip CSS
didistribusikan footer{
warna latar belakang. #292c2f;
bayangan kotak. 0 1px 1px 0 rgba(0, 0, 0, 0. 12);
ukuran kotak. kotak perbatasan;
lebar. 100%;
perataan teks. kiri;
font. tebal 16px sans-serif;
lapisan. 55px kali 50px;
margin-atas. 80px;
}
didistribusikan footer. footer-kiri,
didistribusikan footer. footer-pusat,
didistribusikan footer. footer-kanan{
menampilkan. inline-blok;
vertical-align. atasan;
}
/* Footer kiri */
didistribusikan footer. footer-kiri{
lebar. 40%;
}
/* Logo perusahaan */
h3 yang didistribusikan footer{
warna. #ffffff;
font. normal 36px 'Cookie', kursif;
margin. 0;
}
rentang h3 terdistribusi footer{
warna. #5383d3;
}
/* Tautan footer */
didistribusikan footer. tautan footer{
warna. #ffffff;
margin. 20px 0 12px;
lapisan. 0;
}
didistribusikan footer. footer-tautan a{
menampilkan. inline-blok;
tinggi garis. 1. 8;
dekorasi teks. tidak ada;
warna. mewarisi;
}
didistribusikan footer. footer-nama-perusahaan{
warna. #8f9296;
ukuran huruf. 14px;
font-berat. normal;
margin. 0;
}
/* Footer Center */
didistribusikan footer. footer-center{
lebar. 35%;
}
didistribusikan footer. footer-center i{
warna latar belakang. #33383b;
warna. #ffffff;
ukuran huruf. 25px;
lebar. 38px;
tinggi. 38px;
radius perbatasan. 50%;
perataan teks. tengah;
tinggi garis. 42px;
margin. 10px 15px;
vertical-align. tengah;
}
didistribusikan footer. footer-center i. fa-amplop{
ukuran huruf. 17px;
tinggi garis. 38px;
}
didistribusikan footer. footer-center p{
menampilkan. inline-blok;
warna. #ffffff;
vertical-align. tengah;
margin. 0;
}
didistribusikan footer. footer-center p span{
menampilkan. blok;
font-berat. normal;
ukuran huruf. 14px;
tinggi garis. 2;
}
didistribusikan footer. footer-center p a{
warna. #5383d3;
dekorasi teks. tidak ada
}
/* Footer Kanan */
didistribusikan footer. footer-kanan{
lebar. 20%;
}
didistribusikan footer. footer-perusahaan-tentang{
tinggi garis. 20px;
warna. #92999f;
ukuran huruf. 13px;
font-berat. normal;
margin. 0;
}
didistribusikan footer. footer-perusahaan-tentang rentang{
menampilkan. blok;
warna. #ffffff;
ukuran huruf. 14px;
font-berat. berani;
margin-bawah. 20px;
}
didistribusikan footer. ikon footer{
margin-atas. 25px;
}
didistribusikan footer. footer-ikon a{
menampilkan. inline-blok;
lebar. 35px;
tinggi. 35px;
kursor. petunjuk;
warna latar belakang. #33383b;
radius perbatasan. 2px;
ukuran huruf. 20px;
warna. #ffffff;
perataan teks. tengah;
tinggi garis. 35px;
margin-kanan. 3px;
margin-bawah. 5px;
}
@media (maks-lebar. 880px) {
. didistribusikan footer{
font. tebal 14px sans-serif;
}
. didistribusikan footer. footer-kiri,
. didistribusikan footer. footer-pusat,
. didistribusikan footer. footer-kanan{
menampilkan. blok;
lebar. 100%;
margin-bawah. 40px;
perataan teks. tengah;
}
. didistribusikan footer. footer-center i{
margin-kiri. 0;
}
}
Kemudian setelah anda copy script css diatas, selanjutnya masukan script html seperti berikut
1). Buka menu Tata Letak
2). Klik bagian Widget di bagian bawah, dimana nanti kita tempatkan Footer dibagian bawah, klik Add Widget > HTML/Javascript
Langkah-langkah Membuat Footer di Blog atau Website
Proses Manufaktur Footer
3). Masukkan Kode HTML dibawah ini, setelah itu klik Saveskrip HTML
<. -- Konten laman Anda akan ditempatkan di sini. -->
5). Setelah itu, klik simpan, dan lihat hasilnya6). Jika ingin mengubah tampilan, Anda bisa mengutak-atik scriptnya
Demikian tutorial dari saya, jika anda mengalami kesulitan dalam proses pembuatan footer di blog anda masing-masing
Tampilan Footer akan seperti di bawah ini
Tampilan Desain Bootstrap Footer
Bagaimana keren bukan? . ? . ?
Silahkan anda bisa meninggalkan komentar di bawah postingan artikel ini, saya bisa menjawab secepatnya. Terima kasih.
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 .
Header adalah bagian dari dokumen yang muncul di margin atas, sedangkan footer adalah bagian dokumen yang muncul di margin bawah.
HTML < footer > elemen mewakili footer (footer / footer ) untuk elemen yang membayanginya (ada di dalamnya), seperti catatan kaki pada sebuah elemen , < bagian > elemen , catatan kaki untuk induk dokumen ( elemen ) dan seterusnya.
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.
