JavaScript membuat konten menyatu dan tersembunyi. Jika anda klik judulnya maka konten yang ada didalamnya akan terlihat. Untuk membuat rapi juga.
Demo :
Contoh Pertama
Hanya sekedar contoh...
Contoh Kedua
Hanya sekedar contoh...
Contoh Ketiga
Hanya sekedar contoh...
Cara membuatnya
Dari Dashboard >> Design >> Edit HTML.
Langkah pertama > Penempatan kode CSS dan URL JavaScript
dibawah ]]></b:skin>
........
diatas </head>
<style type='text/css'>
.handcursor{cursor:hand;cursor:pointer;}
</style>
<script type="text/javascript" src="http://pagenano.googlecode.com/files/Tesembunyi%20dengan%20Switch%20Content%20Script.js" ></script>
Langkah kedua > Penempatan kode HTML dan JavaScript
dibawah <body>
........
diatas </body>
Contoh yang pertama :
<h3 id='bobcontent1-title' class='handcursor'>Contoh Pertama</h3>
<div id='bobcontent1' class='switchgroup1'>
Hanya sekedar contoh...
</div>
<h3 id='bobcontent2-title' class='handcursor'>Contoh Kedua</h3>
<div id='bobcontent2' class='switchgroup1'>
Hanya sekedar contoh...
</div>
<h3 id='bobcontent3-title' class='handcursor'>Contoh Ketiga</h3>
<div id='bobcontent3' class='switchgroup1'>
Hanya sekedar contoh...
</div>
<script type='text/javascript'>
//<![CDATA[
// MAIN FUNCTION: new switchcontent("class name", "[optional_element_type_to_scan_for]") REQUIRED
// Call Instance.init() at the very end. REQUIRED
var bobexample=new switchcontent("switchgroup1", "div") //Limit scanning of switch contents to just "div" elements
bobexample.setStatus('<img src="http://img242.imageshack.us/img242/5553/opencq8.png" /> ', '<img src="http://img167.imageshack.us/img167/7718/closedy2.png" /> ')
bobexample.setColor('darkred', 'black')
bobexample.setPersist(true)
bobexample.collapsePrevious(true) //Only one content open at any given time
bobexample.init()
//]]>
</script>
Contoh yang kedua :
<h3 id='joecontent1-title' class='handcursor'>Contoh Pertama</h3>
<p id='joecontent1' class='switchgroup2'>
Hanya sekedar contoh...
</p>
<h3 id='joecontent2-title' class='handcursor'>Contoh Kedua</h3>
<p id='joecontent2' class='switchgroup2'>
Hanya sekedar contoh...
</p>
<h3 id='joecontent3-title' class='handcursor'>Contoh Ketiga</h3>
<p id='joecontent3' class='switchgroup2'>
Hanya sekedar contoh...
</p>
<script type='text/javascript'>
//<![CDATA[
var joeexample=new switchcontent("switchgroup2", "p") //Limit scanning of switch contents to just "p" elements
joeexample.setStatus('[open] ', '[closed] ')
joeexample.setColor('green', 'red')
joeexample.collapsePrevious(false)
joeexample.setPersist(false)
joeexample.defaultExpanded(0,1)
joeexample.init()
//]]>
</script>
Credit : Dynamic Drive
Alhamdulillah
2 comments:
ini brati bs buat spoiler di postingan jg yah???? klo bnr bisa aranya gmna yah
id dan class di template berbeda-beda, walaupun saya publish caranya belum tentu bisa di Blogspot anda...
Posting Komentar