Belajar bagaimana cara menciptakan dan mengatur navigasi yang baik dalam sebuah website ataupun blog ??
Tapi menciptakan navigasi tidak hanya berdasarkan penempatan saja . navigasi yang baik yakni navigasi yang simpel di kanal dan dipahami .
Masih banyak bloggers hingga ketika ini salah mengartikan navigasi yang simpel diakses oleh pengunjung , sebagian dari mereka menciptakan dan memposisikan saja sajian menu navigasi ini padahal untuk kelengkapan sebuah navigasi yang simpel di kanal dan dipahami yakni navigasi yang simpel di artikan sajian itu apa dan isinya apa
Bagaimana caranya itu ? yakni tadi menciptakan navigasi yang simpel di kanal melalui bahasa masing-masing .
Apa jadinya bila 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 , bila kau mempunyai website atau blog dengan bahasa khusus dari negaramu maka navigasinya pun beri nama yang simpel dipahami dan isinya tentu sesuai dengan bahasamu supaya orang orang tidak kebingungan.
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 elok lainnya yakni menciptakan sajian menu terlalu banyak . secara sadar mungkin sang pengunjung menganggap bahwa web anda web profesional , panda dalam menempatkan,membuat script sajian navigasi, tapi dengan menempatkan banyaknya sajian menu hanya akan menciptakan mata pengunjung kesakitan tidak tahu harus pilih apa.
Ada juga cara menempatkan navigasi yang baik lainnya yakni memasang menu dibawah postingan. biasanya seorang blogger memakai script artikel terkait atau related artikel , cara ini juga elok dan sangat direkomendasikan.
Ada juga sajian navigasi lainnya yakni widget label . ini lebih komplit lagi alasannya semua artikel dikategorikan dengan jenis kategori yang berbeda . cara efektif penempatan widget label ini dibawah postingan atau di sidebar bab paling bawah.
Seperti yang kita tahu pengertian dari navigasi yakni petunjuk posisi dan arah sebuah sajian Di dalam dunia web, navigasi sangat penting supaya visitor yang sedang berada di dalam halaman tertentu tidak tersesat dan simpel mengakses halaman-halaman lain dalam website ataupun blog kita .
Dengan begitu navigasi yang sudah menjadi kemudahan yang penting pada website dianggap sangat perlu dan wajib di terapkan supaya para pengunjung lebih simpel dipandu untuk memilih kategori yang mau kunjungi.
Tapi menciptakan navigasi tidak hanya berdasarkan penempatan saja . navigasi yang baik yakni navigasi yang simpel di kanal dan dipahami .
Masih banyak bloggers hingga ketika ini salah mengartikan navigasi yang simpel diakses oleh pengunjung , sebagian dari mereka menciptakan dan memposisikan saja sajian menu navigasi ini padahal untuk kelengkapan sebuah navigasi yang simpel di kanal dan dipahami yakni navigasi yang simpel di artikan sajian itu apa dan isinya apa
Bagaimana caranya itu ? yakni tadi menciptakan navigasi yang simpel di kanal melalui bahasa masing-masing .
Apa jadinya bila 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 , bila kau mempunyai website atau blog dengan bahasa khusus dari negaramu maka navigasinya pun beri nama yang simpel dipahami dan isinya tentu sesuai dengan bahasamu supaya orang orang tidak kebingungan.
Contoh navigasi yang jelek .
Kadang ada bloggers membuat navigasi halaman blog dengan menciptakan sajian menyerupai prvacy policy, disclaimer dan tos, kita tahu hal itu penting untuk kelengkapan sebuah web atau blog cuman saya kadang tidak oke bila sajian yang saya kunjungi isinya tidak menyerupai yang saya harapkan , seperti.. apa saja isi tos web tersebut , kemudian disclaimernya menyerupai apa alasannya ia memakai 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 elok lainnya yakni menciptakan sajian menu terlalu banyak . secara sadar mungkin sang pengunjung menganggap bahwa web anda web profesional , panda dalam menempatkan,membuat script sajian navigasi, tapi dengan menempatkan banyaknya sajian menu hanya akan menciptakan mata pengunjung kesakitan tidak tahu harus pilih apa.
Cara mengatur Posisi navigasi yang baik dan benar
Tempatkan Menu pada posisi yang simpel terlihat ketika pengunjung tiba pada web kita atau blog kita di posisi terlihat terlebih dulu menyerupai dibawah header ,diatas header , dengan begitu sesudah membaca sebuah artikel sang pengunjung sudah tahu ada beberapa sajian 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 memakai script artikel terkait atau related artikel , cara ini juga elok dan sangat direkomendasikan.
Ada juga sajian navigasi lainnya yakni widget label . ini lebih komplit lagi alasannya semua artikel dikategorikan dengan jenis kategori yang berbeda . cara efektif penempatan widget label ini dibawah postingan atau di sidebar bab paling bawah.
Widget pendukung navigasi blog
Ada juga widget pendukung navigasi lainnya pada blog yang wajib di sertakan yakni widget entri terkenal atau popular post . widget popular post akan memberitahukan pada pengunjung blog bahwa dalam blog ini artikel yang paling terkenal yakni ini dan pengujung boleh ikut membaca itu.
Kemudian widget arsip , fungsinya memberitahukan kepada pengunjung ada berapa banyak artikel blog ini, artikel ini dibentuk kapan , dan apakah sang pemilik blog aktif menciptakan konten gres ?
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 alasannya tampilan bawaan tidak begitu rapi dan tidak menarik . tapi bahwasanya dengan menambahkan beberapa aba-aba css yang akan saya share dibawah akan merubah tampilan kedua widget ini lebih kelihatan keren .
silahkan kopi aba-aba dibawah ini dan pasang diatas aba-aba ]]> </ 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 sajian navigasi dibawah header , sajian navigasi dibawah header harus lebih terang alasannya sajian utama dalam sebuah blog sebaiknya di tempatkan dibawah header atau diatas header . adapun cara pembuatan sajian navigasi dibawah header sangat simpel kita tinggal memasang widget laman yang sudah disediakan blogger .
Sebelum kita mencar ilmu cara membuatnya sebaiknya Mengenal Header blog dan fungsinya dulu , bila sudah kita lanjut tahap pembuatannya .
Membuat sajian navigasi About ,contact , disclaimer ,Sitemap dan Tos
- Buka dashboard blogger , Pilih laman , buat 5 buah laman gres dan masing masing beri judul About-contact-disclaimer-sitemap-dan terakhir tos
- Pada laman about, ceritakan siapa kamu, tujuan blogmu apa , visi misimu dan lengkapi hingga kawasan tinggalmu.
- Pada halaman disclaimer - isi dengan keterangan syarat dan ketentuan yang berlaku . kau boleh mengutip isi disclaimer yang ada pada blog ini .
- pada laman contact , buat form kontak untuk mempermudah pengunjung untuk menghubungi kau selaku admin blog . kau boleh memakai aba-aba ini , pasang pada posisi penulisan Html bukan sajian 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="" />Hasilnya akan sama dengan sajian contact yang ada pada blog ini
<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> - Lalu pada laman sitemap pada penulisan HTML isi dengan aba-aba ini untuk menciptakan 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&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style> - Dan terakhir kita menciptakan Isi laman Tos - term of service , kau boleh mengutip tos yang ada pada blog ini atau mengubahnya sesuai dengan aksara blog milikmu.
Jika sudah kita lanjut proses pembuatan sajian navigasinya caranya pun sangat simpel perhatikan tutorial berikut .
Membuat Menu navigasi halaman , page pada blog
- Login ke blogger
- menuju ke dashboard blogger
- Pilih tata letak / add layout pada kolom diatas postingan
tambahkan widget laman atau page
- Jika sudah , sekarng tambahkan masing laman yang sudah dibentuk tadi dengan mencentang kolom masing masing ( ilustrasi di gambar hanya pola )
Sekarang save dan lihat akhirnya ..
Praktis bukan ?? kapan kapan kita akan mencar ilmu cara membuatnya lebih profesional dengan mengedit isi templatemu , biar blogmu kelihatan keren tanpa merusak penempatan navigasinya , berhubung kali ini haya tutorial menciptakan dan mengatur saja jadi kita buat secara simpel . kalau ada yang simpel buat apa mau cari yang susah . hehehe
Silahkan share bila menurutmu bermanfaat 👀