Cara Membuat Navigasi Menu di Footer Blog

BARANGKALI Anda berminat menambah navigasi hidangan di bab footer atau bab paling bawah halaman blog Anda.

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

Contoh atau demonya dapat dilihat di CB Blogger Lab bab bawah. Ini penampakannya:

Cara Membuat Navigasi Menu di Footer Blog Cara Membuat Navigasi Menu di Footer Blog


Mau bikin? Berikut ini instruksi 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 instruksi ]]></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 instruksi HTML Navigasi Menu Footer di bawah instruksi footer blog Anda, contohnya di bawah instruksi <div class='footer'> .... instruksi 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 instruksi # dengan linknya.
5. Save Template!

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

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours