Membuat Form Email Subscribe Dibawah Posting Blog

Membuat Form Email Subscribe Dibawah Posting Blog – tentu sudah tidak asing lagi dengan adanya form email subcribe di dalam template blog. Dengan adanya form email subscribe yang terpasang pada blog akan sangat membantu baik itu dari author blog dalam mempublikasikan ke media maupun lebih mempermudah visitor dalam menemukan artikel yang di publikasin oleh blog tersebut dan nantinya pemilik email akan menerima pemberitahuan mengenai artikel yang di publikasikan begitu juga seterusnya akan menerima pemberitahuan secara terupdate melalui email selagi masih berlangganan. Untuk membuat form email subcribe agar bisa tampil dibawah posting blog juga tidak rumit dan bahkan sangat mudah. Caranya bisa di ikuti dengan menggunakan langkah-langkah yang ada dibawah ini, berikut tutorialnya untuk Membuat Form Email Subscribe Dibawah Posting Blog.

1. Login ke akun blogger.
2. Kemudian klik Template lalu pilih Edit HTML.
3. Copy kode berikut ini lalu paste di atas kode ]]></b:skin>

#evolutions-widget { background: #e9fbe9; border: 2px solid #52e052; padding: 3px 8px; margin: 20px auto; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; width: auto; box-shadow: 1px 1px 4px #52e052 inset; }
#evolutions-widget:hover { background: darkgreen; }
#evolutions-widget td { padding: 3px 0; }
form.feedburner { margin: 0px; display: block; clear: both; }
.form-email { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMdvrc1GCeAcSWK2qjEPEROu6MEqGNUeVGQHog5PEnhI1CqvBNVSka587J7g1fPNCayPGkWlwCbZ3LPoVqdVo7bGLWEnGbz1JmMEApNpvXCT5Y-RI9Uuw7Xz3Ja3ZZc1GwC2iFQCgXmxN8/s1600/helperblogger.com-email-icon.png) no-repeat scroll 4px center transparent; padding: 7px 15px 7px 35px; color: #000; font-weight: bold; text-decoration: none; border: 1px solid #52e052; box-shadow: 1px 1px 4px #52e052 inset; }
.buttonsubmit { color: #000; font-weight: bold; text-decoration: none; padding: 6px 15px; border: 1px solid #52e055; cursor: pointer; background: #52e052; }

4. Selanjutnya gunakan CTRL+F untuk mencari kode <data:post.body/> biasanya terdapat 2 kode atau bisa lebih, sesuaikan saja dengan template blog yang anda gunakan.
5. Lalu copy kode berikut ini kemudian paste dibawahnya <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div id='evolutions-widget'>
<div id='emailwidget'>
<table style='border:none; margin: 0px; padding: 0px;' width='100%'>
<tbody>
<tr style='border:none; margin: 0px; padding: 0px;'>
<td align='left' style='border:none; margin: 0px; padding: 0px;'>
<p style='color:#000; font-weight: bold; font-size: 18px; margin:0px 0px 15px 0px;font-family:georgia;font-style:bold; '>
Get Update Via Email !
</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=masandes&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='masandes'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='form-email' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>
<input alt='' class='buttonsubmit' title='' type='submit' value='Submit'/>
</form>
</td>
<td style='border:none; margin: 0px; padding: 0px;'>
<p style='color:#000; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px;font-family: georgia; '>
Follow Me !
</p>
<a href='http://feeds.feedburner.com/masandes' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSMZ9qcHs13yf_Hlr1l2176P813YXcsoCvgop6QBbmx_-qxfTtGapXjbA39hjuP2ssDe38k1_jLMs3X9oiS5YIyDY5UW307FekBMBVaLuYuT1PfBK2LYbAJV00qWw4YgwoFkIFCz-IyEw/h120/Faceblog+Evolutions+%283%29.png'/></a>
<a href='http://www.facebook.com/andestyle' rel='nofollow' target='_blank' title='Follow Me on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYXlaewHbCethTkbjMyG66ONL1_D69Nu7A_pKlem8iaeNk-fY5Lek_oWua1G99PyQgP_-H_bewOuLUAqHNrDUHQBdjDCPrzNcLIvz0sBsrxXBndQXZgUNukG5btcNJGFAAPSrswKwcjIk/h120/Faceblog+Evolutions+%281%29.png'/></a>
<a href='https://plus.google.com/106527290580119996124/' rel='nofollow' target='_blank' title='Follow Me on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrVWKMk_xypxtWD_nUauuZcI-kmxZ6UZPkrBaAHAUPfr4p2ZxMsr_BufFpzkIgT3UiY33HOibAPDhpNe3jbUPiXT9rRezPnL0cQUW06vmg-oTTqChQiswDaUss2e1nhIqsrOOYIWDL9Ws/h120/Faceblog+Evolutions+%282%29.png'/></a>
</td>
</tr>
</tbody>
</table>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fandestyle&amp;width=450&amp;height=21&amp;colorscheme=light&amp;layout=standard&amp;action=like&amp;show_faces=false&amp;send=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
<span style='font-size: 8px; text-decoration: none; text-align:right;'><a href='http://mas-andes.blogspot.com' target='_blank'>[Get this widget]</a></span>
</div>
</div>
</b:if>

6. Langkah terakhir klik Simpan Template.

Membuat Widget Follower Accordion Pada Blog

Membuat Widget Follower Accordion Pada Blog – berbicara mengenai layout blog memang tak lepas dari coding, karena memang coding yang melatar belakangi suatu tampilan blog. Pada pembahasan kali ini saya kembali akan membahas tentang widget follower yang terdapat pada blog. Lantas follower yang bagaimana lagi yang akan saya bahas pada topik ini. Di dalam suatu blog biasanya terdapat widget follower dari blogger sendiri, ada juga widget google+ follower dan adapula widget facebook like box yang berarti ini follower facebook fanspage. Dari ketiga jenis widget follower tersebut pada tutorial ini akan kita bahas agar ketiga-tiganya widget tampil dalam satu accordion secara berurutan atau bisa dikatakan widget ini saya gabungkan kedalam satu tag label follower pada blog. Caranya juga cukup mudah dan bahkan lebih singkat daripada menggabungkan komentar blogger, facebook dan twitter. Seperti apa langkah lebih jelasnya untuk menggabungkan follower blogger, google+ dan facebook? Berikut tutorialnya untuk Membuat Widget Follower Accordion Pada Blog.

1. Login ke akun blogger.
2. Langkah berikutnya Copy kode berikut ini lalu klik Tata Letak > Tambah Widget > HTML/Javascript kemudian paste kode disitu.
- Untuk memasang agar di sidebar, berikut kodenya:

<style>
#accordion-evolutions { position:relative; margin:auto; } #accordion-follower { height:auto; width:290px; background:#e9fbe9; border:1px solid #52e052; padding:10px; display:none; margin:auto; } #accordion-button { height:40px; width:312px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxpTUj_nkHimSMV3D9x1QaSgbxVkHNFIftr8437ADkhyrMLzqWC-IFsq7oy3Xk29D8Bx9oh_9M7ouSFLMR_NtkAfDj-V0XLh_hQgqdfq-C8slI5q4S31T9wgNNU2GFETc1P4xGq_L2WxM/h46/follow_button.png'); display:block; cursor:pointer; margin:auto; }
</style>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ $("#accordion-button").click(function(){ if ($("#accordion-follower").is(":hidden")){ $("#accordion-follower").slideDown("slow"); } else{ $("#accordion-follower").slideUp("slow"); } }); }); function closeForm(){ setTimeout('$("#accordion-follower").slideUp("slow")', 2000); }
</script>

<div id="accordion-evolutions">
<div id="accordion-follower">
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>

<div id="div-7w5ths5ahnit"></div>
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#000000';
skin['ENDCAP_BG_COLOR'] = '#e9fbe9';
skin['ENDCAP_TEXT_COLOR'] = '#000000';
skin['ENDCAP_LINK_COLOR'] = '#000000';
skin['ALTERNATE_BG_COLOR'] = '#transparent';
skin['CONTENT_BG_COLOR'] = '#transparent';
skin['CONTENT_LINK_COLOR'] = '#000000';
skin['CONTENT_TEXT_COLOR'] = '#000000';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#FFFFFF';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#000000';
skin['CONTENT_HEADLINE_COLOR'] = '#000000';
skin['NUMBER_ROWS'] = '2';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-7w5ths5ahnit',
   site: '10916685731781888212' },
  skin);
</script>

</br>

<div class="g-plus" data-action="followers" data-height="200" data-href="https://plus.google.com/104093787575230359634" data-source="blogger:blog:followers" data-width="300">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'en'};
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>

</br>

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fandestyle&amp;width=292&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:200px;" allowTransparency="true"></iframe>
</div>
<div id="accordion-button"></div>
</div>

- Untuk memasang agar melayang di sudut atas kanan blog, berikut kodenya:

<style>
#accordion-evolutions { position:fixed; top: 0; right:20px; float:right; } #accordion-follower { height:auto; width:290px; background:#e9fbe9; border:1px solid #52e052; padding:10px; display:none; } #accordion-button { height:40px; width:312px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxpTUj_nkHimSMV3D9x1QaSgbxVkHNFIftr8437ADkhyrMLzqWC-IFsq7oy3Xk29D8Bx9oh_9M7ouSFLMR_NtkAfDj-V0XLh_hQgqdfq-C8slI5q4S31T9wgNNU2GFETc1P4xGq_L2WxM/h46/follow_button.png'); display:block; cursor:pointer; margin:auto; }
</style>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ $("#accordion-button").click(function(){ if ($("#accordion-follower").is(":hidden")){ $("#accordion-follower").slideDown("slow"); } else{ $("#accordion-follower").slideUp("slow"); } }); }); function closeForm(){ setTimeout('$("#accordion-follower").slideUp("slow")', 2000); }
</script>

<div id="accordion-evolutions">
<div id="accordion-follower">
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>

<div id="div-7w5ths5ahnit"></div>
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#000000';
skin['ENDCAP_BG_COLOR'] = '#e9fbe9';
skin['ENDCAP_TEXT_COLOR'] = '#000000';
skin['ENDCAP_LINK_COLOR'] = '#000000';
skin['ALTERNATE_BG_COLOR'] = '#transparent';
skin['CONTENT_BG_COLOR'] = '#transparent';
skin['CONTENT_LINK_COLOR'] = '#000000';
skin['CONTENT_TEXT_COLOR'] = '#000000';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#FFFFFF';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#000000';
skin['CONTENT_HEADLINE_COLOR'] = '#000000';
skin['NUMBER_ROWS'] = '2';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-7w5ths5ahnit',
   site: '10916685731781888212' },
  skin);
</script>

</br>

<div class="g-plus" data-action="followers" data-height="200" data-href="https://plus.google.com/104093787575230359634" data-source="blogger:blog:followers" data-width="300">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'en'};
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>

</br>

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fandestyle&amp;width=292&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:200px;" allowTransparency="true"></iframe>
</div>
<div id="accordion-button"></div>
</div>

Keterangan:
Ganti kode yang berwarna merah dengan ID widget follower blog anda, caranya lihat disini.
Ganti 104093787575230359634 dengan ID google+ anda.
Ganti andestyle dengan ID facebook/fanspage anda.

3. Langkah terakhir klik Simpan.

Memasang Widget Contact Form Accordion Pada Blog

Memasang Widget Contact Form Accordion Pada Blog – masih pada tema tutorial yang sama seperti sebelumnya mengenai cara memasang dan memodifikasi atau merubah tampilan awal widget contact form official blogger yang masih sederhana agar bisa menjadi lebih menarik dan bisa kita atur sendiri dimana letak widget contact form tersebut supaya bisa di pasang pada letak yang kita kehendaki. Tentu sudah tidak asing lagi dengan kata floating di kalangan blogger. Istilah floating tentu sangat identik dengan kata melayang atau dalam istilah lain widget contact form ini nantinya akan kita pasang di bagian atas layout blog dan apabila nanti scroll mouse di putar kebawah maka widget contact form akan tetap pada posisinya, yakni di pojok atas layout blog sebelah kanan. Namun pilihan lain bisa juga widget contact form ini dipasang pada sidebar blog dan jangan khawatir mengenai layout, tidak terlalu memakan banyak tempat juga karena widget contact form ini mempunyai efek accordion dimana contact form akan muncul apabila button contact sudah di klik. Untuk penjelasan lebih lanjut, berikut adalah tutorial cara memasang Memasang Widget Contact Form Accordion Pada Blog.

1. Login ke akun blogger.
2. Kemudian klik Tata Letak > Tambah widget > Gadget Lainnya > Formulir Kontak, lalu klik Simpan.
3. Selanjutnya adalah menyembunyikan widget contact form bawaan blogger tersebut, caranya klik Template > Edit HTML lalu cari kode ]]></b:skin> gunakan CTRL+F.
4. Copy kode berikut ini lalu paste tepat diatas kode ]]></b:skin> kemudian klik Simpan Template.

#ContactForm1 {display:none}

5. Lalu langkah berikutnya adalah membuat tampilan baru widget contact form, caranya pilih salah satu kode yang ada pada blockquote lalu Copy kode tersebut selanjutnya klik Tata Letak > Tambah Widget > HTML/Javascript kemudian paste kode tersebut.

- Untuk memasang agar melayang di sudut atas kanan blog (floating contact form), berikut kodenya:

<style>
#form-evolutions { position:fixed; top: 0; right:20px; float:right; } #contact-faceblog { height:310px; width:280px; background:#e9fbe9; border:1px solid #52e052; padding:10px; display:none; } #ContactForm1_contact-form-name{ width: 230px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1wyt9j7mRk1f1GlYZB4wP7GGAOC9aUupVtJAQRm3yZbn9ShLbzSJBADs6o8CZTRn80jpbbNu_M5XWjHse4AOYu6f-WqusufscJ4jl89QrR0rm-ubgVdH6PIJMayzZzoHEOH7OsJiBx2M/s1600/user.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email{ width: 230px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDjN8yylXlZFRRR9oB57v8qee0x79ave-Moo28YBpoGzzbQrnAoctuXqFlK1ptafOyHRgNcnT4Bho_5qJd4wwr0rD2kQhyPj7ijeGVU51wZcDsiAB3XULJjzwtlr1kjoqOu9WD3Cz7l3E/s1600/pen.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email-message{ width: 230px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLP_qzLSrk9UnPNeRfFkU3QS8ZWJL2x_zbsMJKt-rpmuNTnJu_wb0BB7pqiOUBzNGjQjMw85eawxhg1nBvtiSYvLoJ-NvDNFI7Kr8X1tSQvVUWtzo5YDHuUg-J0NvITIx4sql2MttUJCg/s1600/msg.png)no-repeat 10px 10px; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-submit { width: 95px; height: 30px; float: right; color: #000; font-weight: bold; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#52e052; text-shadow: 1px 0 0 #999; border:1px solid #333; } #ContactForm1_contact-form-submit:hover { background:#00ff00; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 230px; margin-top:30px; } #contactbutton { height:40px; width:302px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDFG1gApO_VpasDbMam8gLNAgKBtBp8nEpDcycdutPf_lvBF114brx1_mtWgu9BunytPe8e0Vyf7GGVJ8OsgLgD8Py5S2IKy25f24uUAzvexlvmvrtUJfcGx9oKlyv2XhNsNSr1cA6_EA/h47/contact_button.png'); display:block; cursor:pointer; margin:auto; }
</style>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ $("#contactbutton").click(function(){ if ($("#contact-faceblog").is(":hidden")){ $("#contact-faceblog").slideDown("slow"); } else{ $("#contact-faceblog").slideUp("slow"); } }); }); function closeForm(){ setTimeout('$("#contact-faceblog").slideUp("slow")', 2000); }
</script>
<div id="form-evolutions">
<div id="contact-faceblog">
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<div id="contactbutton"></div>
</div>

- Untuk memasang widget contact form accordion pada sidebar blog, kodenya sebagai berikut:

<style>
#form-evolutions { position:relative; margin:auto; } #contact-faceblog { height:310px; width:280px; background:#e9fbe9; border:1px solid #52e052; padding:10px; display:none; margin:auto; } #ContactForm1_contact-form-name{ width: 230px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1wyt9j7mRk1f1GlYZB4wP7GGAOC9aUupVtJAQRm3yZbn9ShLbzSJBADs6o8CZTRn80jpbbNu_M5XWjHse4AOYu6f-WqusufscJ4jl89QrR0rm-ubgVdH6PIJMayzZzoHEOH7OsJiBx2M/s1600/user.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email{ width: 230px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDjN8yylXlZFRRR9oB57v8qee0x79ave-Moo28YBpoGzzbQrnAoctuXqFlK1ptafOyHRgNcnT4Bho_5qJd4wwr0rD2kQhyPj7ijeGVU51wZcDsiAB3XULJjzwtlr1kjoqOu9WD3Cz7l3E/s1600/pen.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email-message{ width: 230px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLP_qzLSrk9UnPNeRfFkU3QS8ZWJL2x_zbsMJKt-rpmuNTnJu_wb0BB7pqiOUBzNGjQjMw85eawxhg1nBvtiSYvLoJ-NvDNFI7Kr8X1tSQvVUWtzo5YDHuUg-J0NvITIx4sql2MttUJCg/s1600/msg.png)no-repeat 10px 10px; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-submit { width: 95px; height: 30px; float: right; color: #000; font-weight: bold; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#52e052; text-shadow: 1px 0 0 #999; border:1px solid #333; } #ContactForm1_contact-form-submit:hover { background:#00ff00; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 230px; margin-top:30px; } #contactbutton { height:40px; width:302px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDFG1gApO_VpasDbMam8gLNAgKBtBp8nEpDcycdutPf_lvBF114brx1_mtWgu9BunytPe8e0Vyf7GGVJ8OsgLgD8Py5S2IKy25f24uUAzvexlvmvrtUJfcGx9oKlyv2XhNsNSr1cA6_EA/h47/contact_button.png'); display:block; cursor:pointer; margin:auto; }
</style>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ $("#contactbutton").click(function(){ if ($("#contact-faceblog").is(":hidden")){ $("#contact-faceblog").slideDown("slow"); } else{ $("#contact-faceblog").slideUp("slow"); } }); }); function closeForm(){ setTimeout('$("#contact-faceblog").slideUp("slow")', 2000); }
</script>
<div id="form-evolutions">
<div id="contact-faceblog">
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<div id="contactbutton"></div>
</div>

 - Untuk memasang widget contact form accordion versi 2 pada sidebar blog, kodenya sebagai berikut:

<style>
#faceblog-contact { height: 300px; width: 302px; overflow: hidden; background-color: darkgreen; } #evolutionsbutton { height:40px; width:302px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDFG1gApO_VpasDbMam8gLNAgKBtBp8nEpDcycdutPf_lvBF114brx1_mtWgu9BunytPe8e0Vyf7GGVJ8OsgLgD8Py5S2IKy25f24uUAzvexlvmvrtUJfcGx9oKlyv2XhNsNSr1cA6_EA/h47/contact_button.png'); display:block; cursor:pointer; } .form-contact { width: 322px; height: 300px; padding: 10px; margin: auto; } #ContactForm1_contact-form-name{ width: 230px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1wyt9j7mRk1f1GlYZB4wP7GGAOC9aUupVtJAQRm3yZbn9ShLbzSJBADs6o8CZTRn80jpbbNu_M5XWjHse4AOYu6f-WqusufscJ4jl89QrR0rm-ubgVdH6PIJMayzZzoHEOH7OsJiBx2M/s1600/user.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email{ width: 230px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDjN8yylXlZFRRR9oB57v8qee0x79ave-Moo28YBpoGzzbQrnAoctuXqFlK1ptafOyHRgNcnT4Bho_5qJd4wwr0rD2kQhyPj7ijeGVU51wZcDsiAB3XULJjzwtlr1kjoqOu9WD3Cz7l3E/s1600/pen.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email-message{ width: 230px; height: 120px; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLP_qzLSrk9UnPNeRfFkU3QS8ZWJL2x_zbsMJKt-rpmuNTnJu_wb0BB7pqiOUBzNGjQjMw85eawxhg1nBvtiSYvLoJ-NvDNFI7Kr8X1tSQvVUWtzo5YDHuUg-J0NvITIx4sql2MttUJCg/s1600/msg.png)no-repeat 10px 10px; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-submit { width: 95px; height: 30px; float: left; color: #000; font-weight: bold; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#52e052; text-shadow: 1px 0 0 #999; border:1px solid #333; } #ContactForm1_contact-form-submit:hover { background:#00ff00; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 230px; margin-top:30px; }
</style>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/contactform.js" type="text/javascript"></script>

<div id="faceblog-contact">      
<form class="form-contact">           
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<div id="evolutionsbutton"></div>

6. Langkah terakhir klik Simpan.

Untuk tinggi, lebar maupun warna widget contact form silahkan custom dan sesuikan selera sendiri. Sekarang jika ingin memasang tinggal tergantung selera saja, mau menggunakan efek floating atau efek accordion pada sidebar blog. Atau bahkan mungkin lebih suka memasang widget contact form kedalam halaman statis blog.

“Pada dasarnya penampilan memang bukanlah sesuatu hal yang terbaik, namun seseorang bisa menilai dari segi penampilan menjadi sesuatu hal yang terbaik”. Bukankah sesuatu hal yang enak di pandang akan terlihat segar di mata? keep the spirit, continue to work and success always!!! appearance is reflective of one's personality.

Custom Widget Contact Form Pada Blog

Custom Widget Contact Form Pada Blog – semua pasti sudah tahu fitur widget terbaru dari blogger agar bisa berkontak langsung via email dengan pemilik atau author blog, inilah kemudahan yang diberikan oleh blogger agar penggunanya bisa lebih mudah untuk berkomunikasi didalam sebuah blog dengan menggunakan widget contact form. Walaupun widget contact form memang jarang di tampilkan pada sidebar atau jarang dilihat oleh pengunjung namun tidak salah apabila kita melengkapi blog dengan widget contact form dengan custom yang menarik untuk kemudian bisa dipasang kedalam halaman statis blog atau tempat yang dikehendaki. Memang benar apabila setelah menambahkan contact form dari widget yang disediakan oleh blogger sudah bisa langsung digunakan. Namun tidak ada salahnya juga apabila kita ingin melihat tampilan widget contact form agar bisa menjadi lebih menarik atau sesuai dengan tampilan yang di kehendaki sendiri. Langkah-langkah untuk memasang dan memodifikasi juga cukup mudah, berikut adalah tutorial cara Custom Widget Contact Form Pada Blog.

1. Login ke akun blogger.
2. Kemudian klik Tata Letak > Tambah widget > Gadget Lainnya > Formulir Kontak, lalu klik Simpan.
3. Selanjutnya adalah menyembunyikan widget contact form bawaan blogger tersebut, caranya klik Template > Edit HTML lalu cari kode ]]></b:skin> gunakan CTRL+F.
4. Copy kode berikut ini lalu paste tepat diatas kode ]]></b:skin> kemudian klik Simpan Template.

#ContactForm1 {display:none}

5. Lalu berikutnya kita akan memasang tampilan baru widget contact form, caranya Copy kode berikut ini lalu klik Laman > Laman Baru > Laman Kosong kemudian paste kode tersebut pada area HTML halaman statis.

<style>
#contact-wrapper{ width:400px; height:auto; padding: 10px; margin: auto; position:relative; font:12px Arial; }  #mycontactform{ width:400px; padding: 10px; margin: auto; position:relative; } .field{ background:gray; padding:10px; height:50px; width:400px; } .area{ padding:10px; min-height:195px; } #ContactForm1_contact-form-name{ width: 400px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1wyt9j7mRk1f1GlYZB4wP7GGAOC9aUupVtJAQRm3yZbn9ShLbzSJBADs6o8CZTRn80jpbbNu_M5XWjHse4AOYu6f-WqusufscJ4jl89QrR0rm-ubgVdH6PIJMayzZzoHEOH7OsJiBx2M/s1600/user.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email{ width: 400px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDjN8yylXlZFRRR9oB57v8qee0x79ave-Moo28YBpoGzzbQrnAoctuXqFlK1ptafOyHRgNcnT4Bho_5qJd4wwr0rD2kQhyPj7ijeGVU51wZcDsiAB3XULJjzwtlr1kjoqOu9WD3Cz7l3E/s1600/pen.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email-message{ width: 400px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLP_qzLSrk9UnPNeRfFkU3QS8ZWJL2x_zbsMJKt-rpmuNTnJu_wb0BB7pqiOUBzNGjQjMw85eawxhg1nBvtiSYvLoJ-NvDNFI7Kr8X1tSQvVUWtzo5YDHuUg-J0NvITIx4sql2MttUJCg/s1600/msg.png)no-repeat 10px 10px; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-submit { width: 95px; height: 30px; float: right; color: #000; font-weight: bold; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#52e052; text-shadow: 1px 0 0 #999; border:1px solid darkgreen; } #ContactForm1_contact-form-submit:hover { background:#00ff00; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 400px; margin-top:30px; }
</style>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/highlight.js"></script>

<div id="contact-wrapper">
<form id="mycontactform">
<div>
<div class="field">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />
</div>
<div class="field">
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
</div>
<div class="field area">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div></div></div></div></form></div>

6. Langkah terakhir klik Publish.

Sampai sini selesai sudah langkah-langkah untuk Custom Widget Contact Form Pada Blog, dan kini widget contact form sudah terpasang dalam halaman statis blog. Apabila ingin memasang widget contact form tersebut kedalam sidebar maka caranya setelah sampai pada point 5 copy kode tersebut kemudian paste kedalam widget HTML/Javascript. Untuk tinggi, lebar maupun warna background contact form silahkan custom agar lebih sesuai dengan yang di kehendaki.

Widget Contact Form Efek Animasi Pada Blog

Widget Contact Form Efek Animasi Pada Blog – untuk membuat halaman kontak pada blog dengan adanya fitur widget terbaru official blogger tentu kini sudah lebih mudah. Hanya dengan menambahkan pada add widget yang terdapat pada tata letak blog maka widget contact form sudah siap tampil dan bisa langsung digunakan sebagaimana fungsinya. Dengan adanya fitur widget contact form tersebut kita bisa merubah style tampilan dengan gaya kita sendiri agar bisa sesuai dengan warna maupun bentuk yang kita kehendaki. Walaupun kita akan membuat widget contact form tampil dengan efek animasi, namun kita tetap membutuhkan widget contact form bawaan dari blogger agar ditampilkan kedalam blog terlebih dahulu agar widget contact form dengan efek animasi ini bisa berfungsi sebagaimana mestinya dan agar bisa tetap digunakan untuk berkomunikasi. Kesimpulannya adalah setelah kita memasang widget contact form bawaan dari blogger, maka tahap selanjutnya yaitu memodifikasi widget contact form tersebut dengan tampilan yang kita kehendaki dan nantinya widget contact form yang lama atau layout awal dari tampilan widget yang masih standar atau sederhana kita sembunyikan menggunakan CSS. Agar lebih jelasnya, berikut adalah tutorial cara memasang Widget Contact Form Efek Animasi Pada Blog.

1. Login ke akun blogger.
2. Kemudian klik Tata Letak > Tambah widget > Gadget Lainnya > Formulir Kontak, lalu klik Simpan.

3. Selanjutnya adalah menyembunyikan widget contact form bawaan blogger tersebut, caranya klik Template > Edit HTML lalu cari kode ]]></b:skin> gunakan CTRL+F.
4. Copy kode berikut ini lalu paste tepat diatas kode ]]></b:skin> kemudian klik Simpan Template.

#ContactForm1 {display:none}

5. Lalu berikutnya kita akan membuat tampilan baru widget contact form dengan efek animasi, caranya Copy kode berikut ini lalu klik Laman > Laman Baru > Laman Kosong kemudian paste kode tersebut pada area HTML halaman statis.

<style>
#wrap-contact {width:530px; margin:20px auto 0; height:auto;} #form_wrap-contact { overflow:hidden; height:446px; position:relative; top:0px; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s;} #form_wrap-contact:before {content:""; position:absolute; bottom:128px;left:0px; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZVA0f7PNLye8YBgcRBPpU4bJk_EIlnNNR9YiHHI4lcf5GoR3iqdBFExm7vKv6Cc7hdU-CqlTaOISz7loI_hQJsahIyVtaRqE5fFswfuHvfmeANHDdsMKwZtWkjGmtnMm4gwwazt05HoY/s1600/before.png'); width:530px;height: 316px;} #form_wrap-contact:after {content:"";position:absolute; bottom:0px;left:0; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHEL2j_nJloHNWZ4bktWPIjZQ5xoybYudrb_YyR2TEIsifYoRpaVWS6J9_VloeUomEmBPcdxjJVS0utWFd7KQnnMxRhDmmjgY4KXXm4HfUI6tKK_kdJ08T8UTN_cQbrdsGRNiTQJjrdNM/s1600/after.png'); width:530px;height: 260px; } #form_wrap-contact.hide:after, #form_wrap-contact.hide:before {display:none; } #form_wrap-contact:hover {height:776px;top:-200px;} #contact-form {background:#e9fbe9; position:relative;top:200px;overflow:hidden; height:200px;width:450px;margin:0px auto;padding:20px; border: 1px solid #52e052; box-shadow: 0px 0px 5px #00ff00; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s;} #contact-form:hover {height:530px;} #ContactForm1_contact-form-name{ width: 399px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1wyt9j7mRk1f1GlYZB4wP7GGAOC9aUupVtJAQRm3yZbn9ShLbzSJBADs6o8CZTRn80jpbbNu_M5XWjHse4AOYu6f-WqusufscJ4jl89QrR0rm-ubgVdH6PIJMayzZzoHEOH7OsJiBx2M/s1600/user.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email{ width: 399px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDjN8yylXlZFRRR9oB57v8qee0x79ave-Moo28YBpoGzzbQrnAoctuXqFlK1ptafOyHRgNcnT4Bho_5qJd4wwr0rD2kQhyPj7ijeGVU51wZcDsiAB3XULJjzwtlr1kjoqOu9WD3Cz7l3E/s1600/pen.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email-message{ width: 399px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLP_qzLSrk9UnPNeRfFkU3QS8ZWJL2x_zbsMJKt-rpmuNTnJu_wb0BB7pqiOUBzNGjQjMw85eawxhg1nBvtiSYvLoJ-NvDNFI7Kr8X1tSQvVUWtzo5YDHuUg-J0NvITIx4sql2MttUJCg/s1600/msg.png)no-repeat 10px 10px; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-submit { width: 450px; height: 30px; color: #000; font-weight: bold; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#52e052; text-shadow: 1px 0 0 #999; border:1px solid darkgreen; } #ContactForm1_contact-form-submit:hover { background:#00ff00; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 400px; margin-top:30px; }
</style>

<div id="wrap-contact">
<div id='form_wrap-contact'>
<form id="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div></div></form></div></div>

6. Langkah terakhir klik Publish.

LIVE DEMO:

Sekarang widget contact form sudah terpasang kedalam halaman statis blog, dan selesai sudah tutorial cara memasang Widget Contact Form Efek Animasi Pada Blog.

Cara Membuat Floating Menu Navigation Pada Blog

Cara Membuat Floating Menu Navigation Pada Blog – dari 9 style mega menu sekarang kita beralih lagi dan masih pada tema yang sama mengenai menu navigasi blogger namun dengan gaya yang berbeda. Mengenai floating menu tentu sudah tidak asing lagi di kalangan blogger. Sebelum melangkah lebih jauh ke tutorial saya akan sedikit menjelaskan terlebih dahulu mengenai floating menu navigation pada blog. Floating menu navigation merupakan sebuah navigasi menu yang terpasang didalam blog dan menempati posisi di bagian atas/fixed atau bisa dikatakan letak posisi floating menu adalah menggantikan navbar blogger yang terdapat diatas header blog. Cara memasang floating menu juga cukup mudah dan tidak terlalu rumit, bukan tidak mungkin jika floating menu navigation ini juga akan mempercantik desain blog. Langkah-langkah cara penerapannya kedalam blog pun sangat sederhana, berikut adalah tutorial mengenai Cara Membuat Floating Menu Navigation Pada Blog.

Demo

1. Login ke akun blogger terlebih dahulu.
2. Kemudian masuk ke Template dan Edit HTML.
3. Copy kode berikut ini lalu paste tepat dibawah kode <body>

<style>
#floating-navigation {
background: darkgreen;
border-bottom: 1px solid #30917b;
height: 45px;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
box-shadow: 0 5px 8px -1px #00ff00;
}
.floating-menu-left {
background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM4pZJNoA-NEd6bp2tBMRuvCjkuZwPxFxMEMTS4R1HC3-PM1vZ5ir9gm7D4NNwDLDNEZWq2JPfm5SSUIqo8JrT5d9i465SWvdBjfgbIqBEo5ogcJWJprxXw4mPky2YbU2OsuIA7VZ-hlU/s1600/divider.png&quot;) no-repeat right top;
float: left;
margin: 0 0 0 0;
height: 46px;
}
.floating-menu-left li {
background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM4pZJNoA-NEd6bp2tBMRuvCjkuZwPxFxMEMTS4R1HC3-PM1vZ5ir9gm7D4NNwDLDNEZWq2JPfm5SSUIqo8JrT5d9i465SWvdBjfgbIqBEo5ogcJWJprxXw4mPky2YbU2OsuIA7VZ-hlU/s1600/divider.png&quot;) no-repeat left top;
float: left;
margin: 0 0 0 0;
padding: 0 0 0 2px;
}
.floating-menu-left li a {
font-family: &#39;Raleway&#39;, sans-serif;
font-weight: 600;
font-size: 13px;
line-height: 13px;
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
}
.floating-menu-left li.small-logo a {
background: #52e052;
display: block;
width: 56px;
height: 45px;
position: relative;
}
.floating-menu-left li.small-logo a:hover {
background: #ffffff;
height: 46px;
}
.floating-menu-left li.small-logo a span.home-icon {
background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvGwdx7FFIl4lZzKQRYSnRJdOwpn1evv0mplhgHlNF5ZRA540lid72MipR0eHtaaZD94gsnfrCGOYEM8ayOBTriyxW_CnJFiUGh15zk5EW7LD39lqKBdkJPxlR1yLOrP83kummTE-C4ho/s1600/home-icon.png&quot;) no-repeat;
background-position: 0 0;
width: 16px;
height: 15px;
display: block;
position: absolute;
top: 14px;
left: 21px;
}
.floating-menu-left li.small-logo a:hover span.home-icon {
background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvGwdx7FFIl4lZzKQRYSnRJdOwpn1evv0mplhgHlNF5ZRA540lid72MipR0eHtaaZD94gsnfrCGOYEM8ayOBTriyxW_CnJFiUGh15zk5EW7LD39lqKBdkJPxlR1yLOrP83kummTE-C4ho/s1600/home-icon.png&quot;) no-repeat;
background-position: -16px 0;
width: 16px;
height: 15px;
display: block;
}
.floating-menu-left li.categories a {
padding: 16px 20px;
display: inline-block;
height: 13px;
position: relative;
}
.floating-menu-left li.categories a:hover {
background: #ffffff;
color: #000;
}
.floating-menu-left li.categories a span.categories-icon {
background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI73btF9OhoDM0wqp78Zm-BycME-oTEDgQw7CmDojMrDIFB6xbrVgwlMYf5HkhqmZ7T2fLj6ifqb5D2JV7279DgqP_DrwQNEJMRhTBabUAQzRvnuKtRkCuRUoAcnth-PMTj1BPbwHrPtM/s1600/categories-icon.png&quot;) no-repeat;
float: left;
width: 13px;
height: 12px;
display: block;
margin: 0 8px 0 0;
}
.floating-menu-left li.categories a:hover span.categories-icon {
background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI73btF9OhoDM0wqp78Zm-BycME-oTEDgQw7CmDojMrDIFB6xbrVgwlMYf5HkhqmZ7T2fLj6ifqb5D2JV7279DgqP_DrwQNEJMRhTBabUAQzRvnuKtRkCuRUoAcnth-PMTj1BPbwHrPtM/s1600/categories-icon.png&quot;) no-repeat;
background-position: -13px 0;
}
.floating-menu-left li.hot-tags a {
padding: 16px 20px;
display: inline-block;
height: 13px;
position: relative;
}
.floating-menu-left li.hot-tags a:hover {
background: #ffffff;
color: #000;
}
.floating-menu-left li.hot-tags a span.tags-icon {
background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdCsuK3QTN6jzdyQ05ZWb3VQ85k7ZIgyJub4JadTgGpW7HaprWdAFIci4eyTTiuWZCyPCLdXbTPLX0U7syqg5GlsAajiXel9EIKExvpOInQCJ7Va-M5l4-QMKs98eQRGSpWwvIzSoMxaY/s1600/tags-icon.png&quot;) no-repeat;
float: left;
width: 13px;
height: 13px;
display: block;
margin: 0 8px 0 0;
}
.floating-menu-left li.hot-tags a:hover span.tags-icon {
background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdCsuK3QTN6jzdyQ05ZWb3VQ85k7ZIgyJub4JadTgGpW7HaprWdAFIci4eyTTiuWZCyPCLdXbTPLX0U7syqg5GlsAajiXel9EIKExvpOInQCJ7Va-M5l4-QMKs98eQRGSpWwvIzSoMxaY/s1600/tags-icon.png&quot;) no-repeat;
background-position: -13px 0;
}
.floating-menu-right {
background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM4pZJNoA-NEd6bp2tBMRuvCjkuZwPxFxMEMTS4R1HC3-PM1vZ5ir9gm7D4NNwDLDNEZWq2JPfm5SSUIqo8JrT5d9i465SWvdBjfgbIqBEo5ogcJWJprxXw4mPky2YbU2OsuIA7VZ-hlU/s1600/divider.png&quot;) no-repeat right top;
float: right;
margin: 0 0 0 0;
}
.floating-menu-right li {
background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM4pZJNoA-NEd6bp2tBMRuvCjkuZwPxFxMEMTS4R1HC3-PM1vZ5ir9gm7D4NNwDLDNEZWq2JPfm5SSUIqo8JrT5d9i465SWvdBjfgbIqBEo5ogcJWJprxXw4mPky2YbU2OsuIA7VZ-hlU/s1600/divider.png&quot;) no-repeat left top;
float: left;
margin: 0 0 0 0;
padding: 0 0 0 2px;
}
.floating-menu-right li a {
font-family: &#39;Raleway&#39;, sans-serif;
font-weight: 600;
font-size: 13px;
line-height: 13px;
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
}
.floating-menu-right li.search a {
padding: 16px 20px;
display: inline-block;
height: 13px;
position: relative;
}
.floating-menu-right li.search a:hover {
background: #ffffff;
color: #000;
}
.floating-menu-right li.search a span.search-icon {
background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg56zcF17T0Cz9RH0Wyqe2WttJbssGXhvPB5J1CugeVbJNjshBk7bpigaws1tSAjXfjWodlUAxyIFf9cVG7I4xl5rkMPC_kTcU4WMzfu-FaNuSYo7khsxHLm6flKYotrhi3xhQuizv05Rc/s1600/search-icon.png&quot;) no-repeat;
float: left;
width: 14px;
height: 15px;
display: block;
margin: -1px 8px 0 0;
}
.floating-menu-right li.search a:hover span.search-icon {
background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg56zcF17T0Cz9RH0Wyqe2WttJbssGXhvPB5J1CugeVbJNjshBk7bpigaws1tSAjXfjWodlUAxyIFf9cVG7I4xl5rkMPC_kTcU4WMzfu-FaNuSYo7khsxHLm6flKYotrhi3xhQuizv05Rc/s1600/search-icon.png&quot;) no-repeat;
background-position: -14px 0;
}
.floating-menu-right li.twitter a {
padding: 16px 20px;
display: inline-block;
height: 13px;
position: relative;
}
.floating-menu-right li.twitter a:hover {
background: #ffffff;
color: #000;
}
.floating-menu-right li.twitter a span.twitter-icon {
background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicewVNUAcZJSymKalrW-0CPHmRYcu6pq6AKK3kHUNar_uIxhsaUVNTOfdywGf7-fbAXpbREUUuF5AXden_VkbVMVr0RwJmXHtokm8aJvY2iVTMgXzPUT32Wk-aJ94H0knY3zzANxoY1pc/s1600/twitter-icon.png&quot;) no-repeat;
float: left;
width: 16px;
height: 13px;
display: block;
margin: 0 8px 0 0;
}
.floating-menu-right li.twitter a:hover span.twitter-icon {
background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicewVNUAcZJSymKalrW-0CPHmRYcu6pq6AKK3kHUNar_uIxhsaUVNTOfdywGf7-fbAXpbREUUuF5AXden_VkbVMVr0RwJmXHtokm8aJvY2iVTMgXzPUT32Wk-aJ94H0knY3zzANxoY1pc/s1600/twitter-icon.png&quot;) no-repeat;
background-position: -16px 0;
}
.floating-menu-right li.share a {
padding: 16px 20px;
display: inline-block;
height: 13px;
}
.floating-menu-right li.share a:hover {
background: #ffffff;
color: #000;
}
#floating-navigation .floating-menu-left li a {
cursor: pointer;
}
#floating-navigation .floating-menu-left li .dropdown-menu {
background: #ffffff;
padding: 20px;
display: none;
position: absolute;
top: 45px;
height: 0;
margin: 0 0 0 0;
list-style: none;
-webkit-box-shadow: 0px 1px 10px darkgreen;
-moz-box-shadow: 0px 1px 10px darkgreen;
box-shadow: 0px 1px 10px darkgreen;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-webkit-animation: showmenu 0.2s;
-moz-animation: showmenu 0.2s;
-ms-animation: showmenu 0.2s;
-o-animation: showmenu 0.2s;
}
#floating-navigation .floating-menu-left li:hover .dropdown-menu {
display: block;
height: auto;
}
#floating-navigation .floating-menu-left li .dropdown-menu.categories {
width: 226px;
}
#floating-navigation .floating-menu-left li .dropdown-menu.categories ul {
margin: 0 0 0 0;
list-style: none;
}
#floating-navigation .floating-menu-left li .dropdown-menu.categories li {
background: none;
width: 100%;
display: block;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#floating-navigation .floating-menu-left li .dropdown-menu.categories li a {
font-family: &#39;Raleway&#39;,sans-serif;
font-size: 22px;
font-weight: 500;
color: #666666;
display: block;
height: auto;
line-height: 28px;
padding: 5px 0;
text-align: left;
text-decoration: none;
text-transform: none;
}
#floating-navigation .floating-menu-left li .dropdown-menu.categories li a:hover {
color: #000;
background: darkgreen;
}
#floating-navigation .floating-menu-left li .dropdown-menu.hot-tags {
padding: 20px 15px 15px 20px;
width: 226px;
}
#floating-navigation .floating-menu-left li .dropdown-menu.hot-tags ul {
margin: 0 0 0 0;
list-style: none;
}
#floating-navigation .floating-menu-left li .dropdown-menu.hot-tags ul li {
background: none;
float: left;
margin: 0 5px 5px 0;
padding: 0 0 0 0;
}
#floating-navigation .floating-menu-left li .dropdown-menu.hot-tags ul li a {
background: #000;
color: #ffffff;
padding: 3px 6px;
font-size: 13px;
line-height: 21px;
height: auto;
text-transform: none;
}
#floating-navigation .floating-menu-left li .dropdown-menu.hot-tags ul li a:hover {
background: #222222;
}
#floating-navigation .floating-menu-right li a {
cursor: pointer;
}
#floating-navigation .floating-menu-right li .dropdown-menu {
background: #ffffff;
padding: 20px;
display: none;
position: absolute;
top: 45px;
height: 0;
margin: 0 0 0 0;
list-style: none;
-webkit-box-shadow: 0px 1px 10px darkgreen;
-moz-box-shadow: 0px 1px 10px darkgreen;
box-shadow: 0px 1px 10px darkgreen;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-webkit-animation: showmenu 0.2s;
-moz-animation: showmenu 0.2s;
-ms-animation: showmenu 0.2s;
-o-animation: showmenu 0.2s;
}
#floating-navigation .floating-menu-right li:hover .dropdown-menu {
display: block;
height: auto;
}
.dropdown-menu.search {
width: 323px;
}
.dropdown-menu.search #searchform {
display: block;
overflow: hidden;
border: 1px solid #dfdfdf;
}
.dropdown-menu.search #searchform input[type=&quot;text&quot;] {
background: none;
border: none;
width: 270px;
}
.dropdown-menu.search #searchform input[type=&quot;submit&quot;] {
background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicvWUsk1h_P24JXevb42dejrjKsjKvv2Y2AGDEHSW5CBvCu8-RbB33qpy30RyhkPJPB8Tevk35PrVPy_K9sfcZor7UzZnwy89V8BrCdkbrMnB6X3CQ3pRwFbmYBQRXv2QWAKNhjodj4Lg/s1600/search-icon-form.png&quot;) no-repeat center center;
cursor: pointer;
width: 14px;
height: 15px;
margin: 8px 5px 0 0;
display: block;
float: left;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.dropdown-menu.search #searchform input[type=&quot;submit&quot;]:hover {
filter:alpha(opacity=80);
-webkit-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
}
#floating-navigation .floating-menu-right li .dropdown-menu.social-icons {
width: 350px;
margin-left: -251px;
}
.ie #floating-navigation .floating-menu-right li .dropdown-menu.social-icons {
width: 350px;
margin-left: -250px;
}
.chrome #floating-navigation .floating-menu-right li .dropdown-menu.social-icons,
.opera #floating-navigation .floating-menu-right li .dropdown-menu.social-icons,
.safari #floating-navigation .floating-menu-right li .dropdown-menu.social-icons {
width: 350px;
margin-left: -248px;
}
.dropdown-menu.social-icons h4 {
font-family: &#39;Raleway&#39;, sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 22px;
color: #666666;   
text-transform: uppercase;
margin: 0 0 10px 0;
}
.dropdown-menu.social-icons .social-icons-section {
width: 100%;
border-bottom: 1px dotted #dfdfdf;
margin: 0 0 20px 0;   
padding: 0 0 20px 0;
diplay: block;
overflow: hidden;
}
.dropdown-menu.social-icons .social-icons-section ul {
display: block;
margin: 0 0 0 0;
list-style: none;
overflow: hidden;   
z-index: 99999;
}
.dropdown-menu.social-icons .social-icons-section ul li {
background: none;
float: left;
margin: 0 20px 0 0;
padding: 0 0 0 0;
}
.dropdown-menu.social-icons .social-icons-section ul li:last-child {
margin: 0 0 0 0;
}
.dropdown-menu.social-icons .social-icons-section ul li a {
display: block;
width: 40px;
height: 40px;
padding: 0 0 0 0;
}
.dropdown-menu.social-icons .facebook-box-section {
width: 100%;
display: block;
overflow: hidden;
z-index: 99999;
}
#floating-navigation .floating-menu-right li .dropdown-menu.share-buttons {
width: 95px;
margin-left: -29px;
}
#floating-navigation .floating-menu-right li .dropdown-menu.share-buttons ul {
display: block;
margin: 0 0 0 0;
list-style: none;
overflow: hidden;
width: 100%;
height: auto;
}
#floating-navigation .floating-menu-right li .dropdown-menu.share-buttons ul li {
background: none;
padding: 0 0 0 0;
width: 100%;
z-index: 99999;
display: block;
zoom: 1;
float: left;
overflow: hidden;
height: 20px;
position: relative;
}
#floating-navigation .floating-menu-right li .dropdown-menu.share-buttons ul li iframe {
position: absolute;   
z-index: 99999;
display: block ! important;
cursor: default;
}
#floating-navigation .floating-menu-right li .dropdown-menu.share-buttons ul li a {
padding: 0 0 0 0;
height: auto;
}
#floating-navigation .floating-menu-right li .dropdown-menu.share-buttons ul li a:hover {
opacity: 0.8;
-webkit-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
}
</style>
<nav id='floating-navigation'>
<div class='wrapper'>
<ul class='floating-menu-left'>
<li class='small-logo'>
<a href='http://mas-andes.blogspot.com'><span class='home-icon'/></a></li>
<li class='categories'>
<a><span class='categories-icon'/>Categories</a>
<div class='dropdown-menu categories'>
<div class='categories-menu-section'>
<ul class='categories-menu'>
<li><a href='http://mas-andes.blogspot.com' title='Technology'>Technology</a></li>
<li><a href='http://mas-andes.blogspot.com' title='computer'>Computer</a></li>
<li><a href='http://mas-andes.blogspot.com' title='Graphics'>Graphics</a></li>
<li><a href='http://mas-andes.blogspot.com' title='Mobile'>Mobile</a></li>
<li><a href='http://mas-andes.blogspot.com' title='Social Surfing'>Social Surfing</a></li>
<li><a href='http://mas-andes.blogspot.com' title='Blogging'>Blogging</a></li>
</ul>
</div>
</div>
</li>
<li class='categories'>
<a href='http://mas-andes.blogspot.com'><span class='categories-icon'/>About Me</a>
</li>       
<li class='hot-tags'>
<a href='http://mas-andes.blogspot.com'><span class='tags-icon'/>Disclaimer</a>
</li>
<li class='hot-tags'>
<a href='http://mas-andes.blogspot.com'><span class='tags-icon'/>Sitemap</a>
</li>
</ul>
<ul class='floating-menu-right'>
<li class='search'>
<a><span class='search-icon'/>Search</a>
<div class='dropdown-menu search'>
<form action='http://mas-andes.blogspot.com' id='searchform' method='get' role='search'>
<input id='s' name='s' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Type keyword and hit enter...'/>
<input id='searchsubmit' type='submit' value=''/>
</form>
</div>
</li>
<li class='twitter'>
<a><span class='twitter-icon'/>Follow Me</a>
<div class='dropdown-menu social-icons'>
<div class='social-icons-section'>
<h4>Follow On:</h4>
<ul>
<li><a href='http://feeds.feedburner.com/masandes'><img alt='rss' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzGrFP7uEGD6ynTouK4dzaBMYX_XrKY3LtmCle2yb3KMgDoAdBZ8TL_Mw9t4VeCZu2GCQvFRcwJIlEeSQoFGN6q4IBxM6tWWkJ7n6O6QmpNY8S-_G3t0sXFI3pknLiclxQ2nFu4byCj4M/s1600/rss_icon@2x.png' width='40'/></a></li>
<li><a href='http://feeds.feedburner.com/masandes'><img alt='rss' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmSE0eFWc4IbRtsPRqolt_OOL23zpmKj-XTWaetUZqPU1fLRBV9sTGpy4wnmyHnZe813dSp1tQ42DEckpE6XOletqa8fiuARQaNuHlt8Amx0ek4B5iqGohcwAzyNsmcqaH9gOqAcSCL3o/s1600/email_icon@2x.png' width='40'/></a></li>
<li><a href='http://twitter.com/rizkyandes'><img alt='rss' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFVyMO4pyDD5waqVIAYOjHpJSjLLUZewNCERLsrmkBspPiLMPoBx_3ObpzIegbykrelhGL0ZwmfyUYY1_S64g-EvtddopW6MCCq4CZpJNqJspQJXtEID7Zhw4gxnKh1M6BJ1hyphenhyphenLWdITNc/s1600/twitter_icon@2x.png' width='40'/></a></li>
<li><a href='https://www.facebook.com/andestyle'><img alt='rss' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP8WGyWBZ8beNh_Iz-iBsgH27isXZgEboPeBg_SToFVGoEiY0_9heWWJSIqvCsHCwbeKASZaeoSzz_KY9S_tdQXhbJ12q6sVfR3bKUFCX_bAaR932jh9Jz4xdNOyM3IbRnGx1xenYR2co/s1600/facebook_icon@2x.png' width='40'/></a></li>
<li><a href='https://plus.google.com/104093787575230359634'><img alt='rss' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDHygcNDqxiBT93lRY4W-i64YM-abVYIEKms6atEKJDB9g1P-pu53kCLvtAMczZNMAhn2hMx6W-_iERIjBpzOE_qJcRMTymqAz-LCsKe8TLI6wc69VK7uQ4mZqF-I7RA9RWtRzd_cWHCQ/s1600/google_icon@2x.png' width='40'/></a></li>
<li><a href='https://www.pinterest.com/andesrizky'><img alt='rss' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrO-hutSqvCztustkn_w3r9O9K5ZoHqYRahE4PBljWhNfZq2KubSpIVSDM1p3s-tLa6Hjpj6DP1sA_a3fmgmOeT43Ap6X43qEFD5TNNWNlzGkcSppIT-Sik3OcOgGoKtlSx0Akp9hRv3o/s1600/pinterest_icon@2x.png' width='40'/></a></li>
</ul>
</div>
<div class='facebook-box-section'>
<h4>Get Update Via Facebook</h4>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/andestyle&amp;width=350&amp;height=245&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color=%23ffffff&amp;header=false&amp;appId=289293011171736' style='border:none; overflow:hidden; width:350px; height:245px;'/>
</div>
</div>
</li>
</ul>
</div>
</nav>

Keterangan:
Ganti 'http://mas-andes.blogspot.com' dengan link pada blog anda, dan anchor text bisa di sesuaikan.
Ganti tulisan yang berwarna merah dengan ID masing-masing.

4. Langkah terakhir Simpan Template dan bisa lihat hasilnya.

Sampai sini selesai sudah untuk Cara Membuat Floating Menu Navigation Pada Blog. Jika warna background maupun font kurang sesuai dengan warna template blog yang digunakan, silahkan bisa di rubah dengan memodifikasi warna sendiri yang kiranya sesuai dan bisa serasi dengan warna template yang digunakan.

Pop Up Facebook Like Box With Lightbox Effect

Pop Up Facebook Like Box With Lightbox Effect - Untuk melengkapi postingan sebelumnya yang sudah ada mengenai facebook like box untuk merubah tampilan fanspage facebook yang terdapat didalam blog yang diterangkan pada artikel yang berjudul cara modifikasi facebook like box pada blog, maka kini seperti tema yang sama pula namun dengan penempatan widget yang berbeda karena pada fanspage facebook like box ini menggunakan style pop up yang khalayak seperti pada umumnya pop up facebook like box dan dengan efek lightbox atau warna gelap disekeliling widget. Cara memasang pop up facebook like box inipun masih sama seperti pada tutorial sebelumnya, yakni hanya dengan menambahkan kode yang ada didalam blockquote kedalam widget HTML/Javascript yang terdapat pada elemen tata letak blog. Untuk lebih jelasnya berikut tutorial cara memasang Pop Up Facebook Like Box With Lightbox Effect kedalam blog.

1. Login seperti biasa ke akun blogger.
2. Copy kode berikut ini kemudian paste kedalam widget HTML/Javascript.

<style type="text/css">
* html #popupfacebook{position:absolute}
#popupfacebook{display:block;top:0;left:0;width:100%;height:100%;position:fixed;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivvxDBMUiJULu8IsB9vp3eI3mg_ne5ZS3B8D_oEb8vympxCttxzycOVDeNMR9jo3V3F5AKixEg3mEQExx3UkqbFSPZi5qmPW_2owsDvj04RYzr3OznW2cYyTk6qcjWbaCu0vhBWv22pg/s128/popupideasopacity0.5.png);overflow-y:auto;z-index:999999;margin:0}
#facebookpopup{background-color:#000;overflow:none;z-index:999999}
.facebookpopup{width:290px;height:300px;position:fixed;top:45%;left:50%;margin-top:-200px;margin-left:-200px;border:10px solid #52e052;z-index:999999;padding:20px}
#popup-title{background:#52e052;color:#000;font-size:20px!important;font-weight:700;width:324px;line-height:25px;text-align:center;font-family:Arial!important;float:left;margin:0 -27px 10px;padding:10px}
.likefaceblogevolutions{width:280px;height:200px;border-radius:3px;position:relative;background:#E9FBE9;margin-top:60px;padding:0 10px 15px 0}
.likefaceblogevolutions,.likefaceblogevolutions:before,.likefaceblogevolutions:after{background:#E9FBE9;border:1px solid #52E052}
.likefaceblogevolutions:before,.likefaceblogevolutions:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}
.likefaceblogevolutions:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #52E052}
</style>

<div id="popupfacebook">
<div id="facebookpopup" class="facebookpopup">
<h3 id="popup-title">Get Update Article Via Facebook</h3>
<div class="likefaceblogevolutions">
<div style="height:200px;overflow:hidden">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fandestyle&amp;width=292&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowTransparency="true"></iframe>
</div>
</div>
<br />
<center style=" float:left; font-size:14px;cursor:pointer;" ><a style="background: #52E052; padding:5px 5px 10px 5px; font-size:12px; color:#000; text-decoration:none;" onmouseup="document.getElementById('popupfacebook').style.display='none'">[X] CLOSE</a></center>
<center style="float:right;"><a target='_blank' style="font-size:xx-small; color:#52E052; text-decoration:none;" href="http://mas-andes.blogspot.com/2013/08/pop-up-facebook-like-box-with-lightbox.html">Get this widget</a></center>
</div>
</div>

Keterangan:
Ganti andestyle dengan ID facebook atau fanspage anda.

3. Langkah terakhir klik Simpan.

Selesai sudah untuk menerapkan Pop Up Facebook Like Box With Lightbox Effect kedalam blog dan apabila nanti pengunjung datang kedalam blog anda maka widget pop up facebook like box ini siap menyapa setiap pengunjung yang datang dan bisa klik tombol close untuk keluar maupun klik Like apabila suka untuk mengikuti update terbaru dari fanspage tersebut.

9 Style Mega Menu Drop Down Blogger

9 Style Mega Menu Drop Down Blogger – jika di artikel sebelumnya mengenai Mega Menu Drop Down pada tutorial tersebut hanya menggunakan CSS dan mungkin masih banyak kekurangan pada tutorial tersebut, maka pada pembahasan kali ini Mega Menu Drop Down akan terdapat 9 style full color dan dengan sedikit tambahan script jQuery sehingga akan memberikan efek pada menu agar bisa tampil dengan hasil maksimal untuk melengkapi desain blog. Dibawah saya sertakan pula demo dari masing-masing Mega Menu Drop Down untuk melihat lebih jelasnya dan agar bisa memilih langsung yang sesuai apabila ingin memasang ke blog anda. Pada Mega Menu Drop Down memang akan terdapat banyak link didalamnya dan bisa dengan leluasa untuk menambahkan link-link pada menu ini. untuk langkah penerapannya ke blog, berikut adalah 9 Style Mega Menu Drop Down Blogger yang dapat di pilih untuk di pasang ke blog dan cara memasangnya.

1. Login ke akun blogger.
2. Kemudian klik Template pilih Edit HTML.
3. Copy kode CSS berikut ini, lalu pasang diatas kode ]]></b:skin> (saya anggap ini untuk pengguna template lama / yang belum valid CSS3, dan untuk yang sudah valid CSS3 saya yakin pasti sudah tahu letak menaruh kodenya).

• Home
• Menu 1
  • Judul 1
    • Link 1
    • Link 2
    • Link 3
  • Judul 2
    • Link 4
    • Link 5
    • Link 6
    • Link 7
    • Link 8
    • Link 9
  • Judul 3
    • Link 10
    • Link 11
    • Link 12
    • Link 13
  • Judul 4
    • Link 14
    • Link 15
  • Judul 5
    • Link 16
    • Link 17
    • Link 18
    • Link 19
• Menu 2
  • Judul 1
    • Link 1
    • Link 2
    • Link 3
  • Judul 2
    • Link 4
    • Link 5
    • Link 6
    • Link 7
  • Judul 3
    • Link 9
  • Judul 4
    • Link 10
    • Link 11
    • Link 12
    • Link 13
• Menu 3
  • Link 1
  • Link 2
• Menu 4
  • Judul 1
    • Link 1
    • Link 2
  • Judul 2
    • Link 3
  • Judul 3
    • Link 4
    • Link 5
    • Link 6

.mega-menu ul, .mega-menu ul li {list-style: none;} .mega-menu ul {position: relative; padding: 0; margin: 0;} .mega-menu ul li ul {display: none;} .mega-menu .sub {display: none;} .mega-menu .sub ul {display: block;}  #mega-menu-1 { font: normal 13px Arial, sans-serif; list-style: none; position: relative; padding: 0; margin: 0; } #mega-menu-1 .sub ul { display: block; } #mega-menu-1 { background: #222; width: 100%; height: 40px; position: relative; } #mega-menu-1 li { float: left; margin: 0; padding: 0; font-weight: bold; } #mega-menu-1 li a { float: left; display: block; color: #fff; padding: 12px 25px; background: #222; text-decoration: none; } #mega-menu-1 li.mega-hover a, #mega-menu-1 li a:hover { background: #CCC; color: #000; } #mega-menu-1 li .sub-container { position: absolute; } #mega-menu-1 li .sub { background: #efefef; padding: 15px; border: 1px solid #ccc; } #mega-menu-1 li .sub .row { width: 100%; overflow: hidden; clear: both; } #mega-menu-1 li .sub li { list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal; } #mega-menu-1 li .sub li.mega-hdr { margin: 0 10px 10px 0; float: left; } #mega-menu-1 li .sub li.mega-hdr.last { margin-right: 0; } #mega-menu-1 li .sub a { background: none; color: #111; padding: 7px 10px; display: block; float: none; font-size: 0.9em; } #mega-menu-1 li .sub li.mega-hdr a.mega-hdr-a { padding: 5px 15px; margin-bottom: 5px; background: #6B6B6B; text-transform: uppercase; font-weight: bold; color: #fff; } #mega-menu-1 li .sub li.mega-hdr a.mega-hdr-a:hover { color: #000; } #mega-menu-1 .sub li.mega-hdr li a { padding: 4px 5px; font-weight: normal; } #mega-menu-1 .sub li.mega-hdr li a:hover { color: #a32403; background: #efefef; } #mega-menu-1 .sub ul li { padding-right: 0; } #mega-menu-1 li .sub-container.non-mega .sub { padding: 10px; } #mega-menu-1 li .sub-container.non-mega li { padding: 0; width: 190px; margin: 0; } #mega-menu-1 li .sub-container.non-mega li a { padding: 7px 5px 7px 22px; } #mega-menu-1 li .sub-container.non-mega li a:hover { color: #a32403; background: #efefef; }

4. Selanjutnya pasang script jQuery berikut ini diatas kode </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/hovermegamenu.js'></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/dcmegamenu.js'></script>
<script type="text/javascript">
$(document).ready(function($){
    $('#mega-menu-1').dcMegaMenu({
        rowItems: '3',
        speed: 'fast',
        effect: 'fade'
    });
});
</script>

5. Langkah terakhir pasang markup HTML berikut ini didalam tag <body> atau bisa juga langsung kedalam widget seperti biasa, klik Tata Letak >> Tambah Widget >> HTML/Javascript paste kode disitu lalu Simpan.

<ul id="mega-menu-1" class="mega-menu">
    <li><a href="http://mas-andes.blogspot.com">Home</a></li>
    <li><a href="http://mas-andes.blogspot.com">Menu 1</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 8</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 4</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 14</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 15</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 5</a>
              <ul>
                <li><a href="http://mas-andes.blogspot.com">Link 16</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 17</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 18</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 19</a></li>
              </ul>
            </li>
        </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Menu 2</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>

    </ul>
</li>
    <li class="menu-item-129"><a href="http://mas-andes.blogspot.com">Judul 4</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
    </ul>
</li>
</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 3</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>

</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 4</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Judul  1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
    </ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Judul  2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul  3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
    </ul>
</li>
</ul>
</li>
</ul>

Keterangan:
Ganti “http://mas-andes.blogspot.com” dengan URL yang di inginkan.

Dibawah ini masih terdapat 8 Style Mega Menu Drop Down, untuk langkah penerapannya sama seperti cara diatas.

1. Black Style

• Home
• Menu 1
  • Judul 1
    • Link 1
    • Link 2
    • Link 3
  • Judul 2
    • Link 4
    • Link 5
    • Link 6
    • Link 7
    • Link 8
    • Link 9
  • Judul 3
    • Link 10
    • Link 11
    • Link 12
    • Link 13
  • Judul 4
    • Link 14
    • Link 15
  • Judul 5
    • Link 16
    • Link 17
    • Link 18
    • Link 19
• Menu 2
  • Judul 1
    • Link 1
    • Link 2
    • Link 3
  • Judul 2
    • Link 4
    • Link 5
    • Link 6
    • Link 7
  • Judul 3
    • Link 9
  • Judul 4
    • Link 10
    • Link 11
    • Link 12
    • Link 13
• Menu 3
  • Link 1
  • Link 2
• Menu 4
  • Judul 1
    • Link 1
    • Link 2
  • Judul 2
    • Link 3
  • Judul 3
    • Link 4
    • Link 5
    • Link 6

CSS:

.mega-menu ul, .mega-menu ul li {list-style: none;} .mega-menu ul {position: relative; padding: 0; margin: 0;} .mega-menu ul li ul {display: none;} .mega-menu .sub {display: none;} .mega-menu .sub ul {display: block;} .black {font: normal 13px Arial, sans-serif; line-height: 16px;} .black ul.mega-menu, .black ul.mega-menu, .black ul.mega-menu li {margin: 0; padding: 0; border: none;} .black ul.mega-menu {background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJajo9P-BMJZtBhfnkn-B27AVLCdqUKZ5xn16EjJND1PNLGHT-kMNUcFMOeQKNLSZRRyS-LRbK9ucnxlpmT7bwOJaJb-jfKlIQbh8zI4SwGpi9ucOfcT0yolauFqorjiYsiee1vETtmg0/h120/bg_black.png) repeat-x 0 -80px; width: 100%; height: 40px; border-right: 1px solid #1B1B1B; border-left: 1px solid #1B1B1B; position: relative;} .black ul.mega-menu li {float: left; margin: 0; padding: 0; font-size: 13px; font-weight: bold;} .black ul.mega-menu li a {float: left; display: block; color: #fff; padding: 12px 38px 12px 25px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJajo9P-BMJZtBhfnkn-B27AVLCdqUKZ5xn16EjJND1PNLGHT-kMNUcFMOeQKNLSZRRyS-LRbK9ucnxlpmT7bwOJaJb-jfKlIQbh8zI4SwGpi9ucOfcT0yolauFqorjiYsiee1vETtmg0/h120/bg_black.png) repeat-x 100% 0; text-shadow: 1px 1px 1px #000; text-decoration: none;} .black ul.mega-menu li a.dc-mega {position: relative;} .black ul.mega-menu li a .dc-mega-icon {display: block; position: absolute; top: 18px; right: 15px; width: 8px; height: 6px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3J6Z-cuHJbatOd8oFNII1IGYaeT4xH2Yj4_rCOq5e8HYdel53GNUS0-YE250oMHn3-P-YSX4LjosXBE3Z0070nnNtTlGuc0vkQsjQBZPUldLbDkPXRLoTXnoSUgEJdPzFhZSCqO4V7GU/h120/arrow.png) no-repeat 0 0;} .black ul.mega-menu li.mega-hover a, .black ul.mega-menu li a:hover {background-position: 100% -40px; color: #000; text-shadow: none;} .black ul.mega-menu li.mega-hover a .dc-mega-icon {background-position: 0 100%;} .black ul.mega-menu li .sub-container {position: absolute; background: #fff; padding-left: 20px; margin-left: -3px; box-shadow: 1px 1px 5px #333; border-radius: 0 0 5px 5px;} .black ul.mega-menu li .sub {padding: 20px 20px 20px 10px;} .black ul.mega-menu li .sub-container.mega .sub {padding: 20px 20px 10px 0;} .black ul.mega-menu li .sub .row {width: 100%; overflow: hidden; clear: both;} .black ul.mega-menu li .sub li {list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal;} .black ul.mega-menu li .sub li.mega-hdr {margin: 0 10px 10px 0; float: left;} .black ul.mega-menu li .sub li.mega-hdr.last {margin-right: 0;} .black ul.mega-menu li .sub a {background: none; border: none; text-shadow: none; color: #111; padding: 7px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em;} .black ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a {padding: 5px 5px 5px 15px; margin-bottom: 5px; background: #6B6B6B url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinfSKuHWWC2FRHC8SCHX6wrGlRPHJf0BDat_6fzbM2q43HuxUsG__CYdP7twPIBUJ67oR2tlRLLrN8TPHF8ShEb59hqOtsbhPd-Vkp1u2FBcIkw610G5H-WytNQWri4W_6rzrtS7MmVpM/h27/bg_mega_hdr.png) no-repeat 0 0; text-transform: uppercase; font-weight: bold; color: #fff; text-shadow: 1px 1px 1px #333;} .black ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {color: #000; text-shadow: none;} .black ul.mega-menu .sub li.mega-hdr li a {padding: 4px 5px 4px 20px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvAa6sLPxCpXJYCJU_jTVSCvKqtpf0e_vq8J17ZTAd5M-fzaOeICtongcJKiK9QYhW19QcgLOlUhEBDmktkphmZ9T-DmXkh5lLFhQDO6CCkjMhLesl2Zh6tSyoC8Aq7g4zEMyGoxrJeIA/h120/arrow_off.png) no-repeat 5px 8px; font-weight: normal;} .black ul.mega-menu .sub li.mega-hdr li a:hover {color: #a32403; background: #efefef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgao-tZ8MzgawJWclCgX-lF0CnKzsjr0oVkOwVdatsgUtZhZUfoN7FeYIiV5Ng4X0r_cvUOX_9r3t_gHyfqDq9gpK9QQ-0k28K9zAUJpm-WUw98nWjTLO-4syoptEVpsN2SUgiK7IzavT0/h120/arrow_on.png) no-repeat 5px 8px;} .black ul.mega-menu .sub ul li {padding-right: 0;} .black ul.mega-menu li .sub-container.non-mega .sub {padding: 20px 20px 20px 0;} .black ul.mega-menu li .sub-container.non-mega li {padding: 0; width: 190px; margin: 0;} .black ul.mega-menu li .sub-container.non-mega li a {padding: 7px 5px 7px 22px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvAa6sLPxCpXJYCJU_jTVSCvKqtpf0e_vq8J17ZTAd5M-fzaOeICtongcJKiK9QYhW19QcgLOlUhEBDmktkphmZ9T-DmXkh5lLFhQDO6CCkjMhLesl2Zh6tSyoC8Aq7g4zEMyGoxrJeIA/h120/arrow_off.png) no-repeat 7px 10px;} .black ul.mega-menu li .sub-container.non-mega li a:hover {color: #a32403; background: #efefef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgao-tZ8MzgawJWclCgX-lF0CnKzsjr0oVkOwVdatsgUtZhZUfoN7FeYIiV5Ng4X0r_cvUOX_9r3t_gHyfqDq9gpK9QQ-0k28K9zAUJpm-WUw98nWjTLO-4syoptEVpsN2SUgiK7IzavT0/h120/arrow_on.png) no-repeat 7px 10px;}

jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/hovermegamenu.js'></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/dcmegamenu.js'></script>
<script type="text/javascript">
$(document).ready(function($){
    $('#mega-menu-2').dcMegaMenu({
        rowItems: '1',
        speed: 'fast',
        effect: 'fade'
    });
});
</script>

HTML:

<div class="black">
<ul id="mega-menu-2" class="mega-menu">
    <li><a href="http://mas-andes.blogspot.com">Home</a></li>
    <li><a href="http://mas-andes.blogspot.com">Menu 1</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 8</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 4</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 14</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 15</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 5</a>
              <ul>
                <li><a href="http://mas-andes.blogspot.com">Link 16</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 17</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 18</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 19</a></li>
              </ul>
            </li>
        </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Menu 2</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>

    </ul>
</li>
    <li class="menu-item-129"><a href="http://mas-andes.blogspot.com">Judul 4</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
    </ul>
</li>
</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 3</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>

</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 4</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Judul  1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
    </ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Judul  2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul  3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
    </ul>
</li>
</ul>
</li>
</ul>
</div>

2. White Style

• Home
• Menu 1
  • Judul 1
    • Link 1
    • Link 2
    • Link 3
  • Judul 2
    • Link 4
    • Link 5
    • Link 6
    • Link 7
    • Link 8
    • Link 9
  • Judul 3
    • Link 10
    • Link 11
    • Link 12
    • Link 13
  • Judul 4
    • Link 14
    • Link 15
  • Judul 5
    • Link 16
    • Link 17
    • Link 18
    • Link 19
• Menu 2
  • Judul 1
    • Link 1
    • Link 2
    • Link 3
  • Judul 2
    • Link 4
    • Link 5
    • Link 6
    • Link 7
  • Judul 3
    • Link 9
  • Judul 4
    • Link 10
    • Link 11
    • Link 12
    • Link 13
• Menu 3
  • Link 1
  • Link 2
• Menu 4
  • Judul 1
    • Link 1
    • Link 2
  • Judul 2
    • Link 3
  • Judul 3
    • Link 4
    • Link 5
    • Link 6

CSS:

.mega-menu ul, .mega-menu ul li {list-style: none;} .mega-menu ul {position: relative; padding: 0; margin: 0;} .mega-menu ul li ul {display: none;} .mega-menu .sub {display: none;} .mega-menu .sub ul {display: block;} .white {font: normal 13px Arial, sans-serif; line-height: 16px;} .white ul.mega-menu, .white ul.mega-menu, .white ul.mega-menu li {margin: 0; padding: 0; border: none;} .white ul.mega-menu {background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeOxu3bedZdDR0jlpn31lbJr5IckYxvHN23DCByUNqLlO9SoWO3czWkSopbyq8Uo82v7z38B6JKsg-EbMYgb7i9jiJTgBKyt29CHwGzPhpk4Rua6t-DLfaIWUQu_erviZJCm7U-hZEXaY/h120/bg_white.png) repeat-x 0 -80px; width: 100%; height: 40px; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf; position: relative;} .white ul.mega-menu li {float: left; margin: 0; padding: 0; font-size: 13px; font-weight: bold;} .white ul.mega-menu li a {float: left; display: block; color: #000; padding: 12px 38px 12px 25px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeOxu3bedZdDR0jlpn31lbJr5IckYxvHN23DCByUNqLlO9SoWO3czWkSopbyq8Uo82v7z38B6JKsg-EbMYgb7i9jiJTgBKyt29CHwGzPhpk4Rua6t-DLfaIWUQu_erviZJCm7U-hZEXaY/h120/bg_white.png) repeat-x 100% 0; text-shadow: 1px 1px 1px #fff; text-decoration: none;} .white ul.mega-menu li a.dc-mega {position: relative;} .white ul.mega-menu li a .dc-mega-icon {display: block; position: absolute; width: 8px; height: 6px;  top: 18px; right: 15px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3J6Z-cuHJbatOd8oFNII1IGYaeT4xH2Yj4_rCOq5e8HYdel53GNUS0-YE250oMHn3-P-YSX4LjosXBE3Z0070nnNtTlGuc0vkQsjQBZPUldLbDkPXRLoTXnoSUgEJdPzFhZSCqO4V7GU/h120/arrow.png) no-repeat 0 100%;} .white ul.mega-menu li.mega-hover a, .white ul.mega-menu li a:hover {background-position: 100% -40px; color: #000; text-shadow: none;} .white ul.mega-menu li.mega-hover a .dc-mega-icon {background-position: 0 100%;} .white ul.mega-menu li .sub-container {position: absolute; background: #fff; padding-left: 20px; margin-left: -3px; box-shadow: 1px 1px 5px #e7e7e7; border-radius: 0 0 5px 5px;} .white ul.mega-menu li .sub {padding: 20px 20px 20px 10px;} .white ul.mega-menu li .sub-container.mega .sub {padding: 20px 20px 10px 0;} .white ul.mega-menu li .sub .row {width: 100%; overflow: hidden; clear: both;} .white ul.mega-menu li .sub li {list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal;} .white ul.mega-menu li .sub li.mega-hdr {margin: 0 10px 10px 0; float: left;} .white ul.mega-menu li .sub li.mega-hdr.last {margin-right: 0;} .white ul.mega-menu li .sub a {background: none; border: none; text-shadow: none; color: #111; padding: 7px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em;} .white ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a {padding: 5px 5px 5px 15px; margin-bottom: 5px; background: #E3E3E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinfSKuHWWC2FRHC8SCHX6wrGlRPHJf0BDat_6fzbM2q43HuxUsG__CYdP7twPIBUJ67oR2tlRLLrN8TPHF8ShEb59hqOtsbhPd-Vkp1u2FBcIkw610G5H-WytNQWri4W_6rzrtS7MmVpM/h27/bg_mega_hdr.png) no-repeat 0 0; text-transform: uppercase; font-weight: bold; color: #000; text-shadow: 1px 1px 1px #fff;} .white ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {color: #a32403; text-shadow: none;} .white ul.mega-menu .sub li.mega-hdr li a {padding: 4px 5px 4px 20px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvAa6sLPxCpXJYCJU_jTVSCvKqtpf0e_vq8J17ZTAd5M-fzaOeICtongcJKiK9QYhW19QcgLOlUhEBDmktkphmZ9T-DmXkh5lLFhQDO6CCkjMhLesl2Zh6tSyoC8Aq7g4zEMyGoxrJeIA/h120/arrow_off.png) no-repeat 5px 8px; font-weight: normal;} .white ul.mega-menu .sub li.mega-hdr li a:hover {color: #a32403; background: #efefef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgao-tZ8MzgawJWclCgX-lF0CnKzsjr0oVkOwVdatsgUtZhZUfoN7FeYIiV5Ng4X0r_cvUOX_9r3t_gHyfqDq9gpK9QQ-0k28K9zAUJpm-WUw98nWjTLO-4syoptEVpsN2SUgiK7IzavT0/h120/arrow_on.png) no-repeat 5px 8px;} .white ul.mega-menu .sub ul li {padding-right: 0;} .white ul.mega-menu li .sub-container.non-mega .sub {padding: 20px 20px 20px 0;} .white ul.mega-menu li .sub-container.non-mega li {padding: 0; width: 190px; margin: 0;} .white ul.mega-menu li .sub-container.non-mega li a {padding: 7px 5px 7px 22px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvAa6sLPxCpXJYCJU_jTVSCvKqtpf0e_vq8J17ZTAd5M-fzaOeICtongcJKiK9QYhW19QcgLOlUhEBDmktkphmZ9T-DmXkh5lLFhQDO6CCkjMhLesl2Zh6tSyoC8Aq7g4zEMyGoxrJeIA/h120/arrow_off.png) no-repeat 7px 10px;} .white ul.mega-menu li .sub-container.non-mega li a:hover {color: #a32403; background: #efefef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgao-tZ8MzgawJWclCgX-lF0CnKzsjr0oVkOwVdatsgUtZhZUfoN7FeYIiV5Ng4X0r_cvUOX_9r3t_gHyfqDq9gpK9QQ-0k28K9zAUJpm-WUw98nWjTLO-4syoptEVpsN2SUgiK7IzavT0/h120/arrow_on.png) no-repeat 7px 10px;}

jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/hovermegamenu.js'></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/dcmegamenu.js'></script>
<script type="text/javascript">
$(document).ready(function($){
    $('#mega-menu-9').dcMegaMenu({
        rowItems: '3',
        speed: 'fast',
        effect: 'fade'
    });
});
</script>

HTML:

<div class="white">
<ul id="mega-menu-9" class="mega-menu">
    <li><a href="http://mas-andes.blogspot.com">Home</a></li>
    <li><a href="http://mas-andes.blogspot.com">Menu 1</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 8</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 4</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 14</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 15</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 5</a>
              <ul>
                <li><a href="http://mas-andes.blogspot.com">Link 16</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 17</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 18</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 19</a></li>
              </ul>
            </li>
        </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Menu 2</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>

    </ul>
</li>
    <li class="menu-item-129"><a href="http://mas-andes.blogspot.com">Judul 4</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
    </ul>
</li>
</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 3</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>

</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 4</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Judul  1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
    </ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Judul  2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul  3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
    </ul>
</li>
</ul>
</li>
</ul>
</div>

3. Blue Style

• Home
• Menu 1
  • Judul 1
    • Link 1
    • Link 2
    • Link 3
  • Judul 2
    • Link 4
    • Link 5
    • Link 6
    • Link 7
    • Link 8
    • Link 9
  • Judul 3
    • Link 10
    • Link 11
    • Link 12
    • Link 13
  • Judul 4
    • Link 14
    • Link 15
  • Judul 5
    • Link 16
    • Link 17
    • Link 18
    • Link 19
• Menu 2
  • Judul 1
    • Link 1
    • Link 2
    • Link 3
  • Judul 2
    • Link 4
    • Link 5
    • Link 6
    • Link 7
  • Judul 3
    • Link 9
  • Judul 4
    • Link 10
    • Link 11
    • Link 12
    • Link 13
• Menu 3
  • Link 1
  • Link 2
• Menu 4
  • Judul 1
    • Link 1
    • Link 2
  • Judul 2
    • Link 3
  • Judul 3
    • Link 4
    • Link 5
    • Link 6

CSS:

.mega-menu ul, .mega-menu ul li {list-style: none;} .mega-menu ul {position: relative; padding: 0; margin: 0;} .mega-menu ul li ul {display: none;} .mega-menu .sub {display: none;} .mega-menu .sub ul {display: block;} .blue {font: normal 13px Arial, sans-serif; line-height: 16px;} .blue ul.mega-menu, .blue ul.mega-menu, .blue ul.mega-menu li {margin: 0; padding: 0; border: none;} .blue ul.mega-menu{background: #8998a8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH8fehiHXV-lHCjDtJmqhKfh2sc2UW6qTjl9FcAgJOBHB98Rc9Bn5doii74KGlUPprb9llI0_DxZz4uKy9MB4Tfypobi73M7Mh3Ihb_7pqodgePFWiSb2D6JeRxxzUVuThlbuy6bSETmY/h120/bg_blue.png) repeat-x 0 -80px; width: 100%; height: 40px; border-right: 1px solid #536573; border-left: 1px solid #536573; position: relative;} .blue ul.mega-menu li {float: left; margin: 0; padding: 0; font-size: 13px; font-weight: bold;} .blue ul.mega-menu li a {float: left; display: block; color: #fff; padding: 12px 38px 12px 25px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH8fehiHXV-lHCjDtJmqhKfh2sc2UW6qTjl9FcAgJOBHB98Rc9Bn5doii74KGlUPprb9llI0_DxZz4uKy9MB4Tfypobi73M7Mh3Ihb_7pqodgePFWiSb2D6JeRxxzUVuThlbuy6bSETmY/h120/bg_blue.png) repeat-x 100% 0; text-shadow: 1px 1px 1px #000; text-decoration: none;} .blue ul.mega-menu li a.dc-mega {position: relative;} .blue ul.mega-menu li a .dc-mega-icon {display: block; position: absolute; top: 18px; right: 15px; width: 8px; height: 6px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3J6Z-cuHJbatOd8oFNII1IGYaeT4xH2Yj4_rCOq5e8HYdel53GNUS0-YE250oMHn3-P-YSX4LjosXBE3Z0070nnNtTlGuc0vkQsjQBZPUldLbDkPXRLoTXnoSUgEJdPzFhZSCqO4V7GU/h120/arrow.png) no-repeat 0 0;} .blue ul.mega-menu li.mega-hover a, .blue ul.mega-menu li a:hover {background-position: 100% -40px; color: #000; text-shadow: none;} .blue ul.mega-menu li.mega-hover a .dc-mega-icon {background-position: 0 100%;} .blue ul.mega-menu li .sub-container {position: absolute; background: #fff; padding-left: 20px; margin-left: -3px; box-shadow: 1px 1px 5px #2a4366; border-radius: 0 0 5px 5px;} .blue ul.mega-menu li .sub {padding: 20px 20px 20px 10px;} .blue ul.mega-menu li .sub-container.mega .sub {padding: 20px 20px 10px 0;} .blue ul.mega-menu li .sub .row {width: 100%; overflow: hidden; clear: both;} .blue ul.mega-menu li .sub li {list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal;} .blue ul.mega-menu li .sub li.mega-hdr {margin: 0 10px 10px 0; float: left;} .blue ul.mega-menu li .sub li.mega-hdr.last {margin-right: 0;} .blue ul.mega-menu li .sub a {background: none; border: none; text-shadow: none; color: #111; padding: 7px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em;} .blue ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a {padding: 5px 5px 5px 15px; margin-bottom: 5px; background: #304B73 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinfSKuHWWC2FRHC8SCHX6wrGlRPHJf0BDat_6fzbM2q43HuxUsG__CYdP7twPIBUJ67oR2tlRLLrN8TPHF8ShEb59hqOtsbhPd-Vkp1u2FBcIkw610G5H-WytNQWri4W_6rzrtS7MmVpM/h27/bg_mega_hdr.png) no-repeat 0 0; text-transform: uppercase; font-weight: bold; color: #fff; text-shadow: 1px 1px 1px #333;} .blue ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {color: #A8B7CF; text-shadow: none;} .blue ul.mega-menu .sub li.mega-hdr li a {padding: 4px 5px 4px 20px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvAa6sLPxCpXJYCJU_jTVSCvKqtpf0e_vq8J17ZTAd5M-fzaOeICtongcJKiK9QYhW19QcgLOlUhEBDmktkphmZ9T-DmXkh5lLFhQDO6CCkjMhLesl2Zh6tSyoC8Aq7g4zEMyGoxrJeIA/h120/arrow_off.png) no-repeat 5px 8px; font-weight: normal;} .blue ul.mega-menu .sub li.mega-hdr li a:hover {color: #a32403; background: #efefef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgao-tZ8MzgawJWclCgX-lF0CnKzsjr0oVkOwVdatsgUtZhZUfoN7FeYIiV5Ng4X0r_cvUOX_9r3t_gHyfqDq9gpK9QQ-0k28K9zAUJpm-WUw98nWjTLO-4syoptEVpsN2SUgiK7IzavT0/h120/arrow_on.png) no-repeat 5px 8px;} .blue ul.mega-menu .sub ul li {padding-right: 0;} .blue ul.mega-menu li .sub-container.non-mega .sub {padding: 20px 20px 20px 0;} .blue ul.mega-menu li .sub-container.non-mega li {padding: 0; width: 190px; margin: 0;} .blue ul.mega-menu li .sub-container.non-mega li a {padding: 7px 5px 7px 22px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvAa6sLPxCpXJYCJU_jTVSCvKqtpf0e_vq8J17ZTAd5M-fzaOeICtongcJKiK9QYhW19QcgLOlUhEBDmktkphmZ9T-DmXkh5lLFhQDO6CCkjMhLesl2Zh6tSyoC8Aq7g4zEMyGoxrJeIA/h120/arrow_off.png) no-repeat 7px 10px;} .blue ul.mega-menu li .sub-container.non-mega li a:hover {color: #a32403; background: #efefef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgao-tZ8MzgawJWclCgX-lF0CnKzsjr0oVkOwVdatsgUtZhZUfoN7FeYIiV5Ng4X0r_cvUOX_9r3t_gHyfqDq9gpK9QQ-0k28K9zAUJpm-WUw98nWjTLO-4syoptEVpsN2SUgiK7IzavT0/h120/arrow_on.png) no-repeat 7px 10px;}

jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/hovermegamenu.js'></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/dcmegamenu.js'></script>
<script type="text/javascript">
$(document).ready(function($){
    $('#mega-menu-4').dcMegaMenu({
        rowItems: '3',
        speed: 'fast',
        effect: 'fade'
    });
});
</script>

HTML:

<div class="blue">
<ul id="mega-menu-4" class="mega-menu">
    <li><a href="http://mas-andes.blogspot.com">Home</a></li>
    <li><a href="http://mas-andes.blogspot.com">Menu 1</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 8</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 4</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 14</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 15</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 5</a>
              <ul>
                <li><a href="http://mas-andes.blogspot.com">Link 16</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 17</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 18</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 19</a></li>
              </ul>
            </li>
        </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Menu 2</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>

    </ul>
</li>
    <li class="menu-item-129"><a href="http://mas-andes.blogspot.com">Judul 4</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
    </ul>
</li>
</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 3</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>

</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 4</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Judul  1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
    </ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Judul  2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul  3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
    </ul>
</li>
</ul>
</li>
</ul>
</div>

4. Green Style

• Home
• Menu 1
  • Judul 1
    • Link 1
    • Link 2
    • Link 3
  • Judul 2
    • Link 4
    • Link 5
    • Link 6
    • Link 7
    • Link 8
    • Link 9
  • Judul 3
    • Link 10
    • Link 11
    • Link 12
    • Link 13
  • Judul 4
    • Link 14
    • Link 15
  • Judul 5
    • Link 16
    • Link 17
    • Link 18
    • Link 19
• Menu 2
  • Judul 1
    • Link 1
    • Link 2
    • Link 3
  • Judul 2
    • Link 4
    • Link 5
    • Link 6
    • Link 7
  • Judul 3
    • Link 9
  • Judul 4
    • Link 10
    • Link 11
    • Link 12
    • Link 13
• Menu 3
  • Link 1
  • Link 2
• Menu 4
  • Judul 1
    • Link 1
    • Link 2
  • Judul 2
    • Link 3
  • Judul 3
    • Link 4
    • Link 5
    • Link 6

CSS:

.mega-menu ul, .mega-menu ul li {list-style: none;} .mega-menu ul {position: relative; padding: 0; margin: 0;} .mega-menu ul li ul {display: none;} .mega-menu .sub {display: none;} .mega-menu .sub ul {display: block;} .green {font: normal 13px Arial, sans-serif; line-height: 16px;} .green ul.mega-menu, .green ul.mega-menu, .green ul.mega-menu li {margin: 0; padding: 0; border: none;} .green ul.mega-menu {background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzyV0FGfdAAV2sJ1JqwTdjq1AycE7UlauVuHKXf_JMde4HwgILGJot4kAPB83GPCEG9hEKJXCahiuWLz-bCEH-QQaQ0GoYlGDQYM4HqOXG8t0YZxaxEdRcx22nuDfTmyEacsaDaXQ3Viw/h120/bg_green.png) repeat-x 0 -80px; width: 100%; height: 40px; border-right: 1px solid #94cd0b; border-left: 1px solid #94cd0b; position: relative;} .green ul.mega-menu li {float: left; margin: 0; padding: 0; font-size: 13px; font-weight: bold;} .green ul.mega-menu li a {float: left; display: block; color: #000; padding: 12px 38px 12px 25px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzyV0FGfdAAV2sJ1JqwTdjq1AycE7UlauVuHKXf_JMde4HwgILGJot4kAPB83GPCEG9hEKJXCahiuWLz-bCEH-QQaQ0GoYlGDQYM4HqOXG8t0YZxaxEdRcx22nuDfTmyEacsaDaXQ3Viw/h120/bg_green.png) repeat-x 100% 0; text-shadow: 1px 1px 1px #fff; text-decoration: none;} .green ul.mega-menu li a.dc-mega {position: relative;} .green ul.mega-menu li a .dc-mega-icon {display: block; position: absolute; width: 8px; height: 6px;  top: 18px; right: 15px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3J6Z-cuHJbatOd8oFNII1IGYaeT4xH2Yj4_rCOq5e8HYdel53GNUS0-YE250oMHn3-P-YSX4LjosXBE3Z0070nnNtTlGuc0vkQsjQBZPUldLbDkPXRLoTXnoSUgEJdPzFhZSCqO4V7GU/h120/arrow.png) no-repeat 0 100%;} .green ul.mega-menu li.mega-hover a, .green ul.mega-menu li a:hover {background-position: 100% -40px; color: #000; text-shadow: none;} .green ul.mega-menu li.mega-hover a .dc-mega-icon {background-position: 0 100%;} .green ul.mega-menu li .sub-container {position: absolute; background: #fff; padding-left: 20px; margin-left: -3px; box-shadow: 1px 1px 5px #9ac119; border-radius: 0 0 5px 5px;} .green ul.mega-menu li .sub {padding: 20px 20px 20px 10px;} .green ul.mega-menu li .sub-container.mega .sub {padding: 20px 20px 10px 0;} .green ul.mega-menu li .sub .row {width: 100%; overflow: hidden; clear: both;} .green ul.mega-menu li .sub li {list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal;} .green ul.mega-menu li .sub li.mega-hdr {margin: 0 10px 10px 0; float: left;} .green ul.mega-menu li .sub li.mega-hdr.last {margin-right: 0;} .green ul.mega-menu li .sub a {background: none; border: none; text-shadow: none; color: #111; padding: 7px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em;} .green ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a {padding: 5px 5px 5px 15px; margin-bottom: 5px; background: #A1C81E url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinfSKuHWWC2FRHC8SCHX6wrGlRPHJf0BDat_6fzbM2q43HuxUsG__CYdP7twPIBUJ67oR2tlRLLrN8TPHF8ShEb59hqOtsbhPd-Vkp1u2FBcIkw610G5H-WytNQWri4W_6rzrtS7MmVpM/h27/bg_mega_hdr.png) no-repeat 0 0; text-transform: uppercase; font-weight: bold; color: #000; text-shadow: 1px 1px 1px #fff;} .green ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {color: #fff; text-shadow: none;} .green ul.mega-menu .sub li.mega-hdr li a {padding: 4px 5px 4px 20px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvAa6sLPxCpXJYCJU_jTVSCvKqtpf0e_vq8J17ZTAd5M-fzaOeICtongcJKiK9QYhW19QcgLOlUhEBDmktkphmZ9T-DmXkh5lLFhQDO6CCkjMhLesl2Zh6tSyoC8Aq7g4zEMyGoxrJeIA/h120/arrow_off.png) no-repeat 5px 8px; font-weight: normal;} .green ul.mega-menu .sub li.mega-hdr li a:hover {color: #a32403; background: #efefef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgao-tZ8MzgawJWclCgX-lF0CnKzsjr0oVkOwVdatsgUtZhZUfoN7FeYIiV5Ng4X0r_cvUOX_9r3t_gHyfqDq9gpK9QQ-0k28K9zAUJpm-WUw98nWjTLO-4syoptEVpsN2SUgiK7IzavT0/h120/arrow_on.png) no-repeat 5px 8px;} .green ul.mega-menu .sub ul li {padding-right: 0;} .green ul.mega-menu li .sub-container.non-mega .sub {padding: 20px 20px 20px 0;} .green ul.mega-menu li .sub-container.non-mega li {padding: 0; width: 190px; margin: 0;} .green ul.mega-menu li .sub-container.non-mega li a {padding: 7px 5px 7px 22px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvAa6sLPxCpXJYCJU_jTVSCvKqtpf0e_vq8J17ZTAd5M-fzaOeICtongcJKiK9QYhW19QcgLOlUhEBDmktkphmZ9T-DmXkh5lLFhQDO6CCkjMhLesl2Zh6tSyoC8Aq7g4zEMyGoxrJeIA/h120/arrow_off.png) no-repeat 7px 10px;} .green ul.mega-menu li .sub-container.non-mega li a:hover {color: #a32403; background: #efefef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgao-tZ8MzgawJWclCgX-lF0CnKzsjr0oVkOwVdatsgUtZhZUfoN7FeYIiV5Ng4X0r_cvUOX_9r3t_gHyfqDq9gpK9QQ-0k28K9zAUJpm-WUw98nWjTLO-4syoptEVpsN2SUgiK7IzavT0/h120/arrow_on.png) no-repeat 7px 10px;}

jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/hovermegamenu.js'></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/dcmegamenu.js'></script>
<script type="text/javascript">
$(document).ready(function($){
    $('#mega-menu-7').dcMegaMenu({
        rowItems: '3',
        speed: 'fast',
        effect: 'slide'
    });
});
</script>

HTML:

<div class="green">
<ul id="mega-menu-7" class="mega-menu">
    <li><a href="http://mas-andes.blogspot.com">Home</a></li>
    <li><a href="http://mas-andes.blogspot.com">Menu 1</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 8</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 4</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 14</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 15</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 5</a>
              <ul>
                <li><a href="http://mas-andes.blogspot.com">Link 16</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 17</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 18</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 19</a></li>
              </ul>
            </li>
        </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Menu 2</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>

    </ul>
</li>
    <li class="menu-item-129"><a href="http://mas-andes.blogspot.com">Judul 4</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
    </ul>
</li>
</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 3</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>

</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 4</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Judul  1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
    </ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Judul  2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul  3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
    </ul>
</li>
</ul>
</li>
</ul>
</div>

5. Grey Style

• Home
• Menu 1
  • Judul 1
    • Link 1
    • Link 2
    • Link 3
  • Judul 2
    • Link 4
    • Link 5
    • Link 6
    • Link 7
    • Link 8
    • Link 9
  • Judul 3
    • Link 10
    • Link 11
    • Link 12
    • Link 13
  • Judul 4
    • Link 14
    • Link 15
  • Judul 5
    • Link 16
    • Link 17
    • Link 18
    • Link 19
• Menu 2
  • Judul 1
    • Link 1
    • Link 2
    • Link 3
  • Judul 2
    • Link 4
    • Link 5
    • Link 6
    • Link 7
  • Judul 3
    • Link 9
  • Judul 4
    • Link 10
    • Link 11
    • Link 12
    • Link 13
• Menu 3
  • Link 1
  • Link 2
• Menu 4
  • Judul 1
    • Link 1
    • Link 2
  • Judul 2
    • Link 3
  • Judul 3
    • Link 4
    • Link 5
    • Link 6

CSS:

.mega-menu ul, .mega-menu ul li {list-style: none;} .mega-menu ul {position: relative; padding: 0; margin: 0;} .mega-menu ul li ul {display: none;} .mega-menu .sub {display: none;} .mega-menu .sub ul {display: block;} .grey {font: normal 13px Arial, sans-serif; line-height: 16px;} .grey ul.mega-menu, .grey ul.mega-menu, .grey ul.mega-menu li {margin: 0; padding: 0; border: none;} .grey ul.mega-menu {background: #8998a8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ9CCKrEwc5cwzidr7WvX96nhUNmLquM0KHehcdGa_40qO_oEj8Jsrr07-IRg6zfmHeku4NLuN5yg6HzLI7UieCy_DeezM1E6IhQBb-RzyRyIYaOt6PU_PTknwYHDeW-rEdjjSak80h6A/h120/bg_grey.png) repeat-x 0 -80px; width: 100%; height: 40px; border-right: 1px solid #8B949F; border-left: 1px solid #8B949F; position: relative;} .grey ul.mega-menu li {float: left; margin: 0; padding: 0; font-size: 13px; font-weight: bold;} .grey ul.mega-menu li a {float: left; display: block; color: #fff; padding: 12px 38px 12px 25px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ9CCKrEwc5cwzidr7WvX96nhUNmLquM0KHehcdGa_40qO_oEj8Jsrr07-IRg6zfmHeku4NLuN5yg6HzLI7UieCy_DeezM1E6IhQBb-RzyRyIYaOt6PU_PTknwYHDeW-rEdjjSak80h6A/h120/bg_grey.png) repeat-x 100% 0; text-shadow: 1px 1px 1px #000; text-decoration: none;} .grey ul.mega-menu li a.dc-mega {position: relative;} .grey ul.mega-menu li a .dc-mega-icon {display: block; position: absolute; top: 18px; right: 15px; width: 8px; height: 6px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3J6Z-cuHJbatOd8oFNII1IGYaeT4xH2Yj4_rCOq5e8HYdel53GNUS0-YE250oMHn3-P-YSX4LjosXBE3Z0070nnNtTlGuc0vkQsjQBZPUldLbDkPXRLoTXnoSUgEJdPzFhZSCqO4V7GU/h120/arrow.png) no-repeat 0 0;} .grey ul.mega-menu li.mega-hover a, .grey ul.mega-menu li a:hover {background-position: 100% -40px; color: #000; text-shadow: none;} .grey ul.mega-menu li.mega-hover a .dc-mega-icon {background-position: 0 100%;} .grey ul.mega-menu li .sub-container {position: absolute; background: #fff; padding-left: 20px; margin-left: -3px; box-shadow: 1px 1px 5px #8696a7; border-radius: 0 0 5px 5px;} .grey ul.mega-menu li .sub {padding: 20px 20px 20px 10px;} .grey ul.mega-menu li .sub-container.mega .sub {padding: 20px 20px 10px 0;} .grey ul.mega-menu li .sub .row {width: 100%; overflow: hidden; clear: both;} .grey ul.mega-menu li .sub li {list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal;} .grey ul.mega-menu li .sub li.mega-hdr {margin: 0 10px 10px 0; float: left;} .grey ul.mega-menu li .sub li.mega-hdr.last {margin-right: 0;} .grey ul.mega-menu li .sub a {background: none; border: none; text-shadow: none; color: #111; padding: 7px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em;} .grey ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a {padding: 5px 5px 5px 15px; margin-bottom: 5px; background: #8A98A9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinfSKuHWWC2FRHC8SCHX6wrGlRPHJf0BDat_6fzbM2q43HuxUsG__CYdP7twPIBUJ67oR2tlRLLrN8TPHF8ShEb59hqOtsbhPd-Vkp1u2FBcIkw610G5H-WytNQWri4W_6rzrtS7MmVpM/h27/bg_mega_hdr.png) no-repeat 0 0; text-transform: uppercase; font-weight: bold; color: #fff; text-shadow: 1px 1px 1px #333;} .grey ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {color: #000; text-shadow: none;} .grey ul.mega-menu .sub li.mega-hdr li a {padding: 4px 5px 4px 20px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvAa6sLPxCpXJYCJU_jTVSCvKqtpf0e_vq8J17ZTAd5M-fzaOeICtongcJKiK9QYhW19QcgLOlUhEBDmktkphmZ9T-DmXkh5lLFhQDO6CCkjMhLesl2Zh6tSyoC8Aq7g4zEMyGoxrJeIA/h120/arrow_off.png) no-repeat 5px 8px; font-weight: normal;} .grey ul.mega-menu .sub li.mega-hdr li a:hover {color: #a32403; background: #efefef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgao-tZ8MzgawJWclCgX-lF0CnKzsjr0oVkOwVdatsgUtZhZUfoN7FeYIiV5Ng4X0r_cvUOX_9r3t_gHyfqDq9gpK9QQ-0k28K9zAUJpm-WUw98nWjTLO-4syoptEVpsN2SUgiK7IzavT0/h120/arrow_on.png) no-repeat 5px 8px;} .grey ul.mega-menu .sub ul li {padding-right: 0;} .grey ul.mega-menu li .sub-container.non-mega .sub {padding: 20px 20px 20px 0;} .grey ul.mega-menu li .sub-container.non-mega li {padding: 0; width: 190px; margin: 0;} .grey ul.mega-menu li .sub-container.non-mega li a {padding: 7px 5px 7px 22px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvAa6sLPxCpXJYCJU_jTVSCvKqtpf0e_vq8J17ZTAd5M-fzaOeICtongcJKiK9QYhW19QcgLOlUhEBDmktkphmZ9T-DmXkh5lLFhQDO6CCkjMhLesl2Zh6tSyoC8Aq7g4zEMyGoxrJeIA/h120/arrow_off.png) no-repeat 7px 10px;} .grey ul.mega-menu li .sub-container.non-mega li a:hover {color: #a32403; background: #efefef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgao-tZ8MzgawJWclCgX-lF0CnKzsjr0oVkOwVdatsgUtZhZUfoN7FeYIiV5Ng4X0r_cvUOX_9r3t_gHyfqDq9gpK9QQ-0k28K9zAUJpm-WUw98nWjTLO-4syoptEVpsN2SUgiK7IzavT0/h120/arrow_on.png) no-repeat 7px 10px;}

jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/hovermegamenu.js'></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/dcmegamenu.js'></script>
<script type="text/javascript">
$(document).ready(function($){
    $('#mega-menu-3').dcMegaMenu({
        rowItems: '2',
        speed: 'fast',
        effect: 'fade'
    });
});
</script>

HTML:

<div class="grey">
<ul id="mega-menu-3" class="mega-menu">
    <li><a href="http://mas-andes.blogspot.com">Home</a></li>
    <li><a href="http://mas-andes.blogspot.com">Menu 1</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 8</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 4</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 14</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 15</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 5</a>
              <ul>
                <li><a href="http://mas-andes.blogspot.com">Link 16</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 17</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 18</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 19</a></li>
              </ul>
            </li>
        </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Menu 2</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>

    </ul>
</li>
    <li class="menu-item-129"><a href="http://mas-andes.blogspot.com">Judul 4</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
    </ul>
</li>
</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 3</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>

</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 4</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Judul  1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
    </ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Judul  2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul  3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
    </ul>
</li>
</ul>
</li>
</ul>
</div>

6. Light Blue Style

• Home
• Menu 1
  • Judul 1
    • Link 1
    • Link 2
    • Link 3
  • Judul 2
    • Link 4
    • Link 5
    • Link 6
    • Link 7
    • Link 8
    • Link 9
  • Judul 3
    • Link 10
    • Link 11
    • Link 12
    • Link 13
  • Judul 4
    • Link 14
    • Link 15
  • Judul 5
    • Link 16
    • Link 17
    • Link 18
    • Link 19
• Menu 2
  • Judul 1
    • Link 1
    • Link 2
    • Link 3
  • Judul 2
    • Link 4
    • Link 5
    • Link 6
    • Link 7
  • Judul 3
    • Link 9
  • Judul 4
    • Link 10
    • Link 11
    • Link 12
    • Link 13
• Menu 3
  • Link 1
  • Link 2
• Menu 4
  • Judul 1
    • Link 1
    • Link 2
  • Judul 2
    • Link 3
  • Judul 3
    • Link 4
    • Link 5
    • Link 6

CSS:

.mega-menu ul, .mega-menu ul li {list-style: none;} .mega-menu ul {position: relative; padding: 0; margin: 0;} .mega-menu ul li ul {display: none;} .mega-menu .sub {display: none;} .mega-menu .sub ul {display: block;} .light-blue {font: normal 13px Arial, sans-serif; line-height: 16px;} .light-blue ul.mega-menu, .light-blue ul.mega-menu, .light-blue ul.mega-menu li {margin: 0; padding: 0; border: none;} .light-blue ul.mega-menu {background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZbFf6Wh1dfibRUOnK9WkS6VQBCsOI7uB4N4P2Wel_Ga7fbuwn1-7SlGfefgU2KMgh1zeCUbZ86_8yqbMyRU4qa9GS3OdBDoMu9jKcZN6BtyXES48M1_cpJQV_OI-3Ke7IXARUasMJTP8/h120/bg_light_blue.png) repeat-x 0 -80px; width: 100%; height: 40px; border-right: 1px solid #44B3FF; border-left: 1px solid #44B3FF; position: relative;} .light-blue ul.mega-menu li {float: left; margin: 0; padding: 0; font-size: 13px; font-weight: bold;} .light-blue ul.mega-menu li a {float: left; display: block; color: #000; padding: 12px 38px 12px 25px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZbFf6Wh1dfibRUOnK9WkS6VQBCsOI7uB4N4P2Wel_Ga7fbuwn1-7SlGfefgU2KMgh1zeCUbZ86_8yqbMyRU4qa9GS3OdBDoMu9jKcZN6BtyXES48M1_cpJQV_OI-3Ke7IXARUasMJTP8/h120/bg_light_blue.png) repeat-x 100% 0; text-shadow: 1px 1px 1px #fff; text-decoration: none;} .light-blue ul.mega-menu li a.dc-mega {position: relative;} .light-blue ul.mega-menu li a .dc-mega-icon {display: block; position: absolute;  top: 18px; right: 15px; width: 8px; height: 6px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3J6Z-cuHJbatOd8oFNII1IGYaeT4xH2Yj4_rCOq5e8HYdel53GNUS0-YE250oMHn3-P-YSX4LjosXBE3Z0070nnNtTlGuc0vkQsjQBZPUldLbDkPXRLoTXnoSUgEJdPzFhZSCqO4V7GU/h120/arrow.png) no-repeat 0 100%;} .light-blue ul.mega-menu li.mega-hover a, .light-blue ul.mega-menu li a:hover {background-position: 100% -40px; color: #000; text-shadow: none;} .light-blue ul.mega-menu li.mega-hover a .dc-mega-icon {background-position: 0 100%;} .light-blue ul.mega-menu li .sub-container {position: absolute; background: #fff; padding-left: 20px; margin-left: -3px; box-shadow: 1px 1px 5px #2aafe5; border-radius: 0 0 5px 5px;} .light-blue ul.mega-menu li .sub {padding: 20px 20px 20px 10px;} .light-blue ul.mega-menu li .sub-container.mega .sub {padding: 20px 20px 10px 0;} .light-blue ul.mega-menu li .sub .row {width: 100%; overflow: hidden; clear: both;} .light-blue ul.mega-menu li .sub li {list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal;} .light-blue ul.mega-menu li .sub li.mega-hdr {margin: 0 10px 10px 0; float: left;} .light-blue ul.mega-menu li .sub li.mega-hdr.last {margin-right: 0;} .light-blue ul.mega-menu li .sub a {background: none; border: none; text-shadow: none; color: #111; padding: 7px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em;} .light-blue ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a {padding: 5px 5px 5px 15px; margin-bottom: 5px; background: #4EC3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinfSKuHWWC2FRHC8SCHX6wrGlRPHJf0BDat_6fzbM2q43HuxUsG__CYdP7twPIBUJ67oR2tlRLLrN8TPHF8ShEb59hqOtsbhPd-Vkp1u2FBcIkw610G5H-WytNQWri4W_6rzrtS7MmVpM/h27/bg_mega_hdr.png) no-repeat 0 0; text-transform: uppercase; font-weight: bold; color: #000; text-shadow: 1px 1px 1px #fff;} .light-blue ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {color: #fff; text-shadow: none;} .light-blue ul.mega-menu .sub li.mega-hdr li a {padding: 4px 5px 4px 20px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvAa6sLPxCpXJYCJU_jTVSCvKqtpf0e_vq8J17ZTAd5M-fzaOeICtongcJKiK9QYhW19QcgLOlUhEBDmktkphmZ9T-DmXkh5lLFhQDO6CCkjMhLesl2Zh6tSyoC8Aq7g4zEMyGoxrJeIA/h120/arrow_off.png) no-repeat 5px 8px; font-weight: normal;} .light-blue ul.mega-menu .sub li.mega-hdr li a:hover {color: #a32403; background: #efefef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgao-tZ8MzgawJWclCgX-lF0CnKzsjr0oVkOwVdatsgUtZhZUfoN7FeYIiV5Ng4X0r_cvUOX_9r3t_gHyfqDq9gpK9QQ-0k28K9zAUJpm-WUw98nWjTLO-4syoptEVpsN2SUgiK7IzavT0/h120/arrow_on.png) no-repeat 5px 8px;} .light-blue ul.mega-menu .sub ul li {padding-right: 0;} .light-blue ul.mega-menu li .sub-container.non-mega .sub {padding: 20px 20px 20px 0;} .light-blue ul.mega-menu li .sub-container.non-mega li {padding: 0; width: 190px; margin: 0;} .light-blue ul.mega-menu li .sub-container.non-mega li a {padding: 7px 5px 7px 22px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvAa6sLPxCpXJYCJU_jTVSCvKqtpf0e_vq8J17ZTAd5M-fzaOeICtongcJKiK9QYhW19QcgLOlUhEBDmktkphmZ9T-DmXkh5lLFhQDO6CCkjMhLesl2Zh6tSyoC8Aq7g4zEMyGoxrJeIA/h120/arrow_off.png) no-repeat 7px 10px;} .light-blue ul.mega-menu li .sub-container.non-mega li a:hover {color: #a32403; background: #efefef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgao-tZ8MzgawJWclCgX-lF0CnKzsjr0oVkOwVdatsgUtZhZUfoN7FeYIiV5Ng4X0r_cvUOX_9r3t_gHyfqDq9gpK9QQ-0k28K9zAUJpm-WUw98nWjTLO-4syoptEVpsN2SUgiK7IzavT0/h120/arrow_on.png) no-repeat 7px 10px;}

jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/hovermegamenu.js'></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/dcmegamenu.js'></script>
<script type="text/javascript">
$(document).ready(function($){
    $('#mega-menu-8').dcMegaMenu({
        rowItems: '3',
        speed: 'fast',
        effect: 'fade'
    });
});
</script>

HTML:

<div class="light-blue">
<ul id="mega-menu-8" class="mega-menu">
    <li><a href="http://mas-andes.blogspot.com">Home</a></li>
    <li><a href="http://mas-andes.blogspot.com">Menu 1</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 8</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 4</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 14</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 15</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 5</a>
              <ul>
                <li><a href="http://mas-andes.blogspot.com">Link 16</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 17</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 18</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 19</a></li>
              </ul>
            </li>
        </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Menu 2</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>

    </ul>
</li>
    <li class="menu-item-129"><a href="http://mas-andes.blogspot.com">Judul 4</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
    </ul>
</li>
</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 3</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>

</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 4</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Judul  1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
    </ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Judul  2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul  3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
    </ul>
</li>
</ul>
</li>
</ul>
</div>

7. Orange Style

• Home
• Menu 1
  • Judul 1
    • Link 1
    • Link 2
    • Link 3
  • Judul 2
    • Link 4
    • Link 5
    • Link 6
    • Link 7
    • Link 8
    • Link 9
  • Judul 3
    • Link 10
    • Link 11
    • Link 12
    • Link 13
  • Judul 4
    • Link 14
    • Link 15
  • Judul 5
    • Link 16
    • Link 17
    • Link 18
    • Link 19
• Menu 2
  • Judul 1
    • Link 1
    • Link 2
    • Link 3
  • Judul 2
    • Link 4
    • Link 5
    • Link 6
    • Link 7
  • Judul 3
    • Link 9
  • Judul 4
    • Link 10
    • Link 11
    • Link 12
    • Link 13
• Menu 3
  • Link 1
  • Link 2
• Menu 4
  • Judul 1
    • Link 1
    • Link 2
  • Judul 2
    • Link 3
  • Judul 3
    • Link 4
    • Link 5
    • Link 6

CSS:

.mega-menu ul, .mega-menu ul li {list-style: none;} .mega-menu ul {position: relative; padding: 0; margin: 0;} .mega-menu ul li ul {display: none;} .mega-menu .sub {display: none;} .mega-menu .sub ul {display: block;} .orange{font: normal 13px Arial, sans-serif; line-height: 16px;} .orange ul.mega-menu, .orange ul.mega-menu, .orange ul.mega-menu li {margin: 0; padding: 0; border: none;} .orange ul.mega-menu {background: #8998a8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZtKa3crSnHLkhHbfwx1tTXRzX65pY21vZiiGV6tZbVO472MPaEm3ieY2TPgtgRRPj7Daxa4BteaF3YgyE3BWC3lqVVgXqJSixgw_4qO0RgcnErHPLBWa0J-LmlQRxc9BBJSPKI8S_WpA/h120/bg_orange.png) repeat-x 0 -80px; width: 100%; height: 40px; border-right: 1px solid #bd3e00; border-left: 1px solid #bd3e00; position: relative;} .orange ul.mega-menu li {float: left; margin: 0; padding: 0; font-size: 13px; font-weight: bold;} .orange ul.mega-menu li a {float: left; display: block; color: #fff; padding: 12px 38px 12px 25px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZtKa3crSnHLkhHbfwx1tTXRzX65pY21vZiiGV6tZbVO472MPaEm3ieY2TPgtgRRPj7Daxa4BteaF3YgyE3BWC3lqVVgXqJSixgw_4qO0RgcnErHPLBWa0J-LmlQRxc9BBJSPKI8S_WpA/h120/bg_orange.png) repeat-x 100% 0; text-shadow: 1px 1px 1px #000; text-decoration: none;} .orange ul.mega-menu li a.dc-mega {position: relative;} .orange ul.mega-menu li a .dc-mega-icon {display: block; position: absolute; top: 18px; right: 15px; width: 8px; height: 6px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3J6Z-cuHJbatOd8oFNII1IGYaeT4xH2Yj4_rCOq5e8HYdel53GNUS0-YE250oMHn3-P-YSX4LjosXBE3Z0070nnNtTlGuc0vkQsjQBZPUldLbDkPXRLoTXnoSUgEJdPzFhZSCqO4V7GU/h120/arrow.png) no-repeat 0 0;} .orange ul.mega-menu li.mega-hover a, .orange ul.mega-menu li a:hover {background-position: 100% -40px; color: #000; text-shadow: none;} .orange ul.mega-menu li.mega-hover a .dc-mega-icon {background-position: 0 100%;} .orange ul.mega-menu li .sub-container {position: absolute; background: #fff; padding-left: 20px; margin-left: -3px; box-shadow: 1px 1px 5px #e75921; border-radius: 0 0 5px 5px;} .orange ul.mega-menu li .sub {padding: 20px 20px 20px 10px;} .orange ul.mega-menu li .sub-container.mega .sub {padding: 20px 20px 10px 0;} .orange ul.mega-menu li .sub .row {width: 100%; overflow: hidden; clear: both;} .orange ul.mega-menu li .sub li {list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal;} .orange ul.mega-menu li .sub li.mega-hdr {margin: 0 10px 10px 0; float: left;} .orange ul.mega-menu li .sub li.mega-hdr.last {margin-right: 0;} .orange ul.mega-menu li .sub a {background: none; border: none; text-shadow: none; color: #111; padding: 7px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em;} .orange ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a {padding: 5px 5px 5px 15px; margin-bottom: 5px; background: #E75921 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinfSKuHWWC2FRHC8SCHX6wrGlRPHJf0BDat_6fzbM2q43HuxUsG__CYdP7twPIBUJ67oR2tlRLLrN8TPHF8ShEb59hqOtsbhPd-Vkp1u2FBcIkw610G5H-WytNQWri4W_6rzrtS7MmVpM/h27/bg_mega_hdr.png) no-repeat 0 0; text-transform: uppercase; font-weight: bold; color: #fff; text-shadow: 1px 1px 1px #333;} .orange ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {color: #000; text-shadow: none;} .orange ul.mega-menu .sub li.mega-hdr li a {padding: 4px 5px 4px 20px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvAa6sLPxCpXJYCJU_jTVSCvKqtpf0e_vq8J17ZTAd5M-fzaOeICtongcJKiK9QYhW19QcgLOlUhEBDmktkphmZ9T-DmXkh5lLFhQDO6CCkjMhLesl2Zh6tSyoC8Aq7g4zEMyGoxrJeIA/h120/arrow_off.png) no-repeat 5px 8px; font-weight: normal;} .orange ul.mega-menu .sub li.mega-hdr li a:hover {color: #a32403; background: #efefef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgao-tZ8MzgawJWclCgX-lF0CnKzsjr0oVkOwVdatsgUtZhZUfoN7FeYIiV5Ng4X0r_cvUOX_9r3t_gHyfqDq9gpK9QQ-0k28K9zAUJpm-WUw98nWjTLO-4syoptEVpsN2SUgiK7IzavT0/h120/arrow_on.png) no-repeat 5px 8px;} .orange ul.mega-menu .sub ul li {padding-right: 0;} .orange ul.mega-menu li .sub-container.non-mega .sub {padding: 20px 20px 20px 0;} .orange ul.mega-menu li .sub-container.non-mega li {padding: 0; width: 190px; margin: 0;} .orange ul.mega-menu li .sub-container.non-mega li a {padding: 7px 5px 7px 22px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvAa6sLPxCpXJYCJU_jTVSCvKqtpf0e_vq8J17ZTAd5M-fzaOeICtongcJKiK9QYhW19QcgLOlUhEBDmktkphmZ9T-DmXkh5lLFhQDO6CCkjMhLesl2Zh6tSyoC8Aq7g4zEMyGoxrJeIA/h120/arrow_off.png) no-repeat 7px 10px;} .orange ul.mega-menu li .sub-container.non-mega li a:hover {color: #a32403; background: #efefef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgao-tZ8MzgawJWclCgX-lF0CnKzsjr0oVkOwVdatsgUtZhZUfoN7FeYIiV5Ng4X0r_cvUOX_9r3t_gHyfqDq9gpK9QQ-0k28K9zAUJpm-WUw98nWjTLO-4syoptEVpsN2SUgiK7IzavT0/h120/arrow_on.png) no-repeat 7px 10px;}

jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/hovermegamenu.js'></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/dcmegamenu.js'></script>
<script type="text/javascript">
$(document).ready(function($){
    $('#mega-menu-5').dcMegaMenu({
        rowItems: '4',
        speed: 'fast',
        effect: 'fade'
    });
});
</script>

HTML:

<div class="orange">
<ul id="mega-menu-5" class="mega-menu">
    <li><a href="http://mas-andes.blogspot.com">Home</a></li>
    <li><a href="http://mas-andes.blogspot.com">Menu 1</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 8</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 4</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 14</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 15</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 5</a>
              <ul>
                <li><a href="http://mas-andes.blogspot.com">Link 16</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 17</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 18</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 19</a></li>
              </ul>
            </li>
        </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Menu 2</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>

    </ul>
</li>
    <li class="menu-item-129"><a href="http://mas-andes.blogspot.com">Judul 4</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
    </ul>
</li>
</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 3</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>

</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 4</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Judul  1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
    </ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Judul  2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul  3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
    </ul>
</li>
</ul>
</li>
</ul>
</div>

8. Red Style

• Home
• Menu 1
  • Judul 1
    • Link 1
    • Link 2
    • Link 3
  • Judul 2
    • Link 4
    • Link 5
    • Link 6
    • Link 7
    • Link 8
    • Link 9
  • Judul 3
    • Link 10
    • Link 11
    • Link 12
    • Link 13
  • Judul 4
    • Link 14
    • Link 15
  • Judul 5
    • Link 16
    • Link 17
    • Link 18
    • Link 19
• Menu 2
  • Judul 1
    • Link 1
    • Link 2
    • Link 3
  • Judul 2
    • Link 4
    • Link 5
    • Link 6
    • Link 7
  • Judul 3
    • Link 9
  • Judul 4
    • Link 10
    • Link 11
    • Link 12
    • Link 13
• Menu 3
  • Link 1
  • Link 2
• Menu 4
  • Judul 1
    • Link 1
    • Link 2
  • Judul 2
    • Link 3
  • Judul 3
    • Link 4
    • Link 5
    • Link 6

CSS:

.mega-menu ul, .mega-menu ul li {list-style: none;} .mega-menu ul {position: relative; padding: 0; margin: 0;} .mega-menu ul li ul {display: none;} .mega-menu .sub {display: none;} .mega-menu .sub ul {display: block;} .red {font: normal 13px Arial, sans-serif; line-height: 16px;} .red ul.mega-menu, .red ul.mega-menu, .red ul.mega-menu li {margin: 0; padding: 0; border: none;} .red ul.mega-menu {background: #8998a8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9kj1anodGh1SXnu8Unos8ED95qKNkI-kZ5NpmiYF3Pf36IlUzkguLZWO0ZTW0LHBpLv9kjx5G0mUv1cUDw2XJ8h7I8Uwsafb9J0TuyclPsx09_dNBcfeNy9yE1-IaF44coBKPzAErXk/h120/bg_red.png) repeat-x 0 -80px; width: 100%; height: 40px; border-right: 1px solid #E41E1F; border-left: 1px solid #E41E1F; position: relative;} .red ul.mega-menu li {float: left; margin: 0; padding: 0; font-size: 13px; font-weight: bold;} .red ul.mega-menu li a {float: left; display: block; color: #fff; padding: 12px 38px 12px 25px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9kj1anodGh1SXnu8Unos8ED95qKNkI-kZ5NpmiYF3Pf36IlUzkguLZWO0ZTW0LHBpLv9kjx5G0mUv1cUDw2XJ8h7I8Uwsafb9J0TuyclPsx09_dNBcfeNy9yE1-IaF44coBKPzAErXk/h120/bg_red.png) repeat-x 100% 0; text-shadow: 1px 1px 1px #000; text-decoration: none;} .red ul.mega-menu li a.dc-mega {position: relative;} .red ul.mega-menu li a .dc-mega-icon {display: block; position: absolute; top: 18px; right: 15px; width: 8px; height: 6px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3J6Z-cuHJbatOd8oFNII1IGYaeT4xH2Yj4_rCOq5e8HYdel53GNUS0-YE250oMHn3-P-YSX4LjosXBE3Z0070nnNtTlGuc0vkQsjQBZPUldLbDkPXRLoTXnoSUgEJdPzFhZSCqO4V7GU/h120/arrow.png) no-repeat 0 0;} .red ul.mega-menu li.mega-hover a, .red ul.mega-menu li a:hover {background-position: 100% -40px; color: #000; text-shadow: none;} .red ul.mega-menu li.mega-hover a .dc-mega-icon {background-position: 0 100%;} .red ul.mega-menu li .sub-container {position: absolute; background: #fff; padding-left: 20px; margin-left: -3px; box-shadow: 1px 1px 5px #ca212a; border-radius: 0 0 5px 5px;} .red ul.mega-menu li .sub {padding: 20px 20px 20px 10px;} .red ul.mega-menu li .sub-container.mega .sub {padding: 20px 20px 10px 0;} .red ul.mega-menu li .sub .row {width: 100%; overflow: hidden; clear: both;} .red ul.mega-menu li .sub li {list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal;} .red ul.mega-menu li .sub li.mega-hdr {margin: 0 10px 10px 0; float: left;} .red ul.mega-menu li .sub li.mega-hdr.last {margin-right: 0;} .red ul.mega-menu li .sub a {background: none; border: none; text-shadow: none; color: #111; padding: 7px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em;} .red ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a {padding: 5px 5px 5px 15px; margin-bottom: 5px; background: #DB323A url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinfSKuHWWC2FRHC8SCHX6wrGlRPHJf0BDat_6fzbM2q43HuxUsG__CYdP7twPIBUJ67oR2tlRLLrN8TPHF8ShEb59hqOtsbhPd-Vkp1u2FBcIkw610G5H-WytNQWri4W_6rzrtS7MmVpM/h27/bg_mega_hdr.png) no-repeat 0 0; text-transform: uppercase; font-weight: bold; color: #fff; text-shadow: 1px 1px 1px #333;} .red ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {color: #000; text-shadow: none;} .red ul.mega-menu .sub li.mega-hdr li a {padding: 4px 5px 4px 20px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvAa6sLPxCpXJYCJU_jTVSCvKqtpf0e_vq8J17ZTAd5M-fzaOeICtongcJKiK9QYhW19QcgLOlUhEBDmktkphmZ9T-DmXkh5lLFhQDO6CCkjMhLesl2Zh6tSyoC8Aq7g4zEMyGoxrJeIA/h120/arrow_off.png) no-repeat 5px 8px; font-weight: normal;} .red ul.mega-menu .sub li.mega-hdr li a:hover {color: #a32403; background: #efefef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgao-tZ8MzgawJWclCgX-lF0CnKzsjr0oVkOwVdatsgUtZhZUfoN7FeYIiV5Ng4X0r_cvUOX_9r3t_gHyfqDq9gpK9QQ-0k28K9zAUJpm-WUw98nWjTLO-4syoptEVpsN2SUgiK7IzavT0/h120/arrow_on.png) no-repeat 5px 8px;} .red ul.mega-menu .sub ul li {padding-right: 0;} .red ul.mega-menu li .sub-container.non-mega .sub {padding: 20px 20px 20px 0;} .red ul.mega-menu li .sub-container.non-mega li {padding: 0; width: 190px; margin: 0;} .red ul.mega-menu li .sub-container.non-mega li a {padding: 7px 5px 7px 22px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvAa6sLPxCpXJYCJU_jTVSCvKqtpf0e_vq8J17ZTAd5M-fzaOeICtongcJKiK9QYhW19QcgLOlUhEBDmktkphmZ9T-DmXkh5lLFhQDO6CCkjMhLesl2Zh6tSyoC8Aq7g4zEMyGoxrJeIA/h120/arrow_off.png) no-repeat 7px 10px;} .red ul.mega-menu li .sub-container.non-mega li a:hover {color: #a32403; background: #efefef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgao-tZ8MzgawJWclCgX-lF0CnKzsjr0oVkOwVdatsgUtZhZUfoN7FeYIiV5Ng4X0r_cvUOX_9r3t_gHyfqDq9gpK9QQ-0k28K9zAUJpm-WUw98nWjTLO-4syoptEVpsN2SUgiK7IzavT0/h120/arrow_on.png) no-repeat 7px 10px;}

jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/hovermegamenu.js'></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/dcmegamenu.js'></script>
<script type="text/javascript">
$(document).ready(function($){
    $('#mega-menu-6').dcMegaMenu({
        rowItems: '3',
        speed: 'slow',
        effect: 'slide'
    });
});
</script>

HTML:

<div class="red">
<ul id="mega-menu-6" class="mega-menu">
    <li><a href="http://mas-andes.blogspot.com">Home</a></li>
    <li><a href="http://mas-andes.blogspot.com">Menu 1</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 8</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 4</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 14</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 15</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 5</a>
              <ul>
                <li><a href="http://mas-andes.blogspot.com">Link 16</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 17</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 18</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 19</a></li>
              </ul>
            </li>
        </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Menu 2</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>

    </ul>
</li>
    <li class="menu-item-129"><a href="http://mas-andes.blogspot.com">Judul 4</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
    </ul>
</li>
</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 3</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>

</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 4</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Judul  1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
    </ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Judul  2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul  3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
    </ul>
</li>
</ul>
</li>
</ul>
</div>

Tidak semua template blog sama persis, jadi apabila kurang sesuai dalam menaruh markup HTML bisa disesuaikan sendiri dengan menu di blog yang sudah ada sebelumnya.