Sudah lihat contoh ? tertarikah dengan Buku Tamu Slide Effect Jquery?
Untuk membuatnya anda hanya perlu : Masuk ke Blogger = Rancangan + Tata Letak + Add Widget + Html/Javascript - paste kode berikut :
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<style>
/* ---------------
Simple Slide panel with jQuery
---------------------------------- */
#panel {
height: auto;
background: #f90;
width: auto;
display: none;
padding: 7px;
border: #0C0;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #f90;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYc67NGNdY0m-OiHLUEFbUC7nR9-JdplAZ0oIcCjR1EMmiPGL86G3vbqAiVRn3v_RPntg27JVC_SLkQMe2gKPRAjPOOB2zRPVOCsg_DeDPiP8foGq9ep_kB0YNJs1FwZBBxIa7KSIXzbw/s1600/btn-slide.png) no-repeat center top;
}
.btn-slide {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXOmsxutvPJyuZwFkWyPJWdNeUcOJAfKl-M1ZyVK_QshpoK1l6IKFUYaJI1P0luZl25ncr5PqcgxOSu9fOE2cCoaZF2B6OJ37RlOfxrlK_Yc5m-xehuBBf8sLC3v_XHxarv9EFpC1uV0E/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;
}
</style>
<div id="panel">
<!-- Simpan Script Buku tamunya disini -->
</div>
<p class="slide"><a href="#" class="btn-slide">Buku Tamu</a></p>
Catatan : jika sudah ada script jquery yang saya tandai dengan warna biru ditemplate sobat tidak perlu ditambahkan lagi.
Cukup sampai disini saya menjelaskan Cara Membuat Buku Tamu Slide Effect Jquery , semoga bermanfaat bagi anda.
makasih gan.. ijin pakai
ReplyDeleteok gan :) thx udah mampir :bye:
ReplyDeletewah keren gan..
ReplyDeletenice share (y)...
ReplyDeletedi sini, mana buku tamunya, kok ane gak liyat ?
oh yah, follow back yah gan, ane jadi org ke 56 yg follow agan..
salam blogger
wkoko iya gan.. ane ilangin , biar ga terlalu leg
ReplyDelete