Demo :
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/AVvXsEhI0AfpIXkbNNCIgmMfBb1x12huj2Io_uHDC0DUd1swWAckMWHr5ztmb9A0YX9zv81KOQZdoKMwhrOt5pvgmGQqhYxsJ5l4ZADn1GMNQ6XUr_UEFd8_Fm38H9IuVbQnQsCLWALo9GG3Sn9b/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/AVvXsEhI0AfpIXkbNNCIgmMfBb1x12huj2Io_uHDC0DUd1swWAckMWHr5ztmb9A0YX9zv81KOQZdoKMwhrOt5pvgmGQqhYxsJ5l4ZADn1GMNQ6XUr_UEFd8_Fm38H9IuVbQnQsCLWALo9GG3Sn9b/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/AVvXsEhI0AfpIXkbNNCIgmMfBb1x12huj2Io_uHDC0DUd1swWAckMWHr5ztmb9A0YX9zv81KOQZdoKMwhrOt5pvgmGQqhYxsJ5l4ZADn1GMNQ6XUr_UEFd8_Fm38H9IuVbQnQsCLWALo9GG3Sn9b/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/AVvXsEgPlud2en-Sa_YIgGxzyZrT_gmCyjG5qeweE7C7kGPLGg0-XrMqsBWDR-8pUhI8U3SUZPRf4UOdQ3bAILXHdFbJCFDHPeLXOj5iSX6BXJVTHqJQtfLcDb4mnFGqypGkYQuNCp4b-GSFJ5Pr/s1600/collapse-Nano+Yulianto.jpg" data-closedimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoRnP5jDoErZHk-0geX1t3P39o1YFAU8M28UQVHehgkiEDr9WozLsQ0xhe8Q7_uXdrM5RuYHDhucRgNn6pEclLI4kpnWjbuUoZDsv33DQoBtaIIgHXejcXsuHtG8toulM3slu7KqpMUSZF/s1600/expand-Nano+Yulianto.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPlud2en-Sa_YIgGxzyZrT_gmCyjG5qeweE7C7kGPLGg0-XrMqsBWDR-8pUhI8U3SUZPRf4UOdQ3bAILXHdFbJCFDHPeLXOj5iSX6BXJVTHqJQtfLcDb4mnFGqypGkYQuNCp4b-GSFJ5Pr/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/AVvXsEgPlud2en-Sa_YIgGxzyZrT_gmCyjG5qeweE7C7kGPLGg0-XrMqsBWDR-8pUhI8U3SUZPRf4UOdQ3bAILXHdFbJCFDHPeLXOj5iSX6BXJVTHqJQtfLcDb4mnFGqypGkYQuNCp4b-GSFJ5Pr/s1600/collapse-Nano+Yulianto.jpg" data-closedimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoRnP5jDoErZHk-0geX1t3P39o1YFAU8M28UQVHehgkiEDr9WozLsQ0xhe8Q7_uXdrM5RuYHDhucRgNn6pEclLI4kpnWjbuUoZDsv33DQoBtaIIgHXejcXsuHtG8toulM3slu7KqpMUSZF/s1600/expand-Nano+Yulianto.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPlud2en-Sa_YIgGxzyZrT_gmCyjG5qeweE7C7kGPLGg0-XrMqsBWDR-8pUhI8U3SUZPRf4UOdQ3bAILXHdFbJCFDHPeLXOj5iSX6BXJVTHqJQtfLcDb4mnFGqypGkYQuNCp4b-GSFJ5Pr/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/AVvXsEgPlud2en-Sa_YIgGxzyZrT_gmCyjG5qeweE7C7kGPLGg0-XrMqsBWDR-8pUhI8U3SUZPRf4UOdQ3bAILXHdFbJCFDHPeLXOj5iSX6BXJVTHqJQtfLcDb4mnFGqypGkYQuNCp4b-GSFJ5Pr/s1600/collapse-Nano+Yulianto.jpg" data-closedimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoRnP5jDoErZHk-0geX1t3P39o1YFAU8M28UQVHehgkiEDr9WozLsQ0xhe8Q7_uXdrM5RuYHDhucRgNn6pEclLI4kpnWjbuUoZDsv33DQoBtaIIgHXejcXsuHtG8toulM3slu7KqpMUSZF/s1600/expand-Nano+Yulianto.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPlud2en-Sa_YIgGxzyZrT_gmCyjG5qeweE7C7kGPLGg0-XrMqsBWDR-8pUhI8U3SUZPRf4UOdQ3bAILXHdFbJCFDHPeLXOj5iSX6BXJVTHqJQtfLcDb4mnFGqypGkYQuNCp4b-GSFJ5Pr/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
4 comments:
wau!! selalu ada yang baru dari blog ini..
Ohya, koq desain template ini hanya melihatkan Labelnya aja di halaman utama..??
terus Koq Button Fullownya gak di keluarin, saya mau fullow nich, supaya lebih mudah NgeUpdate tutorial terbaru di blog ini....
Yupzz, thank bang Nano atas semua tutorialnya....
memang untuk follow kayaknya belum dulu bro... soalnya gak semua artikel saya bermanfaat...
siapa bilang gak bermanfaat bang...!!!
bagi saya yang baru belajar sangat bermanfaat!!
:D
Btul... koment-koment di atas. di sini nggak ada yang nggak bermanfaat. semua ada manfaatnya. saya aja sangat bersyukur ketemu blog kayak gini. malah rugi kalo gak mampir ke sini :)
tapi semua kembali ke yang punya deh. mungkin "beliau" ada pandangan lain, sehingga tidak keluarin follow-nya. sangat saya hargai bagaimanapun bentuk blog ini asalkan isi-nya tetap bermanfaat bagi semua.
Sukses Nano!
Posting Komentar