Menu Vertikal Sexy Panels Dengan CSS

Menu Vertikal Sexy Panels Dengan CSS – setelah pada postingan sebelumnya membuat menu vertikal inner shadow dengan CSS3 maka sekarang saya kembali membahas lagi untuk membuat menu vertikal dengan CSS yang menampilkan background berwarna hitam dengan border sebelah kanan yang berwarna merah yang mengelilingi linkmenu saat hover.

Tampilan menu vertikal yang sangat sederhana ini memiliki fasilitas yang akan menampilkan warna lime saat hover dan border berwarna hitam yang terdapat disebelah kanannya dan saya sertakan pula box shadow berwarna merah. Tidak banyak CSS yang digunakan untuk membuat Menu Vertikal Sexy Panels ini sehingga saat diterpakan kedalam blog tidak memperlambat loading blog. Jadi bagi kebanyakan blogger yang takut loading blognya akan lambat tidak perlu khawatir akan hal ini, karena menu vertikal yang sangat simpel dan sederhana ini tidak akan mempengaruhi kecepatan loading blog. Jika berminat untuk memasang kedalam blog, maka berikut adalah tutorial tentang cara memasang Menu Vertikal Sexy Panels Dengan CSS:

1. Login ke akun blogger.
2. Klik Template > Edit HTML > Lanjutkan > Centang Expands Widget Template.
3. Cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah pencarian.
4. Taruh kode berikut ini tepat diatas kode ]]></b:skin>

/* Menu Vertikal Sexy Panels Dengan CSS */

.sexypanels{
list-style-type: none;
margin: 0;
padding: 0;
width: 260px; /* width of menu */
}

.sexypanels li{
border-bottom: 1px solid white; /* white border beneath each menu item */
}

.sexypanels li a{
background: #000 url(media/sexypanelright.gif) no-repeat right top; /*color of menu by default*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0; /* Vertical (top/bottom) padding for each menu link */
text-indent: 8px;
text-decoration: none;
border-right: 7px solid red; /*right border of menu link*/
}

.sexypanels li a:visited, .sexypanels li a:active{
color: white;
}

.sexypanels li a:hover{
background-color: #00ff00; /*color of menu onMouseover*/
color: black;
 box-shadow: 1px 1px 6px 1px #ff0000;
border-right: 7px solid black; /*right border of menu link during hover*/
}

/* Menu Vertikal Sexy Panels Dengan CSS */

5. Simpan Template.
6. Selanjutnya lalu klik Tata Letak > Tambah Widget > HTML/Javascript kemudian copy kode berikut ini lalu paste kedalam kolom HTML/Javascript.

<ul class="sexypanels">
<li><a href="#">»  Home</a></li>
<li><a href="#">»  About</a></li>
<li><a href="#">»  Contact</a></li>
<li><a href="#">»  Disclaimer</a></li>
<li><a href="#">»  Sitemap</a></li>
<li><a href="http://mas-andes.blogspot.com">»  Faceblog Evolutions</a></li>      
</ul>

Keterangan:

• Ganti tanda # dengan URL link tujuan.
• Tulisan berwarna biru silahkan ganti dengan yang di inginkan. Sebagai contoh seperti pada baris akhir pada kode diatas.

7. Save dan lihat hasilnya.