Wigdet Menu Slide

Hay teman2 kali ini saya akan membagikan tetntan wigdet slide menu yaitu seperti gambar di sini
ini contoh gambar nya

Nah seperti itu wigdet nya
untuk cara memasang nya pasti kalian sudah tau kan kalo wiget mah, pasti di HTML/javascript
oke kita langsung saja ke Cara memasang nya
Cara memasang nya
1. Sobat masuk dulu ke Dasboard blogger sobat sudah itu klik Tata letak

2, Klik Tambahkan Gadget
3. Tambah HTML/javascript

4. Tambahkan kode Di bawah ini

</div>

<nav>

<ul>

<li><a href="#">Product</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">Sitemap</a></li>

<li><a href="#">Advertise</a></li>

</ul>

</nav>

</div>

</div>

</a>

<style>

/* Stuff I added */

.menu-outer:hover ~ .menu-close {

margin-right:-100px;

background-color:#444;

}

.menu-outer:hover .bar { background:rgba(100,200,240,.9); }

.menu-outer > nav ul { top:5%; }

.menu-outer {

overflow: hidden;

position: fixed;

top: 0;

font-family: 'Montserrat', serif;

z-index: 998;

width: 100%;

left: 100%;

margin-left: -100px;

height: 200%;

background: rgba(100,200,240,.9);

-webkit-transition: all ease .5s;

-moz-transition: all ease .5s;

-ms-transition: all ease .5s;

-o-transition: all ease .5s;

transition: all ease .5s;

-webkit-transform-origin: top left;

-moz-transform-origin: top left;

-ms-transform-origin: top left;

-o-transform-origin: top left;

transform-origin: top left;

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

}

.menu-outer:hover {

background: rgba(100,200,240,.98);

left: 0;

margin-left: 0;

-webkit-transform: rotate(0deg);

-moz-transform: rotate(0deg);

-ms-transform: rotate(0deg);

-o-transform: rotate(0deg);

transform: rotate(0deg);

}

.menu-icon {

z-index: 999;

position: absolute;

top: 58px;

left: 15px;

width: 30px;

pointer-events: none;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-transition: all ease .5s;

-moz-transition: all ease .5s;

-ms-transition: all ease .5s;

-o-transition: all ease .5s;

transition: all ease .5s;

}

.menu-icon .bar {

background: rgba(250,250,250,1);

width: 100%;

height: 5px;

margin: 0 0 5px;

-webkit-transition: all ease .5s;

-moz-transition: all ease .5s;

-ms-transition: all ease .5s;

-o-transition: all ease .5s;

transition: all ease .5s;

}

.menu-outer:hover > .menu-icon {

opacity: 0;

}

nav ul {

position:absolute;

width:100%;

padding: 0;

left: 10%;; /*prevents possible click when not oppened*/

-webkit-transition: all ease .5s;

-moz-transition: all ease .5s;

-ms-transition: all ease .5s;

-o-transition: all ease .5s;

transition: all ease .5s;

}

.menu-outer:hover > nav ul {

left: 0;

}

nav li {

list-style:none;

text-align: center;

text-transform: uppercase;

}

nav li a {

font-size: 2em;

color: #fff;

text-decoration: none;

margin: 0 auto;

padding: 20px;

display:block;

-webkit-transition: all ease .5s;

-moz-transition: all ease .5s;

-ms-transition: all ease .5s;

-o-transition: all ease .5s;

transition: all ease .5s;

}

nav li a:hover {

color:#fafafa;

text-decoration:none;

}

@media screen and (max-width: 600px), screen and (max-height: 600px) {

nav ul {font-size:.75em;}

nav ul a {padding: 10px;}

}

.menu-close {

z-index: 9999;

position: fixed;

top: 0;

right: 100%;

width: 200px;

height: 200px;

background: rgba(250,130,70,1);

cursor: pointer;

-webkit-transition: all ease .5s;

-moz-transition: all ease .5s;

-ms-transition: all ease .5s;

-o-transition: all ease .5s;

transition: all ease .5s;

-webkit-transform-origin: top right;

-moz-transform-origin: top right;

-ms-transform-origin: top right;

-o-transform-origin: top right;

transform-origin: top right;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

}

.menu-close .menu-icon {

right: 15px; left: auto;top: 68px;

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

}

.menu-close .bar {

background: rgba(250,250,250,1);

width: 100%;

height: 5px;

position:absolute;

-webkit-transform-origin: center;

-moz-transform-origin: center;

-ms-transform-origin: center;

-o-transform-origin: center;

transform-origin: center;

}

.menu-close .bar:first-child {

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

}

.menu-close .bar:last-child {

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

}

</style>

Ganti Kode # di atas yang Saya beri warna Biru, itu untuk link nya
dan juga kode yang saya beri berwarna Hijau itu untuk nama yang akan di tampilkan

jika sudah selesai coba es hasilnya menu nya di pojok kanan arahin aja cursor nya ke pojok kanan yang berwarna blue
aturlah dengan sesuai kalian oke cuman segitu aja dari saya makasih kalian senua yang berkunjung ke bllogger saya semoga sehat selalu
Amin...

jangan lupa like nya ya sobat
Salam BLS CYBER