Hello, Sobat Ahli Narasi! Bagi kamu yang memiliki blog, pasti ingin membuatnya lebih optimalkan dari segi SEO. Nah, salah satu cara untuk meningkatkan SEO pada blog adalah dengan membuat navigasi blog yang baik. Pada artikel kali ini, aku akan memberikan tutorial tentang bagaimana cara membuat navigasi blog amp yang baik dan SEO-friendly.
Pengertian Navigasi Blog Amp
Sebelum kita mulai, mungkin ada yang bertanya-tanya, apa sih navigasi blog amp itu? Navigasi blog amp adalah menu navigasi yang berfungsi untuk memudahkan pengunjung blog dalam mencari informasi di dalam blog tersebut. Navigasi yang baik akan membuat pengunjung betah berlama-lama di dalam blog kita. Selain itu, navigasi yang baik juga akan memudahkan mesin pencari untuk merayapi blog kita.
Langkah-Langkah Membuat Navigasi Blog Amp
Mari kita mulai dengan langkah-langkahnya. Yang pertama, tentu saja kamu harus log in ke dalam akun blogger kamu. Setelah itu, ikuti langkah-langkah berikut:
1. Pilih “Tata Letak” di menu dasbor blogger kamu.
2. Pilih “Penyunting Tata Letak”.
3. Klik “Tambah Gadget” pada salah satu tempat gadget (seperti header atau sidebar).
4. Pilih “HTML/JavaScript”.
5. Salin kode HTML berikut:
<div class="menu-toggle"><button on="tap:sidebar.toggle" class="ampstart-btn caps m1">☰ Menu</button></div><nav id="sidebar" class="sidebar ampstart-sidebar px3" layout="nodisplay"><button on="tap:sidebar.toggle" class="ampstart-btn right-align">✖</button><ul class="list-reset my3"><li><a href="/" class="block px3 py2 black text-decoration-none">Home</a></li><li><a href="/p/contact.html" class="block px3 py2 black text-decoration-none">Contact</a></li><li><a href="/search/label/Tutorial" class="block px3 py2 black text-decoration-none">Tutorial</a></li><li><a href="/p/about.html" class="block px3 py2 black text-decoration-none">About</a></li></ul></nav>6. Tempelkan kode HTML tersebut pada bagian HTML/JavaScript yang sudah kamu pilih sebelumnya.
7. Klik “Simpan” pada gadget yang sudah kamu tambahkan.
8. Klik “Simpan Pengaturan” pada tata letak blog kamu.
Penjelasan Kode HTML Navigasi Amp
Bagi kamu yang masih bingung dengan kode HTML yang kamu salin tadi, aku akan memberikan penjelasan singkatnya:
<div class=”menu-toggle”>: ini adalah tombol menu navigasi yang akan ditampilkan.
<nav id=”sidebar” class=”sidebar ampstart-sidebar px3″ layout=”nodisplay”>: ini adalah tempat dimana menu navigasi akan ditampilkan.
<ul class=”list-reset my3″>: ini adalah daftar menu navigasi yang akan ditampilkan.
<li>: ini adalah item dari daftar menu navigasi.
<a href=””: ini adalah link dari item menu navigasi.
Selain kode HTML di atas, kamu juga bisa menambahkan menu navigasi lainnya yang kamu inginkan. Cukup tambahkan kode seperti di atas, ganti nama menu navigasi dan link-nya sesuai dengan yang kamu inginkan.
Perbaiki Tampilan Navigasi Amp
Sekarang kamu sudah berhasil membuat navigasi blog amp. Namun, tampilan navigasi yang muncul belum tentu sesuai dengan apa yang kamu inginkan. Kamu bisa memperbaiki tampilan navigasi dengan mengubah kode CSS.
Berikut adalah contoh kode CSS yang bisa kamu gunakan:
.menu-toggle {position: fixed;top: 0;right: 0;z-index: 100;}.sidebar {position: fixed;top: 0;right: -300px;width: 300px;height: 100%;background: #eeeeee;z-index: 99;overflow-y: auto;transition: right 0.2s;}.sidebar.show {right: 0;}.sidebar a {display: block;padding: 10px 15px;color: #333333;font-weight: bold;font-size: 18px;text-decoration: none;}.sidebar a:hover {background: #cccccc;}Untuk mengubah tampilan navigasi, kamu hanya perlu menambahkan kode CSS tersebut pada blog kamu. Kamu bisa menambahkannya pada bagian “CSS” di menu “Tata Letak” blogger kamu.
Kesimpulan
Jadi, navigasi blog amp adalah menu navigasi yang sangat penting untuk meningkatkan SEO pada blog kamu. Dengan membuat navigasi yang baik, kamu bisa memudahkan pengunjung untuk mencari informasi di dalam blog kamu. Selain itu, navigasi yang baik juga akan memudahkan mesin pencari untuk merayapi blog kamu. Semoga tutorial ini bermanfaat bagi kamu yang ingin meningkatkan SEO pada blog kamu!
