testing

Untuk membuat CSS Drop Down Menu, silahkan sampeyan baca dulu posting tentang "Cara Membuat Horizontal Tabs Menu, karena cara pembuatannya sama persis. KLIK link di bawah ini untuk melihat langkah yang diperlukan :

Click here! Horizontal Tabs Menu

Kode CSS dan Kode HTML CSS Drop Down Menu

<style type="text/css">
.bgsGR_NavHor-1{ 
    background: url(http://i28.tinypic.com/34ta55k/gubhugreyot/images/bgNavHor.jpg) bottom repeat-x;
    position:absolute;
    left:34px;
    height:42px;
    font-size:.9em;z-index:200;
    border-right:8px solid #000;border-left:8px solid #000;
    border-top-left-radius:8px;border-top-right-radius:8px;
    -moz-border-radius-topleft:8px;-moz-border-radius-topright:8px;
    -webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;
    -goog-ms-border-top-left-radius:8px;-goog-ms-border-top-right-radius:8px;
    }
.bgsGR_NavHor-1 a{
    font-family:Arial Narrow;
    font-weight:700;
    color:#fff;
    text-decoration:none;
    }
.bgsGR_NavHor-1 ul{
    padding:0px;
    margin:0px;
    list-style:none;
    }
.bgsGR_NavHor-1 li{
    float:left;
    position:relative;
    padding:11px 10px 12px;
    text-align:center;
    background-image:url(http://i26.tinypic.com/a09wyb/gubhugreyot/images/bgli.jpg);
    background-repeat:no-repeat;
    background-position:top right;
    }
.bgsGR_NavHor-1 li a:hover{ 
    color:red;
    }
.bgsGR_NavHor-1 li.last{
    background-image:none;
    border-bottom:2px solid red;
    }
.bgsGR_NavHor-1 li ul{
    display:none;
    position:absolute;
    top:37px;
    left:0px;
    padding:0 0 2px 0;
    background-color:#333;
    }
.bgsGR_NavHor-1 li:hover,.bgsGR_NavHor-1 li.over{
    border-top:2px solid red;
    background-image:url(http://i32.tinypic.com/6icfmr/gubhugreyot/images/bgNavAnima.jpg);
    background-repeat:repeat-x;
    }
.bgsGR_NavHor-1 li li:hover,.bgsGR_NavHor-1 li li.over{
    background-image:none;
    }
.bgsGR_NavHor-1 li.tab_active{
    background:url(http://i29.tinypic.com/vzihpj/gubhugreyot/images/bgNavROld.jpg) top repeat-x;
    background-position:0 -10px;
    font-weight:bold;
    }
.bgsGR_NavHor-1 li.tab_active ul{
    font-weight:normal;
    }
.bgsGR_NavHor-1 li:hover ul,.bgsGR_NavHor-1 li.over ul{
    display:block;
    }
.bgsGR_NavHor-1 li.tab_active:hover ul,.bgsGR_NavHor-1 li.tab_active:hover ul{
    background-color:#1E71C4;
    }
.bgsGR_NavHor-1 li ul li,.bgsGR_NavHor-1 li ul li:hover{
    width:180px;
    padding:0;
    background-image:url(http://i29.tinypic.com/vzihpj/gubhugreyot/images/bgNavROld.jpg);
    background-repeat:repeat-x;
    background-position:bottom left;
    margin:0px;text-align:left;
    }
.bgsGR_NavHor-1 li.tab_active ul li,.bgsGR_NavHor-1 li.tab_active ul li:hover{
    background-image:url(http://i31.tinypic.com/vhwykh/gubhugreyot/images/bgnavHblue.jpg);
    }
.bgsGR_NavHor-1 li ul li.last{
    background-image:none;
    }
.bgsGR_NavHor-1 li.tab_active ul li.last{
    background-image:none;
    }
.bgsGR_NavHor-1 li ul li div a{
    display:block;
    padding:6px 12px 8px 12px;
    }
.bgsGR_NavHor-1 li.tab_active ul li div a{}.bgsGR_NavHor-1 li ul li div a:hover{
    background-color:#2A2A2A;
    }
.bgsGR_NavHor-1 li.tab_active ul li div a:hover{
    background-color:#468FD7;
    }
</style>


<div class="bgsGR_NavHor-1" style="top:-30px;left:10px;margin:0px 10px 20px 0px;">
<ul>
    <li class="tab_active"><div><a href="Link-1">Nama Link-1</a></div>
        <ul>
           <li><div><a href="Link-1a">Nama Link-1a</a></div></li>
           <li><div><a href="Link-1b">Nama Link-1b</a></div></li>
           <li><div><a href="Link-1c">Nama Link-1c</a></div></li>
        </ul> 
    </li>
    <li class="last"><div><a href="Link-2">Nama Link-2</a></div>
        <ul>
           <li><div><a href="Link-2a">Nama Link-2a</a></div></li>
           <li><div><a href="Link-2b">Nama Link-2b</a></div></li>
           <li><div><a href="Link-2c">Nama Link-2c</a></div></li>
           <li><div><a href="Link-2d">Nama Link-2d</a></div></li>
           <li><div><a href="Link-2e">Nama Link-2e</a></div></li>
           <li><div><a href="Link-2f">Nama Link-2f</a></div></li>
        </ul>
    </li>
 
    <li><div><a href="Link-3">Nama Link-3</a></div>
        <ul>
           <li><div><a href="Link-3a">Nama Link-3a</a></div></li>
           <li><div><a href="Link-3b">Nama Link-3b</a></div></li>
           <li><div><a href="Link-3c">Nama Link-3c</a></div></li>
           <li><div><a href="Link-3d">Nama Link-3d</a></div></li>
        </ul>
    </li>

    <li><div><a href="Link-4">Nama Link-4</a></div>
        <ul>
           <li><div><a href="Link-4a">Nama Link-4a</a></div></li>
           <li><div><a href="Link-4b">Nama Link-4b</a></div></li>
           <li><div><a href="Link-4c">Nama Link-4c</a></div></li>
        </ul>
    </li>

    <li><div><a href="Link-5">Nama Link-5</a></div>
        <ul>
           <li><div><a href="Link-5a">Nama Link-5a</a></div></li>
           <li><div><a href="Link-5b">Nama Link-5b</a></div></li>
           <li><div><a href="Link-5c">Nama Link-5c</a></div></li>
           <li><div><a href="Link-5d">Nama Link-5d</a></div></li>
           <li><div><a href="Link-5e">Nama Link-5e</a></div></li>
        </ul>
    </li>
 
    <li><div><a href="Link-6">Nama Link-6</a></div>
        <ul>
           <li><div><a href="Link-6a">Nama Link-6a</a></div></li>
           <li><div><a href="Link-6b">Nama Link-6b</a></div></li>
           <li><div><a href="Link-6c">Nama Link-6c</a></div></li>
           <li><div><a href="Link-6d">Nama Link-6d</a></div></li>
           <li><div><a href="Link-6e">Nama Link-6e</a></div></li>
           <li><div><a href="Link-6f">Nama Link-6f</a></div></li>
           <li><div><a href="Link-6g">Nama Link-6g</a></div></li>
           <li><div><a href="Link-6h">Nama Link-6h</a></div></li>
           <li><div><a href="Link-6i">Nama Link-6i</a></div></li>  
        </ul>
    </li>
 
    <li><div><a href="Link-7">Nama Link-7</a></div>
        <ul>
           <li><div><a href="Link-7a">Nama Link-7a</a></div></li>
           <li><div><a href="Link-7b">Nama Link-7b</a></div></li>
           <li><div><a href="Link-7c">Nama Link-7c</a></div></li>
           <li><div><a href="Link-7d">Nama Link-7d</a></div></li>
           <li><div><a href="Link-7e">Nama Link-7e</a></div></li>
           <li><div><a href="Link-7f">Nama Link-7f</a></div></li>
           <li><div><a href="Link-7g">Nama Link-7g</a></div></li>
           <li><div><a href="Link-7h">Nama Link-7h</a></div></li>
           <li><div><a href="Link-7i">Nama Link-7i</a></div></li>
           <li><div><a href="Link-7j">Nama Link-7j</a></div></li>
           <li><div><a href="Link-7k">Nama Link-7k</a></div></li>
           <li><div><a href="Link-7l">Nama Link-7l</a></div></li>
           <li><div><a href="Link-7m">Nama Link-7m</a></div></li>
           <li><div><a href="Link-7n">Nama Link-7n</a></div></li>  
        </ul>
    </li>
 
    <li><div><a href="Link-8">Nama Link-8</a></div>
        <ul>
           <li><div><a href="Link-8a">Nama Link-8a</a></div></li>
           <li><div><a href="Link-8b">Nama Link-8b</a></div></li>
           <li><div><a href="Link-8c">Nama Link-8c</a></div></li>
           <li><div><a href="Link-8d">Nama Link-8d</a></div></li>
           <li><div><a href="Link-8e">Nama Link-8e</a></div></li>
           <li><div><a href="Link-8f">Nama Link-8f</a></div></li>
           <li><div><a href="Link-8g">Nama Link-8g</a></div></li>
           <li><div><a href="Link-8h">Nama Link-8h</a></div></li>
           <li><div><a href="Link-8i">Nama Link-8i</a></div></li>  
        </ul>
    </li>
 
</ul>
</div>

Atur margin pada kode :

<div class="bgsGR_NavHor-1" style="top:-30px;left:10px;margin: -0px 10px 20px 0px;">

- top:-30px; digunakan untuk mengator jarak dari ujung atas blog (navbar). Nilai bisa diperbesar atau diperkecil, dimana minus semakin besar maka akan semakin naik.
- left:10px; merupakan jarak dari sebelah kiri.
- pengaturan lanjutan dilakukan melalui margin:0px 10px 20px 0px; dimana 0 = jarak atas, 10px = dari kanan, 20px = dari bawah dan 0px = dari kiri.
Untuk pemasangan di bawah header blog juga dilakukan dengan mengatur variabel di atas. Untuk jumlah menu silahkan di atur hingga tidak lebih lebar dari halaman blog.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «

kadek setzer mengatakan... ....

wah keren banget blognya nih,,masa pasang banner dan link saya disini donk,,dan tentunya saling follow juga ya bang,,, http://pariwisatadanteknologi.blogspot.com/

20 Juli 2010 07:48

Dicky mengatakan... ....

Wah. . Mas ini uda expert banget kayanya. . Jago banget main kodenya. . !! Jadi pengen bLajar juga. . Hehe. . Bdw, info tentang drop down menunya bagus banged. . simple N' mudah di aplikasikan. . :) Buat masnya kaLo tertarik ngrubah visi & misi hidupnya jadi Lebih baik lagi bisa berkunjung ke Blog saya di : http://www.thesecret-indonesia.co.cc/

cara bikin blog banyak dengan cara pake satu email

Kemarin aku ketemu si Miun. Dia dengan bangga bilang. "Mas Yot aku sudah punya dua blog sekarang. Aku buat email baru pakai data adik ku trus aku buat daftar blog yang baru". Kelihatan senang sekali si Miun dengan blog barunya. Kepada orang sekampung dia ceritakan tentang blognya yang sekarang menjadi bertambah satu. Aku ikut senang juga melihat kebahagiaannya. Dengan bertambahnya blog setidaknya semangat '45 si Miun untuk pergi ngelayab malam akan jauh berkurang.

Membuat blog baru seperti si Miun temanku tadi sebenarnya juga bisa dilakukan tanpa harus dengan cara membuat email yang baru, apalagi dengan menggunakan data milik orang lain yang sebenarnya juga bisa dikatakan tidak etis dan melanggar aturan yang ada. Bukankah data pribadi sebenarnya hanya diperuntukkan bagi kepentingan pribadi? Iya kalau tidak digunakan untuk sesuatu yang menyalahi aturan? kalau misalnya, baik sengaja atau tidak sengaja terjadi hal yang melanggar aturan? Tentunya tidak hanya pribadi yang dimanfaatkan bio datanya yang jadi repot. Yang akan jadi lebih repot tentunya si pemakai bio data orang lain tersebut karena setidak-tidaknya akan terkena tuduhan pemalsuan data atau penipuan.

Dengan cara singkat sebuah blog baru dapat kita buat dengan memanfaatkan alamat email yang sudah kita miliki.

Caranya adalah sebagai berikut :

1. Login : Seperti biasa untuk memulai aktifitas di Dasboard (Dasbor) blog, lakukan login terlebih dahulu dengan mengisi User Name/Alamat Email kemdian tuliskan Password (Kata Sandi).
2. Dasboard (Dasbor) : KLIK link "Buat Blog".
   .
   
   Posisi Buat Blog di sebelah kanan atas halaman.
3. Isi Data :
   • Judul Blog : Beri judul Blog sampeyan. Mau dikasih nama sama dengan blog yang lamapun boleh.
   • Alamat Blog : Tulis alamat blog yang baru. Alamat ini tidak boleh sama dengan alamat blog lama.
   • KLIK "Cek Ketersediaan : Ini dilakukan untuk melihat apakah nama alamat yang akan dipakai sudah digunakan orang lain ataukah belum.
   • Verifikasi Kata (Captcha) : Tuliskan Karakter yang dimunculkan Blogger dan tulis di box yang tersedia yang.
   • Lanjutkan : KLIK "Lanjutkan".
     KLIK Gambar di bawah ini untuk melihat contoh pengisian data.
   • Kirim no Ponsel : Kirimkan nomor Ponsel sampeyan.
   • Verifikasi : Tulis nomor verifikasi yang dikirim blogger melalui ponsel. Langsung terus dilanjut.
   • Pilih Template : Silahkan pilih desain blog yang diinginkan.
   • Selesai : Happy Blogging.