Menu sliding vertical sangat cocok buat left sidebar, tapi jika ingin membuatnya di right sidebar juga sama bagusnya. Menu ini bekerja dengan cara menyembunyikan beberapa sub menu dan saat yang sama menunjukkan satu menu dan sub menu yang sedang aktif. Karena itu menu ini menghemat tempat di sidebar anda. Jika kursor berada tepat di menu sesudahnya maka sum menu secara otomatis akan terbuka dan kita bisa melihat apa isi sub menu yang sedang kita perhatikan itu.
Menu sliding vertical ini dilengkapi dengan background foto untuk mempercantik menu tampilan blog. Tetapi jika anda ingin menggantinya atau menghilangkan background ini sama sekali, tidak cukup sulit. Menu ini bekerja di browser utama seperti: E7, IE8, IE9, Fireox, Opera, Safari, Chrome, Flock dan juga SeaMonkey
Inilah Menu yang sedang kita bicarakan:
Jika ingin menampilkannya ke dalam blog, berikut adalah langkah-langkahnya.
PertamaKopi paste kode CSS kedalam template anda. Jadi anda harus lebih dulu login ke blogger, lalu >>> klik elemen halaman >>> Lalu klik Edit HTML. Tapi untuk lebih aman, save dulu template anda.
KeduaKopi paste kode di bawah ini kedalam kelompok CSS yang ada di template anda. Tempatkan sebelum tag /skin. Inilah kodenya:
Kemudian klik preview. Jika tidak ada pesan eror terpampang, maka segera save template anda.
Ketiga Kopi paste kode di bawah ini ke dalam sidebar. Caranya.. Klik Elemen Halaman >>> Add Widget dan segera paste kode ini:
Kini save html anda dan lihat hasilnya. Jika masih ada yang perlu di rubah mungkin hanyalah ukuran lebar, background, dan link. Jadi ganti semua sesuai kebutuhan anda, saya yakin tidak cukup sulit untuk anda.
Selamat mencoba...
Menu sliding vertical ini dilengkapi dengan background foto untuk mempercantik menu tampilan blog. Tetapi jika anda ingin menggantinya atau menghilangkan background ini sama sekali, tidak cukup sulit. Menu ini bekerja di browser utama seperti: E7, IE8, IE9, Fireox, Opera, Safari, Chrome, Flock dan juga SeaMonkey
Inilah Menu yang sedang kita bicarakan:
Jika ingin menampilkannya ke dalam blog, berikut adalah langkah-langkahnya.
Cara Membuat Menu Drop Ke Dalam Blog
PertamaKopi paste kode CSS kedalam template anda. Jadi anda harus lebih dulu login ke blogger, lalu >>> klik elemen halaman >>> Lalu klik Edit HTML. Tapi untuk lebih aman, save dulu template anda.
KeduaKopi paste kode di bawah ini kedalam kelompok CSS yang ada di template anda. Tempatkan sebelum tag /skin. Inilah kodenya:
h2.slideInfoa {normal font:18px/25px georgia, serif; color:#000;}
h2.slideInfoa span {padding:0 80px;}
.slideHolder {height:498px; width:250px; margin:0 40px; padding:2px;
font-family:georgia, serif; border:1px solid #888; float:left;}
.slideOuter {height:498px; width:250px; overflow:hidden; margin:0;}
.slideOuter .slide {padding:0; margin:0; list-style:none;
height:800px; width:250px; overflow:hidden;}
.slideOuter .slide li {display:block; float:left; height:98px;
border-bottom:2px solid #fff; width:250px; overflow:hidden;
background:red;
-webkit-transition: 0.75s;
-moz-transition: 0.75s;
-o-transition: 0.75s;
transition: 0.75s;
}
.slideOuter .slide li.p5 {height:318px;}
.slideOuter .slide.current li {height:43px;}
.slideOuter .slide.current li.current {height:318px;}
.slideOuter .slide.current li.p5 {height:318px;}
.slideOuter .slide li.p1
{background:url(http://2.bp.blogspot.com/-miHkTIgetDk/ ;}TdcNnSyvXfI/AAAAAAAAA-o/ el20vcENJLE/s400/pic1.jpg)
.slideOuter .slide li.p2
{background:url(http://1.bp.blogspot.com/-B-pzDrGyreM/ ;}TdcNnq2BH3I/AAAAAAAAA-w/ t5MHC2dUgtA/s400/pic2.jpg)
.slideOuter .slide li.p3
{background:url(http://4.bp.blogspot.com/-1o0D6F-BHrc/ ;}TdcNnsd4QmI/AAAAAAAAA-4/ VFuT5z9Xv5A/s400/pic3.jpg)
.slideOuter .slide li.p4
{background:url(http://2.bp.blogspot.com/-SDzvI-nnYww/ ;}TdcNnxKhZmI/AAAAAAAAA_A/j- KAYg_hM1U/s400/pic4.jpg)
.slideOuter .slide li.p5
{background:url(http://2.bp.blogspot.com/-dT8FS43YKOw/ ;}TdcNn_qpzcI/AAAAAAAAA_I/dKupQ- yi9pc/s400/pic5.jpg)
.slideOuter .slide:hover li.p1,
.slideOuter .slide:hover li.p2,
.slideOuter .slide:hover li.p3,
.slideOuter .slide:hover li.p4 {height:43px;}
.slideOuter .slide:hover li.p1:hover,
.slideOuter .slide:hover li.p2:hover,
.slideOuter .slide:hover li.p3:hover,
.slideOuter .slide:hover li.p4:hover {height:318px;}
.slideOuter .slide li h1 {padding:0 15px; margin:0; font-size:24px;
line-height:43px; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);}
.slideOuter .slide li {color:#fff;}
.slideOuter .slide li.p2 h1 {color:#c60;}
.slideOuter .slide li.p3 h1 {color:#040;}
.slideOuter .slide li.p4 h1 {color:#400;}
.slideOuter .slide li.p5 h1 {color:#000;}
.slideOuter .slide li p {font-weight:bold; padding:0 5px 20px 15px;
margin:0; font-size:12px; line-height:17px; text-shadow: 0px 2px 4px
rgba(0, 0, 0, 0.6);}
.slideOuter .slide li a {display:block; color:#fff; padding:0 15px;
margin:0; font-size:14px; line-height:25px; width:230px;
font-weight:bold; text-decoration:none;}
.slideOuter .slide li a:hover {text-decoration:underline;}
.clear {clear:left;}
Kemudian klik preview. Jika tidak ada pesan eror terpampang, maka segera save template anda.
Ketiga Kopi paste kode di bawah ini ke dalam sidebar. Caranya.. Klik Elemen Halaman >>> Add Widget dan segera paste kode ini:
<div id="infoa">
<div class="slideHolder">
<div class="slideOuter">
<ul class="slide current">
<li class="p1">
<div>
<h1>Landscapes</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#url">Quisque tincidunt</a>
<a href="#url">Donec tempor</a>
<a href="#url">Sed placerat leo vel</a>
<a href="#url">Curabitur ac bibendum</a>
<a href="#url">Duis nec diam</a>
<a href="#url">Sed quis massa</a>
</div>
</li>
<li class="p2 current">
<div>
<h1>Portraits</h1>
<p>Vestibulum scelerisque quam a dui interdum semper.</p>
<a href="#url">Quisque tincidunt</a>
<a href="#url">Donec tempor</a>
<a href="#url">Curabitur aliquet</a>
<a href="#url">Curabitur</a>
<a href="#url">Class aptent</a>
<a href="#url">Vestibulum</a>
</div>
</li>
<li class="p3">
<div>
<h1>Flowers</h1>
<p>Mauris pellentesque, ligula eget molestie suscipit.</p>
<a href="#url">Nunc accumsan</a>
<a href="#url">Sed varius</a>
<a href="#url">Vestibulum</a>
<a href="#url">Phasellus quis</a>
<a href="#url">Maecenas</a>
<a href="#url">Nullam ligula</a>
</div>
</li>
<li class="p4">
<div>
<h1>Abstracts</h1>
<p>Cum sociis natoque penatibus et magnis dis parturient montes.</p>
<a href="#url">Duis nec diam</a>
<a href="#url">Ut sagittis</a>
<a href="#url">Sed a lorem</a>
<a href="#url">Mauris id mi</a>
<a href="#url">Donec sit amet</a>
<a href="#url">Aliquam placerat</a>
</div>
</li>
<li class="p5">
<div>
<h1>Seascapes</h1>
<p>Aenean quis lacus id eros lobortis dapibus sed non nisi.</p>
<a href="#url">Donec fringilla</a>
<a href="#url">Quisque vel</a>
<a href="#url">Duis at magna</a>
<a href="#url">Maecenas rutrum</a>
<a href="#url">Ut iaculis tristique</a>
<a href="#url">Suspendisse</a>
</div>
</li>
</ul>
</div>
</div>
</div> <!-- end of infoa -->
Kini save html anda dan lihat hasilnya. Jika masih ada yang perlu di rubah mungkin hanyalah ukuran lebar, background, dan link. Jadi ganti semua sesuai kebutuhan anda, saya yakin tidak cukup sulit untuk anda.
Selamat mencoba...
