Share For You

Membuat menu vertikal menggunakan Css3 dengan efek shadow terlihat sangat keren , gimana caranya nih ane kasih tau sobat

1. Masuk Blogger --> Layout
2. Klik Add Gadget pilih ' HTML/JavaScript'
3. Pastekan kode dibawah ini

<style> .btrix_blockmenu{ font: bold 14px Germand; width: 190px; /* width of menu */ } .btrix_blockmenu ul{ border: 1px solid #eee; padding: 0; margin: 0; list-style: none; } .btrix_blockmenu ul li{ margin:0; padding:0; } .btrix_blockmenu 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 #cacaca; /*right border between menu items*/ -moz-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.5) specifies rgb values, last specifies opacity */ -webkit-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */ -moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */ -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; } .btrix_blockmenu ul li a:hover, .btrix_blockmenu ul li a.selected{ color: black; -moz-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8); /* Add 3 inset shadows to each menu item */ -webkit-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8); box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8); } </style> <div class="btrix_blockmenu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Category</a></li> <li><a href="#">Download</a></li> <li><a href="#">About Us</a></li> <li><a href="http://www.erwintipstrick.blogspot.com/">Contact me</a></li> </ul> </div>

4. Sekarang simpan ' HTML / JavaScript'

Semoga bermanfaat jangan lupa di like yah fan page nya.