Cara Membuat Tampilan Footer Seperti Kurazone - Bagian #2

Pilihan Editor :

Cara Membuat Tampilan Footer Seperti Kurazone - Bagian #2
KURAZONE ~ Halo sahabat Kurazer, setelah saya bahas Cara Membuat Tampilan Footer Seperti Kurazone - Bagian #1 kini saatnya saya lanjutkan kembali dengan membahas Bagian ke #2 nya. Artikel ini sekaligus menjadi bagian terakhir dari cara membuat tampilan footer seperti kurazone.

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 Letak
2. 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 Letak
2. 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 :
  1. Cara Membuat Tombol Follow seperti Kurazone
  2. Cara Memasang dan Menggunakan Fontawesome
  3. Cara Membuat Tautan Menyala pada Blog
BACA JUGA ARTIKEL MENARIK LAINNYA:

Tidak ada komentar :

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.