JONS STYLE : Drop-down

Tampilkan postingan dengan label Drop-down. Tampilkan semua postingan

7 Agustus 2010

Use Drop-down Menu For Blogger's Labels

If you use blogger (blogspot.com) and have a lot of labels, then you really need to display your labels in a drop-down menu. This option is not default in Blogger, but easily achievable.

To customize your labels widget in Blogger to be displayed as a drop-down menu:

1. First, make a backup just in case. To do so, go to your Blogger Dashboard, Layout > Edit HTML > Download Full Template

2. Go to Layout > Edit HTML in your Blogger dashboard. This time, do notcheck the "Expand Widget Templates" checkbox!
3. Search for the following code (it doesn't have to be exactly like this, for my blog for instance, Label1 is called Label12):

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

4. Replace the above code, with this:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<br/>



<select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>

<option>Labels</option>

<b:loop values='data:labels' var='label'>

<option expr:value='data:label.url'><data:label.name/>

</option>

</b:loop>

</select>



<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

Now click Save Template

29 Mei 2010

CARA MEMBUAT MENU HORIZONTAL DROP-DOWN (MHD2) DI BLOGGER....

Contoh

....Posting ini atas permintaan dari sobat Putek... " oia gimana caranya buat biar menu di navbar bisa ada dua atau tiga menu.maksudnya dropdown menu plis ya bung ?" ...Widget MHD2 ini termasuk salah satu yang cukup rumit untuk dibahas...Btw setelah beberapa kali saya mencoba membuat sendiri MHD2 ini... sampai merumuskan kode script yang kurang lebih hampir sempurnalah (..menurut saya sih..).. karena telah banyak kode yang saya utak-atik di script MHD2 ini agar sesuai dengan keinginan imajinasi saya....dengan tampilan MHD2 yang Minimalis tapi Modern dan Cool...dan postingan inilah yang akan memuat hasil akhir dari Script MHD2 ala Andi Wong... Ecaknyo... Hehe.. :D ( Narsis.com... )

Jadi... Baca & Pahami langkah-langkah cara pembuatan MHD2-nya berikut ini :

1. Login ke Blogger > Rancangan > Edit HTML > Edit Template ( centang saja expand template widget )...

2. Dan seperti biasa Copy-Paste dahulu seluruh kode HTML template widget blog kamu ke dalam Notepad dan simpan... untuk jaga-jaga..kan tinggal copy-paste saja lagi agar template blognya kembali seperti semula..

3. LANGKAH PERTAMA .... Cari (CTRL+F) kode " ]]></b:skin> " lalu Copy script dibawah ini dan Paste-kan diatasnya :

/* MHD2 */ #bg_nav { background: #FCF526; /* kuning_warna background dasar */ width: 760px; /* Panjang dari kotak menu dasar */ height: 29px; font-size: 11px; font-family: Arial, Tahoma, Verdana; color: #000000; font-weight: 28px; margin: 0px auto 0px; padding: 0px; overflow: hidden; -moz-border-radius:0px; } #bg_nav a, #bg_nav a:visited { /* bagian script yang ini dibiarkan saja ya */ color: #ffffff; font-size: 11px; text-decoration: none; text-transform: uppercase; padding: 0px 0px 0px 0px; } #bg_nav a:hover { /* bagian script yang ini dibiarkan saja ya */ color: #ffffff; text-decoration: underline; padding: 0px 0px 0px 0px; } #navleft { width: 760px; color: #FFFFFF; float: left; margin: 0px; padding: 0px; } #nav { margin: 0px; padding: 0px; list-style: none; } #nav ul { margin: 0px; padding: 0px; list-style: none; } #nav a, #nav a:visited { /* Menu Utama */ background: #FCF526; /*Kuning_warna latar menu utama */ color: #053EFA; /*BIRU_warna teks menu utama */ text-shadow: 4px 4px 4px #aaa; /* Memberi efek bayangan di teks */ display: block; height: auto; width: auto; font-weight: bold; margin: 0px auto 0px; -moz-border-radius:0px; padding: 8px 15px 8px 15px; opacity: 0.7;filter:alpha(opacity=70);zoom:1; } #nav a:hover { background: #F7F68F; /*Kuning cerah_warna hover di Menu Utama*/ color: #3854F2; /* Biru_warna teks di menu drop-down n teks hover MU*/ margin: 0px auto 0px; font-weight: bold; padding: 8px 15px 8px 15px; text-decoration: none; -moz-border-radius:0px; opacity: 0.7;filter:alpha(opacity=70);zoom:1; } #nav li { float: left; margin: 0px; padding: 0px; } #nav li li { float: left; margin: 0px; padding: 0px; width: 300px; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #F7F68F; /*kuning cerah_warna latar menu drop-down*/ width: 200px; float: none; margin: 0px; padding: 7px 30px 7px 10px;000000; } #nav li li a:hover, #nav li li a:active { background: #F8FABB; /*kuning cerah2_warna hover menu drop-down*/ padding: 7px 30px 7px 10px; } #nav li ul { position: absolute; width: 10em; left: -999em; } #nav li:hover ul { left: auto; display: block; } #nav li:hover ul, #nav li.sfhover ul { left: auto; } #nav li ul a { width: 100px; } #nav li ul ul { position: absolute; margin: -30% 0 0 95%; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left:-999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left:auto; } #nav li li li.sfhover ul { left:auto; } #nav li:hover, #nav li.sfhover { position:static; } /* eleman dibawah header */ #under_header{ margin:-20px 0 25px 0px; padding:1%; height;0px; width:98%; } ]]></b:skin>

Contohnya seperti dibawah ini.......

/* MHD2 */

 #bg_nav {

 background: #FCF526; /* kuning_warna background dasar */

 width: 760px; /* Panjang dari kotak menu dasar */

 height: 29px;

 font-size: 11px;

 font-family: Arial, Tahoma, Verdana;

 color: #000000;

 font-weight: 28px;

 margin: 0px auto 0px;

 padding: 0px;

 overflow: hidden;

 -moz-border-radius:0px;

 }



#bg_nav a, #bg_nav a:visited { /* bagian script yang ini dibiarkan saja ya */

 color: #ffffff;

 font-size: 11px;

 text-decoration: none;

 text-transform: uppercase;

 padding: 0px 0px 0px 0px;

 }

 #bg_nav a:hover { /* bagian script yang ini dibiarkan saja ya */

 color: #ffffff;

 text-decoration: underline;

 padding: 0px 0px 0px 0px;

 }

 #navleft {

 width: 760px;

 color: #FFFFFF;

 float: left;

 margin: 0px;

 padding: 0px;

 }



 #nav {

 margin: 0px;

 padding: 0px;

 list-style: none;

 }

 #nav ul {

 margin: 0px;

 padding: 0px;

 list-style: none;

 }

 #nav a, #nav a:visited { /* Menu Utama */

 background: #FCF526; /*Kuning_warna latar menu utama */

 color: #053EFA; /*BIRU_warna teks menu utama */

 text-shadow: 4px 4px 4px #aaa; /* Memberi efek bayangan di teks */

 display: block;

 height: auto;

 width: auto;

 font-weight: bold;

 margin: 0px auto 0px;

 -moz-border-radius:0px;

 padding: 8px 15px 8px 15px;

 opacity: 0.7;filter:alpha(opacity=70);zoom:1;

 }

 #nav a:hover {

 background: #F7F68F; /*Kuning cerah_warna hover di Menu Utama*/

 color: #3854F2; /* Biru_warna teks di menu drop-down n teks hover MU*/

 margin: 0px auto 0px;

 font-weight: bold;

 padding: 8px 15px 8px 15px;

 text-decoration: none;

 -moz-border-radius:0px;

 opacity: 0.7;filter:alpha(opacity=70);zoom:1;

 }

 #nav li {

 float: left;

 margin: 0px;

 padding: 0px;

 }

 #nav li li {

 float: left;

 margin: 0px;

 padding: 0px;

 width: 300px;

 }

 #nav li li a, #nav li li a:link, #nav li li a:visited {

 background: #F7F68F; /*kuning cerah_warna latar menu drop-down*/

 width: 200px;

 float: none;

 margin: 0px;

 padding: 7px 30px 7px 10px;000000;

 }

 #nav li li a:hover, #nav li li a:active {

 background: #F8FABB; /*kuning cerah2_warna hover menu drop-down*/

 padding: 7px 30px 7px 10px;

 }



 #nav li ul {

 position: absolute;

 width: 10em;

 left: -999em;

 }

 #nav li:hover ul {

 left: auto;

 display: block;

 }

 #nav li:hover ul, #nav li.sfhover ul {

 left: auto;

 }

 #nav li ul a {

 width: 100px;

 }

 #nav li ul ul {

 position: absolute;

 margin: -30% 0 0 95%;

 }

 #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

 left:-999em;

 }

 #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

 left:auto;

 }

 #nav li li li.sfhover ul {

 left:auto;

 }

 #nav li:hover, #nav li.sfhover {

 position:static;

 }

/* eleman dibawah header */
#under_header{
margin:-20px 0 25px 0px;
padding:1%;
height;0px;
width:98%;
}

]]></b:skin>

PAHAMI & PERHATIKAN SCRIPT INTI MHD2 DIATAS :

>> Untuk script diatas ini kalau tidak begitu memahami jangan terlalu banyak diubah2 ya.. biarkan saja seperti MHD2 punya saya diatas...jadi copas saja...takutnya nanti error loh..

> Hitam = Yang ada di bagian bg_nav dan navleft... ini untuk mengatur panjang menu horizontal..harus sinkronisasi ya...silahkan diatur sesuaikan dengan blognya...
> Hijau = Warna Latar menu.... bisa diubah & disesuaikan dengan keinginan...
> Pink = Warna hover menu ketika menu di mouseover... bisa diubah & disesuaikan dengan keinginan...
> Orange = Warna teks menu utama... bisa diubah & disesuaikan dengan keinginan...
> Biru = Warna hover ketika teks di mouseover.... bisa diubah & disesuaikan dengan keinginan...

4. LANGKAH KEDUA.... Cari (CTRL+F) kode " <div id='header-wrapper'> " lalu Copy script dibawah ini setelah kode " </div> " :

..Atau ( Jika tidak ada kode header-wrapper ).. Cari (CTRL+F) kode " <body> " lalu Copy script dibawah ini setelahnya :

<div id='under_header'> <b:section class='header' id='underheader' preferred='yes'/> <div id='bg_nav'> <div id='navleft'> <div id='nav'> <ul> <li><a href='http://jonsstyleofblogger.blogspot.com/'> Home</a></li> <li><a href='####' target='_blank'> Blogging</a> <ul> <li><a href='http://www.blogger.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Login ke blogger</a></li> <li><a href='http://www.blogger.com/profile/07038241031299325975' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> blogger profil</a></li> <li><a href='http://www5.shoutmix.com/?pumitabusan' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Blog Walking</a></li> </ul></li> <li><a href='#' target='_blank'> Demo</a> <ul> <li><a href='http://eksperimen284.blogspot.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> blog eksperimen284</a></li> </ul></li> <li><a href='URL tujuan utk menu 2'> ALAT</a> <ul> <li><a href='http://www.colorpicker.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> color picker</a></li> <li><a href='http://centricle.com/tools/html-entities/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Encode/Decode HTML Entities</a></li> <li><a href='http://www.iconfinder.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Icon Finder</a></li> <li><a href='http://translate.google.co.id/#' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Google Translator</a></li> <li><a href='http://myspace.laymark.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Smiley Emotion</a></li> <li><a href='http://sites.google.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Google Site</a></li> </ul></li> <li><a href='#' target='_blank'> Download/Upload</a> <ul> <li><a href='http://www.filehippo.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> FileHippo</a></li> <li><a href='http://www.ziddu.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> ziddu</a></li> </ul></li> <li><a href='#' target='_blank'> <blink>MAU DUIT</blink></a> <ul> <li><a href='http://www.neobux.com/?r=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Neobux</a></li> <li><a href='http://www.idr-clickit.com/register.php/wong284.html' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> idr-clickit</a></li> <li><a href='http://www.donkeymails.com/pages/index.php?refid=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> DonkeyMails</a></li> <li><a href='https://www.vipclix.com/?ref=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> vipclix</a></li> </ul></li> <li><a href='http://jonsstyleofblogger.blogspot.com/2010/08/cara-membuat-menu-horizontal-drop-down.html' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow003.gif'/> Buat Menu drop-down seperti ini</a></li> </ul> </div> </div> </div> </div>

....Paste-kan persis seperti Contoh dibawah ini :

<div id='under_header'>
<b:section class='header' id='underheader' preferred='yes'/>
<div id='bg_nav'>

 <div id='navleft'>
 <div id='nav'>

 <ul>

 <li><a href='http://jonsstyleofblogger.blogspot.com//'> Home</a></li>

 <li><a href='####' target='_blank'> Blogging</a>

 <ul>

 <li><a href='http://www.blogger.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Login ke blogger</a></li>

 <li><a href='http://www.blogger.com/profile/07038241031299325975' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> blogger profil</a></li>

<li><a href='http://www5.shoutmix.com/?pumitabusan' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Blog Walking</a></li>

 </ul></li>

 <li><a href='#' target='_blank'> Demo</a>

 <ul>

 <li><a href='http://the--dot--blog.blogspot.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> blog eksperimen284</a></li>

 </ul></li>

 <li><a href='URL tujuan utk menu 2'> ALAT</a>

 <ul>

 <li><a href='http://www.colorpicker.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> color picker</a></li>

 <li><a href='http://centricle.com/tools/html-entities/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Encode/Decode HTML Entities</a></li>

<li><a href='http://www.iconfinder.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Icon Finder</a></li>

<li><a href='http://translate.google.co.id/#' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Google Translator</a></li>

 <li><a href='http://myspace.laymark.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Smiley Emotion</a></li>

<li><a href='http://sites.google.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Google Site</a></li>

 </ul></li>



 <li><a href='#' target='_blank'> Download/Upload</a>

 <ul>

 <li><a href='http://www.filehippo.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> FileHippo</a></li>

 <li><a href='http://www.ziddu.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> ziddu</a></li>

 </ul></li>

 <li><a href='#' target='_blank'> <blink>JON'S</blink></a>

 <ul>

 <li><a href='http://www.neobux.com/?r=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Neobux</a></li>

 <li><a href='http://www.idr-clickit.com/register.php/wong284.html' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> idr-clickit</a></li>

 <li><a href='http://www.donkeymails.com/pages/index.php?refid=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> DonkeyMails</a></li>

<li><a href='https://www.vipclix.com/?ref=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> vipclix</a></li>

 </ul></li>
 <li><a href='http://jonsstyleofblogger.blogspot.com/2010/08/cara-membuat-menu-horizontal-drop-down.html' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow003.gif'/> Buat Menu drop-down seperti ini</a></li>

</ul>

 </div>

 </div>
</div>

</div>

PAHAMI & PERHATIKAN SCRIPT ISI MHD2 DIATAS :

>> kalau kamu telah mengerti susunan menu drop-down diatas ini.... maka kamu akan bisa menambah maupun mengurangi menu drop-down nya... jadi pelajari dan pahami dulu...

> Hitam = Gantilah nama menu-menu nya sesuai keinginan...
> Biru = Ganti alamat URL-nya sesuaikan dengan Nama Menu yang kamu cantumkan...

5. Jika telah sesuai dengan langkah-langkah diatas... sudah kamu edit isi menu-nya sesuai keinginan kamu.. lalu Simpan & Refresh-lah dan lihat hasilnya....

.... Pahami benar2 Script MHD2 ini... .

Tutorial blogging lainnya...

20 Mei 2010

Penerapan Dropdown Menu jQuery di Blogger Template

Demo

Apabila kita ingin memberikan sedikit effect pada Menu Navigasi seperti Effect dropdown dengan jquery, "Create a multilevel Dropdown menu with CSS and improve it via jQuery" adalah salah satu pilihan menarik, yang dikembangkan oleh kriesi.at.

Saya mencoba menerapkan Menu Dropdown dengan jQuery ini di blogger template, hasil effect-nya cukup memuaskan (lihat demo dropdown menu).

Penerapan "Dropdown Menu - jQuery" di "Blogger Template"

1. Masukan script jQuery berikut diatas </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

:: Catatan: Jika anda telah memiliki script jQuery di template anda, maka script ini tidak diperlukan lagi.

2. Masukan kode Javascript berikut dibawah script jQuery tadi:

<script type='text/javascript'>
function mainmenu(){
$(&quot; #nav ul &quot;).css({display: &quot;none&quot;}); // Opera Fix
$(&quot; #nav li&quot;).hover(function(){
$(this).find(&#39;ul:first&#39;).css({visibility: &quot;visible&quot;,display: &quot;none&quot;}).show(400);
},function(){
$(this).find(&#39;ul:first&#39;).css({visibility: &quot;hidden&quot;});
});
}
$(document).ready(function(){    
mainmenu();
});
</script>
<!-- end dropdown menu-->

3. Masukan kode HTML berikut sebelum <div id='header-wrapper'> (penempatan lainnya bisa juga dibawah header):

<!-- Menu HTML -->
<ul id='nav'>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>jQuery &#187;</a>
<ul>
<li><a href='#'>Tutorial &#187;</a>
<ul>
<li><a href='http://deconstructioncode.blogspot.com/2009/04/back-to-top-dengan-smoothscroll-jquery.html'>Back to Top</a></li>
<li><a href='http://deconstructioncode.blogspot.com/2009/07/link-nudging-di-blogger-template.html'>Link Nudging</a></li>
</ul>
</li>
<li><a href='#'>Plugin</a></li>
<li><a href='#'>News</a></li>
</ul>
</li> <div class='clear'/>
</ul>

:: Catatan: isi dari konten tiap menu ini perlu anda rubah sesuai yang anda inginkan.

4. Masukan kode CSS berikut:

/* menu
*/
#nav{
background-color: #eee;
border: 1px solid #cccccc;
}
#nav, #nav ul{
width: 760px;
margin:0px auto;
padding:5px 0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
text-align:left;
}

#nav a{
display:block;
padding:2px 10px;
border:1px solid #212421;
color:#fff;
text-decoration:none;
background-color:#212421;
}

#nav a:hover{
background-color:#333;
}

#nav li{
float:left;
position:relative;
padding:0px 5px;
}

#nav ul {
position:absolute;
display:none;
width:12em;
top:100%;
left:0;
}

#nav li ul a{
width:12em;
height:auto;
float:left;
}

#nav ul ul{
top:auto;
}

#nav li ul ul {
left:13em;
margin:0px 0 0 10px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}

:: Catatan: kode css ini perlu anda sesuaikan dengan karakter template anda.

5. Save template, selesai.

16 April 2010

Membuat Menu Dropdown

Setelah Bagus Blog membuat postingan tentang Tips dan Trik Membuat Menu Blogroll Dropdown dan Blogroll Menu Dropdown Versi 2 pada beberapa waktu yang lalu sekarang saya mau berbagi lagi dengan agan tentang Membuat Menu Dropdown dengan berbagai jenis, nah bagi yang baru belajar ngeblog mungkin ini sangat berharga, simak tutorial ngeblog di bawah Cara Buat Menu Dropdown Standar

<form name=”jump”> <select name=”menu” onChange=”location=document.jump.menu.options[document.jump.menu.selectedIndex].value;” value=”GO”> <option value=“http://alamat-url1.com”>Menu1</option> <option value=“http://alamat-url2.com”>Menu2</option> <option value=“http://alamat-url3.com“>Menu3</option> </select> </form>

Cara Buat Menu Dropdown dengan Tombol

<form name=”jump”> <select name=”menu”> <option value=“http://alamat-url1.com”>Menu1</option> <option value=“http://alamat-url2.com”>Menu2</option> <option value=“http://alamat-url3.com”>Menu3</option> </select> <input type=”button” onClick=”location=document.jump.menu.options[document.jump.menu.selectedIndex].value;” value=”OK”> </form>

Cara Buat Menu Dropdown dengan Tombol Gambar

<form name=”jump”> <script> function jumpMenu(){ location=document.jump.menu.options[document.jump.menu.selectedIndex].value; } </script> <select name=”menu”> <option value=“http://alamat-url1.com”>Menu1</option> <option value=“http://alamat-url2.com“>Menu2</option> <option value=“http://alamat-url3.com”>Menu3</option> </select> <a href=”Javascript:jumpMenu()”><IMG SRC=”http://oom.blog.googlepages.com/Go.gif” border=0></a> </form>

Cara Buat Menu Dropdown Supaya link tidak keluar ke halaman baru

<select onChange=”document.location.href=this.options[this.selectedIndex].value;”><option value=”0″ selected>Arsip Blog</option><option value=”Links 1“>Text 1</option><option value=”Links 2“>Text 2</option> </select>

Ganti Yang berwarna biru dengan link blog agan, dan berwarna merah nama link agan Semoga bermanfaat ya….selamat belajar

20 Maret 2010

Cara Membuat Drop Down Menu dengan Javascript

Drop down menu tetap menjadi satu menu terfavorit hingga saat ini

karena sangat effisien akan tempat dan mampu memuat atau dikembangkan menjadi anak menu hingga jumlah yang tidak terbatas. Disamping sangat effektif ruang, banyak inovasi yang dikembangkan dapat menciptakan drop down menu dengan penampilan menarik tanpa harus dipenuhi dengan javascript yang terlalu njelimet. Di bawah adalah salah satu dd menu yang di padukan dengan animasi gif yang membuat menu ini tampil sangat "keren" dan bergaya. (KLIK untuk melihat gambar dalam ukuran besar).

Lakukan penyimpanan javascript dan css di bagian head di atas KODE ]]></b:skin> atau javascript di bawah <head> sedang css di atas ]]></b:skin>

Javascript :

<script type="text/javascript">
var timeout = 100;
var closetimer = 0;
var ddmenuitem = 0;
function GRopen(id)
{ GRcancelclosetime(); if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible'; }
function GRclose() { if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; }
function GRclosetime() { closetimer = window.setTimeout(GRclose, timeout); }
function GRcancelclosetime() { if(closetimer) { window.clearTimeout(closetimer);
closetimer = null; } } document.onclick = GRclose;
</script>

KODE CSS :

#bgsGR_sddmenu {
margin: 0;
padding: 0;
z-index: 30;
}
#bgsGR_sddmenu li {
background: #0000FF url(http://i45.tinypic.com/2ep4m1h.gif);
margin: 0; border-bottom: 2px solid #999999; border-top: 2px solid #999999;
padding: 0;
list-style: none;
float: left;
font-size: 14px; font-family: Cursive; font-weight: bold;
}
#bgsGR_sddmenu li a {
display: block;
margin: 0 1px 0 0;
padding: 7px 8px;
width: auto;
background: #FFFF33 url(http://i50.tinypic.com/1z3c5tx.png); /*bg tampilan */
color: #FFF;
text-align: center;
text-decoration: none;
}
#bgsGR_sddmenu li a:hover {
background: url(http://i49.tinypic.com/1079ef7.gif); color: #FF0000;
}
#bgsGR_sddmenu div {
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: transparent;
border: 1px solid #5970B2;
}
#bgsGR_sddmenu div a {
border-bottom: 3px solid #999999;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
top: 15px;
z-index:100;
position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
color: #2875DE;
font-size: 12px; font-family: verdana; font-weight:bold;
}
#bgsGR_sddmenu div a:hover {
background: #49A3FF url(http://i45.tinypic.com/2ep4m1h.gif);
color: #FFF;
}

Contoh HTML untuk menu :

<ul id="bgsGR_sddmenu">
<li><a href="#" onmouseover="GRopen('GR1')" onmouseout="GRclosetime()">Nama Pulau</a>
<div id="GR1" onmouseover="GRcancelclosetime()" onmouseout="GRclosetime()">
<a href="#">Sumatera</a>
<a href="#">Kalimantan</a>
<a href="#">Bali</a>
<a href="#">Lombok</a>
<a href="#">Sulawesi</a>
<a href="#">Jawa</a>
<a href="#">Nusakambangan</a>
<a href="#">Madura</a>
</div>
</li>
<li><a href="#" onmouseover="GRopen('GR2')" onmouseout="GRclosetime()">Nama Propinsi</a>

<div id="GR2" onmouseover="GRcancelclosetime()" onmouseout="GRclosetime()">
<a href="#">Kepulauan Riau</a>
<a href="#">Papua Barat</a>
<a href="#">Sulawesi Tenggara</a>
<a href="#">Nusa Tenggara Timur</a>
<a href="#">Jawa Timur</a>
<a href="#">Jogjakarta</a>
<a href="#">Daerah Istimewa Aceh D</a>
</div>
</li>

<li><a href="#" onmouseover="GRopen('GR3')" onmouseout="GRclosetime()">Nama Kabupaten/Kota</a>
<div id="GR3" onmouseover="GRcancelclosetime()" onmouseout="GRclosetime()">
<a href="#">Badung</a>
<a href="#">Kutai Kertanegara</a>
<a href="#">Magelang</a>
<a href="#">Mojokerto</a>
<a href="#">Cirebon</a>
<a href="#">Solok</a>
</div>
</li>
<li><a href="#" onmouseover="GRopen('GR4')" onmouseout="GRclosetime()">Nama Orang</a>

<div id="GR4" onmouseover="GRcancelclosetime()" onmouseout="GRclosetime()">
<a href="#">Kartodimejo</a>
<a href="#">Jambul</a>
<a href="#">Tlepong</a>
<a href="#">Nasution</a>
<a href="#">Ngabdul</a>
<a href="#">Tecuari</a>
</div>
</li>
<li><a href="#" onmouseover="GRopen('GR5')" onmouseout="GRclosetime()">Merk Mobil</a>
<div id="GR5" onmouseover="GRcancelclosetime()" onmouseout="GRclosetime()">

<a href="#">Toyota</a>
<a href="#">Honda</a>
<a href="#">Lamborgini</a>
<a href="#">Cadilac</a>
<a href="#">Izuzu</a>
<a href="#">Mercedes Benz</a>
</div>
</li>
</ul>
<div style="clear:both"></div>

<a href="#">Sumatera</a>

1. Tanda # adalah URL untuk Link Menu.
2. Sumatera adalah contoh nama menu.

Bentuk Sususnan Pemasangan Kode CSS dan xHTML

<html>
  <head>
  -----------
  Javascript
  -----------
  |
  |
  |
  -----------
KODE CSS

]]></b:skin>
</head>
<body>

Elemen HTML
</body>
</html>

3. Anda bisa juga memasang elemen html di bagian Elemen Laman -->

Tambah Gadget --> Javascript/HTML.

JONS STYLE

7 Agustus 2010

Use Drop-down Menu For Blogger's Labels

29 Mei 2010

CARA MEMBUAT MENU HORIZONTAL DROP-DOWN (MHD2) DI BLOGGER....

Tutorial blogging lainnya...

20 Mei 2010

Penerapan Dropdown Menu jQuery di Blogger Template

Penerapan "Dropdown Menu - jQuery" di "Blogger Template"

16 April 2010

Membuat Menu Dropdown

20 Maret 2010

Cara Membuat Drop Down Menu dengan Javascript

LOGIN

Facebook

Site Info

Supported by

Blog Archive

Get Money

About me