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.
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>
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>
7. Setelah itu, lalu klik "Simpan Tema"
Lihatlah hasilnya pada blog sobat, mudah bukan? Sekian dulu, pembahasan kita soal cara membuat navigasi menu di blog Blogspot. Semoga bermanfaat.
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 |
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
5. Tempatkan kode dibawah tepat diatas kode ]]></b:skin>
6. Lihat seperti contoh dibawah.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; }
Sumber Gambar: Tangkap Layar Edit Html |
#Catatan: Ganti simbol (#) diatas dengan alamat url pada blog sobat.<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>
7. Setelah itu, lalu klik "Simpan Tema"
Sumber Gambar : Tangkap Layar Edit Html |