jquery sidebar menu

widget ini sama halnya slide menu sidebar yang lain , hanya kelebihan widget ini punya ciri tersendiri .
di tetaer88 setiap widget dari situs penjual selalu open source susunan serta link rell script/css .
seperti widget sebelumnya , ini di peruntukkan buat wordpress , namun setelah saya coba di widget HTML/JAVASCRIPT ternyata dia bekerja juga di BLOGGER.
dikarenakan saya hanya memperlihatkan susunan widget ini hingga dia bekerja , maka cobalah untuk diutak atik agar tampilannya lebih mantap .

LAPORKAN LINK YANG TAK BISA DI BUKA ATAU DI COPY .

lihat widget lain setelah kalian memasang setiap widget , apakah dia juga bekerja , karna setiap template tidak semua sama karakternya .

gunakan widget sesuai keperluan blog kalian , jangan cuma masang agar ramai .
dan jangan lupa simpan isi link rell nya , karna jangan sampai saya hapus .

<script src="https://googledrive.com/host/0B6NRsLHpHmOvMnZ6bVRVTEszemc" type="text/javascript"/></script>

<script>
$(document).ready(function (){
//Usage
// Slide effect
$("#slide.menu ul li").sidebarMenu();
// Sidebars effect
$("#sidebars.menu ul li").sidebarMenu({
effect: "sidebars"
});
});
</script>
<script src="https://googledrive.com/host/0B6NRsLHpHmOvUUl1SWFaNDNQdTA" type="text/javascript"/></script>

<script src="https://googledrive.com/host/0B6NRsLHpHmOvMDgtelIyMDl5dUU" type="text/javascript"/></script>

<style>
@charset "utf-8";
.sidebarMenu {
position:fixed;
top:0px;
left:-250px;
height: 100%;
width: 250px;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #262626),
color-stop(1, #2E2E2E)
);
background-image: -o-linear-gradient(bottom, #262626 0%, #2E2E2E 100%);
background-image: -moz-linear-gradient(bottom, #262626 0%, #2E2E2E 100%);
background-image: -webkit-linear-gradient(bottom, #262626 0%, #2E2E2E 100%);
background-image: -ms-linear-gradient(bottom, #262626 0%, #2E2E2E 100%);
background-image: linear-gradient(to bottom, #262626 0%, #2E2E2E 100%);
border-right: solid 2px #0D0F0F;
z-index: 89999;}
.sidebarMenu .buttonsidebar {
position: absolute;
height: 20px;
width: 20px;
right: -20px;
top: 18px;
padding: 2px 0px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXAYWkUsFZWfq9IZjV0AOpMD5Z7nke4duW2HZmQ34JiI7JRQTo22Pj4sN_AkwxTYXiaMqjxEWzICl9qutwo4dsvfv4GYl4Mai8oUvYROI3yTn4juDSiNMgY8Cua5P8eUb6VYg6XMk4qMk/s1600/button.png) center no-repeat #000000;
border-radius: 4px;
z-index: 109999;}
.sidebarMenu .buttonsidebar a {
display: block;
height: 100%;
width: 100%;}
.sidebarMenu ul {
position: absolute;
width: 100%;
display: block;
top:45px;
overflow: hidden;}
.sidebarMenu div.submenu {
position: relative;}
.sidebarMenu div.subbarMenu {
position: absolute;}
.sidebarMenu h3 {
display: block;
position: absolute;
width: 228px;
left: 5px;
top: 10px;
font-size:1.0em;
font-weight: normal;
color:#838383;}
.sidebarMenu .back {
position: absolute;
height: 32px;
width: 32px;
top:10px;
left: 0px;
opacity: 0.7;
z-index: 9000;}
.sidebarMenu .back a {
display: block;
height: 100%;
width: 100%;
background: url(http://lukasz-design.pl/codecanyon/smenu/images/back.svg);
background-size: 28px;}
/* Items */
.sidebarMenu ul li {
position:relative;
width:100%;
display:block;
margin-top: 2px;
list-style:none;
overflow:visible;
float:left; }
.sidebarMenu ul li a {
display:block;
width: 100%;
padding: 10px 3px 10px 28px;
font-size: 0.9em;
color:#F9F9F9;
text-shadow: 1px 1px #000000;
outline:none; }
.sidebarMenu .active {
background-color: #12CADE !important;
text-decoration: none;
opacity: 1.0;}
.sidebarMenu ul li a:hover {text-decoration: none;}
.sidebarMenu .back:hover {opacity: 1.0;}
/* Subitems */
.sidebarMenu .subm {display: none;}
/* Icons */
.sidebarMenu a.icon1 {
background: url(http://lukasz-design.pl/codecanyon/smenu/icons/box.svg) 3px 8px no-repeat;
background-size: 20px;}
.sidebarMenu a.icon2 {
background: url(http://lukasz-design.pl/codecanyon/smenu/icons/world.svg) 3px 7px no-repeat;
background-size: 20px;}
.sidebarMenu a.icon3 {
background: url(http://lukasz-design.pl/codecanyon/smenu/icons/contact.svg) 7px 9px no-repeat;
background-size: 20px;}
</style>

<style>
@charset "utf-8";
/* reset marginesów oraz dopełnień */
html, body, ul, li { margin: 0; padding: 6px; line-height: 1.2em;}
br {line-height:8px; margin:0px;}

/* reset wysokości linii i fontu */
h1, h2, ul, li, p { margin: 0; padding: 0; }

/* ustawienia globalne */
html, body {font-family:georgia, verdana, tahoma, arial, sans-serif; font-size: 0.625em/1.5em;
background:#transparent; }
a {color:#1c769a; text-decoration:none; font-size:1.1em;}
a:hover {text-decoration:underline;}

/*TYTUA*/
h2 {
font-size:1.3em;
text-align:center;
color:#414141;
margin-bottom:0px; padding:0px;
}
h3 {
font-size:0.8em;
text-align:center;
color:#8f8f8f;
margin-top:3px; padding-top:0px;
margin-bottom:25px;
}
h3 a {
color:#747474;
}

</style>

<!-- MENU STRUCTURE -->
<div class="menu" id="slide">
<ul>
<li><a href="#" class="icon1">Item 1 with subitems</a>
<ul>
<li> <a href="#sub1">Subitem 1</a></li>
<li><a href="#sub2">Subitem 2 with subitems</a>
<ul>
<li> <a href="#">Subitem 1</a></li>
<li><a href="#">Subitem 2</a></li>
<li><a href="#">Subitem 3 with subitems</a>
<ul>
<li> <a href="#">Subitem 1</a></li>
<li><a href="#">Subitem 2</a></li>
<li><a href="#">Subitem 3</a></li>
<li><a href="#">Subitem 4</a></li>
</ul>
</li>
<li><a href="#">Subitem 4</a></li>
</ul>
</li>
<li><a href="#sub3">Subitem 3</a></li>
<li><a href="#sub4">Subitem 4 with subitems</a>
<ul>
<li> <a href="#">Subitem 1</a></li>
<li><a href="#">Subitem 2</a></li>
</ul>
</li>
<li><a href="#sub5">Subitem 5</a></li>
</ul>
</li>
<li><a href="#" class="icon2">Item 2 with subitems</a>
<ul>
<li> <a href="#subb1">Subitem 1</a></li>
<li><a href="#subb2">Subitem 2</a></li>
<li><a href="#subb3">Subitem 3</a></li>
<li><a href="#subb4">Subitem 4</a></li>
</ul>
</li>
<li><a href="#" class="icon3">Item 3 with subitems</a>
<ul>
<li> <a href="#">Subitem 1</a></li>
<li><a href="#">Subitem 2</a></li>
<li><a href="#">Subitem 3</a></li>
<li><a href="#">Subitem 4</a></li>
<li><a href="#">Subitem 5</a></li>
<li><a href="#">Subitem 6</a></li>
</ul>
</li>
<li><a href="#">Normal item</a></li>
</ul>
</div>
<!-- end MENU STRUCTURE -->

codecanyon