Lihat Dulu demonya

DISINI

Jika Sobat Mau Membuatnya, silahkan ikuti langkah berikut: Log in ke aku Blogger Sobat,lalu Klik desain Edit Template,(Jangan lupa Back Up terlebih dahulu) untuk Menjaga kesalahan dalam pengeditan. setelah itu sobat masukan Kode CSS dibawah ini tepat di atas kode </b:skin>

.menuslide {
    width: 0;
    /* untuk lebar biarkan kosong */
}

.menuslide, .menuslide * {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.menuslide input[type="checkbox"] {
    /* tipe menu */
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
}

.menuslide > label {
    /* icon untuk label pada menu */
    z-index: 100;
    display: block;
    position: relative;
    font-size: 10px;
    /* ukuran font label menu */
    width: 3.5em;
    height: 3em;
    top: 0;
    left: 0;
    background: white;
    text-indent: -1000px;
    border: 0.6em solid black;
    /* border color */
    border-width: 0.6em 0;
    cursor: pointer;
    -moz-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    /* transition for animating label */
}


.menuslide > label::before, .menuslide > label::after {
    /* garis pembatas label */
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 0.6em;
    top: 50%;
    margin-top: -0.3em;
    left: 0;
    background: black;
    /* warna garis pembatas label */
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -moz-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    /* transisi flip menu */
}

.menuslide nav {
    /* posisi menu */
    margin: 0;
    padding: 5px;
    position: fixed;
    text-transform: uppercase;
    border-right: 1px solid gray;
    font: bold 14px Verdana;
    width: 280px;
    /* lebar kotak menu */
    height: 100%;
    left: -280px;
    /* jarak menu pada sisi */
    top: 0;
    z-index: 10000;
  -webkit-transform: translate3d(0, 0, 0); /* trigger hardware acceleration */
  transform: translate3d(0, 0, 0);
    background: rgb(242,242,242);
    /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(242,242,242,1) 0%, rgba(219,219,219,1) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(242,242,242,1)), color-stop(100%,rgba(219,219,219,1)));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(242,242,242,1) 0%,rgba(219,219,219,1) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(242,242,242,1) 0%,rgba(219,219,219,1) 100%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(242,242,242,1) 0%,rgba(219,219,219,1) 100%);
    /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(242,242,242,1) 0%,rgba(219,219,219,1) 100%);
    /* W3C */
    -moz-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    /* animasi untuk plip menu */
}


.menuslide nav h2 {
    color: black;
    margin-bottom: 10px;
    border-bottom: 2px solid #73462d;
}

.menuslide ul {
    /* UL menu inside container */
    list-style: none;
    margin: 0;
    padding: 0;
}

.menuslide li {
}


.menuslide li a {
    display: block;
    text-decoration: none;
    font-size: 1.4em;
    /* font size of menu links */
    border-left: 8px solid gray;
    border-bottom: 1px solid #c1c1c1;
    color: #3b3b3b;
    margin: 0;
    padding: 12px;
}

.menuslide li a:hover {
    background: black;
    color: white;
}


.menuslide nav label {
    /* tombol penutup */
    cursor: pointer;
    position: absolute;
    text-transform: lowercase;
    right: 0;
    top: 0;
    -moz-border-radius: 0 0 0 40px;
    -webkit-border-radius: 0 0 0 40px;
    border-radius: 0 0 0 40px;
    width: 40px;
    height: 30px;
    background: black;
    box-shadow: 0 0 5px gray;
    text-align: center;
}


.menuslide nav label::after {
    /* label button x */
    content: "x";
    color: white;
    display: block;
    font-size: 16px;
    margin-top: 2px;
    margin-left: 6px;
    -moz-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

.menuslide .overlay {
    /* overlay yang mencakup seluruh halaman ketika menu terbuka */
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: .6;
    background: black;
    z-index: 1001;
    visibility: hidden;
}

.menuslide .overlay label {
    /* label menu overlay on */
    width: 100%;
    height: 100%;
    position: absolute;
}


.menuslide nav label:hover::after {
    /* pointer ketika di arahkan pada:hover menu */
    -moz-transform: rotatey(180deg);
    -ms-transform: rotatey(180deg);
    -webkit-transform: rotatey(180deg);
    transform: rotatey(180deg);
    /* flip labels vertically onMouseover */
}

.menuslide input[type="checkbox"]:checked ~ label {
    /* posisi menu  */
    border-color: transparent;
}

.menuslide input[type="checkbox"]:checked ~ label::before {
    /* awal menu */
    transform: rotate(-45deg);
}

.menuslide input[type="checkbox"]:checked ~ label::after {
    /* menu ketika di buka  */
    transform: rotate(45deg);
}

.menuslide input[type="checkbox"]:checked ~ nav {
    /* posisi NAV menu  */
    left: 0;
    /* set 0 saja  */
}

.menuslide input[type="checkbox"]:checked ~ div.overlay {
    /* menu  */
    visibility: visible;
}

setelah itu masukan kode di bawah ini setelah kode <body>

<!--[if lte IE 8]>
<style>

.menuslide > label{
 border: 6px solid black;
 background: #eee;
 height: 30px;
}

</style>

<script>
 // ie 8 menu compatibility code:
document.createElement("nav")
window.onload = function(){
 var menuslidenav = document.getElementById("msidemenu")
 var mobilemaintoggler = document.getElementById("maintoggler")
 var mobilenavtoggler = document.getElementById("navtoggler")
 mobilemaintoggler.onclick = function(){
  menuslidenav.style.left = 0
 }
 mobilenavtoggler.onclick = function(){
  menuslidenav.style.left = '-100%'
 }
}

</script>


<![endif]-->
<div class="menuslide">
 <input type="checkbox" id="togglebox" />
 <!-- Modify anything inside the NAV element -->
 <nav id="msidemenu">
  <h2>Site Navigation</h2>
  <ul>
  <li><a href="http://code-html-untuk.blogspot.com/">Home</a></li>
  <li><a href="https://www.facebook.com/iNAYA.NET">Facebook</a></li>
  <li><a href="https://plus.google.com/101242605897784260218">Google +</a></li>
  <li><a href="http://www.twitter.com/">Twitter</a></li>
  <li><a href="http://code-html-untuk.blogspot.com/2014/10/link-exchange.html">Link Exchange</a></li>
  </ul>
  
  <h2>Share &amp;</h2>
  <p style="padding: 10px">Follow us on <a href="#">Twitter</a> or via <a href="#">RSS feed!</a></p>
 <div align='right' font-size='4px'>Edited by :http://code-html-untuk.blogspot.com/</div> 
  <label for="togglebox" id="navtoggler"></label>
 </nav>
 
 <div class="overlay"><label for="togglebox"></label></div>
 <label class="toggler" id="maintoggler" for="togglebox"></label>
</div>

klik simpan dan lihat hasilnya,, semoga bermanfaat