Cara Membuat Navigasi Menu di Footer Blog

Cara Membuat Navigasi Menu di Footer Blog

Cara Membuat Navigasi Menu di Footer Blog

BARANGKALI Anda berminat menambah navigasi menu di bagian footer atau bagian paling bawah halaman blog Anda.

Fungsinya sama dengan navigasi menu di atas header (top menu) atau navigasi menu di bawah header (main menu), yaitu menampilkan link ke halaman statis, tautan ke halaman label (posting per label), atau link eksternal.

Contoh atau demonya bisa dilihat di CB Blogger Lab bagian bawah. Ini penampakannya:

Cara Membuat Navigasi Menu di Footer Blog


Mau bikin? Berikut ini kode dan cara memasangnya.

Cara Membuat Navigasi Menu di Footer Blog

1. Template > Edit HTML
2. Pasang Kode CSS Navigasi Menu Footer berikut ini di atas kode ]]></b:skin>

.ct-wrapper-footer {position: relative;margin: 0 auto;width: 100%;}
.footer-nav { position: relative;width: 100%;z-index: 1000;overflow: hidden;background:#f0f0f0;}
.footer-nav ul {margin: 0 auto;padding: 1em 0;text-align: center;width: 100%;}
.footer-nav li { list-style-type: none; display: inline-block; padding: 0; }
.footer-nav li a { color: #333; display: inline-block; font-style: normal !important; margin: 0 0 0 1em; padding: 0; text-decoration: none; }
.footer-nav li a:after { content: "2022"; display: inline-block; margin: 0 0 0 1em; color: #777; }
.footer-nav li:last-child a:after { display: none; }
.footer-nav ul li a:hover, .footer-nav ul li a:active { text-decoration: none; color: #0D78A5; }

3. Pasang kode HTML Navigasi Menu Footer di bawah kode footer blog Anda, misalnya di bawah kode <div class='footer'> .... kode lain.... </div>

<div class='footer-nav'>
<div class='ct-wrapper-footer'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Disclaimer</a></li>
</ul>
</div>
</div>

4. Silakan edit menunya dengan mengganti kode # dengan linknya.
5. Save Template!

Cek hasilnya. Good Luck! (www.contohblog.com).*

Labels: Desain Blog

Related Posts

2 Komentar untuk "Cara Membuat Navigasi Menu di Footer Blog"

Ini yang saya cari,sekarang sudah jadi,.thanks infonya min,sangat bermanfaat,.
Sepertinya hanya perlu sedikit mengedit di bagian angka 2202 saya ganti jadi tanda "/" itu..thanks.

min biar menu navigasi nya ada di kiri memanjang gimana ya ?

1. Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *