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/AVvXsEjmlYFlM_cSelssvqEp_txCcaRCCkyGEYl4t6VWxyUkkUOlweVSeJ_Xh1QwH8duxnu84Nag8_hBjXJVimihWmkvGSyLr7sOX5SejbW1mR_4FP2kp4D_I_g4az1b7NhFWkn8PcHnl9TKkSg/s1600/btn-slide.gif) no-repeat center top;}
.btn-slide {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWhVBMGCOqWINelBwlxemsq6aqkXDbNo-fx9HqKQCrYIlt-7xmziBn7qBPMahHCZGLWwtdH0bsfez3QHuW6BNnH2WWwBoOMoHBKAtT7Z7l7jvFCxsh9tJ6XY66jayNhjo9ZUjZeevN1J8/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