Halaman

▼

#MODUL 5 TUTORIAL EDIT MENU NAVIGASI PADA TEMPLATE


Apa kabar sobat MD semua, semoga kalian masih semangat untuk mempelajari dunia blogging. Pada #modul 5 kali ini kita akan mengulas tentang tutorial edit menu navigasi pada template blog hasil download. Bagi yang belum sempat baca #modul 4 diharapkan mempelajarinya terlebih dahulu sebelum melangkah ke #modul 5 ini, bisa lihat di : SITEMAPS

Sebelumnya silahkan download terlebih dahulu atau siapkan terlebih dahulu template blog yang akan digunakan, jika Anda sudah menerapkan templatenya maka bisa lanjut ke bagian langkah-langkah langsung. Apabila belum download, bisa cari di : MASTERS THEMES

Template yang akan saya ulas kali ini sebagai contoh adalah template analog blogger, alasan memakai ini sebagai bahan percobaan karena template ini cukup mudah untuk di edit karena jenisnya sendiri adalah landing page, namun akan sangat rumit jika Anda tidak membaca langkah-langkah ini secara berurutan.

1. Pertama, masuk ke dashboard blog Anda
2. Kedua, pilih EDIT HTML > pada script klik CTRL+F, kemudian cari kata kunci untuk menu navigasi yang ada pada template, lalu ganti sesuai keinginan


  • Script pada menu navigasi template analog blogger kurang lebih seperti di bawah ini :

 <!-- Top Nav -->
                <div CLASS="navbar-collapse navbar-ex1-collapse collapse" aria-expanded="false" STYLE="height: 1px;">
                    <ul CLASS="nav navbar-nav pull-right">
                        <li CLASS="hidden">
                            <a CLASS="page-scroll" HREF="#page-top"></a>
                        </li>
                        <li CLASS=""><a CLASS="page-scroll" HREF="#home">Home</a></li>
                        <li CLASS=""><a CLASS="page-scroll" HREF="#about">About</a></li>
                        <li CLASS=""><a CLASS="page-scroll" HREF="#services">Services</a></li>
                        <li CLASS=""><a CLASS="page-scroll" HREF="#team">Team</a></li>
                        <li CLASS=""><a CLASS="page-scroll" HREF="#price">Price</a></li>
                        <li CLASS=""><a CLASS="page-scroll" HREF="#blog">Blog</a></li>
                        <li CLASS=""><a CLASS="page-scroll" HREF="#contact">Contact</a></li>
                        <li CLASS="dropdown">
                            <a HREF="#" CLASS="dropdown-toggle" data-toggle="dropdown" ROLE="button" aria-haspopup="true" aria-expanded="false">Pages <span CLASS="ion-ios-arrow-down"></span></a>
                            <ul CLASS="dropdown-menu">
                                <li><a HREF="#">Single Page</a></li>
                                <li><a HREF="#">Single Post</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>

  • Silahkan ubah menu navigasi tersebut sesuai selera, misal ubah bagian >Home</a></li> menjadi >Sitemaps</a></li> atau apapun terserah keinginan Anda.
  • Pada bagian HREF="#home" bisa Anda ganti yang #home menjadi alamat url atau link tujuan contoh : www.masterdzgn.com/p/sitemaps.html/ selain mengganti atau replace kata dan link, Anda juga bisa menghapus menu jika dirasa terlalu banyak, misal Anda hanya butuh 3 menu saja maka menu yang lain bisa dihapus
  • Cara hapus menu yaitu block script mulai dari <li CLASS=""><a sampai Home</a></li> atau lihat pada script berikut ini
     <li CLASS=""><a CLASS="page-scroll" HREF="#home">Home</a></li>

3. Ketiga, jika sudah dan tidak terjadi error (apabila error berarti ada kesalahan dalam penghapusan script), maka selanjutnya silahkan klik SIMPAN TEMA dan lihat previewnya. Caranya seperti langkah no. 2 untuk penggantian menu navigasi atau penghapusan menu yang tidak diperlukan



Saya rasa cukup sekian dulu untuk tutorial edit menu navigasi pada template blog, apabila Anda berhasil mengaplikasikannya maka artinya sudah berhasil menuntaskan #modul 5 ini. Jika ada yang ingin ditanyakan bisa melalui kolom komentar di bawah.

Selanjutnya Anda bisa mempelajari materi pada #modul 6 tentang tutorial membuat contact form pada halaman statis blog. Materinya bisa Anda lihat di : SITEMAPS. Terima sudah berkunjung dan semoga harimu menyenangkan.
pada tanggal