Stylish CSS3 Blur Menu Style For Blogger

In this post, im going to present about CSS3 blur menu Style.Ealier i posted more vertical bars. You can get a idea about how it work. actually this is a  simple vertical bar. So, you can modify it as your like.Im include demo for figure out easily.This is not include background image like demo.

DEMO

1. Log in to blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    ]]></b:skin>

3. Paste below code Before ]]></b:skin> tag

/* Coding by Bloggertrix  */
.bmenu li{
margin-top:30px;
list-style-type: none;
}

.bmenu li a{
    color: transparent;
    margin-top: 20px;
    list-style-type: none;
    display: block;
    text-transform: uppercase;
    font-size:35px;
    text-shadow: 0px 0px 5px #fff;
    letter-spacing: 1px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.bmenu:hover li a{
    text-shadow: 0px 0px 5px #0d1a3a;
    list-style-type: none;
}
.bmenu li a:hover{
    list-style-type: none;
    color: #fff;
    text-shadow: 0px 0px 1px #fff;
    padding-left: 10px;
}
/* Coding by Bloggertrix  */

4. Go to blogger  Design > Page Element.

5. Click Add Gadget and select 'HTML/Javascript

6.Paste below code.

<center>
    <ul class="bmenu">
    <li><a href="#">About</a></li>
    <li><a href="#">Illustrations</a></li>
    <li><a href="#">Photography</a></li>
    <li><a href="#">Web Design</a></li>
    <li><a href="#">Personal Projects</a></li>
    <li><a href="#">Contact</a></li>
</ul> 
</center> 

Replace with your links.

7. Now save your HTML/Javascript'.

    You are done...