Cara Membuat Menu Navigasi di Footer Blogger

Situs web telah banyak digunakan untuk berbagai keperluan, selain sosial media. Baik untuk toko daring, profil perusahaan, atau untuk catatan daring. Seperti halnya sebuah peta, situs web juga memerlukan bagian untuk navigasi. Tujuannya agar pengunjung dapat dengan mudah memahami konten situs Anda. Lalu, bagaimana cara membuat menu navigasi di footer Blogger?

Umumnya, menu navigasi sebuah situs web dibagi menjadi dua. Menu navigasi utama dan menu navigasi kedua. Navigasi utama terletak dibagian atas atau header. Sedangkan untuk second navigation menu biasanya terletak di footer dan berdekatan dengan kredit situs.

Contoh menu navigasi di footer Blogger

Peletakan navigasi menu seperti yang saya jelaskan di atas bukanlah pedoman baku. Pasalnya, letak navigasi tergantung dengan konsep yang sudah dibuat oleh editor tema. Ada tema yang meletakkan navigasi utamanya dibagian sidebar. Begitu juga dengan menu keduanya.

Ditutorial ini saya akan membagikan cara membuat menu navigasi di footer Blogger yang menggunakan tema bawaanya, yaitu Emporio. Dimana, tema Emporio hanya mendukung satu menu navigasi dibagian header.

Tambahkan gadget HTML/JavaScript

Buka dasbor Blogger Anda, pilih menu Tata Letak untuk mulai melakukan konfigurasi pada tata letak baku tema Emporio. Disini, Anda akan menambahkan satu gadget khusus untuk menambah kode HTML untuk membuat navigasi.

Klik Tambahkan Gadget di bagian Bilah Sisi kemudian pilih HTML/JavaScript. Klik-tahan-geser gadget baru tersebut kebagian footer.

Edit gadget tersebut dengan mengeklik ikon pensil di bagian kanan gadget lalu tempel kode HTML dibawah ini.

<div class='footer-nav'>
<div class='ct-wrapper-footer'>
<ul>
<li><a href='https://domain.bloganda.tld/p/halaman1.html'>Halaman 1</a></li>
<li><a href='https://domain.bloganda.tld/p/halaman2.html'>Halaman 2</a></li>
<li><a href='https://domain.bloganda.tld/p/halaman3.html'>Halaman 3</a></li>
</ul>
</div>
</div>

Silahkan sesuaikan dengan tautan halaman beserta teks yang ditampilkan.

Untuk menyimpannya, silahkan klik tombol Simpan.

Tambahkan kode CSS

Tampilan HTML di atas masih sangat sederhana dan kurang sedap dipandang. Untuk itu, Anda perlu menambahkan baris kode CSS melalui editor tema Blogger.

Masih di laman Tata Letak, klik menu Tema yang ada dibagian kiri, tepat dibawah menu Tata Letak. Setelah berada di laman daftar tema, tema aktif Anda akan berada dibagian paling atas dari halaman tema. Untuk membuka editor tema, klik tombol opsi (titik tiga vertikal).

Setelah masuk di editor tema, carilah kode penutup CSS tema Blogger seperti  ]]></b:skin>. Gunakan fitur pencari Ctrl F untuk memudahkan pencarian.

Setelah Anda menemukan kode penutup CSS Blogger, tambahkan kode CSS berikut tepat diatasnya.

/* Kode CSS untuk menu navigasi footer */
.ct-wrapper-footer {position: relative; margin: 0 auto; width: 100%;}
.footer-nav { position: relative; width: 100%; z-index: 1000; overflow: hidden;}
.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: ""; 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: #729c0b; }

Simpan hasil editing Anda dengan mengeklik tombol simpan dibagian kanan atas editor. Sampai langkah ini, Anda sudah dapat membuat menu navigasi di footer Blogger.

Sumber

Cara Mudah Membuat Menu Pada Footer Blog Keren, tersedia daring di https://nandatrio.com/membuat-menu-pada-footer-blog/.