Layaknya Simple Accordions, menu slide panel ini menyembunyikan content yang ada didalamnya kemudian akan ditampilkan setelah diklik.
cara membuat Slide Panel DI Blog adalah sebagai berikut :
- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Gunakan JQuery versi 1.2.3 berikut pada template anda. copy paste JQuery berikut dibawah :
<head>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js' type='text/javascript'/>
- Copy paste script berikut dan letakkan dibawah JQuery 1.2.3 tadi :
<script type='text/javascript'>
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
});
});
</script>
- Masukan code CSS berikut dan letakkan diatas ]]></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/AVvXsEjpQkRUTUoU-FpoqyJGjtwhmkmiwLZfj-VkHAbdQ_hPmPMBEjBKlhb-g153IWdM2Or2BIlDHNvK0YuCgLKuBT34e2xXb5xWFYEe5EAatTVmi01Se7-C08o-iJnOwG4w4_yaZXPgtDSZu8E/s1600/btn-slide.gif) no-repeat center top;}
.btn-slide {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAWJ6nvaxiq4HtH8hyphenhypheneJGk632qYSSlm5f9qFE0gzonJLlmHd_LKIoKjh_z8v9briTocknGGU-9SxxpHS_KjE8ATjKtWR8fLpHwU-oQhi7kBaDAmhS2uuqfSzP4vSF53dXw4Q-2ORwdSjI/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.
Untuk langkah berikutnya adalah sebagai berikut :
- Copy paste code berikut dan letakkan ditempat yang anda inginkan (postingan atau 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>
- Simpan.
Tidak ada komentar:
Posting Komentar
Berikan Komentar Anda Dibawah Sini Jika Belum Punya Akun Google/Blogger Anda Bisa Pilih Anonymous