Slide Panel For Blog

Trik Slide Panel ini Bisa anda pasang di Sidebar dan area Postingan Sobat,Tips Ini Untuk Menghemat Tempat di Blog Kita,,
Slide Panel Fungsinya Untuk Menyembunyikan Konten yang ada di dalamnya maka jika kita klik akan keluar kontenya..




ikuti langkah-langkah berikut ini untuk cara pembuatannya:

1.Login Ke Blogger
2.Pada Dasbor Klik Tata Letak ->> Edit Html
3.Kemudian Letakan Code Berikut ini di atas Code </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js' type='text/javascript'/>

-Copas Lagi Code Berikut ini dan letakan di bawah code di atas

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.btn-slide&quot;).click(function(){
$(&quot;#panel&quot;).slideToggle(&quot;slow&quot;);
$(this).toggleClass(&quot;active&quot;);
});
});
</script>

4.Kemudian masukan Code Css Berikut di atas Code ]]></b:skin>

#panel {background: #fff;border:2px solid #f0f0f0;border-bottom:none;text-align:left;padding:10px;width:280px;height:200px;display: none;}

.slide {margin: 0;padding: 0;width:304px;border-top: solid 4px #422410;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYBxtBTr-gOefosOMc5AoAqAQcKICs96auWg7rKZS6uGAxcNHAm2ttLj1nKW8vcf2-sy7mrdeJ78HOhdvwK3HFkL1Jgkqmrv_pkmJF_1SZHZMTQbEC-T2XSCtBVQuaP2AhyphenhyphenfgL6dEnAcQ/s1600/btn-slide.gif) no-repeat center top;}

.btn-slide {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0VbkLuu5G2vd1xQneitJgfjC7tQ-2yUh4jeTvTwN48N7kG_ekTOQRM75pZCqfkICCnHYiMO1wStPGSyAr-SQWWcR38vW03TowvW5WqANMCkgxnqLozOqwyXP_7kJld2yWK0yfCEvGmSI/s1600/white-arrow.gif) no-repeat right -50px;text-align:center;width: 144px;height: 31px;padding: 10px 10px 0 0;margin: 0 auto;display: block;font: bold 120%/100% Arial, Helvetica, sans-serif;color: #fff;text-decoration: none;}

.active {background-position: right 12px;}

-Simpan Template

5.Langkah Terakhir Copas Code Berikut ini Dan letakan Di tempat Yang anda inginkan (Postingan Or Sidebar)

<div id="panel" style="font-weight:bold;">

LETAKKAN CONTENT ANDA DISINI

</div><div class="slide"><a class="btn-slide" href="#">Slide Panel</a></div>

Ket:

-Width:28px - Height:200px; adalah Lebar dan tinggi area content
-Width:300px; adalah lebar border pada code class slide
-Slide Panel adalah tombol tulisan pada slide

6.Jika Sudah Klik Simpan
Sumber Artikel Jquery Tutorial For Designers

ARTIKEL TERKAIT

JQuery

• Data Atribut Dalam Html Dan Jquery
• Simple Navigation Rocketbar With Jquery & Css3
• Jquery Slick Tab Menu
• Different Top Navigation With Jquery
• Vertical Sliding Panel Menu With Jquery
• Mosaic Slideshow With Jquery dan Css
• Menu Navigasi Dengan Tooltip
• Jcarousel Dengan Jquery