Di artikel sebelumnya, kita sudah membuat bagan atau pondasi untuk membuat 3 kolom footer seperti dibawah ini.
Selanjutnya kita akan menambah informasi Kontak dan Menu-menu yang ingin ditampilkan. Dalam artikel kali ini akan ada 2 widget yang saya bahas, yaitu : Widget Kontak dan Widget Menu.
Menambahkan Widget Kontak
1. Buka Akun Blogger >> Pilih Menu Tata Letak2. Copy kode dibawah ini :
<div class="footer-contact"> <p><label><span><i class="fa fa-user"></i></span></label>Bagus Surochman<br/> <label><span><i class="fa fa-map-marker"></i></span></label>Jl. Manukwari 3 Kanigoro - Blitar Jatim</p> <p class="phone"><label><i class="fa fa-whatsapp"></i></label> <span>085-655-656-604</span><br/> <label><i class="fa fa-facebook-official"></i></label> <span>www.fb.com/surochmansota</span><br/> <label><i class="fa fa-envelope-o"></i></label> <span>surochmansota@ymail.com</span><br/> <label><i class="fa fa-rss"></i></label> <span class="sotabilo aa"><a target="_blank" class="murub" href="https://www.blogger.com/follow.g?blogID=8359472699845456853">Follow blog Kurazone</a></span> </p> </div> <style>.sotabilo{padding:1px 4px 2px;border-radius:3px;color:#fff;font-weight:bold}</style>
3. Letakkan pada salah satu widget di footer yang telah dibuat pada artikel bagian #1. misalnya saja diletakkan pada bagian Kontak (widget paling kiri). Kemudian Simpan
Hasil sementara akan nampak seperti gambar dibawah ini :
Sisanya tinggal mengganti Nama, Alamat, Nomor HP, ID Facebook, Alamat Email dan ID Follow Blog. Cara mengganti ID Follow Blog nya adalah dengan masuk ke akun blogger kalian lalu copy ID Blogger yang ada di address bar. Sebagai petunjuk, lihat gambar dibawah ini :
Menambahkan Widget Menu
Setelah berhasil menambahkan widget kontak, maka kalian bisa menambahkan widget lagi yang dikhususkan untuk menampilkan Menu, berikut adalah langkahnya
1. Masuk ke Menu Tata Letak2. Copy kode dibawah ini :
<div style="padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #222;padding-left:5px;border-left:5px solid #222;"> <a class="murub" style="color:white" href="https://www.kurazone.net/p/color-picker.html" target="_blank" title="Color Picker">Color Picker<span style="background:#222" class="sasabilo"><i class="fa fa-paint-brush"></i></span></a> </div>3. Letakkan pada salah satu widget di footer yang telah dibuat pada artikel bagian #1. misalnya saja diletakkan pada bagian Tools atau Navigasi (bebas mau pilih yang mana). Kemudian Simpan
Hasil sementara akan terlihat seperti gambar dibawah ini
Jika ingin menampilkan menu lebih dari satu, maka paste kode yang kalian copy tadi dibawah kode menu yang pertama, begitupun seterusnya. Paste sebanyak yang kalian mau.
Hasilnya akan muncul beberapa menu sesuai jumlah paste yang kalian lakukan
Sisanya tinggal mengganti nama menu, URL menu dan ikon menu. Untuk mengubah ikon menu, silahkan cari caranya di Google, karena akan terasa panjang jika dijelaskan disini.
Selanjutnya masih tersisa 1 Widget di footer, widget yang satu ini bebas mau kalian isi apa. Bisa untuk menu maupun iklan. Jadi, silakan kalian explore sendiri mau dipakai untuk apa.
Itulah informasi mengenai "Cara Membuat Tampilan Footer Seperti Kurazone - Bagian #2", selamat mencoba dan semoga bermanfaat. Goodluck!
Baca juga :