Next postingan saya kali ini akan sesidikit berbagi kepada kalian sobat blogger, Cara membuat Menu Multi Dropdown Blog mungkin bagi sebagian pengguna blogger sudah tidak asing lagi dengan cara seperti ini, tapi tidak ada salahnya juga jika saya share kembali kepada kalian yang belum tahu cara membuatnya.
Ok sobat jika tertarik untuk menggunakannya, bisa mengikuti langkah atau cara mudah membuatnya dibawah ini, dan bagi yang sudah tahu cara membuatnya bisa menyimak saja ya.
Cara membuat Menu Multi Dropdown
Pertama silahkan kalian buka blogger > Pilih Tema > Edit Html > lalu kalian letakan code css dibawah ini tepat sebelum </style> atau juga bisa sebelum </b:skin>
Setelah itu kalian buat menunya seperti dibawah ini bisa kalian gunakan codenya dan sebelum menyimpan kembali template yang kalian edit silahkan kalian edit terlebih dahulu code htmlnya sesuai yang kalian inginkan.
LIVE DEMO
Jika sudah kalian tinggal save atau simpan kembali template yang sudah kalian edit. lalu kalian bisa melihat langsung hasilnya di blog kalian, jika ada yang kurang pas kalian bisa seauaikan codenya sendiri.
Ok mungkin dari saya cukupkan sekian dulu selamat mencoba dan semoga bisa bermanfaat.
Ok sobat jika tertarik untuk menggunakannya, bisa mengikuti langkah atau cara mudah membuatnya dibawah ini, dan bagi yang sudah tahu cara membuatnya bisa menyimak saja ya.
Cara membuat Menu Multi Dropdown
Pertama silahkan kalian buka blogger > Pilih Tema > Edit Html > lalu kalian letakan code css dibawah ini tepat sebelum </style> atau juga bisa sebelum </b:skin>
/* Menu Multi Dropdown AG */ ul#mainmenu{margin:0 auto;list-style:none;padding:0;background-color:#000;width:100%} ul#mainmenu ul {margin:0 auto;list-style:none;padding:0;background-color:#000} ul#mainmenu ul {visibility:hidden; position:absolute; left:0; top:100%; opacity:0; -moz-transition:all 0.5s; -webkit-transition:opacity 0.5s; -o-transition:opacity 0.5s, visibility 0.5s; transition:opacity 0.5s; background-color:#000; padding:0 7px 0} ul#mainmenu li:hover>ul {visibility:visible;opacity:1;} ul#mainmenu li {position:relative;display:block;white-space:nowrap;float:left;} ul#mainmenu li:hover {z-index:1;} ul#mainmenu ul ul {position:absolute;left:100%;top:0;} ul#mainmenu {z-index:999;position:relative;display:inline-block;padding:0;} * html ul#mainmenu li a {display:inline-block;} ul#mainmenu>li {margin:0;} ul#mainmenu a:active, ul#mainmenu a:focus {outline-style:none;} ul#mainmenu a {display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Arial, sans-serif;color:#000000;cursor:pointer;padding:17px 20px;background-repeat:repeat;} ul#mainmenu ul li {float:none;margin:7px 0 0;} ul#mainmenu ul a {text-align:left; padding:5px 15px; background-color:transparent; color:#EDC1BF; text-decoration:none; text-shadow:0 1px 1px #000;} ul#mainmenu li:hover>a, ul#mainmenu li a.pressed {color:#FFFFFF;text-decoration:none;} ul#mainmenu img {border:none;vertical-align:middle;margin-right:17px;} ul#mainmenu ul span {background-image:none; padding-right:5px;} ul#mainmenu ul li:hover>a, ul#mainmenu ul li a.pressed {background-color:#BC433D;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px #000;} ul#mainmenu li.menutop>a {background-color:#201816; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#fff;} ul#mainmenu li.menutop:hover>a, ul#mainmenu li.menutop a.pressed {background-color:#000;color:#FFFFFF;}
Setelah itu kalian buat menunya seperti dibawah ini bisa kalian gunakan codenya dan sebelum menyimpan kembali template yang kalian edit silahkan kalian edit terlebih dahulu code htmlnya sesuai yang kalian inginkan.
<!-- Start menu multi dropdown-->
<nav>
<ul class='menutop' id='mainmenu'>
<li class='menutop'><a href='#' title='Home'>Home</a>
</li>
<li class='menutop'><a href='#' title='Product Info'>Product info</a>
<ul>
<li><a href='#'>Features</a>
</li>
<li><a href='#' title='Installation'>Installation</a>
<ul>
<li><a href='#'>Description of files</a>
</li>
<li><a href='#'>How to setup</a>
</li>
</ul>
</li>
<li><a href='#'>Parameters info</a>
</li>
<li><a href='#' title='Supported browsers'>Supported browsers</a>
<ul>
<li><a href='#'>Firefox</a>
</li>
<li><a href='#'>Internet Explorer</a>
</li>
<li><a href='#'>Opera</a>
</li>
<li><a href='#'>Safari</a>
</li>
<li><a href='#'>Google Chrome</a>
</li>
</ul>
</li>
<li><a href='#'>CSS3 info</a>
</li>
</ul>
</li>
<li class='menutop'><a href='#' title='Samples'>Samples</a>
<ul>
<li><a href='#'>Android template</a>
</li>
<li><a href='#'>Mac template</a>
</li>
<li><a href='#' title='Mercury template'>Mercury template</a>
<ul>
<li><a href='#'>Blue theme</a>
</li>
<li><a href='#'>Green theme</a>
</li>
<li><a href='#'>Lilac theme</a>
</li>
<li><a href='#'>Orange theme</a>
</li>
</ul>
</li>
<li><a href='#'>Elegant template</a>
</li>
<li><a href='#' title='Poin Template'>Point template</a>
<ul>
<li><a href='#'>Aquamarine theme</a>
</li>
<li><a href='#'>Blue theme</a>
</li>
<li><a href='#'>Green theme</a>
</li>
<li><a href='#'>Grey theme</a>
</li>
<li><a href='#'>Orange theme</a>
</li>
<li><a href='#'>Red theme</a>
</li>
</ul>
</li>
<li><a href='#' title='Toolbars template'>Toolbars template</a>
</li>
</ul>
</li>
<li class='menutop'><a href='#' title='Supported Browsers'>Supported browsers</a>
<ul>
<li><a href='#'>Firefox</a>
</li>
<li><a href='#'>Internet Explorer</a>
</li>
<li><a href='#'>Opera</a>
</li>
<li><a href='#'>Safari</a>
</li>
<li><a href='#'>Google Chrome</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- End menu multi dropdown -->
Jika sudah kalian tinggal save atau simpan kembali template yang sudah kalian edit. lalu kalian bisa melihat langsung hasilnya di blog kalian, jika ada yang kurang pas kalian bisa seauaikan codenya sendiri.
Ok mungkin dari saya cukupkan sekian dulu selamat mencoba dan semoga bisa bermanfaat.
0 Response to "Cara membuat Menu Multi Dropdown Di blog"
Post a Comment