Cara membuat navigasi menu di footer blog blogspot

Tutorial Blogging - Cara Membuat Navigasi Menu di blog Blogspot

Sebuah Navigasi Menu dalam sebuah situs website atau blog memang menjadi poin yang sangat penting, karena dengan membuat navigasi memudahkan pengunjung blog kamu, tapi template pada baris footer atau halaman paling bawah tidak cukup ruang seperti template yang saya gunakan yang seperti ini.

Sumber Gambar : Tangkap Layar Template pribadi

Jika kamu menambahkan gadget untuk menampilkan Daftar Link, itu sama saja tidak baik, karena tampilan akan berada drop down ke bawah bukan kesamping bukan?

Langsung saja ya sobat, tidak usah berlama-lama lagi

Inilah cara membuat navigasi menu di footer blog Blogspot manual dengan menggunakan kode html

1. Pergi ke dashboard blog sobat
2. Setelah itu, pergi ke "Tema" lalu sobat pilih "Edit Html"
3. Seperti contoh dibawah

4. Setelah memilih "EDIT HTML", selanjutnya sobat cari kode ]]></b:skin>
5. Tempatkan kode dibawah tepat diatas 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; }

6. Lihat seperti contoh dibawah

Sumber Gambar: Tangkap Layar Edit Html

7. Setelah itu, selanjutnya pasang kode Navigasi Menu Footer di bawah kode footer pada blog sobat, misalnya dibawah 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>

#Catatan: Ganti simbol (#) diatas dengan alamat url pada blog sobat.
7. Setelah itu, lalu klik "Simpan Tema"

Sumber Gambar : Tangkap Layar Edit Html

Lihatlah hasilnya pada blog sobat, mudah bukan? Sekian dulu, pembahasan kita soal cara membuat navigasi menu di blog Blogspot. Semoga bermanfaat.

Share this post