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; } <!-- Navstart --> <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> <!-- menu-search form --> <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> <!-- Navstart end -->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.
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.
0 Komentar untuk "Neat Menu Navigasi Dropdown dengan Social Button di Blog"