Belajar bagaimana cara membuat dan mengatur navigasi yang baik dalam sebuah website ataupun blog ??

Tapi membuat navigasi tidak hanya berdasarkan penempatan saja. Navigasi yang baik yakni navigasi yang mudah di akses dan dipahami.

Masih banyak bloggers sampai saat ini salah mengartikan navigasi yang mudah diakses oleh pengunjung.

Sebagian dari mereka membuat dan memposisikan saja menu menu navigasi ini padahal untuk kelengkapan sebuah navigasi yang mudah diakses dan dipahami yakni navigasi yang mudah diartikan menu itu apa dan isinya apa.

Bagaimana caranya itu ? yakni tadi membuat navigasi yang mudah di akses melalui bahasa masing-masing.

Apa jadinya jika seorang pengunjung dari negara yang sama kemudian mencari sesuatu penting atau mungkin mau mengenal web anda lebih jauh lagi tentu sang visitor ingin mengetahui dimana dan apa bahasanya untuk kategori ini.

Untuk itu, jika kamu memiliki website atau blog dengan bahasa khusus dari negaramu maka navigasinya pun beri nama yang mudah dipahami dan isinya tentu sesuai dengan bahasamu supaya orang orang tidak kebingungan.

Contoh Navigasi yang Buruk

Kadang ada bloggers membuat navigasi halaman blog dengan membuat menu seperti privacy policy, disclaimer dan tos.

Kita tahu hal itu penting untuk kelengkapan sebuah web atau blog cuman saya kadang tidak setuju jika menu yang saya kunjungi isinya tidak seperti yang saya harapkan, seperti.. apa saja isi tos web tersebut, lalu disclaimernya seperti apa sebab dia menggunakan bahasa lain.

Tentu saya sebagai pengunjung akan kebingungan dan tidak mengerti,  dengan begitu saya mengangggap bahwa navigasi pada blog ini susah untuk saya akses.

Contoh navigasi yang tidak bagus lainnya adalah membuat menu menu terlalu banyak. Secara sadar mungkin sang pengunjung menganggap bahwa web anda web profesional, pandai dalam menempatkan, membuat script menu navigasi. Tapi dengan menempatkan banyaknya menu-menu hanya akan membuat mata pengunjung kesakitan tidak tahu harus pilih apa.

Cara Mengatur Posisi Navigasi yang Baik dan Benar

Tempatkan Menu pada posisi yang mudah terlihat saat pengunjung datang pada web kita atau blog kita di posisi terlihat terlebih dulu seperti dibawah header, diatas header, dengan begitu setelah membaca sebuah artikel sang pengunjung sudah tahu ada beberapa menu diatas header atau dibawah header yang mungkin pengunjung itu butuhkan.

Ada juga cara menempatkan navigasi yang baik lainnya yakni memasang menu dibawah postingan. Biasanya seorang blogger menggunakan script artikel terkait atau related artikel, cara ini juga bagus dan sangat direkomendasikan.

Widget Pendukung Navigasi Blog

Ada juga widget pendukung navigasi lainnya pada blog yang wajib di sertakan yakni widget entri populer atau popular post.

Widget popular post akan memberitahukan pada pengunjung blog bahwa dalam blog ini artikel yang paling populer adalah ini dan pengujung boleh ikut membaca itu.

Kemudian widget arsip, fungsinya memberitahukan kepada pengunjung ada berapa banyak artikel blog ini, artikel ini dibuat kapan, dan apakah sang pemilik blog aktif membuat konten baru ?

Terkadang sang pemasang iklan lebih memperhatikan arsip blog terlebih dulu untuk menilai up to datenya sebuah blog.

Tapi ada banyak blogger yang tidak memasang ke dua widget ini sebab tampilan bawaan tidak begitu rapi dan tidak menarik.

Tapi sebenarnya dengan menambahkan beberapa kode css yang akan saya share dibawah akan merubah tampilan kedua widget ini lebih kelihatan keren .

Css Untuk Mengubah Popular Post Jadi Berwarna

Css Untuk Widget Arsip Supaya Kelihatan Lebih Rapi

/* Widget Arsip */
#ArchiveList ul > li > a.post-count-link{font-size:18px;width:100%;margin:0;padding:0 15px;line-height:38px;background-color:#f6f6f6;box-sizing:border-box;letter-spacing:1px}
#ArchiveList ul ul li a.post-count-link{width:auto;margin:0 5px;padding:8px 25px;background:transparent;text-transform:uppercase;font:12px merriweather sans;font-weight:700}
#ArchiveList .zippy{visibility:hidden}
#ArchiveList ul li a.toggle{position:absolute;top:0;left:0;width:100%;display:block;height:38px;z-index:5}
#ArchiveList ul ul li a.toggle{position:absolute;top:0;left:0;width:30px;height:24px;display:block;z-index:0}
#ArchiveList .toggle{position:relative}
#ArchiveList ul ul .zippy{color:#fff;visibility:visible;text-shadow:none}
#ArchiveList ul ul .zippy:before{content:'f105';font-family:FontAwesome;position:absolute;top:3px;left:12px;padding:4px;line-height:1;font-size:12px;color:#8C8C8C}
#ArchiveList ul ul .toggle-open:before{content:'f107';font-family:FontAwesome;position:absolute;top:3px;left:10px}
#ArchiveList ul li{padding:0!important;text-indent:0!important;margin:0!important;position:relative;background:none}
#ArchiveList ul .post-count-link{padding:10px 0;display:inline-block;margin:0 5px}
#ArchiveList ul ul .posts li{padding:0 5px 5px!important;margin:0 5px 5px 20px !important;text-transform:none;border-bottom:1px solid #f0f0f0;font-size:12px}  #ArchiveList ul ul .posts li:before{content:'f0da';font-family:FontAwesome;padding-right:5px;}
#ArchiveList ul{margin:0 0 2px!important}
span.post-count{position:absolute;right:7px;top:7px;color:#666;background:#fff;padd

Kemudian penempatan menu navigasi dibawah header, menu navigasi dibawah header harus lebih jelas sebab menu utama dalam sebuah blog sebaiknya di tempatkan dibawah header atau diatas header.

Adapun cara pembuatan menu navigasi dibawah header sangat mudah kita tinggal memasang widget laman yang sudah disediakan blogger.

Membuat Menu Navigasi About, Contact, Disclaimer, Sitemap dan Tos

1. Buka dashboard blogger. Pilih laman, buat 5 buah laman baru dan masing masing  beri judul About-contact-disclaimer-sitemap-dan terakhir tos.
2. Pada laman about, ceritakan siapa kamu, tujuan blogmu apa, visi misimu dan lengkapi hingga tempat tinggalmu.
3. Pada halaman disclaimer – isi dengan keterangan syarat dan ketentuan yang berlaku. Kamu boleh mengutip isi disclaimer yang ada pada blog ini.
4. Pada laman contact, buat form kontak untuk mempermudah pengunjung untuk menghubungi kamu selaku admin blog. Kamu boleh menggunakan kode ini, pasang pada posisi penulisan Html bukan menu compose

   Hubungi Admin melalui form contact di bawah . sesegera mungkin kami akan membalas Jika kami tidak sibuk<input id=”ContactForm1_contact-form-email” name=”email” placeholder=”Email *” size=”30″ type=”text” value=”” />

   <textarea cols=”25″ id=”ContactForm1_contact-form-email-message” name=”email-message” placeholder=”Message *” rows=”5″></textarea>
   <input id=”ContactForm1_contact-form-submit” type=”button” value=”Send Message” />
   <br />
   <form id=”kontak-arlina” name=”contact-form”>
   <div style=”max-width: 180px; text-align: center; width: 100%;”>
   <div id=”ContactForm1_contact-form-error-message”>
   </div>
   <div id=”ContactForm1_contact-form-success-message”>
   </div>
   </div>
   </form>
   <style scoped=”” type=”text/css”>
   #comments,.post_meta,#blog-pager{display:none}
   form{color:#666}
   #kontak-arlina{margin:auto;max-width:400px}
   #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
   #ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}
   #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
   #ContactForm1_contact-form-submit{float:left;background:#95a5a6;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}
   #ContactForm1_contact-form-submit:hover{background:#e74c3c;color:#fff;}
   #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
   .contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0}
   .contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}
   img.contact-form-cross{line-height:40px;margin-left:5px}
   .post-body input{width:initial}
   @media only screen and (max-width:640px){
   #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
   </style>
   <script type=”text/javascript”>
   //<![CDATA[
   if (window.jstiming) window.jstiming.load.tick(‘widgetJsBefore’);
   //]]>
   </script>
   <script src=”https://www.blogger.com/static/v1/widgets/2271878333-widgets.js” type=”text/javascript”></script>
   <script type=”text/javascript”>
   //<![CDATA[
   if (typeof(BLOG_attachCsiOnload) != ‘undefined’ && BLOG_attachCsiOnload != null) { window[‘blogger_templates_experiment_id’] = “templatesV1″;window[‘blogger_blog_id’] = ‘3056213950652149372’;BLOG_attachCsiOnload(”); }_WidgetManager._Init(‘//www.blogger.com/rearrange?blogIDx3d3056213950652149372′,’//om-blogging.blogspot.com/’,’3056213950652149372′);
   _WidgetManager._RegisterWidget(‘_ContactFormView’, new _WidgetInfo(‘ContactForm1’, ‘footer1’, null, document.getElementById(‘ContactForm1’), {‘contactFormMessageSendingMsg’: ‘Sending…’, ‘contactFormMessageSentMsg’: ‘Your message has been sent.’, ‘contactFormMessageNotSentMsg’: ‘Message could not be sent. Please try again later.’, ‘contactFormInvalidEmailMsg’: ‘A valid email address is required.’, ‘contactFormEmptyMessageMsg’: ‘Message field cannot be empty.’, ‘title’: ‘Contact Form’, ‘blogId’: ‘3056213950652149372’, ‘contactFormNameMsg’: ‘Name’, ‘contactFormEmailMsg’: ‘Email’, ‘contactFormMessageMsg’: ‘Message’, ‘contactFormSendMsg’: ‘Send’, ‘submitUrl’: ‘https://www.blogger.com/contact-form.do’}, ‘displayModeFull’));
   //]]>
   </script>

   Hasilnya akan sama dengan menu contact yang ada pada blog ini

5.  Lalu pada laman sitemap pada penulisan HTML isi dengan kode ini untuk membuat isi navigasinya

   <div id=”bp_toc”>
   </div>
   <script src=”https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js” type=”text/javascript”></script> <script src=”/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc” type=”text/javascript”></script>

   <style scoped=”” type=”text/css”>
   #comments {display:none;}
   </style>

6.  Dan terakhir kita membuat Isi laman Tos – term of service, kamu boleh mengutip tos yang ada pada blog ini atau mengubahnya sesuai dengan karakter blog milikmu.

Membuat Menu Navigasi Halaman, Page pada Blog

1. Login ke blogger
2. menuju ke dashboard blogger
3. Pilih tata letak / add layout pada kolom diatas postingan
   

   tambahkan widget laman atau page

    

   

4. Jika sudah, sekarng tambahkan masing laman yang sudah dibuat tadi dengan mencentang kolom masing masing (ilustrasi di gambar hanya contoh)
   

   Sekarang save dan lihat hasilnya ..