Menu Vertikal Keren di Sidebar Efek Menu Statis Fixed

Seperti judul diatas dengan contoh gambarnya. kali ini saya akan memberikan 1 lagi menu vertikal yang gak kalah menariknya, tentunya akan semakin menambah kesan pro pada blog anda. Langsung saja, mari disimak yaaa...
Pertama masuk Layout >> Add a new Widget >> HTML/JAVASCRIPT
 Paste kedalamnya semua kode di bawah ini >>

<style>
ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
#BuildNextWebMenu{
    width: 240px;
    height: 100%;
    position: fixed;
}

.BuildNextWebMenu-left{
    left: -180px;
    top: 0px;
    transition:left 1s;
}

.BuildNextWebMenu-left:hover{
    left:0px;
}

/*################## RIGHT MENU ##############*/
.BuildNextWebMenu-right{
    right: -180px;
    top: 0px;
    direction: rtl;
    transition:right 1s;
}
.BuildNextWebMenu-right ul>li i,#toggle{
    right: 200px;
}

.BuildNextWebMenu-right:hover{
    right:0px;
}


#menuHeader{
    width: 100%;
    height: 60px;
    cursor: pointer;
}

#toggle{
    position: absolute;
    left: 195px;
    top: 10px;
}

#menuLogo{
    position: absolute;
    top: 10px;
}

#BuildNextWebMenu ul>li{
    position: relative;
    height: 45px;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

#BuildNextWebMenu ul>li a{
    color: #fff;
    line-height: 48px;
    margin: 20px;
    font-family: 'Alegreya Sans SC', sans-serif;
    transition: color 0.5s;
    text-decoration: none;
}
#BuildNextWebMenu ul>li i{
    position: absolute;
    left: 200px;
    top:15px;
    color: rgba(255, 255, 255, 0.3);
    transition: color 0.5s;
}
#social{
    width: 85%;
    height: 100px;
    margin: 20px auto auto auto;
}

#social a{
    text-decoration: none;
}

#social i{
    width: 36px;
    height: 36px;
    color: #fff;
    text-align: center;
    line-height: 37px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.5s;
}

#social .fa-facebook:hover{
    background: #305891;
}

#social .fa-twitter:hover{
    background: #2CA8D2;
}

#social .fa-youtube:hover{
    background: #C82828;
}

#social .fa-google-plus:hover{
    background: #CE4D39;
}

#BuildNextWebMenu{
    background: #222222;
    color: #fff;
}
#menuHeader{
    background: #24AAE9;
}

#BuildNextWebMenu ul>li:hover  a{
    color: #24AAE9;
}
#BuildNextWebMenu ul>li:hover  i{
    color: #24AAE9;
}
</style>
<div id="BuildNextWebMenu" class="BuildNextWebMenu-left">
    <div id="menuHeader">
        <div id="toggle"><i class="fa fa-bars fa-2x"></i></div>
      <div id="menuLogo"><img src="img/logo.png" alt="BuildNextWebMenu"/></div>
    </div>
    <nav>
        <ul>
            <li>
                <a href="#">
                    HOME <i class="fa fa-home"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    ABOUT <i class="fa fa-user"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    CLIENTS    <i class="fa fa-users"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    SHOP <i class="fa fa-shopping-cart"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    NEWS <i class="fa fa-file"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    SERVICES <i class="fa fa-laptop"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    PORTFOLIO <i class="fa fa-home"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    TEAM <i class="fa fa-group"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    BLOG <i class="fa fa-folder"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    MAP <i class="fa fa-map-marker"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    CONTACT <i class="fa fa-envelope"></i>
                </a>
            </li>
        </ul>
    </nav>

    <div id="social">
        <a href="#">
            <i class="fa fa-facebook fa-2x"></i>
        </a>   
        <a href="#">
            <i class="fa fa-google-plus fa-2x"></i>
        </a>   
        <a href="#">
            <i class="fa fa-twitter fa-2x"></i>
        </a>   
        <a href="#">
            <i class="fa fa-youtube fa-2x"></i>
        </a>   
    </div>

</div>

Terakhir Save/Simpan.
Eitttzzz satu lagi... setelah itu copy kode di bawah ini dibawah <meta content=) HTML blog anda. 

<link href='http://lipis.github.io/bootstrap-social/assets/css/font-awesome.css' rel='stylesheet'/>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

Sekian, semoga bermanfaat...