Dropdown Menu

Disini saya akan Posting bagaimana cara membuat Dropdown Menu..
copy paste kode berikut
request teman saya Arum :)
Enjoy It !!

<?php //start menu-menu drop dengan kategori, pages, archive, rss?> <?php //style css dibawah langsung saya masukan ke dalam tag body, sobat bisa memindakan style cssnya kedalam tag head //sobat juga bisa merubah style cssnya, sobat bisa mengedit semuanya atau ubah yang saya beri komentar // yang terpenting adalah ganti warnanya.red, lime, yellow, black, silakan ganti dengan warna lain! ?> <?php //mulai dari sini adalah style cssnya, sobat dapat pindakan ke atas </head> ?> <style type="text/css"> #menudrop{ background-color:lime; /* warna background utama , silakan ganti dengan value lain */ padding:0; margin-top:1px; /* jarak luar atas, silakan ganti dengan value lain */ margin-bottom:1px; /*jarak luar bawah , silakan ganti dengan value lain */ margin-left:1px; /* jarak luar kiri , silakan ganti dengan value lain */ margin-right:1px; /* jarak luar kanan , silakan ganti dengan value lain */ overflow:hidden; font-family:times; /* warna background utama , silakan ganti dengan value lain */ font-size:18px; /* ukuran font, silakan ganti dengan value lain */ font-weight:bold; /* ketebalan font, silakan ganti dengan value lain */ width:100%; /*lebar background belakang , silakan atur lebarnya */ -moz-border-radius:5px; /* fungsi ini untuk membuat lengkungan selebar 5px, hanya untuk firefox, silakan ganti dengan value lain */ text-transform:capitalize; } #menudrop a{text-decoration:none;} #menustyle{margin:0;padding:0;} #menustyle ul{ float:left; list-style:none; margin:0; padding:0;} #menustyle li{list-style:none; margin:0;padding:0;} #menustyle li a, #menustyle li a:link, #menustyle li a:visited{ background:yellow;/* warna background link, silakan ganti dengan value lain */ color:black;/* warna text link, silakan ganti dengan value lain */ display:block; padding:14px 10px 13px 8px;/*padding ini adalah jarak antara text dengan batas luar, silakan ganti dengan value lain */ -moz-border-radius:4px;/* fungsi ini untuk membuat lengkungan selebar 4px, hanya untuk firefox, silakan ganti dengan value lain */ } #menustyle li a:hover, #menustyle li a:active{ background-color:red;/* warna background link ketika cursor melintas, silakan ganti dengan value lain */ color:lime;/* warna text link ketika cursor melintas, silakan ganti dengan value lain */ margin:0; -moz-border-radius:4px; } #menustyle li li a, #menustyle li li a:link, #menustyle li li a:visited{ width:350px; /* lebar link-link yang ngedrop, silakan ganti dengan value lain */ float:none; margin:0; font-size:18px;/* ukuran font yg ngedrop, silakan ganti dengan value lain */ } #menustyle li{float:left;padding:0;} #menustyle li a.enclose, #menustyle li a.enclose:visited{border-top:1px solid white;} #menustyle li ul{z-index: 9999;position:absolute;left:-999em;height:auto;width:170px;margin:0;padding:0;} #menustyle li ul a{width: 140px;} #menustyle li ul ul{margin:-75px 0 0 171px;} #menustyle li:hover ul ul, #menustyle li:hover ul ul ul, #menustyle li.sfhover ul ul, #menustyle li.sfhover ul ul ul{left:-999em;} #menustyle li:hover ul, #menustyle li li:hover ul, #menustyle li li li:hover ul, #menustyle li.sfhover ul, #menustyle li li.sfhover ul, #menustyle li li li.sfhover ul{left:auto;} #menustyle li:hover, #menustyle li.sfhover{position:static;} </style> <?php //end, sampai disini style cssnya?> <?php //mulai dari sini adalah menu-menunya?> <div id='menudrop'> <ul id='menustyle'> <li><a href='<?php bloginfo('url'); ?>/'>home</a></li> <li><a href='javascript:void(0)'>pages</a> <ul> <?php wp_list_pages('title_li=&sort_column=menu_order&depth=1'); ?> </ul></li> <li><a href='javascript:void(0)'>category</a> <ul> <?php list_cats(0, '', 'name', 'asc', '', 1, 0, 1, 1, 1, 1, 0,'','','','','') ?> </ul></li> <li><a href='javascript:void(0)'>archive</a> <ul> <?php wp_get_archives('type=monthly'); ?> </ul></li> <li><a href='javascript:void(0)'>rss</a> <ul> <li><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a></li> <li><a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a></li> </ul></li> <li><a href='javascript:void(0)'>other link</a> <ul> <li><a href='javascript:void(0)'><?php //bisa diganti ?>ganti dengan link sobat</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>ganti dengan link sobat</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>ganti dengan link sobat</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>ganti dengan link sobat</a></li> </ul></li> <li><a href='javascript:void(0)'>other link 2</a> <ul> <li><a href='javascript:void(0)'>other link 2 a</a> <ul> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 a 1</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 a 2</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 a 3</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 a 4</a></li> </ul> </li> <li><a href='javascript:void(0)'>other link 2 b</a> <ul> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 1</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 2</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 3</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 4</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 5</a></li> </ul> </li> <li><a href='javascript:void(0)'>other link 2 c</a> <ul> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 1</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 2</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 3</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 4</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 5</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 6</a></li> </ul> </li> <li> <a href='javascript:void(0)'>other link 2 d</a> <ul> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 1</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 2</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 3</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 4</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 5</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 6</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 7</a></li> </ul> </li> </ul> </li> <li><a href='javascript:void(0)'>other link 3</a><ul><?php //yang dibawah hanya contoh ?> <li><a href='http://www.ferdianz.co.tv' target="_blank">Ur Text</a></li> <li><a href='http://www.ferdianz.co.tv'>Ur Text</a></li> <li><a href='http://www.ferdianz.co.tv'>bisa diganti ?>ferdianz</a></li> </ul> </li> </ul> </div> <?php //sampai sini adalah menu-menunya?> <?php //sobat juga dapat mengganti linknya, ganti href='javascript:void(0)' dengan link lain kemudian sesuaikan //salam kenal dari www.ferdianz.co.tv ?> <?php //end menu-menu drop dengan kategori, pages, archive, rss?>

Auto Hide pada Navbar Blogger

Sudah saya informasikan sebelumnya bila menghilangkan navbar blogger (Navigation Bar) merupakan salah satu pelanggaran TOS Blogger, solusi lainya kita bisa menggunakan Auto hide navbar Blogger. Cara kerja Auto hide, ketika pengunjung mengarahkan mouse ke bagian atas maka navbar asli akan muncul begitu juga sebaliknya jika pengunjung penggeser mouse ke bawah (tidak dalam area navbar) maka secara otomatis navbar tersebut akan di hilangkan.

Cara memasangnya:

Pada halaman Edit HTML, cari kode body {  kemudian letakan kode dibawah ini diatas kodebody {

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Selamat mencoba :)

Pasang kotak pencarian di blogger

Untuk memudakan pengunjung melakukan percarian Navbar blogger sebenarnya sudah menyediakan fasilitas kota pencarian. namun ada kalanya kita ingin menambahkan sendiri kotak pencarian buatan sendiri, tentu saja dengan alasan kita bisa meletakan Search box tersebut dimana kita inginkan.

Contoh Kotak Pencarian :

Dibawah ini code pencarian yang bisa kamu gunakan:

namablog.blogspot.com/search" style="display:inline;" method="get">

Jangan lupa ganti warna merah diatas dengan nama blog kamu sendiri

Untuk mengganti tombol search standar dengan Icon :

Contoh dengan tombol icon:

Code yang bisa kamu gunakan :

namablog.blogspot.com/search" style="display: inline;" method="get">



http://URL gambar search kamu" height="19" align="top" type="image"/>

Jangan lupa ganti warna merah diatas dengan nama blog kamu sendiri, Untuk mengganti gambar icon kamu bisa mengganti kode warna pink diatas sesuai dengan alamat tempat kamu menyimpan gambarnya.

Cara Menghilangkan Tanggal Posting

menghilangkan tanggal posting blogger, mau tau caranya? pertama masuk halaman Edit HTML kemudian cari h2.date-header { jika sudah ketemu tambahkan visibility: hidden; diantara kode tersebut. lihat contoh kodenya dibawah:

h2.date-header {
margin:.3em 0 0;
padding:0;
font-size:80%;
color:#777;
height: 0px;
visibility: hidden;
}

Selama mencoba, Happy Blogging :)

Mematikan Klik Kanan pada Mouse

Mungkin anda sering membuka suatu situs yang melarang blognya untuk diklik kanan oleh pengunjungnya atau dengan kata lain mendisablekan klik kanan khusus pada blog/situsnya saja. Guna dari disable ini ialah untuk melindungi konten atau foto yang anda miliki untuk dicopy oleh orang lain dengan kepentingan yang kita tidak tahu. Nah berkut ini ada javascript untuk mendisablekannya yaitu :

Script ini dicopykan ke blog anda dengan cara :

1. Klik Layout dan pilih edit html

2. Cari kode  Copykan kode tersebut dibawahnya.

3. Save.

4. Silahkan dicoba!!!