widget panel menu slide

satu lagi dari web si penjual widget .
kasihan yah , tapi mau apalagi , untuk membelinya tak ada duit , maklum saja habis di korup .. hahaahaha .
konon widget ini telah terjual ratusan kali , menurut sumbernya yah sudah 456x dengan harga 6 dollar , wouuww.
cukup murah sih sebenarnya dibandingkan dengan ilmunya yang menurut saya cukup mahal .

tapi itulah kita selalu mau yang gratisan dan simpel .
nah , ini gratis !, sudah diobrak abrik lagi , tinggal pakai , simpel lagi pemasangannya .
lihat saja caranya digambar atas . mudah bukan? ... hahahahahaha.

simpan di widget ; HTML/JAVASCRIPT .

script yang terpakai di widget ini adalah script full tanpa link , jadi kecil kemungkinan apabila di hack pemiliknya .
tinggal kalian buka link dan simpan isinya , soalnya bila saya posting kepanjangan dik .

jangan lupa memakai font awesome .
dan silahkan diedit , yang jelas dia responsive .

<style>
body {
background: #FFF/*545454*/;
}
.page_wrapper {
position: relative;
max-width: 960px;
width:90%;
margin: 0 auto;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:21px;
}

/*-------1 MENU CONTAINER --------*/
.pocp_left {
position: fixed;
top:0;
height: 100%;
z-index: 9999;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:21px;
-webkit-transition: all 0.4s 0.2s;
-moz-transition: all 0.4s 0.2s;
-o-transition: all 0.4s 0.2s;
transition: all 0.4s 0.2s;
}
.pocp_left {
left:-240px;
}
.pocp_left.pocp_show {
left:0;
}
.pocp {
position: relative;
width: 240px;
height: 100%;
background: #191919;
color: #FFF;
text-shadow:0px 1px 0px #000000;
padding: 0;
-webkit-transition: all 0.4s 0.2s;
-moz-transition: all 0.4s 0.2s;
-o-transition: all 0.4s 0.2s;
transition: all 0.4s 0.2s;
-webkit-box-shadow: inset rgba(0,0,0,.25) -6px 0 8px;
-moz-box-shadow: inset rgba(0,0,0,.25) -6px 0 8px;
box-shadow: inset rgba(0,0,0,.25) -6px 0 8px;
}

/* CSS3 3D Animations - Chrome & Safari only */
.pocp_left {
-webkit-perspective: 500;
}
.pocp_left .pocp {
-webkit-transform-origin: 0% 0%;
-webkit-transform: translateX(-50%) rotateY(90deg);
}
.pocp_left .pocp_active {
-webkit-transform: rotateY(0deg) translateX(0);
}

/*---------2 TOGGLE BUTTON -------------*/
.pocp_button {
position: fixed;
z-index: 9999;
top: 20px;
font-size: 14px;
color: #fff;
/*text-shadow:1px 1px 1px #000;*/
text-decoration: none;
padding: 0 12px;
background: #191919;
outline:none;
-webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.3s 0.2s;
-moz-transition: all 0.3s 0.2s;
-o-transition: all 0.3s 0.2s;
transition: all 0.3s 0.2s;
}
.pocp_button i {
font-size: 18px;
line-height: 32px;
padding-top: 1px;
float: left;
}
.pocp_button_left {
left: 20px;
}
.pocp_button_left.btn_active {
left: 260px;
}

/*---------3 PANEL CONTENT----------*/
.pocp .pocp_content {
float: left;
width:200px;
padding: 0 20px;
}

/* 1. Basic Typography */
.pocp p,
.pocp h2,
.pocp ul {
}
.pocp p {
margin: 0 0 21px 0;
line-height: 21px;
}
.pocp h2 {
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.pocp h2 {
font-size: 20px;
line-height: 22px;
margin-bottom: 21px;
}
.pocp a {
text-decoration: none;
color: #FFF;
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
-o-transition: color 0.2s;
transition: color 0.2s;
}
.pocp a:hover {
color: #eeeeee;
}

/* 3. Icons Lists */
.pocp .pocp_icons {
list-style: none;
padding: 0;
margin: 0 0 21px -20px;
color: #eeeeee;
}
.pocp .pocp_icons li {
padding: 0 20px;
text-align: left;
border-radius: 0 3px 3px 0;
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
-o-transition: background 0.3s;
transition: background 0.3s;
}
.pocp .pocp_icons li:hover {
background: #0a0a0a;
}
.pocp .pocp_icons a {
color: #eeeeee;
}
.pocp .pocp_icons i {
font-size: 14px;
width: 24px;
float: left;
}
.pocp .pocp_icons li,
.pocp .pocp_icons i {
line-height: 28px;
}

/*---4. Styled Paragraphs ----*/
.pocp .dark,
.pocp .brown,
.pocp .yellow,
.pocp .red,
.pocp .blue,
.pocp .green {
padding:0 0 0 12px;
}
.pocp .dark {
border-left:#3B3B3B solid 7px;
}
.pocp .brown {
border-left:#8D8767 solid 7px;
}
.pocp .yellow {
border-left:#DBA742 solid 7px;
}
.pocp .red {
border-left:#C05D48 solid 7px;
}
.pocp .blue {
border-left:#52878B solid 7px;
}
.pocp .green {
border-left:#808f4d solid 7px;
}

/*----5 Videos & Images -----*/
.pocp .video_container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-bottom: 18px;
}
.pocp .video_container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:none;
outline: none;
}
.pocp iframe {
border:0;
outline: none;
width: 100%;
font-size:100%;
vertical-align:baseline;
background:transparent;
margin-bottom: 12px;
}
.pocp img {
border:none;
}
.pocp .inline_img {
max-width: 100%;
height: auto;
box-sizing: border-box;
-webkit-box-shadow: 0 2px 3px #000000;
-moz-box-shadow: 0 2px 3px #000000;
-o-box-shadow: 0 2px 3px #000000;
box-shadow: 0 2px 3px #000000;
margin-bottom:18px;
margin-top: 6px;
}

/*--------6 PANEL DROP OK---------*/
.pocp .pocp_toggle {
list-style: none;
padding: 0;
margin: 0 0 21px -20px;
}
.pocp .pocp_toggle li {
margin-bottom: 9px;
cursor:pointer;
}
.pocp .pocp_toggle .pocp_toggle_title {margin:0;
}
.pocp .pocp_toggle .pocp_toggle_title.toggle_active {
border-radius: 0 3px 0 0;
}
.pocp .pocp_toggle .pocp_toggle_title i {
padding-top: 4px;
float: right;
}
.pocp .pocp_toggle .pocp_panel {
margin:0 0 9px 0;
display:none;
background: #/*889694*/; /*LATAR DROP HIDDEN*/
padding:12px 20px 12px 20px;
border-radius: 0 0 3px 0;
}
.pocp .pocp_toggle .pocp_panel p {
margin-bottom:0;
}
</style>

<!--SCROLLBAR-->
<link href='https://googledrive.com/host/0B6NRsLHpHmOvY095QnloZDVGRGs' rel='stylesheet'/>

<script src="https://googledrive.com/host/0B6NRsLHpHmOvTGtXcFNLS1RvOFk" type="text/javascript"/></script><!--jQuery v1.10.2-->

<script src="https://googledrive.com/host/0B6NRsLHpHmOvUlNLdFp4QW1xZ1k" type="text/javascript"/></script><!--function-->

<script>
$(document).ready(function($){
$('#pocp1').pullOutContentPanel(
// No options in the demo
);
});
</script>

<!--menu panel-->
<div id="pocp1" class="pocp_left"><!-- BEGIN PULL OUT CONTENT PANEL -->
<div class="pocp"><!-- BEGIN PANEL CONTAINER -->
<div class="pocp_content"><!-- BEGIN PANEL INNER CONTENT -->
<!--silahkan tambah sesuatu disini-->
<ul class="pocp_icons">
<li><a href="http://themeforest.net/"><i class="icon-gear"></i>ThemeForest</a></li>
<li><a href="http://codecanyon.net/"><i class="icon-code"></i>CodeCanyon</a></li>
<li><a href="http://audiojungle.net/"><i class="icon-music"></i>AudioJungle</a></li>
<li><a href="http://videohive.net/"><i class="icon-bookmark"></i>VideoHive</a></li>
<li><a href="http://activeden.net/"><i class="icon-lock"></i>ActiveDen</a></li>
<li><a href="http://graphicriver.net/"><i class="icon-tag"></i>GraphicRiver</a></li>
<li><a href="http://android.appstorm.net/"><i class="icon-leaf"></i>Android.Apptorm</a></li>
<li><a href="http://notes.envato.com/"><i class="icon-star"></i>Envato Notes</a></li>
</ul>

<p>link panel drop</p>

<ul class="pocp_toggle">
<li>
<span class="pocp_toggle_title"><i class="icon-plus"></i>About Us</span>
<div class="pocp_panel">
<!--CONTOH CARA MEMBERI LINK -->
<a target='_blank' href="http://themeforest.net/"><i class="icon-gear"></i> ThemeForest</a> <br />
<a target='_blank' href="http://codecanyon.net/"><i class="icon-code"></i> CodeCanyon</a> <br />
<a target='_blank' href="http://audiojungle.net/"><i class="icon-music"></i> AudioJungle</a> <br />
<a target='_blank' href="http://videohive.net/"><i class="icon-bookmark"></i> VideoHive</a> <br />
<a target='_blank' href="http://activeden.net/"><i class="icon-lock"></i> ActiveDen</a> <br />
<a target='_blank' href="http://graphicriver.net/"><i class="icon-tag"></i> GraphicRiver</a> <br />
<a target='_blank' href="http://android.appstorm.net/"><i class="icon-leaf"></i> Android.Apptorm</a> <br />
<a target='_blank' href="http://notes.envato.com/"><i class="icon-star"></i> Envato Notes</a>
</div>
</li>

<li>
<span class="pocp_toggle_title"><i class="icon-plus"></i>Team</span>
<div class="pocp_panel">
1- isi sesuatu disini
</div>
</li>

<li>
<span class="pocp_toggle_title"><i class="icon-plus"></i>Portfolio</span>
<div class="pocp_panel">
2- isi sesuatu disini
</div>
</li>

<li>
<span class="pocp_toggle_title"><i class="icon-plus"></i> cuma tambahan 1</span>
<div class="pocp_panel">
3 - isi sesuatu disini
</div>
</li>

<li>
<span class="pocp_toggle_title"><i class="icon-plus"></i> cuma tambahan VIDEO</span>
<div class="pocp_panel">
<iframe width="100%" height="100%" src="//www.youtube.com/embed/-uczamirV6k" frameborder="0" allowfullscreen></iframe>
</div>
</li>

<li>
<span class="pocp_toggle_title"><i class="icon-plus"></i> cuma tambahan 3</span>
<div class="pocp_panel">
5 - isi sesuatu disini
</div>
</li>

<!--ISI LAGI DISINI SEPERTI TAMBAHAN TSB-->
</ul>

<h3>Styled Elements</h3>

<p class="dark">This is a text contained into a <strong>dark</strong> container with a border.</p>
<p class="brown">This is a text contained into a <strong>brown</strong> container with a border.</p>
<p class="yellow">This is a text contained into a <strong>yellow</strong> container with a border.</p>
<p class="red">This is a text contained into a <strong>red</strong> container with a border.</p>
<p class="blue">This is a text contained into a <strong>blue</strong> container with a border.</p>
<p class="green">This is a text contained into a <strong>green</strong> container with a border.</p>

<h3>Video</h3>
<p class="green">nonton bareng</p>
<div class="video_container">
<iframe width="100%" height="100%/*315*/" src="//www.youtube.com/embed/-uczamirV6k" frameborder="0" allowfullscreen></iframe>
</div>
isi sesuatu disini

</div><!-- END PANEL INNER CONTENT -->
</div><!-- END PANEL CONTAINER -->
</div><!-- END PULL OUT CONTENT PANEL -->

demo

SILAHKAN DIEDIT