JQUERY SLIDDING MENU ~ MOONROEMOORT

18 February 2014

setelah lama tidak posting kali ini saya akan coba share JQUERY SLIDDING MENU . dulu juga saya pernah share floating pop out vertical .yah keduanya sama - sama berbentuk slide ,tapi JQUERY SLIDDING MENU ini lebih lengkap dan lebih keren di banding floating pop out vertical menurut saya....
hasil yang sebenarnya bukanlah seperti yang tertera pada gambar di atas berhubung saya cari - cari gambar nya tidak ada jadi saya ambil saja gambar tersebut ,memang sangat mirip dengan gambar tapi ini lebih lengkap ,,,

agar anda tidak kecewa dengan hasilnya nanti saya sudah mempersiapkan live demo nya bisa di lihat di sini

CARA PEMASANGAN

masuk dashboard
klik template pada menu dashboard
back up template untuk berjaga - jaga jikalau terjadi hal yang tak di inginkan
klik edit html
cari kode <head>
paste kode di bawah ini tepat di bawah kode <head>

jika kode diatas tidak terdapat di blog anda bisa juga anda paste'kan kode di bawah ini tepat di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {

$("#open").click(function(){
$("div#panel").slideDown("slow");
});

$("#close").click(function(){
$("div#panel").slideUp("slow");
});

$("#toggle a").click(function () {
$("#toggle a").toggle();
});

});</script>

<b:if cond='data:blog.pageType != "item"'>
<style>
body#layout #slide-top-panel {display:none !important;}
</style>
</b:if>

hapus kode yang di sorot merah jika di blog anda sudah terdapat kode jquery, jquery cukup satu pada blog

kemudian cari kode </head>
paste kode di bawah ini tepat di atas kode </head>

<style>
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clearfix {height: 1%;}
.clearfix {display: block;}

.tab {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAL0qzQPFfg3BOyBwDXrTLICH3Lc_-bMQdUAmjgAT6rh3p-HWwEnq0RuMgCItiG4ihgJfiGGOvz4whrlO75b1mbl3DanhVGOnu_383Bjpi79Ur5KlU0yIgDae-AIjGB2vLJsxq_UTFGy0H/s1600/sliding-panel-tab-0.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCqbNKOI0-lBme0m7w9F_Dz7YE5xCUT7BtkGZnc-U7gElgw7G5NoJJKgM2ZEBHjyOUfuSWm3XHJoezbBh_c5eZolommcZ9TQmmYCF6-NZx2eXI7SduoAmXMTpXm3SfVcg5WIYALDI7wYwF/s1600/sliding-panel-tab-left.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyWumbX5wRcxQ22AaCQDCaXZ_3qY6Er-iCdCWgPFJE-OgCd6DbWA9a2DBWsGOGkdzaanIO8gTwa-gKqURbnbYHvfQ7hxZKc6otbsdixcFcJp_B312vKKDfJsiWLWOeagozPknvZf8anJul/s1600/sliding-panel-tab-right.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQy8Hd23QtDwztvil0rFR2RLW9nzATIjiJirffyXKQmpY7N-4FZmj4FLxrphBtoQiPwCOLj8n0tAdwsqd_13dYSexuiMm9AL6_sIuNQglDWO5XYuFmi6pxIRJOC7G1dbnjmUY_hiuaMSbU/s1600/sliding-panel-tab.png) repeat-x 0 0;
}

.tab ul.login li a {color: #15ADFF;}
.tab ul.login li a:hover {color: #FFFFFF;}
.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Vn1YL87M-MJrO8MXcvY6j490P2XMZBe8vMRKE0aWGuGQATvvjnz31mCSRHiCH0sJPa5V9o_I48dsHEPpVDNYMbeRKaeAQR5fjAGIL0QZjPeRFonoISpGDMHeoO6XuwGVmoKQ3d00ZVF1/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBZjf4V_kyPVMoSpkUCs2d8G0Hq9vAJqkfynVN8UpNULCTGs9y7AWmIWEJN5GGxJKlkY0dGCyySRZLee22sOFZzBHpya_2jfkjvGH-DjKFgj0-8KcEz5CiJyPBWIOOjIRFz_Ud1K4az1fL/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Vn1YL87M-MJrO8MXcvY6j490P2XMZBe8vMRKE0aWGuGQATvvjnz31mCSRHiCH0sJPa5V9o_I48dsHEPpVDNYMbeRKaeAQR5fjAGIL0QZjPeRFonoISpGDMHeoO6XuwGVmoKQ3d00ZVF1/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBZjf4V_kyPVMoSpkUCs2d8G0Hq9vAJqkfynVN8UpNULCTGs9y7AWmIWEJN5GGxJKlkY0dGCyySRZLee22sOFZzBHpya_2jfkjvGH-DjKFgj0-8KcEz5CiJyPBWIOOjIRFz_Ud1K4az1fL/s1600/button-close.png) no-repeat left -19px;}

#slide-top-panel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 230px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h4 {
font-size: 18px;
color: #F2F2F2;
text-align: center;
padding: 5px 0 10px;
margin: 0;
}
#panel p {
margin: 5px 0;
padding: 0px;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #545454;
border-radius: 10px;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 18px;
}
#panel .content input:focus.field {
background: #7F7F7F;
}
#panel .content input.button-register {
display: block;
clear: both;
height: 24px;
width: 94px;
color: white;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtGC0GN3iT-sMdXkLR6iAiFxusaFLBdMGvArpoRfxOsWsTqas9QWKPetbl1F9jGvPqs18Vg-pZuHm1Kai4BXYSwAhQEBuKI2F-0JVNci1hw6RaXhpagsLFrGXtFZnML632UHkzBA7-pReM/s1600/button-register.png) no-repeat 0 0;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px auto;
}
#sliding-panel {
width: 160px;
float: left;
}
#sliding-panel2 {
width: 160px;
float: right;
}
#sliding-panel ul, #sliding-panel2 ul{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#sliding-panel ul li a, #sliding-panel2 ul li a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBLj3UxTl6v-8PLmFmuTHIWtDi8H_LVhZWygsItUMuOUIT5jr3K6rjRtb6iCbSgBmwADxx8WbVYQPj-pRmcOoIyWPQ4exESIIhKd1Wl2PLYjMPKEz8PlE5yopXMFTIa6G2unCfpE1mkEXK/s1600/star-bullet.png) center left no-repeat;
margin:0;
padding:3px 3px 3px 18px;
}
#sliding-panel li, #sliding-panel2 li {
display: inline;
}
#sliding-panel a, #sliding-panel2 a{
color: #999999;
text-decoration: none;
font-size: 11px;
display: block;
padding: 3px;
width: 160px;
}
#sliding-panel a:link, #sliding-panel a:visited, #sliding-panel2 a:link, #sliding-panel2 a:visited {
color: #999999;
text-decoration: none;
}
#sliding-panel a:hover, #sliding-panel2 a:hover {
color: #FFFFFF;
}

#search-box22{
margin-top: 20px;
}

#search-box22 input[type="text"] {
float: right;
background: 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 160px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

#search-box22 input[type="text"]:focus {
width: 190px;
}

.about-author {
width: 100%;
text-transform: none;
margin-top: 15px;
}
.authorbox {
overflow: hidden;
padding: 0;
width: 100%;
}
.authorbox .authorinfo {
}
.authorbox .authorinfo img {
float: left;
margin: 4px 10px 4px 5px;
border-radius: 100%;
width: 20%;
background: #222;
padding: 5px;
}
.authorbox .authorinfo p {
margin: 0;
padding: 0 5px;
text-align: left;
}
.authorinfo p a {
text-decoration:none;
}
.authorbox h3 {
margin: 0;
display: inline-block;
}
h3.boxtitle {
font-size: 14px;
}
</style>

KETERANGAN

untuk memperluas ruang widget ganti 230px untuk memodifikasi ketinggian
ganti kode #272727 untuk mengubah warna background

dan yang terakhir cari kode <body>
pastekan kode di bawah ini tepat di bawah kode <body>

jika anda tidak menemukan kode <body> di blog anda cari kode di bawah ini

<body expr:class='"loading" + data:blog.mobileClass'>

paste kode di bawah ini tepat di bawah kode di atas

lebih tepatnya paste kode di bawah ini tepat di bawah kode

<div id='slide-top-panel'>
<div id='panel'>
<div class='content clearfix'>


<div class='left' style='width:240px !important'>

<h4>Welcome to my blog!</h4>
<div class='about-author'>
<div class='authorbox'>
<div class='authorinfo'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU1qrXfcG08pqPkDqjqp4T04rDVWNcylR5d7rodhGeWUhNbEsLSdlT7xkduzePsFOCSO1Fh4IRcC3PZVCt573vNm8-7f_f5bVNAO5HqIuMzNH1tYyWrpUSHSKBPqBVjXT-l2bzZ1bzVjid/s1600/profile-pic.png'/>
<h3 class='boxtitle'>Meet the Author</h3>
<p>Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna. Suspendisse potenti.</p>
</div>
</div>
</div>
<p align="right" style="margin-top: 10px;">Looking for something?</p>
<form method="get" action="/search" id="search-box22">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>

</div>


<div class='left' style='width:320px !important'>
<h4>Categories</h4>

<div id='sliding-panel'>
<ul>
<li><a href='Link URL'>Category 1</a></li>
<li><a href='Link URL'>Category 2</a></li>
<li><a href='Link URL'>Category 3</a></li>
<li><a href='Link URL'>Category 4</a></li>
<li><a href='Link URL'>Category 5</a></li>
<li><a href='Link URL'>Category 6</a></li>
<li><a href='Link URL'>Category 7</a></li>
</ul>
</div>

<div id='sliding-panel2'>
<ul>
<li><a href='Link URL'>Category 1</a></li>
<li><a href='Link URL'>Category 2</a></li>
<li><a href='Link URL'>Category 3</a></li>
<li><a href='Link URL'>Category 4</a></li>
<li><a href='Link URL'>Category 5</a></li>
<li><a href='Link URL'>Category 6</a></li>
<li><a href='Link URL'>Category 7</a></li>
</ul>
</div>
</div>


<div class='left right' align="center">

<h4>Subscribe to this blog!</h4>
<p style="padding:0px 30px;">Receive the latest posts by email. Just enter your email below if you want to subscribe!</p>

<form action='http://feedburner.google.com/fb/a/mailverify?uri=Feed-Name' method='post' target='_blank'>
<input class='field' name='email' type='text/' value=''/>
<input name='uri' type='hidden' value='Feed-Name'/>
<input name='lang' type='hidden' value='en_EN'/>
<input class='button-register' type='submit' value='Subscribe'/></form>

<div align='center' style="clear: both;">
<a href='http://www.facebook.com/username'><img title="Follow on Facebook" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUo71r7DxtY955GZGhxdcQVN4dszIZBWcXV0h2JnSsgZ_kUrnbXBr701sBchzofkpjwCMXWd0RdV8MvZk21VVYgJhgAn229i3dchcPbyowe0RblIWrE25YA47iu4TaUgqhXxqIC4ZZ_4NN/s1600/Facebook.png' style='padding:5px;' width='32'/></a>
<a href='http://blog-address.blogspot.com/atom.xml'><img title="RSS Feed" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKEMsKktYGNA4aj1fRM_s6cXdUIl5FSOJxvs3lmi8i95y7LdwR6GYTocXV3Fg_A5SCN46X7qxrKR5YFZ5cB4F3KPM0d2H5DG2fGvOLJ4aPyP57LSQJiYQgx1U0VKUQSe3ta44FMH5R5oUr/s1600/RSS.png' style='padding:5px;' width='32'/></a>
<a href='https://plus.google.com/username'><img title="Follow on Google" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdASIFc_RXy90Uh63XMIEADHEFORSQ31F6ovggskNNRkWPe9EsZXQ1TiPfVxerlebddic65ANO4H9D4dqh2KdOoA5VDEYoVkBBDT2MMH7_23dlLZNl2pFvQitM1BHVLK3JhI0ZwKJ21K3f/s1600/Google-plus.png' style='padding:5px;' width='32'/></a>
<a href='http://twitter.com/username'><img title="Follow on Twitter" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhayYJ73MlSuvJObzOwjxltd_2cohLzDOeBDioZn2Ou5kpGWyuH_HpRmG5hLTrXczPo8A6SleH8fEjbLESm5opJpt1ipK6nI9nXwN9kekTc988CBc8B301iv9lhncA91AFRpVPI56F85CxS/s1600/Twitter.png' style='padding:5px;' width='32'/></a>
</div>

</div>
</div>
</div>

<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Hello guest!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Open menu</a>
<a class='close' href='#' id='close' style='display: none;'>Close menu</a>
</li>
<li class='right'/>
</ul>
</div>
</div>

KETERANGAN

ganti url https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU1qrXfcG08pqPkDqjqp4T04rDVWNcylR5d7rodhGeWUhNbEsLSdlT7xkduzePsFOCSO1Fh4IRcC3PZVCt573vNm8-7f_f5bVNAO5HqIuMzNH1tYyWrpUSHSKBPqBVjXT-l2bzZ1bzVjid/s1600/profile-pic.png dengan url poto anda
ganti teks yang bercetak tebal yang berada di bawah url di atas untuk mengganti deskripsi dan judul admin
ganti Link URL dengan link tujuan (link post / link label)
ganti Category dengan judul label / post
ganti Feed-Name dengan username feedburner anda
ganti http://www.facebook.com/username ganti usename dengan username facebook anda
ganti http://blog-address.blogspot.com/atom.xml ganti blog-address dengan link blog anda
ganti https://plus.google.com/username ganti username dengan username google plus anda
ganti http://twitter.com/username ganti username dengan username twitter anda

bantu moonroemoort sebarkan postingan ini ke G+ twitter dan inshare dengan cara klik tombol di bawah ini terima kasih

MOONROEMOORT

JQUERY SLIDDING MENU

site info

support

Labels