WIGDET MENU SLIDE OUT FOR BLOGGER

Masih nge bahas tentang menu:
kali ini saya akan membagikan wigdet menu slide out di blogger contoh seperti gambar di bawah

Jika sobat ingin jadi seperti biasa tentang masalah wigdet blogger

lihat gambar ini untuk cara memasang nya

<style>
@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}
.wrapper{
  width: 325px;
  height: 50px;
  position: absolute;
top: 91%;
  left: 74%;
  margin-left: -162px;
  margin-top: -25px;
}

.icon{
  display: inline-block;
  position: relative;
  color: #bdbdbd;
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 1.47em;
  line-height: 2em;
  background-color: #fff;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  box-shadow: 0px 3px 0px #bdbdbd, 0px 3px 10px #bababa;
  -webkit-transition:background-color 250ms ease 0s;
  transition:background-color 250ms ease 0s;
}

.zocial-facebook{margin-left: -8px;margin-left: -2px;
  position: relative;
  top: 6px;}

.icon.facebook:hover{background-color: #4986c7;}
.twitter:hover{background-color: #4cb6e8;}
.linkedin:hover{background-color: #29a0cc;}
.youtube:hover{background-color: #a32929;}
.google:hover{background-color: #C75345;}

a{
  text-decoration: none;
}
a:hover{
text-decoration: none;
}
.icon:hover{
  color: #fff;
  box-shadow: 0px 3px 0px #686868, 0px 3px 10px #7e7e7e;
}

.icon:active{
  box-shadow: inset 0px 1px 4px #3d3d3d, 0px 0px 0px #bdbdbd;
  top: 3px;
}
</style>
<style>
span.zocial-linkedin,span.zocial-youtube,span.zocial-twitter,span.zocial-google {
  position: relative;
  top: 5px;
}
.flexsearch--wrapper {
 height: auto;
 width: auto;
 max-width: 100%;
 overflow: hidden;
 background: transparent;
 margin: 0;
 position: static;
}

.flexsearch--form {
 overflow: hidden;
 position: relative;
}

.flexsearch--input-wrapper {
 padding: 0 66px 0 0; /* Right padding for submit button width */
 overflow: hidden;
}

.flexsearch--input {
  width: 100%;
}

/***********************
 * Configurable Styles *
 ***********************/

.flexsearch--input {
  height: 30px;
  padding: 0 50px 0 10px;
  border-color: #888;
  border-radius: 35px;
  border-style: solid;
  border-width: 2px;
  margin-top: 5px;
  color: #333;
  font-family: 'Helvetica', sans-serif;
  font-size: 18px;
  -webkit-appearance: none;
  -moz-appearance: none;
}
input.flexsearch--submit {
  background: none;
  border: none;
  color: #888;
  position: relative;
  float: right;
  position: relative;
  bottom: 28px;
  right: 10px;
  font-size: 15px;
}

.flexsearch--input:focus {
  outline: none;
  border-color: #67B045;
}

.flexsearch--input:focus.flexsearch--submit {
  color: #333;
}

.flexsearch--submit:hover {
  color: #67B045;
  cursor: pointer;
}

::-webkit-input-placeholder {
 color: #888; 
}

input:-moz-placeholder {
  color: #888
}
#cssmenu {
  background: #333;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 244px;
position:relative;
right:24px;
top:0px;
}
#cssmenu li {
  font: 17px "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  list-style: none;
text-align:center;
}
#cssmenu a {
  background: #333;
  border-bottom: 1px solid #393939;
  color: #ccc;
  display: block;
  margin: 0;
  padding: 8px 12px;
  text-decoration: none;
  font-weight: normal;
}
#cssmenu a:hover {
  background: #67B045;
  color: #fff;
  padding-bottom: 8px;
}

.menu {
    overflow-x:hidden;
    position:relative;
    left:0;
}

.menu-open {
    margin-left:241px;
}

.menu-open .menu-side {
    left:0;
}

.menu-side,
.menu {
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.menu-side {
    position:fixed;
    left:-231px;
    top:0;
    width:210px;
    border-right:1px solid #000;
    height:100%;
    background-color:#333;
    color:#fff;
    padding:10px;
}
</style>

<link rel="stylesheet" href="css/main.css" />
<header>
<a href="#" class="menu-toggle"><img src="http://www.jacksontransit.com/images/menu.png"/></a>
</header>
<nav class="menu-side">
<div id='fksearch'>
<div class="flexsearch">
<div class="flexsearch--wrapper">
<form class="flexsearch--form" action="/search" method="get">
<div class="flexsearch--input-wrapper">
<input class="flexsearch--input" type="text" placeholder="search here..." name="q" />
</div>
<input class="flexsearch--submit" type="submit" value="&#10140;"/>
</form>
</div>
</div>
</div>
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><img src="http://i61.tinypic.com/21lsl7o.png" style="
    width: 20px;
    height: 20px;
    position: relative;
    top: 3px;
" /><span>  Home</span></a></li>
<li class='active'><a href='#'><img src="http://i60.tinypic.com/wbulcl.png" style="
    position: relative;
    top: 3px;
" /><span>  About</span></a></li>
<li><a href='#'><img src="http://i57.tinypic.com/ax0fhu.png" style="
    position: relative;
    top: 3px;
" /><span>  Product 1</span></a></li>
<li><a href='#'><img src="http://i57.tinypic.com/ax0fhu.png" style="
    position: relative;
    top: 3px;
" /><span>  Product 2</span></a></li>
<li><a href='#'><img src="http://i62.tinypic.com/35cg6s6.png" style="
    width: 22px;
    height: 22px;
    position: relative;
    top: 3px;
" /><span>  Sitemap</span></a></li>
<li><a href='#'><img src="http://i59.tinypic.com/208gxs4.png" style="
    position: relative;
    top: 3px;
" /><span>  Advertise</span></a></li>
<li class='last'><a href='#'><img src="http://i58.tinypic.com/2nlycu8.png" style="
    position: relative;
    top: 3px;
" /><span></span> Contact</a></li>
</ul>
</div>
<div class="wrapper">
<a class="icon facebook" href="#"><span class="social-facebook"></span></a>
<a class="icon twitter" href="#"><span class="social-twitter"></span></a>
<a class="icon google" href="#"><span class="social-google"></span></a>
<a class="icon linkedin" href="#"><span class="social-linkedin"></span></a>
</div>
</nav>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
            (function() {
                var body = $('body');
                $('.menu-toggle').bind('click', function() {
                    body.toggleClass('menu-open');
                    return false;
                });
            })();
        </script>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>


CATATAN :
kode yang berwarna atur lah sesuai sobat
dan kode pagr itu untuk link nya
maka ini menu saya buat demo nya