Home / jQuery / jQuery Sliding Panel dengan Membuka/Menutup untuk Blogger

Cara Download jQuery Sliding Panel dengan Membuka/Menutup untuk Blogger Update Terbaru

Sedikit Info Seputar jQuery Sliding Panel dengan Membuka/Menutup untuk Blogger Terbaru 2017 - Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul jQuery Sliding Panel dengan Membuka/Menutup untuk Blogger, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang Artikel jQuery, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar jQuery Sliding Panel dengan Membuka/Menutup untuk Blogger Terbaru
link: jQuery Sliding Panel dengan Membuka/Menutup untuk Blogger

"jangan lupa baca juga artikel dari kami yang lain dibawah"

Berbagi jQuery Sliding Panel dengan Membuka/Menutup untuk Blogger Terbaru dan Terlengkap 2017

jQuery Sliding Panel dengan Membuka/Menutup untuk Blogger
jQuery Sliding Panel dengan Membuka/Menutup untuk Blogger - Sudah lama saya tidak membuat artikel, Kali ini saya akan memberikan sebuah tutorial yaitu "jQuery Sliding Panel dengan Membuka/Menutup untuk Blogger" dan pastinya untuk digunakan pada platform Blogger.

Berikut Tutorialnya :


1. Masuk ke Template > Edit HTML > lalu taruh javascript berikut ini diatas </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() {

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

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

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

});</script>

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


2. Masukkan CSS berikut di atas ]]></b:skin> atau <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/AVvXsEjj7qqRt5XK0NQalAAkzgmBUZya3FBDRcYWLAWZGkOP_M-x75GQesIZ_8V4bAu51L5Bk1jDdKc3RZvpXqQ-YPcqYntGHNm23GugMotu7WX3ZIv1QKOLZXEUasAi4h4b9jaGqitukbUmQ0tt/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/AVvXsEhsLH1VMN62WDTBLnLfFsnrNHOC58TAWiWtVYv99ZYXfg78qKGF1oblOHX4pSZeCx5swbkuMAa1mwaAFHYsMFnHYG222WNPQ8P5RHi4ahuvWJT4MbjphyLJvWuVegC-c4HP2VfhElYmZslO/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/AVvXsEgyokPRFS1lG9fLNxISqBwkY5JZlXZX2vtX_xCshTllZSCGA0COjpuCFCwWFsB2MhffFwBVjMwHWGn8Ke8vK1OftnEJs27QG8QcP0Ox-aZw3akurfynxXckoDaxjNJDeTrd5e1oejD2eVEm/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/AVvXsEjV9xvIrm-9KCRAT3WbXsx-uLlItVhUCLTmmuIwvraryWFjO6b2CiPVvUA21hcQIM8-Akm1x2iW8ureBhnfeKL4IvxigT3N3wqr3CLmx2OZiG79YdIObBcapW7wuOK4n3guE7mNVA9nrWA-/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/AVvXsEgjo6W_nMDUAjRJgkfeOJIWJqjWFXqr8DteH8GWRJ-8UqZWQYpXRxrHhsBfY4ld7pmWorrMTqhfy3iXUza6RwtLYIO4Lil5z9RSxVR1njAMssjn7HpYO51rJBB-Nbt0gASlA7-V4VMlSAYY/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkmG-Tds2EyGZWpeUwiOfps7FApIWCqNC1JFd_2QmXQ9zTZ2RhvZ7hJ7oGBIrCnQsR9V-siUG_E6FKCItCPSmrjxf8OuQ1-TRQeck9oeCGDesNNmgPWUOKoj-kqaDYOyXb0BFa_qw-he8u/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjo6W_nMDUAjRJgkfeOJIWJqjWFXqr8DteH8GWRJ-8UqZWQYpXRxrHhsBfY4ld7pmWorrMTqhfy3iXUza6RwtLYIO4Lil5z9RSxVR1njAMssjn7HpYO51rJBB-Nbt0gASlA7-V4VMlSAYY/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkmG-Tds2EyGZWpeUwiOfps7FApIWCqNC1JFd_2QmXQ9zTZ2RhvZ7hJ7oGBIrCnQsR9V-siUG_E6FKCItCPSmrjxf8OuQ1-TRQeck9oeCGDesNNmgPWUOKoj-kqaDYOyXb0BFa_qw-he8u/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/AVvXsEi65f7VhQSuRVP70mW9XChpVNuv_tWWG79nQuyZ3tZ3R4rhYagDmO5918gjH99m8DV7bjaeHzNb467vZ8y1vATCkwrAiIP8zYviDI-UQxWL3TYtbojD8WgijHh4CxbOdXLsCBdAtEUaWeaJ/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/AVvXsEgjp9jEL5KJVIFqBvSJvvS8xKt_s3hy8iclCZnapnSbxO5J2y_KXz2hXUXFXL4fbSbMNx5lsSEuUoUldwg3qTVFRCWYlK07ZfC2oZ5Ang_XEFkKB9Fh9BqamuZYfpOv3l928kWzyhbZiaZc/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;
}


Silahkan sobat atur sendiri apabila ada kekurangan dari tampilan sliding panel tersebut.

3. Terakhir masukkan HTML berikut di bawah <body>


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

<!-- first section -->
<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/AVvXsEiWduNqlaqPqj-3cxpRWgtxSMPdzula-LJEBQjI_ew2hapXnLhWUK2wpkt60KlQRRTfNAHXhvBL9qw022-VllS0TCYMhZJignjbXRJKnpokhpihCj_8rrVcUCd2JncD0oQ13y47OzNukOWn/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>

<!-- second section -->
<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>

<!-- third section -->
<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/AVvXsEip3fmilqRJdAcNn722Xzu_-RX1gm_2-OoImVD6DwgPsn_DsS-dptBCC1kSG2DTBg3DNAZAeMDuB76D-u4uo2TCVpFZIrMqC6k6rlA6knd_N-xIxwLqKbH8PbTL8zeZU7YyF4LP9o01G5B9/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/AVvXsEhM66kbJEVFMIqnkXe6GkumQsejs-JBZsfSWJt6zyQZTTND5CRmAtK9WGszbkDfhRTcO9SzkCCnskgj_B7jYOjjSfceoRFNO1ny_va-H9a5lFrNE80-7-Y3pi4br3iTXGVm8jZz2kpUAw5K/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/AVvXsEhST1voZ76j0JEDau9k8LsT6Fyf8nUzhX1uf2xBkkdyC70R8eJCfZlikufeSSryZMVo51oTaaIcPW5VGpdbMb4a3ela4bwVxyd0PeqdiOUhclvPxdBkIKWEuTb4qA89vhj2LHmH349PWoK-/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/AVvXsEh1kXm0Ri6oxBJ94Jnc8kVMmmhTyVyyO5tHEky4KnX7yTsuHMNXU83jw4VzMaL9o_Be2JTy4VpnvGEbPRiIG3Rl0qBT3KJtpR16PpKPfIjVyjSmWV-7OqSTYd9b654_aTVQUZ49DHBji64B/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>

Selamat mencoba !

Itulah sedikit Artikel jQuery Sliding Panel dengan Membuka/Menutup untuk Blogger terbaru dari kami

Semoga artikel jQuery Sliding Panel dengan Membuka/Menutup untuk Blogger yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca jQuery Sliding Panel dengan Membuka/Menutup untuk Blogger

Share this