Cara buat Mega Menu Drop Down CSS3 di Blogger




Cara buat Mega Menu Drop Down CSS3 di Blogger
Cara buat Mega Menu Drop Down CSS3 di Blogger


 Pagi ini saya kembali untuk share tentang cara buat mega menu drop down css3 di blogger, untuk tutorial ini saya tidak banyak menjelaskan, hanya saja saya lebih suka cara pembuatannya, Nah Mega Menu ini lebih berbeda style dari penjelasan tutorial mega menu drop down sebelumnya. Pada mega menu drop down ini terdapat sub menu yang bervariasi dan tidak hanya itu ukurannya sangat lebar sehingga bisa anda dengan mudah memasukan cuplikan atau highlight postingan yang populer yang terdapat di dalam  sebuah blog anda kedalam sub menu mega drop down ini. Dan tidak hanya juga cuplikan konten saja, namun bisa berupa label ataupun kategori posting blog juga sekalian bisa anda masukan kedalam sub menu mega drop down yang sangat simple. 

Nah jika anda ingin lebih jelasnya lagi dari penjelasan mengenai mega menu ini, anda bisa membacanya di artikel lain, sesuai dengan judul saya lebih suka cara pembuatannya, jika anda memang ingin membuat menu mega ini, baca trus artikel ini sampai selesai.yuk langsung saja berikut ini adalah penjelasan tentang bagaimana cara untuk membuatnya.
# cara buat mega menu drop down css3 di blogger
1. Pertama anda Login ke akun blogger.
2. Lalu Copy kode CSS nya dibawah ini 
3. Anda klik Template ==> Sesuaikan ==> Tingkat Lanjut ==> Tambahkan CSS (paste kode CSS di bawah ini didalam kolom tersebut).

#menu {
list-style:none;
width:auto;
height:43px;
padding:0px 20px 0px 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 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
padding-right:21px;
background:url("http://2.bp.blogspot.com/-E5s6curvzGc/UdDI0IerUDI/AAAAAAAAFd0/gnsq72eJGcw/s12/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("http://2.bp.blogspot.com/-E5s6curvzGc/UdDI0IerUDI/AAAAAAAAFd0/gnsq72eJGcw/s12/drop.png") no-repeat right 7px;
}
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
float:left;
position:absolute;
left:-999em;
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 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;
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;
margin-right:0px;
}
#menu li .align_right {
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}
#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#029feb;
}
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
.imgshadow {
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left {
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}

4 Selanjutnya Klik Terapkan ke Blog.

NOTE: Jika anda ingin meletakan kode CSS ini tidak harus anda mengikuti  langkah-langakah seperti pada di atas, namun cara lain juga bisa anda lakukan yaitu dengan cara:
  • Klik Template ==> Edit HTML dan cari kode ]]></b:skin> (cara cepat tekan CTRL+F) 
  • Lalu paste kode CSS tersebut tepat di atasnya ]]></b:skin>  klik Simpan Template.
4. Nah untuk bisa menampilkan Mega Menu Drop Down CSS3 di Blog anda, yaitu caranya anda copy kode HTML dibawah ini, Maka anda klik Tata Letak ==> Tambah Widget ==> HTML/Javascript dan paste kode berikut ini didalamnya:
<ul id="menu">
<li><a href="#" class="drop">Home</a>
<div class="dropdown_2columns">
<div class="col_2">
<h2>Welcome !</h2></div>
<div class="col_2">
<p>Hallo selamat datang di sini! sebuah blog sederhana dengan fitur Menu Mega Drop Down.</p>           
<p>Item ini dilengkapi dengan berbagai macam disiapkan stylings tipografi seperti judul, daftar, dll.</p></div>
<div class="col_2">
<h2>Cross Browser Support</h2></div>
<div class="col_1">
<img src="http://2.bp.blogspot.com/-Va_ceju7yGA/UdDI0CH7ETI/AAAAAAAAFdo/Yj_c75zR-CA/s125/browsers.png" width="125" height="48" alt="" /></div>
<div class="col_1">
<p>Mega Menu ini telah diuji dalam beberapa browser utama.</p>
</div></div>
</li>
<li><a href="#" class="drop">Menu 1</a>
<div class="dropdown_5columns">
<div class="col_5">
<h2>Ini adalah contoh dari konten menu dengan 5 kolom</h2></div>
<div class="col_1">
<p class="black_box">Ini adalah kolom pertama. Anda bisa mengganti dengan highlight konten yang di inginkan.</p></div>
<div class="col_1">
<p>Ini adalah kolom kedua. Anda bisa mengganti dengan highlight konten yang di inginkan.</p></div>
<div class="col_1">
<p class="italic">Ini adalah kolom ketiga. Anda bisa mengganti dengan highlight konten yang di inginkan.</p></div>
<div class="col_1">
<p>Ini adalah kolom keempat. Anda bisa mengganti dengan highlight konten yang di inginkan.</p></div>
<div class="col_1">
<p class="strong">Ini adalah kolom kelima. Anda bisa mengganti dengan highlight konten yang di inginkan.</p></div>
<div class="col_5">
<h2>Berikut adalah beberapa konten dengan thumbnail</h2></div>
<div class="col_3">
<img src="http://3.bp.blogspot.com/-2-yGGI2Nrmw/UWCAzSc12vI/AAAAAAAAEBI/RKEUU3bZfzM/s320/3d-flip.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Efek Gambar 3D Flip Dengan CSS – Sebuah gambar pada posting blog tanpa adanya tambahan kode CSS maka gambar tersebut akan terkesan murni dan tidak memiliki efek.<a href="#">Read more...</a></p>
<img src="http://2.bp.blogspot.com/-i1_8cZKnxMU/UXOs5qcqwnI/AAAAAAAAEFU/xOyCuOAIk8Q/s320/css-transisi.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi - Untuk lebih detailnya maka berikut adalah tutorial untuk cara membuat Efek Pull Out Gambar Dengan CSS3.<a href="#">Read more...</a></p></div>
<div class="col_2">
<p class="black_box">Membuat Gallery Gambar Efek Pop Up Image Dengan CSS - ini adalah galeri foto berbasis murni CSS yang menampilkan versi gambar yang lebih besar dari gambar thumbnail dinamis ketika gambar tersorot oleh mouse. Sebuah keterangan berupa bahasa HTML juga dapat ditambahkan ke dalam gambar yang diperbesar, dan setiap aspek dari Image Gallery terdapat keterangan HTML pada halaman.<a href="#">Read more...</a></p>
</div></div>
</li>
<li><a href="#" class="drop">Menu 2</a>
<div class="dropdown_4columns">
<div class="col_4">
<h2>Ganti dengan heading title</h2></div>
<div class="col_1">
<h3>Tutorial</h3>
<ul>
<li><a href="http://www.mizipedia.com/">HTML</a></li>
<li><a href="http://www.mizipedia.com/">CSS</a></li>
<li><a href="http://www.mizipedia.com/">PHP</a></li>
<li><a href="http://www.mizipedia.com/">jQuery</a></li>
<li><a href="http://www.mizipedia.com/">JavaScript</a></li>
</ul></div>
<div class="col_1">
<h3>Software</h3>
<ul>
<li><a href="http://www.mizipedia.com/">Photoshop</a></li>
<li><a href="http://www.mizipedia.com/">CorelDraw</a></li>
<li><a href="http://www.mizipedia.com/">Dreamweaver</a></li>
<li><a href="http://www.mizipedia.com/">NetBeans</a></li>
<li><a href="http://www.mizipedia.com/">XAMPP</a></li>
</ul></div>
<div class="col_1">
<h3>Game</h3>
<ul>
<li><a href="http://www.mizipedia.com/">PES 2013</a></li>
<li><a href="http://www.mizipedia.com/">FIFA 2013</a></li>
<li><a href="http://www.mizipedia.com/">Need For Speed</a></li>
<li><a href="http://www.mizipedia.com/">Call Of Dutty</a></li>
<li><a href="http://www.mizipedia.com/">Snipper</a></li>
</ul></div>
<div class="col_1">
<h3>Lain-lain</h3>
<ul>
<li><a href="http://www.mizipedia.com/">Design</a></li>
<li><a href="http://www.mizipedia.com/">Logo</a></li>
<li><a href="http://www.mizipedia.com/">Flash</a></li>
<li><a href="http://www.mizipedia.com/">Illustration</a></li>
<li><a href="http://www.mizipedia.com/">More...</a></li>
</ul></div></div>
</li>
<li class="menu_right"><a href="http://www.mizipedia.com/" class="drop">Menu 4</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="simple">
<li><a href="http://www.mizipedia.com/">HTML</a></li>
<li><a href="http://www.mizipedia.com/">CSS</a></li>
<li><a href="http://www.mizipedia.com/">PHP</a></li>
<li><a href="http://www.mizipedia.com/">jQuery</a></li>
<li><a href="http://www.mizipedia.com/">JavaScript</a></li>
<li><a href="http://www.mizipedia.com/">Photoshop</a></li>
<li><a href="http://www.mizipedia.com/">CorelDraw</a></li>
<li><a href="http://www.mizipedia.com/">SEO</a></li>
<li><a href="http://www.mizipedia.com/">Blogging</a></li>
<li><a href="http://www.mizipedia.com/">Widget</a></li>
<li><a href="http://www.mizipedia.com/">Design</a></li>
<li><a href="http://www.mizipedia.com/">Logo</a></li>
<li><a href="http://www.mizipedia.com/">Flash</a></li>
<li><a href="http://www.mizipedia.com/">Illustration</a></li>
<li><a href="http://www.mizipedia.com/">More...</a></li>
</ul></div></div></li>
<li class="menu_right"><a href="http://www.mizipedia.com/" class="drop">Menu 3</a>
<div class="dropdown_3columns align_right">
<div class="col_3">
<h2>Kategori</h2></div>
<div class="col_1">
<ul class="greybox">
<li><a href="http://www.mizipedia.com/">HTML</a></li>
<li><a href="http://www.mizipedia.com/">CSS</a></li>
<li><a href="http://www.mizipedia.com/">PHP</a></li>
<li><a href="http://www.mizipedia.com/">jQuery</a></li>
<li><a href="http://www.mizipedia.com/">JavaScript</a></li>
</ul></div>
<div class="col_1">
<ul class="greybox">
<li><a href="http://www.mizipedia.com/">Widget</a></li>
<li><a href="http://www.mizipedia.com/">Blogging</a></li>
<li><a href="http://www.mizipedia.com/">SEO</a></li>
<li><a href="http://www.mizipedia.com/">Tips Trik</a></li>
<li><a href="http://www.mizipedia.com/">Tutorial</a></li>
</ul></div>
<div class="col_1">
<ul class="greybox">
<li><a href="http://www.mizipedia.com/">Desain</a></li>
<li><a href="http://www.mizipedia.com/">Logo</a></li>
<li><a href="http://www.mizipedia.com/">Flash</a></li>
<li><a href="http://www.mizipedia.com/">Illustration</a></li>
<li><a href="http://www.mizipedia.com/">More...</a></li>
</ul></div>
<div class="col_3">
<h2>Tutorial CSS</h2></div>
<div class="col_3">
<img src="http://2.bp.blogspot.com/-i1_8cZKnxMU/UXOs5qcqwnI/AAAAAAAAEFU/xOyCuOAIk8Q/s320/css-transisi.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi - Untuk lebih detailnya maka berikut adalah tutorial untuk cara membuat Efek Pull Out Gambar Dengan CSS3.<a href="#">Read more...</a></p>
<img src="http://3.bp.blogspot.com/-2-yGGI2Nrmw/UWCAzSc12vI/AAAAAAAAEBI/RKEUU3bZfzM/s320/3d-flip.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Efek Gambar 3D Flip Dengan CSS – Sebuah gambar pada posting blog tanpa adanya tambahan kode CSS maka gambar tersebut akan terkesan murni dan tidak memiliki efek.<a href="#">Read more...</a></p>
</div></div>
</li></ul>
NOTE: Jika anda ingin meletakan kode HTML ini tidak harus anda mengikuti  langkah-langakah seperti pada di atas, namun cara lain juga bisa anda lakukan yaitu dengan cara:
  • Klik Template ==> Edit HTML dan cari kode </header> (cara cepat tekan CTRL+F) 
  • Lalu paste kode HTML tersebut tepat di bawah </header>  klik Simpan Template. ( jika anda tidak suka, maka bisa anda letakkan di atas </header>
# Silahkan anda ganti http://www.mizipedia.com/ dengan URL tujuan yang di inginkan.
Anchor teks / deskripsi seperti ini HTML silahkan ganti dengan yang di inginkan.

Yang terakhir jangan lupa anda klik Save, maka selesai dan silahkan lihat hasilnya.

Demikian tutorial pada pagi ini, semoga bermanfaat untuk anda, semoga berhasil., jangan lupa berkomentar di bawah ini jika terdapat keluhan..dan terimaksih sudah berkunjung.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect