Membuat Slide In Menu

Posted by : Unknown Jumat, 15 April 2011

Slide in menu merupakan sebuah menu yang bentuknya agak unik karena biasanya berada di bagian samping atau atas sebuah blog. Menu ini tidak tampak secara keseluruhan saat blog terbuka, setelah mouse diarahkan ke menu maka menu akan bergeser /terbuka sehingga menampakkan link-link atau sub menu yang ada di dalam slide menu.Selain menu navigasi horisontal, Menu Slide In bisa menjadi alternatif untuk menempatkan link-link yang akan sobat promosikan kepada pengunjung.

OK. Agar sobat lebih jelas dan pingin lihat seperti apa itu Slide in Menu klik disini atau disini untuk melihat demonya.

Jika sobat sudah lihat demonya dan pingin mencobanya. Berikut langkah-langkah untuk membuatnya :

Sama seperti biasa Log in ke blogger sobat
Dasbor --> Elemen Laman --> Rancangan --> Edit HTML
Kemudian letakan kode berikut di atas kode ]]></b:skin>

#sidemnu {
background: transparent url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/CircleBlueKilatH77V82.png) right top no-repeat;
padding: 0;
position: absolute;
left: 0;
width: 480px;
margin-left: -400px;
margin-top: 150px;
-o-transition: all 3s ease-in;
-moz-transition: all 3s ease-in;
-webkit-transition: all 3s ease-in;
opacity: 0.4;
}
#sidemnu:hover {
opacity: 1.0;
-o-transform: translate(400px);
-moz-transform: translate(400px);
-webkit-transform: translate(400px);
}
.GRmouseover {
font: 19px Arial Narrrow;
font-weight: bold;
float: right;
margin: 30px 10px 0 0;
color: #FF0000;
text-shadow: 0.01em 0.01em 0.2em #fff;
-o-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
.GRmouseover:hover {
-o-transform: scale(1.5) rotate(720deg) translate(0px);
-moz-transform: scale(1.5) rotate(720deg) translate(0px);
-webkit-transform: scale(1.5) rotate(720deg) translate(0px);
color: #0000FF;
text-shadow: 1px 1px 2px #000;
background: #d3020c; padding: 0 8px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border: 1px solid #777;
}
#sidemnu .boxdalam {
padding:10px 5px;
border: 1px solid #333;
background: #bbdce9;
width: 380px;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
box-shadow: 1px 1px 15px #000;
-moz-box-shadow: 1px 1px 15px #000;
-webkit-box-shadow: 1px 1px 15px #000;
}
#sidemnu .boxdalam2 {
width: 355px;
color: #000066;
font: 12px Arial;
padding: 20px 10px;
}
#sidemnu .boxdalam ul, #sidemnu .boxdalam li{list-style: none;margin: 0;padding: 0;}
#sidemnu .boxdalam h3 {
font: 18px Droid Serif;
font-weight: bold;
color: #914c03;
text-shadow: 0 1px 1px #fff;
border-bottom: 1px dotted #555;
border-top: 1px dotted #555;
background: #a0cbdc;
text-align: center;
}
#sidemnu .boxdalam li {
background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Arrow/RedArrowH12V10.png) top left no-repeat;
background-position: 0px 3px;
border-bottom: 1px dotted #666;
}
#sidemnu .boxdalam li:hover {
background: none;
}
#sidemnu .boxdalam li a{
padding-left: 20px;
font: 12px Arial Narrow;
color: #000;
text-shadow: 0px 1px 1px #fff;
text-decoration: none;
}
#sidemnu .boxdalam li a:hover{
color: #eee;
background: #222;
padding: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-shadow: 0px 0px 1px red;
line-height: 20px;
margin:0 10px;
}
#sidemnu .boxdalam img {
padding: 2px;
border: 6px solid #000;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-transition: all 3s ease;
-moz-transition: all 3s ease;
-webkit-transition: all 3s ease;
opacity: 0.5;
}
#sidemnu .boxdalam img:hover {
opacity: 1.0;
}
Kemudian masukkan kode berikut tepat di atas kode </head>
Simpan Template

Langkah Selanjutnya :

Klik Rancangan
Klik Tambah Gadget
Pilih HTML/ JavaScript
Masukkan kode berikut ke dalamnya

<div id="sidemnu">
<div class="GRmouseover">MENU</div>
<div class="boxdalam">
<div class="boxdalam2" style="height:370px;overflow-y:auto;">

<h3>Tutorial Blogger</h3>

<ul>
<li><a href="Link-1" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-2" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-3" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-4" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-5" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-6" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-7" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
</ul>

<h3>Tips - Trik Blogger</h3>

<ul>
<li><a href="Link-8" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-1" title="">Tuliskan Link Title di sini! </a></li>
<li><a href="Link-9" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-10" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-11" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-12" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-13" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-14" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
</ul>

<h3>Awas Bisa Merusak Mata...</h3>

<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNo8aaHq94vz4MueCmtERriedih9bEOFyKS1_Yc3-b-EGYKHG0dvZZq6uq6yca3W8GLvjNpErnr6TjNTDjFSC2URqSFmepzO3JvtGXzJYQKN4P0VREMEFynKSN5F14pCjDoc3cRGJOcl0/s400/1.JPG" style="margin:15px auto; width:300px;" />

</div>
</div>
</div>
Kemudian klik tombols Simpan

OK. Untuk link-linknya silahkan para sobat atur sendiri OK.
selamat mencoba semoga dapat bermanfaat

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Description: Membuat Slide In Menu
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Membuat Slide In Menu