Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Monday, April 15, 2013

Cara membuat Menu Vertical dengan Css3 Shadow Style

Cara membuat Menu Vertical dengan Css3 Shadow Style
Pada postingan kali ini saya, saya ingin membagi ilmu buat sobat sobat bloger. Trik yang akan saya posting kali ini adalah membuat Menu Vertikal dengan menggunakan CSS3 yang mempunyai style Shadow( Bayangan ). Trik kali ini sangat cocok untuk blog kita disamping memperindah halaman sangat simpel untuk diterapkan. Saya dapat ide dari berbagai sobat sobat bloger saya yang memang saya akui sudah mempunyai kemampuan yang baik didunia pemprograman. Jadi widget kali ini sudah lengkap dengan code CSS3 alias satu paket. Oke daripada panjang lebar dan kebahisan kata kata, kita langsung aja menuju TKP :



  • Login ke Blog sobat
  • Pilih Layout/tata letak
  • Add Gadget
  • Copas Code dibawah ini

<style>
.rivai_menu{
font: bold 14px Arial;
width: 190px;         /* lebar menu */
}
.rivai_menu ul{
border: 1px solid #eee;
padding: 0;
margin: 0;
list-style: none;
}
.rivai_menu ul li{
margin:0;
padding:0;
}
.rivai_menu ul li a{
display:block;
text-transform: uppercase;
color: #494949;
padding: 10px 15px;
text-decoration: none;
border-bottom: 1px solid #cacaca;
border-right: 1px solid #a5a5a4;
-moz-box-shadow: inset 7px 0 10px rgba(199,100,2, 0.6);
-webkit-box-shadow: inset 7px 0 10px rgba(199,100,2, 0.6);
box-shadow: inset 7px 0 10px rgba(199,100,2, 0.6);
text-shadow: 0 -1px 1px #a0fef8;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.rivai_menu ul li a:hover, .rivai_menu ul li a.selected{
color:#fd0a04;
-moz-box-shadow: inset 7px 0 10px rgba(79,102,220, 0.5), inset 0 0 15px rgba(79,102,220, 0.6), inset 0 0 20px rgba(79,102,220, 0.8);
-webkit-box-shadow: inset 7px 0 10px rgba(79,102,220, 0.5), inset 0 0 15px rgba(79,102,220, 0.6), inset 0 0 20px rgba(79,102,220, 0.8);
box-shadow: inset 7px 0 10px rgba(79,102,220, 0.5), inset 0 0 15px rgba(79,102,220, 0.6), inset 0 0 20px rgba(79,102,220, 0.8);
}
</style>

<div class="rivai_menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Trik Blog</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Template</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">About Me</a></li>
<li><a href="http://rivai-silaban.blogspot.com/">Contact Me</a></li>
</ul>
</div>



Keterangan gambar

width: 190px;  Lebar Menu
#              Link Halaman 
Home           Nama Halaman

Salam bloger...!! semoga artikel kali ini yang sudah susah payahnya saya posting dapat berguna buat sobat sobat bloger..

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Unknown Update pada : 2:13 PM

3 comments :

  1. gan maaf agak menyinpang nich, gimana cara bikin menu di area fotter yg seperti agan punya, soalnya ane udah keliling di rumah mbah google, tapi'gak ketemu. Terima kasih sebelumnya.

    ReplyDelete
    Replies
    1. kalo untuk floating menu persis seperti diatas besaok saja sob saya posting ya soalnya dah mulai ngantuk sob maklumlah kerja berat terus.. heheheh

      besok siang sudah saya buatkan artikelnya..
      makasih atas kunjungannya.. salam

      Delete
  2. oh kemarin saya sudah posting sob ini linknya
    http://rivai-silaban.blogspot.com/2013/07/floating-menu-valid-html5-and-seo.html

    ReplyDelete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog