- Masuk Blogger.com
- Pilih Blog yang akan Ditambahkan menu dropdonnya
- masuk Edit HTML
- Cari Kode ]]></b:skin> atau </style> Sesuaikan denagan template agan. (Agar Lebih Gampang CTRL+F)
- Copy Code CSS Dibawah ini dan pastekan di Atas Kode Tadi.
/*NAVIGASI By Ridwan Hex*/
a, #navigation li .sub-nav-wrapper .sub-nav li { transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s;}#navigation li .sub-nav-wrapper { pointer-events: none; opacity: 0; filter: alpha(opacity=0); top: 0; transition: all 0.4s cubic-bezier(1,-5,0,0) 0s; -moz-transition: all 0.4s cubic-bezier(1,-5,0,0) 0s; -webkit-transition: all 0.4s cubic-bezier(1,-5,0,0) 0s;}#navigation li:hover .sub-nav-wrapper {pointer-events: auto;opacity: 1;filter: alpha(opacity=100);top: 30px;}#navigation { position: relative;padding: 0;margin:0 auto;background-color:#3498db}#navigation li { position: relative; list-style: none; display: inline-block; padding: 5px 10px;}#navigation a {
text-decoration: none;}#navigation li:hover{background:#299DFF}#navigation li a { padding: 5px; display: block; font-family: Nova Square;font-size: 14px; font-weight: 700; color: #3b3b3b; text-align: left; text-shadow: 1px 1px 0 rgba(255,255,255,0.25);}nav li a:hover {background: #299DFF;}#navigation li:hover .main {color: #fff;}#navigation li .sub-nav-wrapper { display: block; position: absolute; z-index: 30;}#navigation li .sub-nav-wrapper .sub-nav { width: 150px; margin-top: 6px; background: #fff; border-top: 1px solid #299DFF; padding:0; box-shadow: 0 1px 2px rgba(0,0,0,0.35); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.35);margin-left: -10px;}#navigation li:hover .sub-nav-wrapper {display: block;}#navigation li .sub-nav-wrapper .sub-nav li {list-style: none;display: block;margin: 0;padding: 0;text-align: left;border-bottom: 1px solid #B5DDFF;}#navigation li .sub-nav-wrapper .sub-nav li:last-child {border: none;}#navigation li .sub-nav-wrapper .sub-nav li a {display: block;padding: 11px 20px;font-size: 12px;font-weight: 600; }#navigation li a:hover {color: white;}#navigation li .sub-nav-wrapper .sub-nav li:hover {background: #299DFF;border-bottom: 1px solid #299DFF;color: #3b3b3b;text-decoration: none;}
@media only screen and ( min-width: 769px ) and ( max-width: 960px ) {#navigation {text-align: center;}}@media only screen and ( max-width: 768px ) {#navigation {text-align: center;}#navigation li a {font-size: 11px;padding:0;}#navigation li .sub-nav-wrapper {display: none!important;}}@media only screen and ( max-width: 479px ) {#navigation {text-align: center;}#navigation li a {font-size: 11px;padding:0;}#navigation li .sub-nav-wrapper {display: none!important;}}
- Pastekan Kode Dibawah ini Di bawah <body> atau sesuaikan dengan template agan masing masing,,
<nav id='navigation'><li> <a class='main' expr:href='data:blog.homepageUrl'>Home</a></li><li><a class='main' href='/search/label/SSH%20Gratis?max-results=5' target='_blank'>SSH Gratis</a></li><li><a class='main' href='/search/label/Downloads?max-results=5' target='_blank'>Downloads</a><div class='sub-nav-wrapper'><ul class='sub-nav'><li><a href='/search/label/Software?max-results=5' target='_blank'>Software</a></li><li><a href='/search/label/Game?max-results=5' target='_blank'>Game</a></li></ul></div></li> <li><a class='main' href='/search/label/Tutorial?max-results=5' target='_blank'>Tutorial</a><div class='sub-nav-wrapper'><ul class='sub-nav'><li><a href='/search/label/Facebookers?max-results=5' target='_blank'>Facebookers</a></li><li><a href='/search/label/ValidHTML5?max-results=5' target='_blank'>Validasi HTML5</a></li><li><a href='/search/label/Photoshop?max-results=5' target='_blank'>Photoshop</a></li></ul></div></li><li><a class='main' href='/search/label/Software?max-results=5' target='_blank'>Blogging</a></li><li><a class='main' href='/search/label/Template?max-results=5' target='_blank'>Blogger Templates</a></li><li><a class='main' href='#'>Contact</a><div class='sub-nav-wrapper'><ul class='sub-nav'><li><a href='http://fb.com/ridwan.mancuniasjati' target='_blank'>Facebook</a></li><li><a href='http://twitter.com/Ridwan_Hacker_' target='_blank'>Twitter</a></li><li><a href='https://plus.google.com/+AbdulAjizRidwanz' target='_blank'>Google +</a></li>
</ul></div></li></nav></body>- Terakhir tinggal Simpan Template dan selesai..
- Demo Nya..
Sekian Artikel tentang Navigation dropdown awesome for Blogger Semoga Bermanfaat.
Bila ada pertanyaan silahkan hub saya lewat fb/twitter/g+/ato yang lainnya..
