> Cara buat slide menu drop down

Selasa, 09 Agustus 2011

21

Cara buat slide menu drop down

Satu lagi menu drop down dari hasil kreasi saya, namanya slide menu drop down. Dibuat menggunakan fitur CSS dan beberapa HTML, cara kerjanya ringan dan memiliki efek slide yang bervariatif. Pengaturan pada atribut transitionnya juga pas, selain itu kombinasi warna hijau dan putih serta menggunakan background grafis yang sesuai, sehingga menu ini tampil dan bekerja sangat dinamis sekali.
Silahkan anda bisa manfaatkan slide menu drop down ini untuk web ataupun blog anda.


Nah..., bila anda berminat memasang slide menu drop down ini, silahkan anda bisa ikuti langkah - langkah sebagai berikut :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :
</head>

7. Copy kode dibawah ini dan paste sebelum kode </head>:

8. Lalu copy lagi kode dibawah ini dan paste setelah kode diatas :

<style type='text/css'>
/*widget Fitur slide-menu-drop-down by noer Ceo http://www.carabuatwebgratis.com */

ul.slide-menu-drop-down li.bg-icon1{
    background:transparent url(https://lh6.googleusercontent.com/-bjv4cfs6gZA/Tj_4WFkaQZI/AAAAAAAAA8o/byDvNourq4M/s104/photos.png) no-repeat;
}

ul.slide-menu-drop-down li.bg-icon2{
    background:transparent url(https://lh5.googleusercontent.com/-10LRbwRfamA/Tj_4UnnPvUI/AAAAAAAAA8c/du4n8lBbOY0/s104/find.png) no-repeat;
}


ul.slide-menu-drop-down li.bg-icon3{
    background:transparent url(https://lh6.googleusercontent.com/-nV8YCGXkKOQ/Tj_4V2k_tcI/AAAAAAAAA8k/Fsnx57GJXhw/s104/mail.png) no-repeat;
}

ul.slide-menu-drop-down li.bg-icon4{
    background:transparent url(https://lh5.googleusercontent.com/-nf4tyN_F0vw/Tj_4PLL13gI/AAAAAAAAA8Y/EEJ_XMhaIVE/s104/about.png) no-repeat;
}

ul.slide-menu-drop-down li.bg-icon5{
    background:transparent url(https://lh6.googleusercontent.com/-VZcGH2Z_g4M/Tj_4VLQuryI/AAAAAAAAA8g/3ZT1c6kr6k4/s104/home.png) no-repeat;
}
</style>
Catatan :
Teks warna merah diatas adalah ULR Icon menu yang akan tampil pada slide menu drop down. Silahkan bila anda menginginkan, ganti dengan milik anda. Tapi ingat, bentuk icon sebaiknya bulat dengan ukuran icon = 50px, dan dengan format file PNG, agar dapat sesuai dengan tampilan menu ini.

9. SIMPAN TEMPLATE.

Langkah selanjutnya anda tinggal menambahkan kode dibawah ini pada gadget, dan letak gadget sesuka anda akan menaruh menu ini dimana...OK...!!
Silahkan ikuti langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget


3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript


4. Copy dan paste kode dibawah ini pada gadget tersebut :
<ul class="slide-menu-drop-down" id="slide-menu-drop-down">

<li class="bg-icon1">
<div class="judul">Album</div>
<div class="sub-menu">
<p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="
ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>

<p><a href="ULR ARTIKEL">Sub Menu 6</a></p>
<p><a href="
ULR ARTIKEL">Sub Menu 7</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 8</a></p>

</div>
</li>

<li class="bg-icon2">
<div class="judul">Explorer</div>
<div class="sub-menu">
<p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="
ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>

</div>
</li>

<li class="bg-icon3">
<div class="judul">Kontak</div>
<div class="sub-menu">
<p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="
ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>

</div>
</li>

<li class="bg-icon4">
<div class="judul">About Me</div>
<div class="sub-menu">
<p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="
ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>

</div>
</li>

<li class="bg-icon5">
<div class="judul">Home</div>
<div class="sub-menu">
<p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="
ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>
</div>
</li>

</ul>
Catatam :
  • Silahkan anda ganti Teks berwarna diatas.
5. Simpan.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.
Ping your blog, website, or RSS feed for Free



Informasi Artikel :
Judul : "Cara buat slide menu drop down"
Diulas Oleh : | Selasa, 09 Agustus 2011 | 02.51
Description : Satu lagi menu drop down dari hasil kreasi saya, namanya slide menu drop down . Dibuat menggunaka...

Rating : 6.4 Dari 10, Berdasarkan 2100+ Dari 21 000+ Pengunjung.



21 komentar:

  1. bang pas klik jd ngacak gitu, dan panjangnya ga sesuai..
    maju truss

    BalasHapus
  2. Anonim...., tinggalkan nama dan ULR blog anda, biar saya bisa cek kekurangan fitur ini pada blog anda...

    BalasHapus
  3. mas maaf nie newbie bgt....g tw ttg blog ngeblog yg handal..
    mas jjur aq bgung bgt menux banyak bgt...
    kalau aku mau bikin menu :
    home,INFO,daftar isi,video,music and Fb gimana gantinya mas???gambarnya nanti sesuai gak kn gambarx hnx album,about,sm kontak..mas tolongin donk pusing aq mas bkin gnian..gak ngerti...
    trus gimana misal aq udah bikin postingan nie ya yg aq simpan...biar isa masuk ke menu itu gimana caranya mas?????mas bls ya dengan cepat.
    di email saya pls.....

    BalasHapus
  4. mas aq coba hsail yang ini malah kepotong mas...wkwkwkwkwkk :D
    mas aq ska sbnrx bagus bgt...tp klo isa mas tolong donk mas bkinin yg aq pingin tadi..wkwkwkwkwkwk :D
    maksa.com+ngarep.com..hahahahhahaha :D
    hbsx aq pusing 7 kellinng buat menu ini..... -_-
    tolong y mas......
    n sklian ksh tutorialx cara masukin postingan ke menunya.....please mas,,,,wkwkwkwkkwkw :D
    bls mas...jgn lm".........hahahahhaha

    BalasHapus
  5. defo_rose..., saya rasa tutorial diatas sudah jelas dan mudah, anda tinggal ikuti saja.

    Bila ingin mengganti icon yg sesuai dgn yg akan anda buat, anda bisa dapatkan banyak contoh icon gratis di alamat ini: http://dryicons.com

    Bagaimana cara masukin postingan ke menu?
    Silahkan anda perhatikan pada DEMO dan perhatikan juga pada tutor kedua langkah ke 4.

    Teks warna merah adalah ULR postingan, dan Teks warna ungu adalah judulnya.

    ULR postingan tampak pada browser,ketika kita buka postingan tsb.

    Maksudnya gini.... ULR posting artikel ini adalah (http://www.carabuatwebgratis.com/2011/08/cara-buat-slide-menu-drop-down.html)
    dan ini tampak pada browser. ULR inilah yg kita gunakan untuk mengganti teks berwarna merah pada langhak ke 4.

    Semoga membantu.

    BalasHapus
  6. Keren bngtz admin tutorialnya. . .maju terus

    BalasHapus
  7. sep dah mas udh dipsng kren lagi,,,tingal benahi semua isinya,,,buat tmn yg lain mmng pertama acak stlah widgetnya di setel normal'coba aja.

    trim's admin,,maju trussssssssssssssssss.

    BalasHapus
    Balasan
    1. Sama-sama... semoga bermanfaat.

      Hapus
  8. thnks ilmunya... thnks gan...

    BalasHapus
    Balasan
    1. Sama-sama... semoga bermanfaat.

      Hapus
  9. kalo mau buat warna nya jadi ga hijau ganti disebelah aman nih gan ?

    nah trus saya udah ada gambar nya buat icon nih , itu diapain dulu ? apa harus di upload dulu ke tinypic atau gimana ?

    thankss :D

    BalasHapus
  10. di blog ade kok jadinya vertikal ya gan, ngak slide gitu . salahnya dimana ya ? jadi bingung

    BalasHapus
  11. gan tolong bantuan nya
    di blog ade kok jadinya vertikal ya gan, ngak slide gitu . salahnya dimana tolong cek gan

    http://anime-followers.blogspot.com/

    BalasHapus
  12. Gan Kok gak jawab......?
    Tolong jawab Gan

    BalasHapus
  13. gak ada tangapan nih cari info sendiri ah.

    BalasHapus
    Balasan
    1. saya sudah lihat blog anda...
      ternyata anda salah menempatkan kodenya....

      kalau boleh saya masuk ke akun anda, saya akan bantu memperbaikinya....

      Hapus
  14. nah gitu Donk gan jawap Q sampek 2 hari gak di jawab Makaisih Tangapan nya gan.

    BalasHapus
  15. alhamdulilah Akhirnya Bisa gan Makasih Udah sempetin Ngoreksi Bloger saya.

    Gan mau tanya lagi nih Cara nurunin Menu nya Gimana gan Biar gak terlalu ke atas.

    Coba cek gan.
    http://anime-followers.blogspot.com

    BalasHapus
    Balasan
    1. Penempatan kode masih salah...,
      1. Untuk kode CSS sebaiknya diletakkan didalam tag "head"
      2. Sedang kode HTML didalam tag "Body" , dan itu terserah anda akan diletakkan dimana anda suka. Bida dibagian "Header", "Main", atau "Sidebar".

      Sebaiknya ikuti dulu langkah2 diatas secara teliti..., baru setelah itu mengembangkannya sesuka anda..... OK....

      Hapus

BLOGGER

TUTORIAL BLOGGER

TUTORIAL BLOGGER

REKOMENDASI

REKOMENDASI


Artikel Terbaru

POST POPULER

Entri Populer


DAFTAR ISI

DAFTAR ISI


BLOGGER

HTML

CSS

JAVASCRIPT


BACKLINK

INFO

Bagi anda yang berminat tukar link, silahkan copy linknya lalu pasang di Blog anda. Dan bila sudah terpasang, jangan lupa beritahu saya, agar link anda segera saya pasang di Blog tercinta ini.
Salam sukses selalu buat kita semua..... Amiiin.

CEO,
www.carabuatwebgratis.com
Noer cholis
Plosokuning V, Minomartani,
Ngaglik, Sleman, Yogyakarta.

TUKAR LINK

TUKAR LINK






Baca artikel "Manfaat Tukar Link"

CHAT

CHAT



TESTIMONI

Bila anda merasa artikel ataupun tutorial yang ada di Blog ini bermanfaat, anda bisa berikan suport comment melalui form ini. Form ini sangat bagus sebagai BACKLINK buat blog anda, silahkan tinggalkan link anda....

RECENT COMMENT

Ada kesalahan di dalam gadget ini

top down