Home > JavaScript Blogger > Animasi Muncul dan Sembunyi
Demo :
Contoh 1:
Hanya Sekedar Contoh saja.....
Contoh 2:
Hanya Sekedar Contoh saja.....
Contoh 3:
Hanya Sekedar Contoh saja.....
Contoh 1:
Hanya Sekedar Contoh saja.....
Contoh 2:
Hanya Sekedar Contoh saja.....
Hanya Sekedar Contoh saja.....
Contoh 3:
Hanya Sekedar Contoh saja.....
Hanya Sekedar Contoh saja.....
Hanya Sekedar Contoh saja.....
Cara membuatnya
Dari Dashboard >> Design >> Edit HTML.
Penempatannya
dibawah ]]></b:skin>
........
diatas </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://pagenano.googlecode.com/files/Animasi%20Muncul%20dan%20Sembunyi.js"></script>
<script type="text/javascript">
animatedcollapse.addDiv('nano', 'fade=1,height=80px')
animatedcollapse.addDiv('david', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')
animatedcollapse.addDiv('cat', 'fade=0,speed=700')
animatedcollapse.addDiv('dog', 'fade=0,speed=700,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=700,hide=1')
animatedcollapse.ontoggle=function($, divobj, state){
}
animatedcollapse.init()
</script>
Induk JQuery, jika sudah ada tidak perlu lagi !.
Penempatannya
dibawah <body>
........
diatas </body>
<p><b>Contoh 1:</b></p>
<a href='javascript:animatedcollapse.toggle("nano")'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikugSYMvM0cq7W7QRmBhMCdaguQLOw5yag8Z9zontAmcSnM-SJQyI0xtuB4V-qJlOg7uotVHjb4r-GeCte-qGmrxu5XGFTflTaNE_Zqi73mV0qfYL34ritowKDajNsnOD8wA5azk1dXE2h/s1600/Toggle+-+Nano+Yulianto.jpg' border='0' /></a>
<div id="nano" style="width: 300px; background: #FFFFCC; display:none">
<p>Hanya Sekedar Contoh saja.....</p>
</div>
<p><b>Contoh 2:</b></p>
<a href='javascript:animatedcollapse.toggle("david")'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikugSYMvM0cq7W7QRmBhMCdaguQLOw5yag8Z9zontAmcSnM-SJQyI0xtuB4V-qJlOg7uotVHjb4r-GeCte-qGmrxu5XGFTflTaNE_Zqi73mV0qfYL34ritowKDajNsnOD8wA5azk1dXE2h/s1600/Toggle+-+Nano+Yulianto.jpg' border='0' /></a>
<div id="david" style="width: 300px; background: #000; display:none">
<p>Hanya Sekedar Contoh saja.....</p>
</div>
<p><b>Contoh 3:</b></p>
<a href='javascript:animatedcollapse.toggle("michael")'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikugSYMvM0cq7W7QRmBhMCdaguQLOw5yag8Z9zontAmcSnM-SJQyI0xtuB4V-qJlOg7uotVHjb4r-GeCte-qGmrxu5XGFTflTaNE_Zqi73mV0qfYL34ritowKDajNsnOD8wA5azk1dXE2h/s1600/Toggle+-+Nano+Yulianto.jpg" border="0" /></a>
<div id="michael" style="width: 300px; background: #E7FFCC; display:none">
<p>Hanya Sekedar Contoh saja.....</p>
</div>
<p><b>Contoh 1:</b></p>
<a href="#" rel="toggle[cat]" data-openimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje7xERQ3Ob67olQ0dxOy9X59mZjkaxO7laBpkIIB0jNEbbPS9uSq-P2-yo018nutEeC6JKGRMxryp8vPx1oyFqR5ZzCl_TljNvmHMdDyty56sfWDhMIxcaDO2FsGiEkv3PyO-e_4e9In4S/s1600/collapse-Nano+Yulianto.jpg" data-closedimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3JayLcB_Uv_FC_q409_LPSoAcsKBd6cQO7EumD4NZQnUYkVQWk2YOeLFt1pL-amlbS6wKe1RUrNQyFW2lLbYicpMk-YktDObdkFJqT5_pmdZvXy9EiiCD_bfC-gL8k765Hrf7i-C2jSeZ/s1600/expand-Nano+Yulianto.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje7xERQ3Ob67olQ0dxOy9X59mZjkaxO7laBpkIIB0jNEbbPS9uSq-P2-yo018nutEeC6JKGRMxryp8vPx1oyFqR5ZzCl_TljNvmHMdDyty56sfWDhMIxcaDO2FsGiEkv3PyO-e_4e9In4S/s1600/collapse-Nano+Yulianto.jpg" border="0" /></a>
<div id="cat" style="width: 400px; background: #BDF381;">
<p>Hanya Sekedar Contoh saja.....</p>
</div>
<p><b>Contoh 2:</b></p>
<a href="#" rel="toggle[dog]" data-openimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje7xERQ3Ob67olQ0dxOy9X59mZjkaxO7laBpkIIB0jNEbbPS9uSq-P2-yo018nutEeC6JKGRMxryp8vPx1oyFqR5ZzCl_TljNvmHMdDyty56sfWDhMIxcaDO2FsGiEkv3PyO-e_4e9In4S/s1600/collapse-Nano+Yulianto.jpg" data-closedimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3JayLcB_Uv_FC_q409_LPSoAcsKBd6cQO7EumD4NZQnUYkVQWk2YOeLFt1pL-amlbS6wKe1RUrNQyFW2lLbYicpMk-YktDObdkFJqT5_pmdZvXy9EiiCD_bfC-gL8k765Hrf7i-C2jSeZ/s1600/expand-Nano+Yulianto.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje7xERQ3Ob67olQ0dxOy9X59mZjkaxO7laBpkIIB0jNEbbPS9uSq-P2-yo018nutEeC6JKGRMxryp8vPx1oyFqR5ZzCl_TljNvmHMdDyty56sfWDhMIxcaDO2FsGiEkv3PyO-e_4e9In4S/s1600/collapse-Nano+Yulianto.jpg" border="0" /></a>
<div id="dog" style="width: 400px; background: #BDF381;">
<p>Hanya Sekedar Contoh saja.....</p>
<p>Hanya Sekedar Contoh saja.....</p>
</div>
<p><b>Contoh 3:</b></p>
<a href="#" rel="toggle[rabbit]" data-openimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje7xERQ3Ob67olQ0dxOy9X59mZjkaxO7laBpkIIB0jNEbbPS9uSq-P2-yo018nutEeC6JKGRMxryp8vPx1oyFqR5ZzCl_TljNvmHMdDyty56sfWDhMIxcaDO2FsGiEkv3PyO-e_4e9In4S/s1600/collapse-Nano+Yulianto.jpg" data-closedimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3JayLcB_Uv_FC_q409_LPSoAcsKBd6cQO7EumD4NZQnUYkVQWk2YOeLFt1pL-amlbS6wKe1RUrNQyFW2lLbYicpMk-YktDObdkFJqT5_pmdZvXy9EiiCD_bfC-gL8k765Hrf7i-C2jSeZ/s1600/expand-Nano+Yulianto.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje7xERQ3Ob67olQ0dxOy9X59mZjkaxO7laBpkIIB0jNEbbPS9uSq-P2-yo018nutEeC6JKGRMxryp8vPx1oyFqR5ZzCl_TljNvmHMdDyty56sfWDhMIxcaDO2FsGiEkv3PyO-e_4e9In4S/s1600/collapse-Nano+Yulianto.jpg" border="0" /></a>
<div id="rabbit" style="width: 400px; background: #BDF381">
<p>Hanya Sekedar Contoh saja.....</p>
<p>Hanya Sekedar Contoh saja.....</p>
<p>Hanya Sekedar Contoh saja.....</p>
</div>
Credit : Dynamic Drive
Alhamdulillah
