Cara buat slide menu drop down ~ Tutorial Blogger

Selasa, 09 Agustus 2011

Cara buat slide menu drop down

Selasa, 09 Agustus 2011 | 02.51

Noercholis

21 comments

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.

LIHAT DEMO

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>:

ul.slide-menu-drop-down{
    list-style:none;   
    position:absolute;
    right:30px;
    font-family: Cambria, serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.5em;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ_mg_jiZUk5HHFnAwUquRxUpU9QTLGnOheuBCknoXhswwFoGLNTk9Ak8s0MzOh-G68cn255Mnmv0SuhHDiRbLGaZv1axGX1q7OttyTzqpiTaK6ICC85f5kAue696KW7NjFurCqsqbLIGM/s1000/background-image.jpg) no-repeat top left;
background-repeat:no-repeat;
    cursor:pointer;
    border:2px solid #ddd;
    -moz-border-radius:50px;
    -webkit-border-radius:50px;
    border-radius:50px;
    -moz-box-shadow:1px 3px 15px #555;
    -webkit-box-shadow:1px 3px 15px #555;
    box-shadow:1px 3px 15px #555;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
z-index:99999;
}

ul.slide-menu-drop-down li{
    float:right;
    width:55px;
    height:55px;
    margin:10px;
    display:block;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    background-color:#000;
    background-repeat:no-repeat;
    background-position:center center;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    border:2px solid #ddd;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    -moz-box-shadow:1px 3px 15px #555;
    -webkit-box-shadow:1px 3px 15px #555;
    box-shadow:1px 3px 15px #555;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
}

ul.slide-menu-drop-down li:hover{
    float:right;
    width:300px;
    height:250px;
    display:block;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    background-color:#fff;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    -moz-box-shadow:1px 3px 15px #555;
    -webkit-box-shadow:1px 3px 15px #555;
    box-shadow:1px 3px 15px #555;
}

ul.slide-menu-drop-down li .judul{
    background-color:#fff;
    padding:10px;
    margin-top:300px;
    margin-left:55px;
    opacity:0.9;
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    font-size:14px;
    color:#444;
    text-align:center;
    text-shadow:-1px -1px 1px #ccc;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
}

ul.slide-menu-drop-down li:hover .judul{
    background-color:#52C941;
    padding:10px;
    margin-top:5px;
margin-left:55px;
}

.sub-menu{
text-align:right;
font-size:10px;
font-family: Cambria, serif;
font-weight:bold;
line-height: 1em;
width:280px;
height:100%;
padding:5px 10px 10px;
 margin:10px 0px 40px;
background-color:#fff;
-moz-box-shadow:1px 3px 15px #aaa;
-webkit-box-shadow:1px 3px 15px #aaa;
box-shadow:1px 3px 15px #aaa;
opacity:0.7;
}

.sub-menu p a{
text-transform:uppercase;
text-shadow:1px 1px 1px #fff;
color:#333;
text-decoration:none;
font-size:10px;
font-family: Cambria, serif;
line-height: 1em;
}

.sub-menu p a:hover{color:#347D29;}
</style>

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

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 : Noercholis \| Selasa, 09 Agustus 2011 \| 02.51 Description : Satu lagi menu drop down dari hasil kreasi saya, namanya slide menu drop down . Dibuat menggunakan fitur CSS dan beberapa HTML, cara kerj... Label : css,HTML,menu,Tutorial Blogger Rating : 6.4 Dari 10, Berdasarkan 2100+ Dari 21 000+ Pengunjung.
Sampai saat ini baru ada : 21 komentar >>> Silahkan tambahkan komentar Anda...

21 komentar:

Anonim30 Januari 2012 pukul 07.44
bang pas klik jd ngacak gitu, dan panjangnya ga sesuai..
maju truss
BalasHapus
Balasan
Noercholis30 Januari 2012 pukul 07.58
Anonim...., tinggalkan nama dan ULR blog anda, biar saya bisa cek kekurangan fitur ini pada blog anda...
BalasHapus
Balasan
Unknown13 Februari 2012 pukul 07.13
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
Balasan
Unknown13 Februari 2012 pukul 07.26
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
Balasan
Noercholis13 Februari 2012 pukul 08.05
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
Balasan
Unknown20 April 2012 pukul 09.32
Keren bngtz admin tutorialnya. . .maju terus
BalasHapus
Balasan
PAN DELI SERDANG30 April 2012 pukul 01.35
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
Unknown31 Mei 2012 pukul 11.29
thnks ilmunya... thnks gan...
BalasHapus
Balasan
Esandars Ricardo11 Juli 2012 pukul 21.34
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
Balasan
Bangka Belitung Tour16 Februari 2013 pukul 04.37
di blog ade kok jadinya vertikal ya gan, ngak slide gitu . salahnya dimana ya ? jadi bingung
BalasHapus
Balasan
Toni Adam Saputra7 Juni 2013 pukul 01.28
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
Balasan
Toni Adam Saputra8 Juni 2013 pukul 01.01
Gan Kok gak jawab......?
Tolong jawab Gan
BalasHapus
Balasan
Toni Adam Saputra8 Juni 2013 pukul 03.39
gak ada tangapan nih cari info sendiri ah.
BalasHapus
Balasan
Toni Adam Saputra8 Juni 2013 pukul 12.39
nah gitu Donk gan jawap Q sampek 2 hari gak di jawab Makaisih Tangapan nya gan.
BalasHapus
Balasan
Toni Adam Saputra9 Juni 2013 pukul 06.14
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
Toni Adam Saputra10 Juni 2013 pukul 00.59
Oke gan Thx hehe. . .
BalasHapus
Balasan

Tambahkan komentar

POST POPULER

TESTIMONI

Tutorial Blogger

Selasa, 09 Agustus 2011