Monday, June 30, 2014

Smooth Spoiler dengan jQuery

Smooth Spoiler dengan jQuery yang saya maksud adalah pengembangan dari bentuk spoiler dengan javascript+HTML. dan jika saya tidak salah dalam pengertiannya, Smooth Spoiler dengan jQuery ini kurang lebih sama dengan spoiler pada umumnya. namun, ada sedikit perbedaan pada penulisan source code-nya

Dan berikut ini code-code yang perlu disiapkan:

jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

Call Script 

<script> $(document).ready(function(){  $("#flipatas").click(function(){    $("#flipbawah").slideToggle("slow");  });});</script>

CSS 

<style type="text/css"> #flipatas{color:black;width:210px;margin-bottom:5px;padding:5px;text-align:center;border:solid 1px #000;box-shadow:3px 3px 2px #000;}#flipbawah{color:white;margin-top:5px;margin-bottom:5px;padding:10px;display:none;background-color:transparent;border:solid 2px #f00;width:200px;height:300px;}</style>

 HTML

<div id="flipatas">Klik disini untuk buka kontent</div><div id="flipbawah"><img src="http://i01.i.aliimg.com/wsphoto/v0/1561422731/Free-shipping-gift-font-b-Resin-b-font-font-b-V-b-font-for-Vendetta-Anonymous.jpg" width="200" height="300" alt="smooth Spoiler dengan jQuery" title=" Smooth Spoiler dengan jQuery "></div>
 Nah diatas itu tadi merupakan code script untuk membuat Smooth Spoiler dengan jQuery dan untuk melihat hasilnya silahkan anda klik link berikut ini Smooth Spoiler dengan jQuery 
Dan sekian postingan dari saya semoga artikel ini dapat berguna bagi anda khususnya para maniak blogger.


EmoticonEmoticon