membuat menu CSS3 dengan mudahh!

CSS3 Dropdown Menu

bingung sama bikin menu horizontal yang keren ?
disini caranya :

• Silahkan login ke blogger dengan ID anda.


• Klik Rancangan
     


• Klik menu Edit HTML.
  


• Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
  


• Carilah kode ]]></b:skin>


• Copy kode berikut, lalu paste di bawah kode ]]></b:skin>
  

*bagi para Newbi kalau mencari kode dipersilahkan menekan Shortcurt CTRL + F

/*----------------<br /> CSS3 DropDown Menu<br /> -------------------------------*/<br /> #navcss {<br /> margin: 0;<br /> padding: 7px 6px 0;<br /> background: #7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuKRVlrRzf04j90F5AZAcV0P8yCGde4wYMZNJ-r9v-BxoEe5Q3oIpZ5pCrFFlvcH3BB2ONTkQLvRl52b43NMnmFVzYwU1qfPAvI8j0-iNhOlWuM6FzdlCGiNHwLG6JaQ7GCO105wSRr5I/s1600/gradient.png) repeat-x 0 -110px;<br /> line-height: 100%;<br /> <br /> border-radius: 2em;<br /> -webkit-border-radius: 2em;<br /> -moz-border-radius: 2em;<br /> <br /> -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);<br /> -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);<br /> }<br /> #navcss li {<br /> margin: 0 5px;<br /> padding: 0 0 8px;<br /> float: left;<br /> position: relative;<br /> list-style: none;<br /> }<br /> <br /> <br /> /* main level link */<br /> #navcss a {<br /> font-weight: bold;<br /> color: #000;<br /> text-decoration: none;<br /> display: block;<br /> padding: 8px 20px;<br /> margin: 0;<br /> <br /> -webkit-border-radius: 1.6em;<br /> -moz-border-radius: 1.6em;<br /> <br /> text-shadow: 0 1px 1px rgba(0,0,0, .3);<br /> }<br /> #navcss a:hover {<br /> background: #000;<br /> color: #000;<br /> }<br /> <br /> /* main level link hover */<br /> #navcss .current a, #navcss li:hover > a {<br /> background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuKRVlrRzf04j90F5AZAcV0P8yCGde4wYMZNJ-r9v-BxoEe5Q3oIpZ5pCrFFlvcH3BB2ONTkQLvRl52b43NMnmFVzYwU1qfPAvI8j0-iNhOlWuM6FzdlCGiNHwLG6JaQ7GCO105wSRr5I/s1600/gradient.png) repeat-x 0 -40px;<br /> color: #000;<br /> border-top: solid 1px #f8f8f8;<br /> <br /> -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);<br /> -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);<br /> box-shadow: 0 1px 1px rgba(0,0,0, .2);<br /> <br /> text-shadow: 0 1px 0 rgba(255,255,255, 1);<br /> }<br /> <br /> /* sub levels link hover */<br /> #navcss ul li:hover a, #nav li:hover li a {<br /> background: none;<br /> border: none;<br /> color: #000;<br /> <br /> -webkit-box-shadow: none;<br /> -moz-box-shadow: none;<br /> }<br /> #navcss ul a:hover {<br /> background: #0078ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuKRVlrRzf04j90F5AZAcV0P8yCGde4wYMZNJ-r9v-BxoEe5Q3oIpZ5pCrFFlvcH3BB2ONTkQLvRl52b43NMnmFVzYwU1qfPAvI8j0-iNhOlWuM6FzdlCGiNHwLG6JaQ7GCO105wSRr5I/s1600/gradient.png) repeat-x 0 -100px !important;<br /> color: #000 !important;<br /> <br /> -webkit-border-radius: 0;<br /> -moz-border-radius: 0;<br /> <br /> text-shadow: 0 1px 1px rgba(0,0,0, .1);<br /> }<br /> <br /> /* dropdown */<br /> #navcss li:hover > ul {<br /> display: block;<br /> }<br /> <br /> /* level 2 list */<br /> #navcss ul {<br /> display: none;<br /> <br /> margin: 0;<br /> padding: 0;<br /> width: 185px;<br /> position: absolute;<br /> top: 35px;<br /> left: 0;<br /> background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuKRVlrRzf04j90F5AZAcV0P8yCGde4wYMZNJ-r9v-BxoEe5Q3oIpZ5pCrFFlvcH3BB2ONTkQLvRl52b43NMnmFVzYwU1qfPAvI8j0-iNhOlWuM6FzdlCGiNHwLG6JaQ7GCO105wSRr5I/s1600/gradient.png) repeat-x 0 0;<br /> border: solid 1px #b4b4b4;<br /> <br /> -webkit-border-radius: 10px;<br /> -moz-border-radius: 10px;<br /> border-radius: 10px;<br /> <br /> -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);<br /> -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);<br /> box-shadow: 0 1px 3px rgba(0,0,0, .3);<br /> }<br /> #navcss ul li {<br /> float: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> #navcss ul a {<br /> font-weight: normal;<br /> text-shadow: 0 1px 0 #fff;<br /> }<br /> <br /> /* level 3+ list */<br /> #navcss ul ul {<br /> left: 181px;<br /> top: -3px;<br /> }<br /> <br /> /* rounded corners of first and last link */<br /> #navcss ul li:first-child > a {<br /> -webkit-border-top-left-radius: 9px;<br /> -moz-border-radius-topleft: 9px;<br /> <br /> -webkit-border-top-right-radius: 9px;<br /> -moz-border-radius-topright: 9px;<br /> }<br /> #navcss ul li:last-child > a {<br /> -webkit-border-bottom-left-radius: 9px;<br /> -moz-border-radius-bottomleft: 9px;<br /> <br /> -webkit-border-bottom-right-radius: 9px;<br /> -moz-border-radius-bottomright: 9px;<br /> }<br /> <br /> /* clearfix */<br /> #navcss:after {<br /> content: ".";<br /> display: block;<br /> clear: both;<br /> visibility: hidden;<br /> line-height: 0;<br /> height: 0;<br /> }<br /> #navcss {<br /> display: inline-block;<br /> }

5.kembali ke pengaturan Laman (elemen lama)
  pilih HTML dan masukan kode berikut :

<br /> <ul id="navcss"><li class="current"><a href="#">Judul</a></li> <li><a href="#">Judul</a></li> <li><a href="#">Judul</a></li> <li><a href="#">Judul</a></li> <li><a href="#">Judul</a></li> </ul>

NB: '#' adalah Link tujuan dari kolom dan ada dapat merubahnya
         ex : '#' ->'http://ps-script.blogspot.com/'
     Judul itu ada judul Kolom yang diinginkan.


udah duluu yaa Request silahkan...