Support@example.com
Get in touch - Saturday: 8:30 am - 6:00 pm

Rabu, 11 Januari 2012

Animasi Muncul Dan Sembunyi

Filled under:

Cara membuatnya

Dari Dashboard >> Design >> Edit HTML.

Penempatannya
dibawah ]]></b:skin>
........
diatas </head>

Hidden Content

<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>
Hidden Content

<p><b>Contoh 1:</b></p>
<a href='javascript:animatedcollapse.toggle("nano")'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGGzCVw8kowfodIU3U90DVNI3mQu0x-4vrOjsixJPdWSS2U6t-s0Ot0IMmoSMsPlhNdzhKi9bdWMElkUTPVA-UbR62C46NWdKfjERFN9kVkd3bnl8NxZ09IZ2MyNFjWgMVfK4fAx5gM5Zj/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/AVvXsEjGGzCVw8kowfodIU3U90DVNI3mQu0x-4vrOjsixJPdWSS2U6t-s0Ot0IMmoSMsPlhNdzhKi9bdWMElkUTPVA-UbR62C46NWdKfjERFN9kVkd3bnl8NxZ09IZ2MyNFjWgMVfK4fAx5gM5Zj/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/AVvXsEjGGzCVw8kowfodIU3U90DVNI3mQu0x-4vrOjsixJPdWSS2U6t-s0Ot0IMmoSMsPlhNdzhKi9bdWMElkUTPVA-UbR62C46NWdKfjERFN9kVkd3bnl8NxZ09IZ2MyNFjWgMVfK4fAx5gM5Zj/s1600/Toggle+-+Nano+Yulianto.jpg" border="0" /></a>

<div id="michael" style="width: 300px; background: #E7FFCC; display:none">
<p>Terserah agan.....</p>
</div>

<p><b>Contoh 1:</b></p>
<a href="#" rel="toggle[cat]" data-openimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp0chqri13A-Coa7lcc5ZW6NMCWEeFnzuiynHXdKuUXmqw_9zFrgyC9-h1I671RUihdQGaKQnmi9LZ5FwH_D7NnV8stHkSc8sV4akxY4nk0KybjEvZNvgVAInPVxDY1iWNmLmgedztzeHu/s1600/collapse-Nano+Yulianto.jpg" data-closedimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh062qebtROxxsIuUHngThQs23LwdWEyAnukUAw4N_OE4O83T8eQhSDTgdURf1XC_WxTaCpguH25LumwbYYMVN36AbMhPkr-rKMtPLe6FKMNqMLQ2d3W4m86HFDbhwPpvWiXt3VzZdr09Se/s1600/expand-Nano+Yulianto.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp0chqri13A-Coa7lcc5ZW6NMCWEeFnzuiynHXdKuUXmqw_9zFrgyC9-h1I671RUihdQGaKQnmi9LZ5FwH_D7NnV8stHkSc8sV4akxY4nk0KybjEvZNvgVAInPVxDY1iWNmLmgedztzeHu/s1600/collapse-Nano+Yulianto.jpg" border="0" /></a>

<div id="cat" style="width: 400px; background: #BDF381;">
<p>Terserah agan.....</p>
</div>

<p><b>Contoh 2:</b></p>
<a href="#" rel="toggle[dog]" data-openimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp0chqri13A-Coa7lcc5ZW6NMCWEeFnzuiynHXdKuUXmqw_9zFrgyC9-h1I671RUihdQGaKQnmi9LZ5FwH_D7NnV8stHkSc8sV4akxY4nk0KybjEvZNvgVAInPVxDY1iWNmLmgedztzeHu/s1600/collapse-Nano+Yulianto.jpg" data-closedimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh062qebtROxxsIuUHngThQs23LwdWEyAnukUAw4N_OE4O83T8eQhSDTgdURf1XC_WxTaCpguH25LumwbYYMVN36AbMhPkr-rKMtPLe6FKMNqMLQ2d3W4m86HFDbhwPpvWiXt3VzZdr09Se/s1600/expand-Nano+Yulianto.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp0chqri13A-Coa7lcc5ZW6NMCWEeFnzuiynHXdKuUXmqw_9zFrgyC9-h1I671RUihdQGaKQnmi9LZ5FwH_D7NnV8stHkSc8sV4akxY4nk0KybjEvZNvgVAInPVxDY1iWNmLmgedztzeHu/s1600/collapse-Nano+Yulianto.jpg" border="0" /></a>

<div id="dog" style="width: 400px; background: #BDF381;">
<p>Terserah agan.....</p>
<p>Terserah agan.....</p>
</div>

<p><b>Contoh 3:</b></p>
<a href="#" rel="toggle[rabbit]" data-openimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp0chqri13A-Coa7lcc5ZW6NMCWEeFnzuiynHXdKuUXmqw_9zFrgyC9-h1I671RUihdQGaKQnmi9LZ5FwH_D7NnV8stHkSc8sV4akxY4nk0KybjEvZNvgVAInPVxDY1iWNmLmgedztzeHu/s1600/collapse-Nano+Yulianto.jpg" data-closedimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh062qebtROxxsIuUHngThQs23LwdWEyAnukUAw4N_OE4O83T8eQhSDTgdURf1XC_WxTaCpguH25LumwbYYMVN36AbMhPkr-rKMtPLe6FKMNqMLQ2d3W4m86HFDbhwPpvWiXt3VzZdr09Se/s1600/expand-Nano+Yulianto.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp0chqri13A-Coa7lcc5ZW6NMCWEeFnzuiynHXdKuUXmqw_9zFrgyC9-h1I671RUihdQGaKQnmi9LZ5FwH_D7NnV8stHkSc8sV4akxY4nk0KybjEvZNvgVAInPVxDY1iWNmLmgedztzeHu/s1600/collapse-Nano+Yulianto.jpg" border="0" /></a>

<div id="rabbit" style="width: 400px; background: #BDF381">
<p>Terserah agan.....</p>
<p>Terserah agan.....</p>
<p>Terserah agan.....</p>
</div>

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

 

About Metro UI Theme

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit...