Cara Membuat Tampilan Footer 3 Kolom Seperti Jagoandzgn #2

Jagoandzgn.com - Setelah kita membahas versi pertama yaitu Cara Membuat Tampilan Footer 3 Kolom Seperti Jagoandzgn #1 yang hanya memberikan CSS dan HTML saja, nah pada kali ini saya akan memberikan tutorial bagaimana cara memberikan tutorial menambahkan nama alamat dll di bagian kedua ini, sekaligus tahap terakhir dalam pembuatan footer Jagoandzgn.

Nah, di artikel sebelumnya kita hanya membahas bagaimana cara membuat tampilannya saja seperti gambar dibawah ini.

Selanjutnya, kita akan membuat dan menambahkan informasi kontak dan menu - menu yang ingin di tampilkan di bagian menu tersebut.

Cara Membuat Tampilan Footer 3 Kolom Seperti Jagoandzgn #2

1. Silahkan kamu login ke blogger.com dengan menggunakan Gmail kamu.
2. Masuk ke menu TATA LETAK > Klik Edit dibagian kontak.
3. Silahkan copy kode HTML dibawah ini dan paste di kolom konten tersebut.

<div class="footer-contact">
<p><label><span><i class="fa fa-user"></i></span></label>Ahmad Febrian Sembiring<br/>
<label><span><i class="fa fa-map-marker"></i></span></label>Jln. Medan Sinembah, Sumatera Utara - Indonesia</p>
<p class="phone"><label><i class="fa fa-whatsapp"></i></label>
<span>0813-7579-3824</span><br/>
<label><i class="fa fa-facebook-official"></i></label>
<span>www.fb.com/AhmdFebryan</span><br/>
<label><i class="fa fa-envelope-o"></i></label>
<span>cs@jagoandzgn.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?view=FOLLOW&blogID=1211395477844098579">Follow Blog Jagoandzgn.com</a></span>
</p>
</div>
<style>.sotabilo{padding:1px 4px 2px;border-radius:3px;color:#fff;font-weight:bold}</style>

4. Untuk hasilnya akan seperti gambar dibawah ini.

Sisanya kamu tinggal mengganti Nama, Alamat, No HP / Bisnis, ID Facebook, Alamat email dan ID Follow Blog yang bisa kamu copy dengan masuk ke akun blogger kamu lalu copy ID Blogger yang berada di bagian address bar.

5. Selanjutnya, Silahkan kamu copy kode dibawah ini untuk menambahkan widget lagi yang dikhususkan untuk menampilkan menu tersebut, dan letakkan tepat dibagian Tools atau Navigasi tersebut.

<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.jagoandzgn.com/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>

6. Hasilnya akan terlihat seperti gambar dibawah ini.

Jika kamu ingin menambahkan menu lebih dari satu, kamu hanya tambahkan menu lebih dari satu, maka paste kode yang tadi kamu copy dibawah kode menu yang pertama, begitupun seterusnya untuk tampilannya kamu bisa lihat gambar dibawah ini.

7. Kalau sudah silahkan klik SIMPAN dan Selesai.

Bagaimana mudah bukan untuk tutorial Cara Membuat Tampilan Footer 3 Kolom Seperti Jagoandzgn #2, apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.