Cara membuat menu dan submenu di blogspot dengan mudah

menu navigasi adalah berisi link-link aktif untuk menavigasi setiap halaman yang terdapat pada website atau blog. Sebuah blog atau website pasti mempunyai menu untuk menavigasi setiap halaman yang belum terjangkau oleh pengunjung. karena menu navigasi ini sangat dibutuhkan semua blog untuk merayapi semua artikel dan apa yang mereka cari di blog tersebut. 

apa jadinya jika sebuah blog tanpa menu navigasi? Pasti pengunjung akan dibuat bingung dalam mencari informasi yang mereka butuhkan. Jika sobat mempunyai blog dan belum tahu caranya membuat menu drop down atau menu bar disini saya akan berbagi tips cara membuat menu bar sehingga enak dilihat dan juga memudahkan pengunjung berinteraksi.

Sebenarnya semua template sama saja dalam mengedit menu drop down ada yang lewat tata letak, ada juga yang lewat edit html. lantas bagaimana cara membuat menu drop down tanpa edit html? Pertama kita masuk ke:

1. blogger

2. pilih tata letak 

3. Lalu tambahkan gadget 

seperti gambar dibawah ini:

Setelah itu kita pilih halaman dan klik tambahkan

Lalu kita tambahkan  menu dan jangan lupa alamat url blog sobat seperti dibawah ini setelah selesai menambahkan beberapa menu lalu klik simpan dan pratinjau apakah sudah ada perubahan atau belum? 

Cara yang kedua adalah dengan kode html javascript seperti dibawah ini, masuk ke

1. blogger lalu pilih 

2.tema dan klik 

3. titik tiga kanan atas

4. Lalu pilih edit html dan cari kode berikut </header> letakkan tepat diatasnya

<div id=’contact-links’> <br /> <div id=’my-links’> <br /> <a href=’#’>About</a><br /> <a href=’#’>Contact</a><br /> <a href=’#’><img height=’18px’ src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-WLZbfUTVLtmF0O8MmuS7yruNCH9GR1q5rbDrvHCcHwqjxCRcxQTZxLd6XODN8jM55hzKVeQvLVnCjuhn6GQbOsndllh_J_I5t_xpdNoqRNo_DUv0ODH74EDuwcAo8w6LX48ohIgH-4Xa/s1600/facebook-icon.png’ title=’Facebook’ width=’18px’/></a><br /> <a href=’#’><img height=’18px’ src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj19967m_-qo-hw-jY7jQdx6MmrINLd84OW6MpaRQMiyMPTBKgjvynRauGYew8KK12CSjAiUqDPlwl6krFAB2IERk6ZpKucjS3UpO9gMegLYeTCtYuVJclC-SI7UitI68-9DEVKzV32p9oT/s1600/twitter.png’ title=’Twitter’ width=’18px’ /></a><br /> <a href=’#’><img height=’18px’ src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNAdpR4HChbhOTtpbPQwlpY1D4svJTHK7RL1ZV6iQQDmNeu0WDWtR-UVJVdBXo2MGYcbkdgZlP9Z-X5F68QSL2axHaO_MbH2SprDZ-JNcVuoydcWF149x87rQFK1AlcE0H_rXcchQwy-nD/s1600/google-plus-icon.png’ title=’Google’ width=’18px’/></a><br /> <a href=’#’><img height=’18px’ src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsXklRCJWvhmi4NOQvT1ZZQDWVAa1hDvnOsqRXN-ns4AxRY32w4u7iOEjXQBRSS9mHidIPRmx_PFGUYp6okyh6xj5QIj_EjkdrBXiDdcyG2plHmEnw-QqgUWm88kNXWlYHLLuPtDP9ExJN/s1600/rss-icon.png’ title=’RSS Feed’ width=’18px’/></a><br /> </div> <br /> <br /> <div id=’menu-container’> <br /> <nav id=’neat-menu’><br /> <ul><br /> <li class=’active’><a href=’/’>Home</a></li> <br /> <li><a href=’#’>Dropdown</a><br /> <ul><br /> <li><a href=’#’>Menu element 1</a></li> <br /> <li><a href=’#’>Menu element 2</a></li> <br /> <li><a href=’#’>Menu element 3</a></li> <br /> <li><a href=’#’>Menu element 4</a></li> <br /> <li><a href=’#’>Menu element 5</a></li> <br /> </ul> <br /> </li> <br /> <li><a href=’#’>Dropdown</a><br /> <ul><br /> <li><a href=’#’>Menu element 1</a></li> <br /> <li><a href=’#’>Menu element 2</a></li> <br /> <li><a href=’#’>Menu element 3</a></li> <br /> <li><a href=’#’>Menu element 4</a></li> <br /> <li><a href=’#’>Menu element 5</a></li> <br /> </ul> <br /> </li> <br /> <li><a href=’#’>Dropdown</a><br /> <ul><br /> <li><a href=’#’>Menu element 1</a></li> <br /> <li><a href=’#’>Menu element 2</a></li> <br /> <li><a href=’#’>Menu element 3</a></li> <br /> <li><a href=’#’>Menu element 4</a></li> <br /> <li><a href=’#’>Menu element 5</a></li> <br /> </ul> <br /> </li> <br /> <li><a href=’#’>Single Menu</a></li> <br /> <li><a href=’#’>Single Menu</a></li> <br /> <li><a href=’#’>Dropdown</a><br /> <ul><br /> <li><a href=’#’>Menu element 1</a></li> <br /> <li><a href=’#’>Menu element 2</a></li> <br /> <li><a href=’#’>Menu element 3</a></li> <br /> <li><a href=’#’>Menu element 4</a></li> <br /> <li><a href=’#’>Menu element 5</a></li> <br /> </ul> <br /> </li> <br /> </ul> <br /> </nav><br /> <br /> <!– menu-search form –><br /> <div id=’menu-search’> <br /> <form method=’get’ action=’/search’> <br /> <input autocomplete=’off’ name=’q’ placeholder=’search…’ type=’text’ value=”/><br /> </form> <br /> </div> <br />

Setelah selesai Lalu cari kode berikut: </b:skin>

dan tempatkan kode dibawah ini tepat diatasnya setelah itu klik simpan

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

itulah beberapa cara membuat menu drop down sederhana semoga bermanfaat buat sobat blogger, kalau sobat blogger ada yang masih bingung silahkan simak baik-baik supaya tidak bingung.. salam blogger

Share this post