Css3 Shadow Style Vertical Menu for Blogger

In this tutorial im gonna  explain  how to add together prissy vertical shadow card for your blogger. You tin dismiss add together this vertical card on sidebar and  link amongst your particular postal service or whatever categories.Im using Css3 together with HTML for this shadow vertical  menu. Its  include  prissy hover resultant You can   add together it  to your blogger yesteryear using gadget.

 how to add together prissy vertical shadow card for your blogger Css3 Shadow Style Vertical Menu for Blogger

1. Log inward to blogger draw of piece of job concern human relationship together with Click drib down.

 how to add together prissy vertical shadow card for your blogger Css3 Shadow Style Vertical Menu for Blogger

2. Now lead “Layout” Like Below.

3. Click Add Gadget together with select ‘HTML/Javascript

4. Paste  below code.

<style> .btrix_blockmenu{ font: bold 14px Germand; width: 190px; /* width of card */ } .btrix_blockmenu ul{ border: 1px company #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 company #cacaca; border-right: 1px company #cacaca; /*right edge betwixt card items*/ -moz-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); /* Add inset shadow to each card item. First three values inward (114,114,114, 0.5) specifies rgb values, final 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 laissez passer text unopen to depth */ -moz-transition: all 0.2s ease-in-out; /* Enable CSS transition betwixt belongings 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 three inset shadows to each card detail  */ -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="omelto.com">Contact me</a></li> </ul> </div>   

Replace # amongst your URLs.
5. Now relieve your HTML/Javascript’.You are done.
Hope this Shadow Vertical Menu helps to brand your weblog attractive.
Sumber http://www.bloggertrix.com/