ingin membuat menu seperti di atas?? caranya tidak terlalu susah... ikuti langkah langkah berikut :
1. login blogger --> masuk ke Rancangan --> Edit Html --> cari kode <head> dan sisipkan kode berikut dibawahnya :
Code :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jkmegamenu.css" />
<script type="text/javascript" src="jkmegamenu.js">
/***********************************************
* jQuery Mega Menu- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
//jkmegamenu.definemenu("anchorid", "menuid", "mouseover|click")
jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")
</script>2. lalu ganti src script di atas
- yang warna hijau ganti dengan kode url berikut : http://www.javascriptkit.com/script/script2/jkmegamenu.css
-yang warna kuning di ganti dengan url berikut : http://www.javascriptkit.com/script/script2/jkmegamenu.js
3. setelah itu simpan dan kembali ke tatak letak
4. tambah widget baru javascript/html dan masukan kode berikut :
Code :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.javascriptkit.com/script/script2/jkmegamenu.js">
/***********************************************
* jQuery Mega Menu- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
//jkmegamenu.definemenu("anchorid", "menuid", "mouseover|click")
jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")
</script>
<!--Mega Menu Anchor-->
<a href="http://www.longfield.co.nr" id="megaanchor">MENU</a>
<!--Mega Drop Down Menu HTML. Retain given CSS classes-->
<div id="megamenu1" class="megamenu">
<div class="column">
<h3>CATEGORIES</h3>
<ul>
<li><a href="http://unregizter.blogspot.com/search/label/Asian">Asian</a></li>
<li><a href="http://unregizter.blogspot.com/search/label/Cheat%20Xshot" >Cheat</a></li>
<li><a href="http://unregizter.blogspot.com/search/label/Facebook" >Facebook trik</a></li>
<li><a href="http://unregizter.blogspot.com/search/label/Hacking">Hacking</a></li>
<li><a href="http://unregizter.blogspot.com/search/label/MOVIES">Holliwood</a></li>
<li><a href="http://unregizter.blogspot.com/search/label/Stupid%20Posting">Stupid Posting</a></li>
<li><a href="http://unregizter.blogspot.com/search/label/TIPS%20BLOGGING" style="border-bottom-width: 0">Tips Blogging</a></li>
</ul>
</div>
<div class="column">
<h3>Asian</h3>
<ul>
<li><a href="http://unregizter.blogspot.com/2011/02/kung-fu-wing-chun.html">Kung Fu Wing chun</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/litre-of-tears.html">Litre Of Tears</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/20th-century-boyschapter2.html">20th-century-boyschapterseason 2</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/20th-century-boys-chapter-i-epi-1-33.html">20th-century-boyschapterseason Season1</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/yeh-salii-zindagi-2011.html">Yeh Salii Zindagi</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/secret_05.html">Secret</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/beck_05.html">BECK</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/detective-conan.html">Detective Conan 1</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/temptation-of-wolves.html">Templation of Wolves</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/my-sassy-girl.html">My Sassy Girl</a></li>
</ul>
</div>
<div class="column">
<h3>Cheat Xshot</h3>
<ul>
<li><a href="http://unregizter.blogspot.com/2011/02/cheat-xshot-mat-automatum.html">Mat Automatum</a></li>
</ul>
</div>
<br style="clear: left" /> <!--Break after 3rd column. Move this if desired-->
<div class="column">
<h3>TIPS FACEBOOK</h3>
<ul>
<li><a href="http://unregizter.blogspot.com/2011/03/nonton-tv-on-di-facebook.html">Nonton Tv On di Fb</a></li>
<li><a href="http://unregizter.blogspot.com/2011/03/10-orang-pertama-yang-mendaftar-di.html">10 Orang Pertama Yang Mendaftar Facebook</a></li>
<li><a href="http://unregizter.blogspot.com/2011/03/most-stupid-facebook-status-ever.html">Status Facebook Gokil (english only)</a></li>
<li><a href="http://unregizter.blogspot.com/2011/03/ganti-warna-facebook-dalam-hitungan.html">Ganti Warna FB dalam 5 Detik</a></li>
</ul>
<li><a href="http://unregizter.blogspot.com/2011/03/mengetahui-alamat-facebook-yang-di.html">Melacak email FB yg Diprivasi</a>
</li></div>
<div class="column">
<h3>Hacking</h3>
<ul>
<li><a href="http://unregizter.blogspot.com/2011/03/deface-situs-sederhana.html">DEFACE SITUS DASAR</a></li>
<li><a href="http://unregizter.blogspot.com/2011/03/mengetahui-alamat-facebook-yang-di.html">Melihat Email FB yg Diprivasi</a></li>
<li><a href="http://unregizter.blogspot.com/2011/03/mozilalogger-keyloggernya-mozila.html">Mozila logger,Keylogger Khusus Mozila</a></li>
<li><a href="http://unregizter.blogspot.com/2011/03/otak-atik-billing-warnet.html">Hack Billing Warnet</a></li>
<li><a href="http://unregizter.blogspot.com/2011/03/cara-membuka-2-akun-fb-secara-bersamaan.html">Membuka 2 akun FB dalam Satu Browser</a></li>
<li><a href="http://unregizter.blogspot.com/2011/03/cara-sedot-rapidshare-dengan-rs.html">Hack Rapidshare</a></li>
<li><a href="http://unregizter.blogspot.com/2011/03/passwordfox-software-pengintai-password.html">PasswordFox,Software Pengintai Password</a></li>
<li><a href="http://unregizter.blogspot.com/2011/03/undeep-v6.html">Undeep V6</a></li>
<li><a href="http://unregizter.blogspot.com/2011/03/hack-license-key-idm.html">Hack IDM</a></li>
</ul>
</div>
<div class="column">
<h3>HOLLYWOOD</h3>
<ul>
<li><a href="http://unregizter.blogspot.com/2011/03/tron-legacy.html">Tron Legacy</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/date-released-30-april-2008-quality.html">My Mom's New Boyfriend</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/gunless.html">Gunless</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/pregnancy-pact_05.html">Pregnancy Pact</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/gullivers-travels_05.html">Gullivers Travels</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/resident_05.html">The Recident</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/zietgeist-moving-forward.html">ZIETGEIST : Moving Forwards</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/zebra-crossing_05.html">Zebra Crossing</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/haunting-of-molly-hartley_05.html">The Haunting Of Molly Hartley</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/chain-letter_05.html">Chain Letter</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/married-in-year_05.html">Married In A Year</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/heroes-season-iv.html">Heroes Season 4</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/heroes-season-iii.html">Heroes Season 3</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/heroes-season-ii.html">HEroes Season 2</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/heroes-season-i.html">Heroes Season 1</a></li>
</ul>
</div>
<br style="clear: left" /> <!--Break after 3rd column. Move this if desired-->
<div class="column">
<h3>Tips & Trik Blogging</h3>
<ul>
<li><a href="http://unregizter.blogspot.com/2011/03/hati-hati-blog-di-banned.html">Penyebab Blog Di Banned</a></li>
<li><a href="http://unregizter.blogspot.com/2011/03/27-tempat-submit-untuk-submit-blog.html">27 Tempat Submit Blog Gratis</a></li>
<li><a href="http://unregizter.blogspot.com/2011/03/trik-mencari-blogger-satu-kotakabupaten.html">Trik Mencari Blog Satu Kota/Kabupaten</a></li>
<li><a href="http://unregizter.blogspot.com/2011/03/membuat-menu-melayang-di-bawah-blog.html">Membuat Menu Melayang Di Bawah Blog</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/pasang-fasilitas-print-di-blog.html">Pasang Fasilitas Print Di Blog</a></li>
<li><a href="http://unregizter.blogspot.com/2011/03/membuat-pengunjung-blog-kamu-tahu-jika.html">Membuat Status Online Di blogger</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/membuat-modus-hemat-energi-di-blog.html">Membuat Modus Hemat Energy Di Blog</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/template-blogspot-buat-redirect-web.html">Membuat Redirect URL</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/membuat-slide-show-gambar-dengan-jquery.html">Membuat SlideShow Dengan Jquery Di Blog</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/mengkompress-file-ukuran-besar-menjadi.html">Memperkecil Ukuran File Dengan KGB Archive</a></li>
<li><a href="http://unregizter.blogspot.com/2011/02/cara-blokir-aplikasi-tertentu.html">Cari Aplikasi Tertentu Di Komputer</a></li>
</ul>
</div>
<div class="column">
<h3>Stupid Posting</h3>
<ul>
<li><a href="http://unregizter.blogspot.com/2011/03/wanita-cantik-membuat-juri-dan-penonton.html">Cewek Cantik Thailand Got Talent</a></li>
<li><a href="http://unregizter.blogspot.com/2011/03/cerita-lucu-di-fesbuk.html">Status Fesbuk Gokil</a></li>
<li><a href="http://unregizter.blogspot.com/2011/03/trik-sulap-google.html">Trik Sulap Google</a></li>
<li><a href="http://unregizter.blogspot.com/2011/03/most-stupid-facebook-status-ever.html">Status Facebook Gokil (english only)</a></li>
</ul>
</div>
<div class="column">
<h3>News Related</h3>
<ul>
<li><a href="http://www.cnn.com/">CNN</a></li>
<li><a href="http://www.msnbc.com">MSNBC</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://news.bbc.co.uk">BBC News</a></li>
</ul>
</div>
<br style="clear: left" /> <!--Break after 3rd column. Move this if desired-->
<div class="column">
<h3>Technology</h3>
<ul>
<li><a href="http://www.news.com/">News.com</a></li>
<li><a href="http://www.slashdot.com">SlashDot</a></li>
<li><a href="http://www.digg.com">Digg</a></li>
<li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
</ul>
</div>
</div>5. dan link menunya silakan anda ubah sesuai dengan link menu anda.save dan liat hasilnya
selamat mencoba!!!
sumber : www.javascript.com
==================================================================
0 komentar:
Post a Comment