Cara Mudah Memasang Link Menu Navigasi

Cara mudah memasang Link Menu Navigasi. Menurut pendapat saya Template adalah "tubuh secara utuh" dari sebuah blog karena mencakup semua bagian pada blog. Kita bisa melihat di bagian atas ada menu navigasi, beberapa widget seperti arsip, postingan populer, attribusi dan lain-lain yang diletakkan di bagian samping atau bawah tampilan blog. Lalu bagian utama dari blog yaitu Posting area.

Saya masih melihat ada banyak sobat-sobat kita yang masih bingung dalam menata tampilan blog mereka, apa yang harus dipasang, bagian mana yang sebaiknya dihilangkan, atau bagaimana mengatur template agar bisa menarik dan tidak membuat pengunjung bingung apalagi bosan.

Kali ini saya akan mengangkat topik tentang Menu Navigasi, yaitu menu yang mengantarkan pengunjung ke artikel-artikel pilihan mereka dengan cepat sesuai kategori masing-masing. Hal ini akan sangat memudahkan bagi pengunjung untuk menjelajahi isi blog lebih jauh yang tanpa disadari telah membuat mereka membuka blog kita dalam waktu yang cukup lama.

http://kendhou.blogspot.co.id/2015/12/membuat-link-menu-navigasi.html

Bagi sobat-sobat yang telah menggunakan template custom pada blognya secara otomatis sudah ada tampilan menu navigasi. Apalagi template-template yang beredar saat ini sudah lumayan lengkap dan bagus meskipun versi yang gratisan. Gunakan template responsive karena di era yang serba mobile sekarang ini, sobat akan mengerti betapa pentingnya template responsive bagi sebuah blog dan hampir menjadi suatu keharusan.

Tapi bagi sobat yang masih menggunakan template bawaan blogger, akan bingung dengan tampilan navigasinya yang terlalu sederhana. Tapi jika sobat masih ingin tetap menggunakan template bawaan tersebut, sobat bisa mencari di google untuk cara pembuatan menu navigasi. Tapi jika sobat merasa malas untuk mencari sendiri sobat bisa baca tentang cara membuat menu navigasi resposive yang pernah saya posting.

Oke, Menu navigasi sudah ada. Apa yang akan kita isi pada menu tersebut?

Beberapa bagian penting yang sebaiknya ada pada menu navigasi adalah menu Contact, About, Sitemap dan tentunya link yang akan mengarah ke artikel-artikel blog yang telah diorganisir secara kategori (label).

Contact : link yang dibuat untuk menu ini akan menuju laman (halaman statis) berisi informasi-informasi bagaimana cara menghubungi pemilik blog seperti no handphone, form email, Pin BB, alamat Facebook dan lain-lain.

About : link menuju halaman statis yang menerangkan tentang pemilik blog, hal ini penting untuk lebih mengenalkan tentang siapa sang pemilik. Tetapi tidak semua harus dituliskan disini.

Sitemap : Bukan sitemap seperti yang ada pada google webmaster dsb, tetapi arti Sitemap disini adalah Daftar Isi dari konten blog yang telah dipublikasikan sehingga pengunjung dapat langsung memilih artikel mana yang ingin dibacanya.

Ini juga berguna bagi blog, dengan adanya Sitmap pada blog maka artikel-artikel yang ada pada blog akan lebih mudah diindex oleh mesin pencari. Jadi sebaiknya sobat mempertimbangkan untuk membuat laman ini.

Bagaimana dengan link yang mengarah pada artikel-artikel dalam blog?
Begini caranya...

Sobat harus membuat pengkategorian pada setiap artikel yang sobat buat. Gunakan menu label pada halaman pembuatan artikel, letaknya di sebelah kanan atas (blogger/blogspot). Tentukan nama label yang sesuai dengan topik artikel sobat, contohnya blog niche otomotif bisa dibuatkan kategori seperti Mobil, Motor, Harga, Tips Servis, Audio dan lain-lain.

Perhatikan gambar dibawah ini, sobat dapat memasukkan nama label bagi artikel yang sobat buat, atau tinggal memilih nama label yang sudah ada di bawahnya. Ingat baik-baik nama-nama label yang telah sobat buat, agar dapat dijadikan link pada menu navigasi.

http://kendhou.blogspot.co.id/2015/12/membuat-link-menu-navigasi.html
membuat label

Membuat link navigasi

Jika sobat menggunakan tutorial pembuatan menu navigasi responsive dari blog ini,
1. Klik menu Template > Edit HTML

2. Cari kode </header>

3. Dibawah kode header tersebut akan ada sript seperti dibawah ini

<nav>
<a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a> 
   <ul class="menu">
   <li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a>
   </li><li><a  href="#"><i class="fa fa-user"></i> ABOUT</a></li>
  <li><a  href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>
  <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a>
    <ul><li><a href="#">Sub Sub-Menu 1</a></li>
   <li><a href="#">Sub Sub-Menu 2</a></li></ul> </li>
    <li><a href="#">Sub-Menu 3</a><ul>
   <li><a href="#">Sub Sub-Menu 1</a></li>
   <li><a href="#">Sub Sub-Menu 2</a></li>
   </ul></li></ul></li>
<li><a  href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>
   <li><a  href="#"><i class="fa fa-tags"></i> CATEGORIES</a>
  <ul class="sub-menu">
  <li><a href="#">Sub-Menu 1</a></li>
  <li><a href="#">Sub-Menu 2</a><ul>
  <li><a href="#">Sub Sub-Menu 1</a></li>
  <li><a href="#">Sub Sub-Menu 2</a></li>
 </ul></li><li><a href="#">Sub-Menu 3</a>
<ul>
 <li><a href="#">Sub Sub-Menu 1</a></li>
<li><a href="#">Sub Sub-Menu 2</a></li>
    </ul> </li></ul></li>
<li><a  href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>
<li><a  href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>
</ul>
</nav>

4. Ganti tanda (#) dengan link label pada blog, seperti contoh dibawah ini.
 
<li><a  href="http://kendhou.blogspot.com/search/label/Nama label"><i class="fa fa-bullhorn"></i> nama menu</a></li>

5. Rubah url blog (kendhou.blogspot.com) menjadi url blog sobat. Nama label harus sama dengan nama-nama yang ada pada kolom label di halaman entry. Nama menu adalah nama yang akan terlihat pada menu navigasi dan bisa sobat buat sesuka hati, usahakan menggunakan nama yang sesuai dengan kategorinya.

6. Untuk menu dropdown (perhatikan yang berwarna hijau), biarkan saja tanda pagar tetap seperti itu. Tidak perlu dirubah tanda pagarnya atau diberi link url apapun.

7. Untuk link menuju halaman statis akan lebih mudah lagi, tinggal ganti tanda pagar (#) dengan url halaman statis tersebut. Seperti laman about, contact, sitemap dll.

</li><li><a  href="#"><i class="fa fa-user"></i> ABOUT</a></li>

8. Beres

Untuk menu navigasi yang dibuat melalui widget, sobat tinggal merubah sript yang ada pada widget seperti diatas. Beberapa script akan terlihat berbeda dengan contoh, tapi itu bukanlah sebuah masalah. Karena jika sobat memperhatikan dengan teliti akan langsung bisa diketahui dimana link dan nama harus diletakkan.

Pun dengan yang telah menggunakan template custom, apapun template yang sobat gunakan. cari kode </header> dan rubah script link menu navigasi di bawahnya. Sekali lagi saya ingatkan, tidak semua script kodenya sama.

Sekian tutorial saya mengenai cara mudah memasang link navigasi. Gunakan ketelitian untuk melakukan hal ini, hapus menu/sub menu/sub sub menu yang tidak sobat gunakan. karena akan terlihat aneh ketika suatu tombol menu navigasi tidak mengarah kemanapun saat diklik.

Semoga bermanfaat dan Salam Pintar...

Berlangganan update artikel terbaru via email:

11 Responses to "Cara Mudah Memasang Link Menu Navigasi"

  1. Terimakasih informasinya sangat bermanfaat mas, lengkap serta mudah dipahami . salam kenal

    ReplyDelete
  2. Ini juga masih tahap belajar buat artikel tutorial yang ramah pembaca.
    BTW... terima kasih kembali dan salam kenal.

    ReplyDelete
  3. 100%TERPERCAYA TOKO ONLINE RESMI BUKAN PENIPUAN DI DELIMA PONSEL 100% KAMI JAMIN UANGX KAMI KEMBALIKAN APA BILA BARANGX TIDAK SAMPAI DALAN JANGKA 2 HARI ATAU KUNJUNGI WEBSITE RESMI KAMI DI http://delima-ponsel.blogspot.com
    PONSEL:HUB/SMS:0852-4004-4475 PIN BB:5B3C6CE6
    Ready Stock ! Apple iphone 5 32GB Rp.3.000.000,-
    Ready Stock ! Apple iPhone 5S 32GB Rp.4.000.000,-
    Ready Stock ! Apple iPhone 6 plus 32gb Rp.5.500.000,-
    Ready Stock ! Samsung Galaxy S5 Rp.2.500.000
    Ready Stock ! Samsung Galaxy S6 32GB Putih Rp.3.700.000
    Ready Stock ! Samsung Galaxy S4 I9500 Putih Rp.2.200.000
    Ready Stock ! Samsung Galaxy Note 3 PUTIH Rp.3.000.000
    Ready Stock ! Samsung Galaxy Note 4 SM-N910H Gold Rp.3.500.000,-
    Ready Stock ! Samsung Galaxy A3 A300H 16GB Rp.2.000.000
    Ready Stock ! Samsung Galaxy A5 A500F Silver Rp. 2.500.000,-
    Ready Stock ! Samsung Galaxy E5 E500H Putih Rp.1.700.000
    Ready Stock ! Samsung Galaxy E7 E700H Putih Rp. 1.900.000,-
    Ready Stock ! Apple iPhone 4 16GB - Black Rp.1.800.000,-
    Ready Stock ! Apple iPhone 4S 16GB (dari Telkomsel) Rp.2.200.000,-
    Ready Stock ! Samsung Galaxy Grand Prime SM-530H Rp.1.200.000
    Ready Stock ! Asus Zenfone 2 ZE551ML RAM 4GB-64GB Rp.2.700.000,

    ReplyDelete
  4. Makasih yaa .. Alhamdulillah setelah baca blog km , saya jadi ngerti .. jangan lupa mampir juga ya ke tempat aku http://sucinazifah.blogspot.co.id/

    ReplyDelete
  5. mantap infonya

    http://www.kuliyeah.com/

    ReplyDelete
  6. Trimakasih infonya. Sangat membantu. Kalo bisa tolong koreksi blog saya dan kasih tau apa yg kurang. http://jawaratrik.blogspot.com

    ReplyDelete
  7. Keren banget tutorial. sangat membantu pengembangan Web kami.

    Kalau ada yang Butuh info Lowongan Kerja, jangan lupa kunjungi https://expocpnsbumn.blogspot.co.id/ yaaaa

    ReplyDelete
  8. sudah berhasil gan,, terimakasih

    ReplyDelete

Terima kasih atas kunjungannya...
Pertanyaan, pendapat,serta saran dan masukan dapat sobat tuliskan pada kolom komentar yang tersedia. Harap menggunakan bahasa yang baik dan sopan.
Mohon maaf, segala bentuk SPAM dan mengandung unsur SARA akan kami hapus.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel