2016/11/16

Cara membuat dan mengatur menu navigasi web atau blog

Belajar bagaimana cara membuat dan mengatur navigasi yang baik dalam sebuah website ataupun blog ??
Cara membuat dan mengatur menu navigasi web atau blog

Seperti yang kita tahu pengertian dari navigasi adalah petunjuk  posisi dan arah sebuah menu Di dalam dunia web, navigasi sangat penting supaya visitor yang sedang berada di dalam halaman tertentu tidak tersesat dan mudah mengakses halaman-halaman lain dalam website ataupun blog kita .

Dengan begitu navigasi yang sudah menjadi fasilitas yang penting pada website dianggap sangat perlu dan wajib di terapkan agar para pengunjung lebih mudah dipandu untuk menentukan kategori yang mau kunjungi.

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 di akses dan dipahami yakni navigasi yang mudah di artikan 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 prvacy 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.
navigasi web atau blog yang salah penempatan

Contoh navigasi yang tidak bagus lainnya adalah membuat menu menu terlalu banyak . secara sadar mungkin sang pengunjung menganggap bahwa web anda web profesional , panda 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.

Ada juga menu navigasi lainnya yakni widget label . ini lebih komplit lagi sebab semua artikel dikategorikan dengan jenis kategori yang berbeda . cara efektif penempatan widget label ini dibawah postingan atau di sidebar bagian paling bawah.

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 .
silahkan kopi kode dibawah ini dan pasang diatas kode ]]> </ b: skin>

Css untuk mengubah popular post jadi berwarna

popular post css #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px} #PopularPosts1 ul li:first-child{background:#ff4c54;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:- 15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font- size:28px;color:#fff} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin- right:10px;background:transparent;padding:0;width:70px;height:70px;} #PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none} #PopularPosts1 ul li a:hover{color:#222;text-decoration:none} #PopularPosts3 img{ -moz-border-radius: 130px; -webkit-border-radius: 130px; border-radius: 130px;

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 .

Sebelum kita belajar cara membuatnya sebaiknya Mengenal Header blog dan fungsinya dulu , jika sudah kita lanjut tahap pembuatannya .

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?blogID\x3d3056213950652149372','//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.

Jika sudah kita lanjut proses pembuatan menu navigasinya caranya pun sangat mudah perhatikan tutorial berikut .

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
    Membuat Menu navigasi halaman , page pada blog

    tambahkan widget laman atau page


    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 )
    Cara membuat dan mengatur navigasi web atau blog

    Sekarang save dan lihat hasilnya ..
Mudah bukan ??  kapan kapan kita akan belajar cara membuatnya lebih profesional dengan mengedit isi templatemu , biar blogmu kelihatan keren tanpa merusak penempatan navigasinya , berhubung kali ini haya tutorial membuat dan mengatur saja jadi kita buat secara gampang . kalau ada yang mudah buat apa mau cari yang susah . hehehe


Silahkan share jika menurutmu bermanfaat 👀

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan

EmoticonEmoticon