Membuat Slide Menu Drop Down di Blog

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 sobat bisa manfaatkan slide menu drop down ini untuk web ataupun blog sobat.

LIHAT DEMO

Nah Bila sobat berminat memasang nya di blog sobat silahkan ikuti langkah-langkah di bawah ini :
1. Login ke blogger dulu
2. Pilih menu blog sobat dan pilih Tamplate --> Edit HTML
3. Jangan lupa Klik tombol "Expand Widget Templates"
4. Lalu cari kode di bawah ini

</head>

5. Copy kode dibawah ini dan pastekan 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/AVvXsEgVc2_MJT6wjSTjvYNLEwbT9ccbGqAXWoULTIr-XysZS1tlQKHWYaNoR1UTBXg0w60IdJ7s-DVUUd8SavIlDcZZGLfjxMqRbSfxskZsjmAZuGKXn9HfYC5sj_30FD9PONcv_hiSMsEyuQCb/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>

6. Lalu Copy kode dibawah ini dan pastekan setelah kode diatas

Catatan :

Teks warna merah diatas adalah ULR Icon menu yang akan tampil pada slide menu drop down. Silahkan bila sobat menginginkan, ganti dengan milik sobat. Tapi ingat, bentuk icon sebaiknya bulat dengan ukuran icon = 50px, dan dengan format file PNG, agar dapat sesuai dengan tampilan menu ini.

7. Simpan Tamplate

Langkah selanjutnya sobat tinggal menambahkan kode dibawah ini pada gadget, dan letak gadget sesuka sobat Silahkan ikuti langkah berikut :
1. Dari menu blog sobat pilih Layout
2. Lalu Tambah Gadget
3. Pada jendela baru sobat Sobat 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>

Baca Juga

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