Drop Down menu minimalis dan ringan buat blog

Drop Down minimalis

Membuat Blog tentunya ingin mempercantik tampilan blog milik kita dengan segala kelebihan yang di miliki oleh Blogger ini maka kita juga bisa mempercantik  tampilan kita dari menu sampai footer dan munkin tidak semua fasilitas dari blogger yang menyediakan menu untuk blog kita salah satu yang tidak tersedia pada template blog adalah menu Dron Down minimalis dan ringan , dan menu navigasi ini juga bisa di bilang penting di samping memperindah blog kita tentunya mempermudah pengunjung untuk mencari isi dari blog kita.

Di sini saya akan memberikan sedikit tentang memasang menu Dron Down, beserta dengan scrip yang ringan yang saya yakin tidak akan memberatkan blog kita, di samping itu dengan kreativitas kita bisa merubah warna dan tampilan tergantung dari ide kita dan emnyesuaikan dengan tema blog yang kita miliki, dengan begitu maka akan semakin enak di lihat dan pengunjung blog kita juga tidak akan bosan dengan tampilan yang sederhana dan simpel namun bisa menarik.
Saya akan memberikan cara pemasanganya , Dron Down yang terdiri dari empat menu dan dua sub menu ini bisa di tambah dan  bisa menjadi delapan dengan dua belas sub menu tergantung dari mana yang kita butuhkan di dalam menu blog kita, yang pertama adalah dengan masuk ke akun blog kita lalu pada menu Edit Template setelah itu, adalah cari code [[</skin> setelah ketemu dengan kode ini lalu copy code berikut tanpa ada yang tertinggal

<br /> <i>#cssmenu {<br />   width: ;<br />   border: 1px solid #8c8787;<br />   background: #8c8787;<br /> }<br /> #cssmenu > ul {<br />   padding: 1px 0;<br />   margin: 0px;<br />   list-style: none;<br />   width: 100%;<br />   height: 21px;<br />   border-top: 1px solid #FFFFFF;<br />   border-bottom: 1px solid #FFFFFF;<br />   font: normal 8pt verdana, arial, helvetica;<br /> }<br /> #cssmenu > ul li {<br />   margin: 0;<br />   padding: 0;<br />   display: block;<br />   float: left;<br />   position: relative;<br />   width: 148px;<br /> }<br /> #cssmenu > ul li a:link,<br /> #cssmenu > ul li a:visited {<br />   padding: 4px 0;<br />   display: block;<br />   text-align: center;<br />   text-decoration: none;<br />   background: #8c8787;<br />   color: #ffffff;<br />   width: 148px;<br /> }<br /> #cssmenu > ul li:hover a,<br /> #cssmenu > ul li a:hover,<br /> #cssmenu > ul li a:active {<br />   padding: 4px 0;<br />   display: block;<br />   text-align: center;<br />   text-decoration: none;<br />   background: #b1aeae;<br />   color: #ffffff;<br />   width: 146px;<br />   border-left: 1px solid #ffffff;<br />   border-right: 1px solid #ffffff;<br /> }<br /> #cssmenu > ul li ul {<br />   margin: 0;<br />   padding: 1px 1px 0;<br />   list-style: none;<br />   display: none;<br />   background: #ffffff;<br />   width: 146px;<br />   position: absolute;<br />   top: 21px;<br />   left: -1px;<br />   border: 1px solid #8c8787;<br />   border-top: none;<br /> }<br /> #cssmenu > ul li:hover ul {<br />   display: block;<br /> }<br /> #cssmenu > ul li ul li {<br />   clear: left;<br />   width: 146px;<br /> }<br /> #cssmenu > ul li ul li a:link,<br /> #cssmenu > ul li ul li a:visited {<br />   clear: left;<br />   background: #8c8787;<br />   padding: 4px 0;<br />   width: 146px;<br />   border: none;<br />   border-bottom: 1px solid #ffffff;<br />   position: relative;<br />   z-index: 1000;<br /> }<br /> #cssmenu > ul li ul li:hover a,<br /> #cssmenu > ul li ul li a:active,<br /> #cssmenu > ul li ul li a:hover {<br />   clear: left;<br />   background: #b1aeae;<br />   padding: 4px 0;<br />   width: 146px;<br />   border: none;<br />   border-bottom: 1px solid #ffffff;<br />   position: relative;<br />   z-index: 1000;<br /> }<br /> #cssmenu > ul li ul li ul.navigation-3 {<br />   display: none;<br />   margin: 0;<br />   padding: 0;<br />   list-style: none;<br />   position: absolute;<br />   left: 145px;<br />   top: -2px;<br />   padding: 1px 1px 0 1px;<br />   border: 1px solid #8c8787;<br />   border-left: 1px solid #8c8787;<br />   background: #ffffff;<br />   z-index: 900;<br /> }<br /> #cssmenu > ul li ul li:hover ul.navigation-3 {<br />   display: block;<br /> }<br /> #cssmenu > ul li ul li ul.navigation-3 li a:link,<br /> #cssmenu > ul li ul li ul.navigation-3 li a:visited {<br />   background: #8c8787;<br /> }</i>

kode di atas adalah code CSS yang harus kita pastekan di dalam [[</skin> atau tepatnya adalah di atasnya, setelah menemukan dan memastekan kode tersebut, langkah selanjutnya adalah dengan mencari code <head> setelah ketemu di antara kode <head>  sampai ketemu </head> sisipkan kode berikut ini di antara kedua kode tersebut, biasanya kalau saya saya sisipkan pada kode setelah </div> di mana aja nanti akan terlihat apa bila kita preview, perlu di ingat bahwa sebelum melakukan hal ini seabiknya selalu Back Up template anda, kerana setiap template berbeda maka silahkan di sesuaikan.Berikut ini adalah Code untuk empat menu dengan dua sub menu silahkan di copi dan antara  <head>  sampai ketemu </head> dan di selipkan setelah </div>

<br /> <i><div id='cssmenu'><br /> <ul><br />    <li class='active'><a href='index.html'><span>Home</span></a></li><br />    <li class='has-sub'><a href='#'><span>Products</span></a><br />       <ul><br />          <li><a href='#'><span>Widgets</span></a></li><br />          <li><a href='#'><span>Menus</span></a></li><br />          <li class='last'><a href='#'><span>Products</span></a></li><br />       </ul><br />    </li><br />    <li class='has-sub'><a href='#'><span>Company</span></a><br />       <ul><br />          <li><a href='#'><span>About</span></a></li><br />          <li class='last'><a href='#'><span>Location</span></a></li><br />       </ul><br />    </li><br />    <li><a href='#'><span>Contact</span></a></li><br />    <li class='last'><a href='#'><span>Menu</span></a></li><br /> </ul><br /> </div></i><br />

Apabila kurang silahkan di copy kembali untuk memperbanyak tapi tidak semua di copy hanya pada bagian    <li class=...sampai    </ul> </li> silahkan di sesuaikan, dan untuk mengisi menu tersebut maka dengan  menulis pada halaman posting dan memberi label dengan apa yang kita inginkan, dan pada menu <a href='#'> pada tanda # bisa di masukan link label yang kita punya dan kita buat tadi, cukup mudah kan dengan cara ini  semoga akan membuat tampilan blog kalian semakin bagus terimakasih

Terimakasih
Terima Kasih telah mengunjungi Blog Saya apa bila ada masukan dan kritikan saya akan terima dengan senang hati, bila ingin berkomentar juga di persilahkan, terima kasih
keristiar.blogspot.com