Menu Navigasi Dropdown Responsive V1. Jika kamu ingin mengganti menu navigasi di blog kamu maka kamu dapat mencoba cara membuat menu navigasi dropdown responsive yang akan admin bagikan saat ini. Navigasi adalah secara umum berarti petunjuk posisi dan arah perjalanan. Namun, sedikit berbeda dalam dunia blog.

Di dalam dunia perblogkan, menu navigasi adalah sebuah fasilitas bisa berupa widget ataupun terntanam di tema blog yang diberikan oleh si pemilik situs dimana didalamnya berisi sekumpulan link-link penting, menu navigasi ini berfungsi sebagai pemandu kepada pengunjung agar dapat lebih mudah dalam menentukan kategori yang diinginkan tanpa harus kebingungan mencarinya.

Menu navigasi dianggap penting agar user yang sedang berada di dalam halaman tertentu akan dengan mudah menemukan halaman-halaman lain yang dia cari di dalam blog kamu menggunakan navigasi yang kamu buat. Menu navigasi dropdown ini adalah menu navigasi yang di dalamnya terdapat kumpulan submenu lainnya.

Menu Navigasi Dropdown

Navigasi Menu Dropdown

Menu navigasi ini merupakan bagian dari blog yang berisi link-link utama yang mengarah pada halaman tertentu di sebuah web blog. Biasanya, menu navigasi tertampil pada menu dan link yang terstruktur.

Memasang menu navigasi dropdown responsive ini di Blogger caranya sebenarnya tidak sulit, asalkan sesering saja kamu mencoba mengedit HTML template blog kamu. Sebelumnya juga admin sudah berbagi membuat menu navigasi responsive v2 dan membuat tombol demo dan download V2 di Blog dan juga tentang neat menu navigasi with social button.

Nah, mungkin saja kamu sudah bosan dengan menu navigasi di Blog kamu dan ingin menggantinya dengan yang baru. Berikut adalah navigasi dropdown yang bisa kamu coba gunakan. Berikut cara membuatnya di Blogger:

Cara Membuat Navigasi Menu Dropdown di Blogger

1. Di Blogger, pilih blog kamu

2. Pilih menu Tema 👉 Edit HTML

edit html

3. Letakan kode di bawah ini di atas kode ]]></b:skin>

#menunavku{margin:0;padding:0;background-color:black;width:100%;height:40px;overflow:hidden;text-transform:uppercase;font-family:calibri} #menunavku #menuku{list-style-type:none;margin:0;padding:0;width:100%;height:40px} #menuku li{display:inline-block;float:left;margin-left:1px} #menuku li a{display:block;height:30px;text-align:center;line-height:30px;color:#fff;background:#2f3036;text-decoration:none;padding:5px 10px} #menuku ul li ul li a{min-width:140px} #menuku .hiddenku{display:none} #menuku li .hiddenku li a{min-width:170px;background-color:#5d5e63} .hiddenku{width:170px;margin:0;padding:0;position:absolute;z-index:999} .hiddenku li a{display:inline-block} /*menuku hover*/ #menuku li a:hover{background-color:red} #menuku li .hiddenku li a:hover{background-color:red} /*memunculkan menu*/ #menuku li:hover .hiddenku{display:block;min-width:140px;float:none} \*menu checkbox*\ #show-menuku{width:100%;height:20px;cursor:pointer} input[type=checkbox]{display:none;-webkit-appearance:none} input[type=checkbox]:checked ~ #menuku{display:block} .show-menuku{text-decoration:none;color:#fff;background-color:#1946c5;text-align:center;padding:10px 0;display:none} /*Responsive Styles*/ @media screen and (max-width:800px){#menunavku{width:100%;height:auto}#menuku{width:100%;display:none}#menunavku #menuku{position:relative;height:0}#menuku li{display:inline-block;margin:0;width:100%}#menuku li a{display:inline-block;margin-left:1px;width:100%;padding:5 0;margin:0}#menuku .hiddenku{position:relative;width:100%;padding:0}.show-menuku{display:block;cursor:pointer}}

4. Kamu bisa menggunakan kode HTML di bawah ini untuk mengganti menu navigasi lamamu.

<nav id='menunavku'> <label for="show-menuku" class="show-menuku">Show Menu</label> <input type="checkbox" id="show-menuku" role="button"/> <ul id="menuku"> <li><a href="#">Home</a></li> <li> <a href="javascript:void(0)">Pages ￬</a> <ul class="hiddenku"> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Disclaimer</a></li> <li><a href="#">Privacy Police</a></li> </ul> </li> <li> <a href="javascript:void(0)">Belajar Microscoft Office ￬</a> <ul class="hiddenku"> <li><a href="#">Microsoft Word</a></li> <li><a href="#">Microsoft Excel</a></li> <li><a href="#">Microsoft Power Point</a></li> </ul> </li> </ul> </nav>

5. Save Temamu.

Video Tutorial

Video di atas adalah contoh cara pemasangannya di Blogger, buat kamu yang masih bingung dengan tutorial yang admin bagikan tadi.

Penutup

Seringkali, saat kita membuka sebuah web ataupun blog, merasa kesal karena tidak mendapatkan halaman website yang dicari dikarenakan navigasi yang ruwet dan tidak jelas. Bagi kamu yang penasaran tampilan langsungnya, kamu bisa melihat demonya langsung di link di bawah ini:

👉 LIHAT DEMO 👈

Diharapkan dengan tutorial ini kamu bisa memasang menu navigasi dropdown sesuai yang kamu inginkan. Sekian postingan kesempatan ini, selamat mencoba.

Ndo Andre at Tuesday, January 30, 2024

By Ndo Andre At Monday, September 11, 2023

Cara Membuat Menu Navigasi Lavalamp Pure CSS3 di Blog

By Ndo Andre At Monday, September 11, 2023

Dengan adanya menu navigasi web blog yang baik pengunjung akan lebih mudah mengakses berbagai konten yang disajikan di situs web blog tersebut. Hal ini membantu meningkatkan durasi kunjungan karena mereka tidak mengalami kesulitan dalam mencari informasi yang mereka butuhkan.

Pengunjung juga akan merasa lebih puas dengan pengalaman mereka di blog tersebut. Ini akan berdampak positif pada retensi pengunjung, dimana mereka akan berpeluang kembali lagi ke blogmu untuk mendapatkan informasi atau mengakses layanan yang mereka butuhkan.

Meningkatnya durasi kunjungan dan retensi ini sangat penting dalam membangun hubungan jangka panjang dengan pengunjung dan meningkatkan efektivitas pada blog tersebut. Menggunakan menu yang responsif berfungsi untuk membuat pengunjung betah dan tertarik dengan halaman website.

Lavalamp Menu Pure CSS3

Menu Navigasi Lavalamp

Kamu perlu meletakkan menu navigasi di tempat yang strategis. Perlu diketahui bahwa pembuatan navigasi lebih mengedepankan kemudahan daripada kebebasan kreativitas. Oleh sebab itu, letakkan menu di tempat yang familiar bagi kebanyakan pengguna internet, misalnya di bagian atas (header) blog.

Mungkin sobat sudah pernah melihat menu navigasi yang seperti ini di beberapa template blog, karena navigasi ini sudah lama beredar dan sudah banyak dipakai di template-template blog di luar sana. Tertarik ingin mencoba menggunakannya juga? bagi kamu yang tertarik dengan Menu Lavalamp ini berikut ini adalah cara membuatnya:

Cara Membuat Menu Navigasi Lavalamp di Blogger

1. Di Blogger, pilih blog kamu

2. Pilih menu Tema 👉 Edit HTML

Edit Html

3. Letakan kode di bawah ini di atas kode ]]></b:skin>

#nav,#nav ul { list-style:none outside none; margin:0; padding:0; }
#nav { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWxU5gyJWyr3GAxXNllR_uQ4RDFl5gNThArSckQu8CYisMMlyKhw3a5YoNz3h9FfT1W4villkxdepvD5zFWwjS2eHzOts8hNqHFoBBEUfj71gEDJV6CWS89UDCdmD8TvK7-iaFpZ9fMwWA/s1600/menu_bg.png') no-repeat scroll 0 0 transparent; clear:both; font-size:12px; height:58px; padding:0 0 0 9px; position:relative; width:957px; }
#nav ul { background-color:#222; border:1px solid #222; border-radius:0 5px 5px 5px; border-width:0 1px 1px; box-shadow:0 5px 5px rgba(0,0,0,0.5); left:-9999px; overflow:hidden; position:absolute; top:-9999px; z-index:2; -moz-transform:scaleY(0); -ms-transform:scaleY(0); -o-transform:scaleY(0); -webkit-transform:scaleY(0); transform:scaleY(0); /*-moz-transform-origin:0 0; -ms-transform-origin:0 0; -o-transform-origin:0 0; -webkit-transform-origin:0 0; transform-origin:0 0; -moz-transition:-moz-transform 0.1s linear; -ms-transition:-ms-transform 0.1s linear; -o-transition:-o-transform 0.1s linear; -webkit-transition:-webkit-transform 0.1s linear; transition:transform 0.1s linear; */; }
#nav li { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUGJPijH3s5M8Ka8jArIKAL-qlrDCp1HPxW7ApW82eBj0Qahd_WlfHcQF4lcnSfXxUtGCufnEFYJM2glXBpZih-odHlV6C567nIjhIbf3CiDrA8hwLUaNUWn1ACZUs8fRn6_6omCIHYbJf/s1600/menu_line.png') no-repeat scroll right 5px transparent; float:left; position:relative; }
#nav li a { color:#FFFFFF; display:block; float:left; font-weight:normal; height:30px; padding:23px 20px 0; position:relative; text-decoration:none; text-shadow:1px 1px 1px #000000; }
#nav li:hover > a { color:#00B4FF; }
#nav li:hover,#nav a:focus,#nav a:hover,#nav a:active { background:none repeat scroll 0 0 #121212; outline:0 none; }
#nav li:hover ul.subs { left:0; top:53px; width:180px; -moz-transform:scaleY(1); -ms-transform:scaleY(1); -o-transform:scaleY(1); -webkit-transform:scaleY(1); transform:scaleY(1); }
#nav ul li { background:none; width:100%; }
#nav ul li a { float:none; }
#nav ul li:hover > a { background-color:#121212; color:#00B4FF; }
#lavalamp { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbc_3LNA15O-LZSJojdxEGaTlc4tpyDwbDfqeix_qK5eDK8nzYUFGV1B98mtsxvvPtw5HMacrKx7zaEs5xEKHyUA9NECyEICOUqkfUGeCMCFOoRNc6G7mweG-bhG5QMOW2Ckn69WLKr5Nc/s1600/lavalamp.png') no-repeat scroll 0 0 transparent; height:16px; left:13px; position:absolute; top:0; width:64px; -moz-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; -webkit-transition:all 300ms ease; transition:all 300ms ease; }
#lavalamp:hover { -moz-transition-duration:3000s; -ms-transition-duration:3000s; -o-transition-duration:3000s; -webkit-transition-duration:3000s; transition-duration:3000s; }
#nav li:nth-of-type(1):hover ~ #lavalamp { left:13px; }
#nav li:nth-of-type(2):hover ~ #lavalamp { left:90px; }
#nav li:nth-of-type(3):hover ~ #lavalamp { left:170px; }
#nav li:nth-of-type(4):hover ~ #lavalamp { left:250px; }
#nav li:nth-of-type(5):hover ~ #lavalamp { left:330px; }
#nav li:nth-of-type(6):hover ~ #lavalamp { left:410px; }
#nav li:nth-of-type(7):hover ~ #lavalamp { left:490px; }
#nav li:nth-of-type(8):hover ~ #lavalamp { left:565px; }

Kode warna merah di atas adalah lebarnya, silahkan sesuaikan atau ganti ukurannya sesuai template yang digunakan
4. Gunakan kode di bawah ini dan masukan ke dalam template sobat:

<div class="container">
<ul id="nav">
<li><a href="/">Home</a></li>
<li><a class="hsubs" href="#">Menu 1</a>
<ul class="subs">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 2</a>
<ul class="subs">
<li><a href="#">Submenu 2-1</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
<li><a href="#">Submenu 2-6</a></li>
<li><a href="#">Submenu 2-7</a></li>
<li><a href="#">Submenu 2-8</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 3</a>
<ul class="subs">
<li><a href="#">Submenu 3-1</a></li>
<li><a href="#">Submenu 3-2</a></li>
<li><a href="#">Submenu 3-3</a></li>
<li><a href="#">Submenu 3-4</a></li>
<li><a href="#">Submenu 3-5</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="http://www.haisob.com">Back</a></li>
<div id="lavalamp"></div>
</ul>
</div>

5. Kode tanda # itu di ganti dengan link milik kamu.

6. Save temanya.

Video Tutorial:

Nah bagaimana sobat keren bukan? Nah video di atas adalah tutorial cara membuatnya di Blogger agar kamu lebih paham bagaimana cara pemasangannnya.

Penutup

Sebelumnya juga admin sudah berbagi menu navigasi responsive v1 dan neat menu navigasi dengan social button dan juga tentang menu navigasi dengan icon efek hover di Blogger.

Kebanyakan orang saat ini lebih menyukai segala hal yang cepat, instan, dan mudah. Taksonomi atau lebih dikenal dengan sebutan tag akan membantu pengunjung mengakses konten dan halaman yang relevan dengan topik terkait.

LIVE DEMO

Menu navigasi yang menarik tentu jauh lebih baik dibandingkan tampilan menu monoton. Sekian artikel yang dapat dibagikan saat ini semoga bermanfaat dan jangan lupa lihat artikel terbaru blog ini.

Ndo Andre at Monday, September 11, 2023

By Ndo Andre At Saturday, September 09, 2023

Membuat Menu Navigasi Dropdown Bounce Effect di Blog

By Ndo Andre At Saturday, September 09, 2023

Menu Navigasi Dropdown Bounce Effect. Dengan menambahkan menu navigasi pada blog, pengunjung menjadi lebih mudah menelusuri dan menemukan artikel dalam grup atau kategori tertentu. Misalnya, jika menu navigasi menyertakan bagian berlabel widget, pengguna dapat mengakses menu drop-down yang berisi berbagai opsi terkait widget, seperti widget Facebook, widget berlangganan email, widget Google Plus, dan banyak lagi.

Perancangan sebuah website harus memperhatikan pentingnya navigasi website. Oleh karena itu, penting untuk memastikan navigasi situs Anda efektif. Ini harus memungkinkan pengguna untuk dengan mudah menavigasi halaman yang ada.

Evaluasi rutin terhadap navigasi Anda diperlukan, dan setiap masalah atau kebingungan yang dialami pengunjung harus segera ditangani dan diselesaikan. Meningkatkan SEO situs web adalah langkah penting untuk mencapai peningkatan visibilitas di mesin pencari.

Menu Nav

Navigasi Menu Dropdown Bounce Effect

Struktur navigasi hierarki adalah jenis navigasi web yang umum digunakan oleh situs portal berita, yang menunya berbeda-beda di setiap halaman. Menu halaman beranda menyertakan link ke kategori tertentu, namun bila Anda memilih kategori, menu akan beralih ke subkategori.

Sebelumnya sepeser.com telah menunjukkan cara membuat menu navigasi lavalamp dan juga membahas tentang menu yang dapat diubah ukurannya di berbagai perangkat dan menu dengan tombol untuk media sosial di Blogger.

Cara Membuat Navigasi Menu Dropdown Bounce Effect di Blogger

1. Di Blogger, pilih blog kamu

2. Pilih menu Tema 👉 Edit HTML

Edit Html

3. Jika sudah ada menu pada template maka dihapus saja, tapi jika menunya lebih bagus dari menu ini sebaiknya berpikir 4x sebelum menghapusnya.

4. Letakan kode di bawah ini di atas kode ]]></b:skin>

#navsepeser { background:#156AA6; overflow:hidden; } #navsepeser ul { float:left; height:30px; list-style:none; overflow:hidden; margin:0; padding:0; } #navsepeser li { float:left; text-shadow:1px 1px 2px #0066B3; padding:0; } #navsepeser li a { background:#156AA6; color:#eee; display:block; font-weight:400; line-height:30px; border-left:1px solid #4B88B3; border-right:1px solid #043457; text-align:center; text-decoration:none; margin:0; padding:0 25px; } #navsepeser li.depan a { border-left:none; } #navsepeser li ul { background:#156AA6; height:auto; border:0; position:absolute; width:225px; z-index:80; box-shadow:0 1px 5px #034257; display:none; margin:0; padding:0; } #navsepeser li li { display:block; float:none; width:225px; border-top:1px solid #4B88B3; border-bottom:1px solid #043457; margin:0; padding:0; } #navsepeser li:hover li a { background:#156AA6; } #navsepeser li ul a { display:block; height:30px; font-size:12px; font-style:normal; text-align:left; margin:0; padding:0 10px 0 15px; } #navsepeser li a:hover,#navsepeser li:hover > a { color:#fff; } #navsepeser li:hover ul.hidden { display:block; }

5. Kode ini diletakan di tempat paling cocok di dalam template kamu, misalnya mengganti kode html menu widget yang lama.

<nav id='navsepeser'> <ul> <li class='depan'><a href='/'>Beranda</a></li> <li><a href='#'>Title 2</a> <ul class='' style='display: none;'> <li><a href='#'>Dropdown</a></li> <li><a href='#'>Dropdown</a></li> </ul> </li> <li><a href='#'>Title 3</a> <ul class='' style='display: none;'> <li><a href='#'>Dropdown</a></li> <li><a href='#'>Dropdown</a></li> <li><a href='#'>Dropdown</a></li> </ul> </li> <li><a href='#'>Title 4</a> <ul class='' style='display: none;'> <li><a href='#'>Dropdown</a></li> <li><a href='#'>Dropdown</a></li> <li><a href='#'>Dropdown</a></li> <li><a href='#'>Dropdown</a></li> </ul> </li> </ul> </nav>

6. Letakan kode di bawah ini di atas kode </head>.

<script src='http://code.jquery.com/ui/1.8.21/jquery-ui.min.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ $('#navsepeser li ul').removeClass('hidden'); $('#navsepeser li').hover(function() { $('ul', this).filter(':not(:animated)').slideDown(600, 'easeOutBounce'); }, function() { $('ul', this).slideUp(600, 'easeInExpo'); }); //]]> </script>

7. Save dan lihat hasilnya.

Video Tutorial

Video di atas adalah tutorial cara membuat dan memasangnnya di Blogger, bagikamu yang masih belum mengerti dengen cara pemasangannya.

Penutup

Aspek penting dalam meningkatkan SEO situs web mencakup memastikan navigasi yang efektif, yang memfasilitasi pengguna dalam menemukan dan mengakses konten yang diinginkan dengan mudah.

Jika situs web Anda mudah dinavigasi, pengguna cenderung menghabiskan lebih banyak waktu di situs, mengunjungi lebih banyak halaman, dan memiliki rasio pentalan lebih rendah. Selain itu, mengoptimalkan navigasi juga memiliki dampak menguntungkan pada struktur situs web dan tautan internal.

Ndo Andre at Saturday, September 09, 2023

By Ndo Andre At Saturday, September 09, 2023

Neat Menu Navigasi Dropdown dengan Social Button di Blog

By Ndo Andre At Saturday, September 09, 2023

Neat Menu Navigasi Dropdown. Hai teman-teman, apakah Anda merasa bosan dengan navigasi menu di blog Anda dan membutuhkan penggantinya? Apakah tema blog Anda tidak memiliki menu navigasi? Menu navigasi memegang peranan penting dalam sebuah blog, karena membantu pengguna dalam mengakses konten yang diinginkan dengan mudah dan cepat.

Dengan demikian, pengguna tidak akan kesulitan menemukan artikel terkait atau halaman tertentu, karena menu navigasi menyederhanakan proses pencarian. Kurangnya menu navigasi yang terstruktur dengan baik sangat membatasi tampilan situs web, sehingga menghambat pengunjung untuk segera menemukan konten yang diinginkan.

Untuk menjamin kenyamanan pengunjung, penting untuk memiliki menu navigasi yang dirancang dengan baik. Hal ini tidak hanya membantu perayapan dan identifikasi detail konten secara efisien oleh sistem tetapi juga sangat penting bagi sebuah blog, terutama ketika bertujuan untuk pertumbuhan bisnis atau pengembangan blog web yang ekstensif.

Neat Menu Navigasi

Neat Menu Navigasi Dropdown

Ketika sebuah blog berisi banyak postingan, banyak pengunjung mungkin tidak tertarik untuk membaca seluruh kontennya. Sebaliknya, mereka memilih untuk mencari informasi tertentu yang berkaitan dengan kebutuhan mereka saat ini.

Sebelumnya admin telah berbagi informasi mengenai menu navigasi responsive v2 dan juga menjelaskan cara membuat widget postingan terbaru dengan efek slide, serta cara membuat template kosong di Blogger. Sekarang admin akan memperkenalkan menu navigasi yang mungkin berguna bagi Anda. Berikut ini contoh cara membuatnya di Blogger.

Cara Membuat Navigasi Menu Dropdown di Blogger

Berikut adalah cara membuatnya di Blogger:

1. Di Blogger, pilih blog kamu

2. Pilih menu Tema 👉 Klik tanda disebelah SESUAIKAN 👉 Edit HTML

edit html

3. Letakan kode di bawah ini di atas kode ]]></b:skin>

/*Nav*/ #contact-links { text-shadow:0 -1px 0 rgba(0,0,0,0.3); margin:10px auto 0; position:relative; width:100%; } #contact-links a { color:#4C9FEB; } #contact-links a:hover { color:#3D85C6; } #my-links { float:right; font-size:12px; margin:4px 10px; overflow:hidden; text-shadow:0 1px 0 #FFFFFF; } #my-links a { margin-left:7px; padding-left:8px; text-decoration:none; } #my-links a:first-child { border-width:0; } #menu-container { background:-webkit-linear-gradient(#f6f6f6,#e9eaea) repeat scroll 0 0 transparent; background:-moz-linear-gradient(#f6f6f6,#e9eaea) repeat scroll 0 0 transparent; background:linear-gradient(#f6f6f6,#e9eaea) repeat scroll 0 0 transparent; filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6',endColorstr='#e9eaea',GradientType=0 ); border-radius:0 0 4px 4px; border:1px solid rgba(0,0,0,0.1); box-shadow:-1px 1px 0 rgba(255,255,255,0.8) inset; clear:both; height:46px; padding-top:1px; } #neat-menu { float:left; } #neat-menu a { text-decoration:none; } #neat-menu ul { list-style:none; margin:0; padding:0; } #neat-menu > ul > li { float:left; padding-bottom:12px; } #neat-menu ul li a { box-shadow:-1px 0 0 rgba(255,255,255,0.8) inset,1px 0 0 rgba(255,255,255,0.8) inset; border-color:#D1D1D1; border-image:none; border-style:solid; border-width:0 1px 0 0; color:#333333; display:block; font-size:14px; height:25px; line-height:25px; padding:11px 15px 10px; text-shadow:0 1px 0 #FFFFFF; } #neat-menu ul li a:hover { background:-webkit-linear-gradient(#efefef,#e9eaea) repeat scroll 0 0 transparent; background:-moz-linear-gradient(#efefef,#e9eaea) repeat scroll 0 0 transparent; background:linear-gradient(#efefef,#e9eaea) repeat scroll 0 0 transparent; filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef',endColorstr='#e9eaea',GradientType=0 ); } #neat-menu > ul > li.active > a { background:-webkit-linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent; background:-moz-linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent; background:linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent; filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1',endColorstr='#3F96E5',GradientType=0 ); border-bottom:1px solid #2D81CC; border-top:1px solid #4791D6; box-shadow:-1px 0 0 #55A6F1 inset,1px 0 0 #55A6F1 inset; color:#FFFFFF; margin:-1px 0 -1px -1px; text-shadow:0 -1px 0 rgba(0,0,0,0.3); } #neat-menu > ul > li.active > a:hover { background:-webkit-linear-gradient(#499FEE,#3F96E5) repeat scroll 0 0 transparent; background:-moz-linear-gradient(#499FEE,#3F96E5) repeat scroll 0 0 transparent; background:linear-gradient(#499FEE,#3F96E5) repeat scroll 0 0 transparent; filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE',endColorstr='#3F96E5',GradientType=0 ); } #neat-menu > ul > li:first-child > a { border-radius:0 0 0 5px; } #neat-menu ul ul { background:-webkit-linear-gradient(#F7F7F7,#F4F4F4) repeat scroll 0 0 padding-box transparent; background:-moz-linear-gradient(#F7F7F7,#F4F4F4) repeat scroll 0 0 padding-box transparent; background:linear-gradient(#F7F7F7,#F4F4F4) repeat scroll 0 0 padding-box transparent; filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7',endColorstr='#F4F4F4',GradientType=0 ); border-radius:5px 5px 5px 5px; border:1px solid rgba(0,0,0,0.1); box-shadow:0 1px 0 #FFFFFF inset; height:0; margin-top:1px; opacity:0; overflow:hidden; width:240px; padding:0; position:absolute; visibility:hidden; z-index:1; -webkit-transition:all .5s; -moz-transition:all .5s; -ms-transition:all .5s; -o-transition:all .5s; transition:all .5s; } #neat-menu ul li:hover ul { margin-top:0\2; height:auto; opacity:1; visibility:visible; } #neat-menu ul ul a { border-right-width:0; border-top:1px solid #D1D1D1; box-shadow:0 1px 0 #FFFFFF inset; color:#444444; height:24px; line-height:24px; padding:7px 12px; text-shadow:0 1px 0 #FFFFFF; } #neat-menu ul ul a:hover { background:-webkit-linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent; background:-moz-linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent; background:linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent; filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1',endColorstr='#3F96E5',GradientType=0 ); border-top:1px solid #4791D6; box-shadow:-1px 0 0 #55A6F1 inset,1px 0 0 #55A6F1 inset; color:#FFFFFF; text-shadow:0 -1px 0 rgba(0,0,0,0.3); } #neat-menu ul ul li:first-child a { border-top-width:0; } #menu-search { margin:8px 10px 0 0; float:right; } #menu-search form { background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6lSuNdqBqKxwmvMacGFmJ-42l41jvd9zeQ7_TbKyV5r5Ou6ygO-nhFnOVPkNUTbq6U4-BkFB7kEFqnDB0BVahSi-46WFnBeUc2e6d5XWSjerNB7Us1Uj7w9l0WreZJ5kvLls5R4V_dSdF/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent; border:1px solid #CCCCCC; border-radius:3px 3px 3px 3px; box-shadow:0 1px 0 rgba(0,0,0,0.05) inset,0 1px 0 #FFFFFF; height:26px; padding:0 25px; position:relative; width:130px; } #menu-search form:hover { background-color:#F9F9F9; } #menu-search form input { color:#999999; font-size:13px; height:26px; text-shadow:0 1px 0 #FFFFFF; background:none repeat scroll 0 0 transparent; border:medium none; float:left; outline:medium none; padding:0; width:100%; } #menu-search form input.placeholder,#menu-search form input:-moz-placeholder { color:#C4C4C4; }

4. Kamu bisa menggunakan kode HTML di bawah ini untuk mengganti menu navigasi lamamu.

<div id='contact-links'> <div id='my-links'> <a href='#'>About</a> <a href='#'>Contact</a> <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIF4AOVOC7uBdGWEBDSB-Ac3LZeWxeEj27bhqqXmpJRsDbi6cvcNsMWpy1CnBOELdbS9qJAamB3yZirF9r2cNJVBhQgyWp62efjdo3l0WMns_qXjPJhRigdlz1VpX-hJFSmZ_kZG1bNgAC/s1600/facebook-icon.png' title='Facebook' width='18px'/></a> <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYILt2jRVqXQvNHaw6koV48DuWMyq-9Q50-11TcNMss6z3UDzVXNIyulGopQgCghAL5QM9L-FI_laMEP_6JCIJFi0Z_FOrKdjgVksJxjuJCALJaA77LVI68_AuNjbN62NG0iK4xortYJjg/s1600/twitter.png' title='Twitter' width='18px' /></a> <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtxgtOv3_v37_vjsYXtS1BANT4L_tl0rQsPHVwB5r_RXeraGEAZ2WlRxsH2dO0ud3D2HygzkdorkfEugES8mlVN_lGVVjqu7JOayDxWAnZ48RZhDo472JgujJvUjY6fvpJobzscLFFw7uSzlJzfja3-29aQ9HgPtYLsI76omWp-E1M0WkkWVbUorxt3xI/s100/Instagram_icon.png' title='Google' width='18px'/></a> <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnG0Lg3ZcZKDRUUgV9X9HefXbITj45uIbuAE1fNQLth6xL1nVpcGuvbc1zLDwo3Gu9XguWuy0GtZvNdmD-jBS7fL8bgb0mdAFxCrAunrdMCF66IZRz1jeWp77c09FH1XbhQolTAVDQW0m-LUiqj7vGZvoR_BAOhi3XmBg0IRl8fdYAkUNUVsCThLL3Eqs/s100/tiktok.png' title='RSS Feed' width='18px'/></a> </div> <div id='menu-container'> <nav id='neat-menu'> <ul> <li class='active'><a href='/'>Home</a></li> <li><a href='#'>Dropdown</a> <ul> <li><a href='#'>Menu element 1</a></li> <li><a href='#'>Menu element 2</a></li> <li><a href='#'>Menu element 3</a></li> <li><a href='#'>Menu element 4</a></li> <li><a href='#'>Menu element 5</a></li> </ul> </li> <li><a href='#'>Dropdown</a> <ul> <li><a href='#'>Menu element 1</a></li> <li><a href='#'>Menu element 2</a></li> <li><a href='#'>Menu element 3</a></li> <li><a href='#'>Menu element 4</a></li> <li><a href='#'>Menu element 5</a></li> </ul> </li> <li><a href='#'>Dropdown</a> <ul> <li><a href='#'>Menu element 1</a></li> <li><a href='#'>Menu element 2</a></li> <li><a href='#'>Menu element 3</a></li> <li><a href='#'>Menu element 4</a></li> <li><a href='#'>Menu element 5</a></li> </ul> </li> <li><a href='#'>Single Menu</a></li> <li><a href='#'>Single Menu</a></li> <li><a href='#'>Dropdown</a> <ul> <li><a href='#'>Menu element 1</a></li> <li><a href='#'>Menu element 2</a></li> <li><a href='#'>Menu element 3</a></li> <li><a href='#'>Menu element 4</a></li> <li><a href='#'>Menu element 5</a></li> </ul> </li> </ul> </nav>  <div id='menu-search'> <form method='get' action='https://www.sepeser.com/search'> <input autocomplete='off' name='q' placeholder='search...' type='text' value=''/> </form> </div> </div> </div>

5. Edit kode HTML di atas dengan memasukan link yang kamu inginkan.

6. Save Temamu.

VIDEO TUTORIAL

Video di atas adalah contoh bagaimana cara memasang menu navigasi secara manual di blog. Selain sebagai elemen dekoratif atau mempercantik tampilan blog, menu navigasi juga harus ditata sedemikian rupa untuk melengkapi konten.

👉 LIHAT DEMO 👈

Hal ini menguntungkan karena membantu pengunjung dengan mudah menemukan informasi yang diinginkan di blog, menghindari kebingungan yang disebabkan oleh topik yang sulit ditemukan. Sekian postingan kali ini, semoga bermanfaat.

Ndo Andre at Saturday, September 09, 2023

By Ndo Andre At Friday, September 08, 2023

Membuat Menu Navigasi Efek Hover dengan Icon Bisa Diganti

By Ndo Andre At Friday, September 08, 2023

Menu Navigasi Efek Hover dengan Icon. Hai sobat apa kabar lagi? semoga semua dalam keadaan baik dan diberkati, ok sob kesempatan ini admin akan berbagi cara membuat menu navigasi dengan icon efek hover yang mungkin saja ini menu navigasi yang cocok buat blog sobat.

Efek hover maksudnya disini adalah ketika kursor mouse diarahkan ke menu yang sebelumnya tulisan saja maka akan berganti menjadi icon, oh yah icon ini bisa kamu ganti sesuai keinginanmu, karena icon-icon ini hanya merupakan icon gambar yang di upload ke hosting Blogger dan bisa diganti sesuai keinginanan / sesuka hati.

Navigasi di blog sangat berperan penting, pengunjung blog lebih akan lebih mudah menemukan artikel sesuai keinginannya berdasarkan kategori. Tanpa navigasi juga blog sulit buat daftar adsense. Tanpa keberadaan navigasi atau petunjuk yang jelas, pengunjung akan kesulitan menemukan artikel lain yang berhubungan dengan postingan yang dibacanya saat ini.

Menu Navigasi

Menu Navigasi Efek Hover

Menu navigasi adalah elemen penting pada blog yang memungkinkan user untuk berpindah antara halaman-halaman blog dengan mudah. Menu navigasi ini biasanya berupa link yang mengarah ke halaman lain, yaitu internal link dan external link. Internal link mengarahkan pengunjung ke halaman tertentu di blog itu sendiri.

Sedangkan external link mengarahkan pengguna ke luar blog. Nah, menu navigasi menggunakan internal link yang mengarahkan pengguna ke halaman lain blog atau website yang sama. Menu navigasi yang baik memungkinkan pengunjung masuk ke halaman yang mereka inginkan secara cepat dan mudah.

Mengenai menu navigasi sebelumnya juga admin telah berbagi menu navigasi dropdown responsive v1di Blogger dan neat menu navigasi dropdown di Blogger juga tentang menu navigasi dropdown responsive v2 di Blogger. Mungkin saja diantara kamu ada yang ingin mengubah tampilan menunya karena bosan atau ingin membuat blog terlihat menarik kamu dapat mencoba menu navigasi ini.

Cara Membuat Menu Navigasi Efek Hover dengan Icon di Blogger

1. Di Blogger, pilih blog kamu

2. Pilih menu Tema 👉 Edit HTML

Edit Html

3. Letakan kode di bawah ini di atas kode ]]></b:skin>

#sepeser-btrix-nav {margin: 5px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;} #sepeser-btrix-nav li {float: left;} #sepeser-btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;} #sepeser-btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);} #sepeser-btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;} #sepeser-btrix-nav li a:hover {cursor: pointer;} #sepeser-btrix-nav li a:hover img {top: -85px;} #sepeser-btrix-nav li a:hover .aname {top: 85px;} #sepeser-btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;} #sepeser-btrix-nav li:nth-child(2) a {background: #9bc704;} #sepeser-btrix-nav li:nth-child(3) a {background: #0dc3ff;} #sepeser-btrix-nav li:nth-child(4) a {background: #51a2ec;} #sepeser-btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}

4. Gunakan kode di bawah ini dan masukan ke dalam template sobat, letaknya bisa berbeda tergantung sruktur template yang digunakan ( bisa nonton video tutorial sebagai cpntoh panduannya )

<div id="sepeser-btrix-nav"> <li> <a href="#"><span class="aname">Homes</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7TIE92TAkNU4bw44aeGHRxeGy5OeDTH04mvbqY9NSKakNemzIU_ZinahiIBppuO8VXHonyQmIhJQCw-dO1wLqU8e2eS4eGmyvTFK3X0HGvPqYinXaxqsPdJhO2YNUKdJEiHO09wIgseI/s1600/btrix-home.png" /> </a> </li> <li> <a href="#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMEAVa_l9uUjaYImrT6s3jVGYizKjHPWJILgedymM-XUm0PF9pcGDLEWbn82wc_W-v6kdjjKZ4zUz5MFReZoDlrFK839OWETyWPQLG779mz5KvHFUg7drZ1wB1__N6jDu33FRNKiUwoXo/s1600/btrix-download.png" /> </a> </li> <li> <a href="#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbEATxBhfJ_ruifFBDxb8AfGNLmFicLZkqtV0hdPmTQGn4VVd555aAn70CcOz8mVMb0hhgR0PGQs4QqA4Qs1xCHcLjvpABZB1DMpY160X4DCvCib81vTgUh-tWgc7-sg_BoF9ePYGX0Ts/s1600/btrix-mysql.png" /> </a> </li> <li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8dB1su19OqtpHH9FeVAcD-kyhtPXtupWW33dlS79g75WnHgECswa2gvBnqVU47a-WsErh_U25eV5_-tRYfmEGbCo3L9fKCxNSjNpgtmv3hIA-hJemPTuRWSi6VoWF7AMVdFbevRse6yM/s1600/Btrix-html.png" /> </a> </li> <li> <a href="#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgImKqpHKCBI9bBdSemLRe5i_kGXivhv4DGFN6a0EPd3LA9VExpyWeA9ExfzTjeVeNZRIzxdHunvFHLbHq3WgmPxkDjEFgxV6vo9FzCMTpmtjiq2XiRB-5-VSYjCZBxBZ0caK8uO6rXyGs/s1600/btrix-contact.png" /> </a> </li> </div>

Kode warna merah adalah link icon gambar, kamu bisa menggantinya dengan icon milikmu jika kurang suka.

Video Tutorial

Video di atas adalah contoh cara pemasangannya, itu jika kamu bingung bagaimana cara membuatnya di Blogger.

Penutup

Secara garis besar, navigasi website adalah menu yang berada pada suatu halaman website. Menu-menu ini nantinya akan terhubung satu sama lain berdasarkan topik tertentu, dengan perantara sebuah link. Jadi link tersebut akan mengarah ke halaman lainnya yang mengarah ke banyak halaman di blog kamu.

Bagaimana tampilan navigasi ini? kamu dapat melihat gambarnya atau kedemonya saja untuk lebih jelasnya lagi.

👉 LIHAT DEMO 👈

Ketika menggunakan navigasi, pengunjung website bisa mengakses halaman atau page yang mereka mau dengan lebih mudah. Tidak hanya untuk pengunjung, adanya navigasi juga punya peran penting untuk mesin pencari. Selamat mencoba,salam Blogger.

Ndo Andre at Friday, September 08, 2023

By Ndo Andre At Friday, September 08, 2023

Membuat Menu Navigasi Dropdown Responsive V2 di Blog

By Ndo Andre At Friday, September 08, 2023

Halo sobat, pada kesempatan kali ini admin ingin berbagi menu navigasi blog kepada anda. Ini disebut menu navigasi dropdown responsif V2 dan dapat digunakan di Blog Blogger Anda. Menu ini bisa vertikal atau horizontal dan bisa juga memiliki sub menu yang biasa disebut menu dropdown, tergantung kebutuhan blog Anda.

Dalam pengembangan web atau blog, penting untuk memiliki fitur navigasi, terutama jika terdapat beberapa halaman web atau struktur yang kompleks. Menu navigasi pada blog berfungsi untuk berpindah dari satu halaman ke halaman lainnya dan juga memberikan informasi tentang halaman saat ini.

Ini adalah alat yang berguna untuk memandu pengunjung menjelajahi konten situs dan mengarahkan mereka ke informasi yang relevan. Jika tema blog Anda tidak memiliki menu navigasi atau Anda bosan dengan tampilan saat ini, Anda mungkin ingin mempertimbangkan untuk menggantinya dengan yang baru.

Navigasi Menu Dropdown Responsive V2 di Blogspot blogger

Dropdown Responsive Menu

Menu Navigasi Dropdown V2

Blog Anda juga dapat diklasifikasikan sebagai blog web profesional karena artikelnya terorganisir dengan baik, yang meningkatkan kemudahan penggunaan dan memungkinkan pengunjung menavigasi blog dengan mudah menggunakan menu navigasi yang Anda buat.

Selain itu, sebelumnya admin telah membagikan menu navigasi responsif v1, tips memasukkan emoticon dalam komentar blog, serta cara mencegah penyalinan blog Anda tanpa izin. Sekarang, mari kita lanjutkan ke langkah-langkah penerapan fitur-fitur ini di Blogger.

Cara Membuat Menu Navigasi Dropdown V2 di Blogger

1. Di Blogger, pilih blog kamu

2. Pilih menu Template 👉 Edit HTML

edit html

3. Letakan kode di bawah ini di atas kode ]]></b:skin>

.menunav{display:none} #navigate .menu{font-family:kartika;width:100%;overflow:hidden;margin:0;padding:0;background:#19B5FE} .menu{list-style:none;margin:0;padding:0} .menu li{float:left;padding:0;margin:0;list-style:none} .menu li a{padding:8px 10px;margin:0;background:#22A7F0;overflow:hidden;display:block;text-decoration:none;font-size:18px;line-height:1.3;color:#fff} #navigate .menu li a:hover{color:#fff;background:#1F3A93;box-shadow:0 4px 0 #fff inset} #navigate .menu li:after a:hover{border-top:5px solid red} .menu li.trigger a.sub:after{content:'+';float:right;font-size:17px;font-weight:bold} #navigate .menu li:hover a:before{border-top:10px;border:10px solid red} .menu li .submenu{visibility:hidden;margin:0;padding:0;max-width:150px;position:absolute;z-index:9999} .menu li .submenu li{float:left;list-style:none;margin:0;padding:0} .menu li.trigger:hover .submenu{visibility:visible} .menu li.trigger .submenu li{float:none} .menu li.trigger .submenu li a{min-width:170px;display:block} .menu li.trigger .submenu li.trigger .submenu{visibility:hidden} .menu li.trigger .submenu li.trigger:hover .submenu{visibility:visible;margin-left:190px;margin-top:-42px;position:absolute} .search-box{float:right;width:300px;padding:0;margin:auto 0} .search-box input{width:calc(100% - 85px);padding:9px 5px;margin:2px 0;border:0} .search-box .search-icon[type="submit"]{width:60px;margin:4px 0;padding:9px 0;border:0;color:black;background:white;font-weight:bold;font-family:FontAwesome;background:#3A539B;color:#ffffff;transition:all 0.25s;-moz-transition:all 0.25s;-webkit-transition:all 0.25s} #myHeader{margin:0 auto;width:100%;max-width:1000px} .header{} .sticky{position:fixed;top:0;left:0;right:0} .sticky + body{padding-top:102px} @media (max-width:768px){#navigate .menu{overflow-y:auto;overflow-x:hidden;height:100%;-webkit-transition:left 2.25s ease;-webkit-transition:display 0.5s ease;-moz-transition:display 0.5s ease;-o-transition:display 0.5s ease;transition:display 0.5s ease} .menunav{display:block;padding:15px 10px;margin:0;background:#359bed;overflow:hidden;text-decoration:none;font-size:18px;color:#fff;cursor:pointer} .menunav span{font-family:kartika} .close{background:#3A539B;z-index:999;padding:10px 15px;max-width:35px;text-align:center;position:absolute;top:0;right:0;margin-right:-45px;font-family:kartika;font-weight:bold} .overlay{z-index:998;background:rgba(0,0,0,0.5);position:fixed;top:0;bottom:0;left:0;right:0} .navigate{display:none} nav.active{position:fixed;display:block;top:0;left:0;height:100%;z-index:9999;width:80%;-webkit-transition:display 0.5s ease;-moz-transition:display 0.5s ease;-o-transition:display 0.5s ease;transition:display 0.5s ease} .menu li{width:100%} .menu li .submenu{display:block;position:relative;width:100%;max-width:100%} .menu li .sub .active{max-height:100%} #navigate .menu li a.active{background:#4B77BE} #navigate .menu li a.active:after{content:'-';float:right;font-size:17px;font-weight:bold} .menu li.trigger a.sub{background:#1E8BC3} .menu li.trigger .submenu{visibility:visible;display:none} .menu li.trigger .submenu li.trigger:hover .submenu{margin:0;visibility:visible;position:relative} .menu li.trigger .submenu li.trigger .submenu{visibility:visible;display:none} .menu li.trigger > ul.active{display:block} .menu li.trigger > ul.active > li.trigger > ul.active{display:block} .search-box{width:100%} .search-box input{width:calc(100% - 85px);margin:2px 4px}

4. Letakan kode di bawah ini di atas </head>

<script> eval(function(p,a,c,k,e,d){e=function(c){return c};if(!''.replace(/^/,String)){while(c--){d[c]=k[c]||c}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('$(8).9(2(){$(".10").4(2(){$("#7").0("1");$("5").0("6")});$("11.18 > 17.12").4(2(3){3.16();$(15).0("1").13("14").0("1")})});',10,19,'toggleClass|active|function|e|click|body|overlay|navigate|document|ready|menunav|li|sub|next|ul|this|preventDefault|a|trigger'.split('|'),0,{})) </script>

5 Kamu bisa menggunakan kode HTML di bawah ini untuk mengganti menu navigasi lamamu.

<div id="menunav" class='menunav'><i class='fa fa-list'></i><span> Menu</span></div> <nav id='navigate' class='navigate'> <div class='menunav close'>X</div> <ul class='menu'> <li><a href='#url'>Home</a></li> <li><a href='#url'>Menu</a></li> <li class='trigger'><a href='#url' class='sub'>SubMenu 1</a> <ul class='submenu'> <li class='trigger'><a href='#url' class='sub'>SubMenu</a> <ul class='submenu'> <li><a href='#url'>Menu</a></li> <li><a href='#url'>Menu</a></li> <li><a href='#url'>Menu</a></li> </ul> </li> <li><a href='#url'>Menu</a></li> <li><a href='#url'>Menu</a></li> <li class='trigger'><a href='#url' class='sub'>SubMenu</a> <ul class='submenu'> <li><a href='#url'>Menu</a></li> <li><a href='#url'>Menu</a></li> <li><a href='#url'>Menu</a></li> </ul> </li> </ul> </li> <li class='trigger'><a href='#url' class='sub'>SubMenu 2</a> <ul class='submenu'> <li><a href='#url'>Menu</a></li> <li><a href='#url'>Menu</a></li> <li><a href='#url'>Menu</a></li> </ul> </li> <form action='/search/' class='search-box' expr:action='data:blog.searchUrl' id='search-box'> <input autocomplete='on' expr:value='data:view.isSearch ? data:view.search.query.escaped : ""' name='q' placeholder='Type here' size='10' type='text'/> <input class='search-icon' title='search' type='submit' value=''/> </form> </ul> </nav>

6. Save Temamu.

Video Tutorial

Saat ini, dalam pengembangan web atau blog, terdapat berbagai model navigasi yang tersedia, masing-masing melayani kebutuhan yang berbeda. Kebanyakan website atau blog biasanya menggunakan model navigasi linier, dimana informasi disajikan secara berurutan, dimulai dari satu halaman.

👉 LIHAT DEMO 👈

Alternatifnya, ada model navigasi hierarki yang mengikuti pendekatan desain top-down. Konsep navigasi ini dimulai dari satu node yaitu homepage, kemudian bercabang menjadi beberapa halaman utama.

Ndo Andre at Friday, September 08, 2023