Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Menu Vertikal Sexy Panels Dengan CSS

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.

Berlangganan artikel via email

12 Response to "Menu Vertikal Sexy Panels Dengan CSS"

bagaimana klo ingin menambahkan top post dan top comment pada css tersebut? saya juga liat logo top pos sobat sangat bagus, gimana cara buatnya?

Balas

mohon maaf sebelumnya mas, terus terang saya kurang jelas dengan yang dimaksud top post.
apakah yang dimaksud mas iswady "top post" itu sama artinya dengan "recent post" pada artikel ini:
http://mas-andes.blogspot.com/2013/03/jquery-widget-recent-post-automatic.html

jika bukan mohon kelanjutannya lebih jelas lagi mas :)

Balas

boleh dicoba lain kali nih
ashare-xp.blogspot.com

Balas

maksud saya artikel popular mas

Balas

Dilihat dari demo nya, memang sexy nih menu nya bro! :D
Warna & border nya juga masih bisa diutak-atik ya! Mantab bro. :)

Balas

ow.. oke mas akan saya postingkan sebentar lagi :)

Balas

dilihat dari demonya keren sob, izin copas kodenya sob, terima kasih tutorialnya

Balas

haha.. iya mas boleh aja

Balas

iya mas benar sekali, silahkan kalo ingin di otak atik lagi sesuai keinginan mas bro :D
terimakasih kunjungannya..

Balas

keren banget mas.. kpn2 ane coba deh

Balas

Menu ini sangat bagus dan perlu saya simpan dulu sobat untuk postingannya saya copas di save, suatu saat jika diperlukan sepertinya perlu dilakukan. karena utk saat ini blog saya sudah ada menunya..hehe..
terima kasih tutoriaslnya sangat bermanfaat sekali kawan
salam sukses selalu

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Menu Vertikal Sexy Panels Dengan CSS" ini bermanfaat, share ke jejaring sosial.
Konversi Kode