SIDOBEY

Cara Membuat Mega Menu Drop Down Secara Manual

ADS GOOGLE
» » Cara Membuat Mega Menu Drop Down Secara Manual

Cara Membuat Mega Menu Drop Down Secara Manual

D2Ubed Agustus 09, 2017 0 komentar
Short URL:
Cara membuat menu Mega Dropdown secara Manual - Menu Mega Dropdown adalah salah satu menu Blogger yang dimana Menu Mega Dropdown ini beda dari menu biasanya,sehingga Menu Mega Dropdown ini terlihat unik dan menarik

Perbedaan Menu Mega Dropdwon dengan menu Lain nya yaitu dimana Menu Biasa hanya menampilkan beberapa menu link yang betautkan kehalaman lain nya,sedangkan Menu Dropdwon menampilkan begitu banyak halaman Link yang menautkan ke halaman lain nya di blog
Namun sayang nya Menu Mega Dropdown ini menampilkan berbagai link halaman bukan secara otomatis seperti pada Artikel sebelum,yang dimana pada artikel sebelum nya yang menarngkan tentang cara membuat Mnu Mega Dropdown secara Otomatis

Baca Juga : Cara membuat menu Mega Dropdown secara otomatis di blog

Pada Artikel sebelum yaitu masih sama membuat Menu Mega Dropdwown namun Mega Dropdown tersebut terbuat secara otomatis yang menampilkan berbagai kategori blog yang kita tautkan di dalam menu Mega Dropdown tersebut

Cara Memasang Menu Mega Drodown secara manual di blog

Dan kini saya berbagi trik bagaimana cara membuat menu Mega Dropdown secara manual,sebenar nya sih cara penerapan Menu Mega Dropdown ini sama seperti anda memasang menu navigasi biasa yang hanya menyimpan beberapa kode di halaman template yang sesuai anda inginkan

Namun untuk anda yang masih bingung bagaimana cara penerapan Menu Mega Dropdown ini,anda bisa mengikuti tutorial penerapan nya di bawah ini
  • Silahkan anda masuh ke akun Blogger anda
  • Setelah itu silahkan anda Klik Template di bagian kiri blogger
  • Kemudian silahkan klik Edit Html
  • Setelah nda berada di Edit Htm silahkan anda cari kode </b:skin> untuk memudahkan pencarian anda,silahkan anda tekan tombol Ctrl+F secara bersamaan,Setelah ketemu silahkan anda letakan kode CSS berikut sebelum kode </b:skin> tersebut
#menu li a,body,li,ul{font-size:14px}#menu div li,#menu h2,#menu h3,#menu p,body,li,ul{font-family:Arial,Helvetica,sans-serif;line-height:21px;text-align:left}#menu{list-style:none;width:940px;margin:30px auto 0;height:43px;padding:0 20px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;background:#014464;background:-moz-linear-gradient(top,#0272a7,#013953);background:-webkit-gradient(linear,0 0,0 100%,from(#0272a7),to(#013953));border:1px solid #002232;-moz-box-shadow:inset 0 0 1px #edf9ff;-webkit-box-shadow:inset 0 0 1px #edf9ff;box-shadow:inset 0 0 1px #edf9ff}#menu li{float:left;text-align:center;position:relative;padding:4px 10px;margin-right:30px;margin-top:7px;border:none}#menu li:hover{border:1px solid #777;padding:4px 9px;background:#F4F4F4;background:-moz-linear-gradient(top,#F4F4F4,#EEE);background:-webkit-gradient(linear,0 0,0 100%,from(#F4F4F4),to(#EEE));-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}#menu li a{font-family:Arial,Helvetica,sans-serif;color:#EEE;display:block;outline:0;text-decoration:none;text-shadow:1px 1px 1px #000}#menu li:hover a{color:#161616;text-shadow:1px 1px 1px #FFF}#menu li .drop{padding-right:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi86IUY0W0Eum32rtMxY4fR7InB3WPzhTZnMLwO6-nRZlKchbSL9gVzmlk4D8NHarHHq-tbQXknzSwiz_ZbsSYzcCNDiLp5D-mibrJUxnr4PC4Nusjlo6TjP3mzBPk3FXX7h9aTar_dug4f/s1600/drop.png) right 8px no-repeat}#menu li:hover .drop{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi86IUY0W0Eum32rtMxY4fR7InB3WPzhTZnMLwO6-nRZlKchbSL9gVzmlk4D8NHarHHq-tbQXknzSwiz_ZbsSYzcCNDiLp5D-mibrJUxnr4PC4Nusjlo6TjP3mzBPk3FXX7h9aTar_dug4f/s1600/drop.png) right 7px no-repeat}.dropdown_1column,.dropdown_2columns,.dropdown_3columns,.dropdown_4columns,.dropdown_5columns{margin:4px auto;float:left;position:absolute!important;left:-999em;text-align:left;padding:10px 5px;border:1px solid #777;border-top:none;background:#F4F4F4;background:-moz-linear-gradient(top,#EEE,#BBB);background:-webkit-gradient(linear,0 0,0 100%,from(#EEE),to(#BBB));-moz-border-radius:0 5px 5px;-webkit-border-radius:0 5px 5px;border-radius:0 5px 5px}.dropdown_1column{width:140px}.dropdown_2columns{width:280px}.dropdown_3columns{width:420px}.dropdown_4columns{width:560px}.dropdown_5columns{width:700px}#menu li:hover .dropdown_1column,#menu li:hover .dropdown_2columns,#menu li:hover .dropdown_3columns,#menu li:hover .dropdown_4columns,#menu li:hover .dropdown_5columns{left:-1px;z-index:444!important;top:auto}.col_1,.col_2,.col_3,.col_4,.col_5{display:inline;float:left;position:relative;margin-left:5px;margin-right:5px}.col_1{width:130px}.col_2{width:270px}.col_3{width:410px}.col_4{width:550px}.col_5{width:690px}#menu .menu_right{float:right!important;margin-right:0}#menu h2,#menu h3{margin:7px 0 14px}#menu li .align_right{-moz-border-radius:5px 0 5px 5px;-webkit-border-radius:5px 0 5px 5px;border-radius:5px 0 5px 5px}#menu li:hover .align_right{left:auto;right:-1px;top:auto}#menu div li,#menu h2,#menu h3,#menu p{font-size:12px;text-shadow:1px 1px 1px #FFF}#menu h2{font-size:21px;font-weight:400;letter-spacing:-1px;padding-bottom:14px;border-bottom:1px solid #666}#menu h3{font-size:14px;padding-bottom:7px;border-bottom:1px solid #888}#menu p{line-height:18px;margin:0 0 10px}#menu li:hover div a{font-size:12px;color:#015b86}#menu li:hover div a:hover{color:#029feb}.strong{font-weight:700}.italic{font-style:italic}.imgshadow{background:#FFF;padding:4px;border:1px solid #777;margin-top:5px;-moz-box-shadow:0 0 5px #666;-webkit-box-shadow:0 0 5px #666;box-shadow:0 0 5px #666}.img_left{width:auto;float:left;margin:5px 15px 5px 5px}#menu li .black_box{background-color:#333;color:#eee;text-shadow:1px 1px 1px #000;padding:4px 6px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-webkit-box-shadow:inset 0 0 3px #000;-moz-box-shadow:inset 0 0 3px #000;box-shadow:inset 0 0 3px #000}#menu li ul{list-style:none;padding:0;margin:0 0 12px}#menu li ul li{font-size:12px;line-height:24px;position:relative;text-shadow:1px 1px 1px #fff;padding:0;margin:0;float:none;text-align:left;width:130px}#menu li ul li:hover{background:0 0;border:none;padding:0;margin:0}#menu li .greybox li{background:#F4F4F4;border:1px solid #bbb;margin:0 0 4px;padding:4px 6px;width:116px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}#menu li .greybox li:hover{background:#fff;border:1px solid #aaa;padding:4px 6px;margin:0 0 4px}.tabs-inner .widget li a{padding:1px;display:block!important;border:1px solid transparent!important}
  • Setelah itu,silahkan anda letakan kode HTML berikut sesuai dengan ke inginan anda
<div id='menu'>
<li><a class='drop' href='#'>Home</a><!-- Begin Home Item -->
<div class='dropdown_2columns'><!-- Begin 2 columns container -->
<div class='col_2'>
<h2>Welcome !</h2>
</div>
<div class='col_2'>
<p>Ini adalah menu denan Mega Drop Down menu. Cara membuatnya hanya menggunakan CSS tanpa JavaScript</p>            
</div>
<div class='col_2'>
<h2>Cross Browser Support</h2>
</div>
<div class='col_1'>
<img alt='' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAfZ7vDVH4rJirOPX2TCpFH3mx1fYCGgu_uaoE0mKxu-f-OayIIuBph4aO8HeBekQt5-5ONVPCn6-9Kc0fOp0c8M_tC97SVX9vLWn3XlKsj-JIhCrf_End-chZWEAOqzX4_5k8ZpTgLrMU/s1600/browsers.png' width='125'/>
</div>
<div class='col_1'>
<p>Mega Drop Down Menu ini telah diuji dan berhasil untuk semua browser.</p>
</div>
</div><!-- End 2 columns container -->
</li><!-- End Home Item -->
<li><a class='drop' href='#'>5 Columns</a><!-- Begin 5 columns Item -->
<div class='dropdown_5columns'><!-- Begin 5 columns container -->
<div class='col_5'>
<h2>Ini adalah contoh untuk kolom 5</h2>
</div>
<div class='col_1'>
<p class='black_box'>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_1'>
<p>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_1'>
<p class='italic'>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_1'>
<p>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_1'>
<p class='strong'>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_5'>
<h2>Fitur Post Dengan Images</h2>
</div>
<div class='col_3'>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYxks9LdctS-ghPdaSpz8x769LKwafaoIP6pqcLK4kk2rc9j6pilBu1cO8uYrpeUzQyjeznkeuJWqR6qNNbMG257m8p1qRfdD2Qght87SOq8arGJpEOY2kEZXX1d6bOb6AjrhSOKnVdzle/s1600/01.jpg' width='70'/>
<p>Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href='#'>Read more...</a></p><br/>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Nf2BF61FkfXnnq7IYqW-G23_zgSUB3FqlVv3otv2jldR0HvsBNWTvCw72cHsAsh3C0woCPPvbd6f83uO-3RW4zIG80oFs41z5_MMJ5MVFGUEmNlWCrHzmV4BktEpKcT7ZVIiJ-PjSzxR/s1600/02.jpg' width='70'/>
<p>Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href='#'>Read more...</a></p>
</div>
<div class='col_2'>
<p class='black_box'>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
</div><!-- End 5 columns container -->
</li><!-- End 5 columns Item -->
<li><a class='drop' href='#'>4 Columns</a><!-- Begin 4 columns Item -->
<div class='dropdown_4columns'><!-- Begin 4 columns container -->
<div class='col_4'>
<h2>This is a heading title</h2>
</div>
<div class='col_1'>
<h3>Some Links</h3>
<ul>
<li><a href='#'>ThemeForest</a></li>
<li><a href='#'>GraphicRiver</a></li>
<li><a href='#'>ActiveDen</a></li>
<li><a href='#'>VideoHive</a></li>
<li><a href='#'>3DOcean</a></li>
</ul>  
</div>
<div class='col_1'>
<h3>Useful Links</h3>
<ul>
<li><a href='#'>NetTuts</a></li>
<li><a href='#'>VectorTuts</a></li>
<li><a href='#'>PsdTuts</a></li>
<li><a href='#'>PhotoTuts</a></li>
<li><a href='#'>ActiveTuts</a></li>
</ul>  
</div>
<div class='col_1'>
<h3>Other Stuff</h3>
<ul>
<li><a href='#'>FreelanceSwitch</a></li>
<li><a href='#'>Creattica</a></li>
<li><a href='#'>WorkAwesome</a></li>
<li><a href='#'>Mac Apps</a></li>
<li><a href='#'>Web Apps</a></li>
</ul>  
</div>
<div class='col_1'>
<h3>Misc</h3>
<ul>
<li><a href='#'>Design</a></li>
<li><a href='#'>Logo</a></li>
<li><a href='#'>Flash</a></li>
<li><a href='#'>Illustration</a></li>
<li><a href='#'>More...</a></li>
</ul>  
</div>
</div><!-- End 4 columns container -->
</li><!-- End 4 columns Item -->
<li class='menu_right'><a class='drop' href='#'>1 Column</a>
<div class='dropdown_1column align_right'>
<div class='col_1'>
<ul class='simple'>
<li><a href='#'>FreelanceSwitch</a></li>
<li><a href='#'>Creattica</a></li>
<li><a href='#'>WorkAwesome</a></li>
<li><a href='#'>Mac Apps</a></li>
<li><a href='#'>Web Apps</a></li>
<li><a href='#'>NetTuts</a></li>
<li><a href='#'>VectorTuts</a></li>
<li><a href='#'>PsdTuts</a></li>
<li><a href='#'>PhotoTuts</a></li>
<li><a href='#'>ActiveTuts</a></li>
<li><a href='#'>Design</a></li>
<li><a href='#'>Logo</a></li>
<li><a href='#'>Flash</a></li>
<li><a href='#'>Illustration</a></li>
<li><a href='http://kimzaqi.blogspot.com/'>Get This Menu</a></li>
</ul>  
</div>
</div>
</li>
<li class='menu_right'><a class='drop' href='#'>3 columns</a><!-- Begin 3 columns Item -->
<div class='dropdown_3columns align_right'><!-- Begin 3 columns container -->
<div class='col_3'>
<h2>Lists in Boxes</h2>
</div>
<div class='col_1'>
<ul class='greybox'>
<li><a href='#'>FreelanceSwitch</a></li>
<li><a href='#'>Creattica</a></li>
<li><a href='#'>WorkAwesome</a></li>
<li><a href='#'>Mac Apps</a></li>
<li><a href='#'>Web Apps</a></li>
</ul>  
</div>
<div class='col_1'>
<ul class='greybox'>
<li><a href='#'>ThemeForest</a></li>
<li><a href='#'>GraphicRiver</a></li>
<li><a href='#'>ActiveDen</a></li>
<li><a href='#'>VideoHive</a></li>
<li><a href='#'>3DOcean</a></li>
</ul>  
</div>
<div class='col_1'>
<ul class='greybox'>
<li><a href='#'>Design</a></li>
<li><a href='#'>Logo</a></li>
<li><a href='#'>Flash</a></li>
<li><a href='#'>Illustration</a></li>
<li><a href='#'>More...</a></li>
</ul>  
</div>
<div class='col_3'>
<h2>Here are some image examples</h2>
</div>
<div class='col_3'>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Nf2BF61FkfXnnq7IYqW-G23_zgSUB3FqlVv3otv2jldR0HvsBNWTvCw72cHsAsh3C0woCPPvbd6f83uO-3RW4zIG80oFs41z5_MMJ5MVFGUEmNlWCrHzmV4BktEpKcT7ZVIiJ-PjSzxR/s1600/02.jpg' width='70'/>
<p>Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href='#'>Read more...</a></p><br/>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYxks9LdctS-ghPdaSpz8x769LKwafaoIP6pqcLK4kk2rc9j6pilBu1cO8uYrpeUzQyjeznkeuJWqR6qNNbMG257m8p1qRfdD2Qght87SOq8arGJpEOY2kEZXX1d6bOb6AjrhSOKnVdzle/s1600/01.jpg' width='70'/>
<p>Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href='#'>Read more...</a></p>
</div>
</div><!-- End 3 columns container -->
</li><!-- End 3 columns Item -->
</div>
  • Kemudian silahkan Save template
 Silahkan anda sesuaikan baik itu Kata-kata yang di warna merah ataupun link-link yang terdapat di dalam menu tersebut sesuai dengan link yang berada di blog sobat,baik itu di pasang link Kategori/Label ataupun link langsung kehalaman

Nah itulah cara membuat Menu Mega Dropdown secara manual,semoga artikel nya bisa membantu sobat blogger,selamat mencoba dan semoga bermanfaat artikel nya,salam blogger.

Posted by D2Ubed, Published at Agustus 09, 2017 and have 0 komentar
D2Ubed

I manage this blog and post tutorials related to Blogger, SEO, Software Tools, Windows, CSS and Social Media. Did you find this blog helpful? Please socialize with us !!


Advertisement

IKLAN DISINI