Rabu, 19 Agustus 2009

Collapse / Expand [+/-] !!!

Okek's aku mau mostingin teknik ini. Sudah siap blon nih, sudah blon nih...euh aku bilang udah siap ato blon malah diem terus. Maksud aku tuh sudah siap kopi ama cemilannya blon nih. Banyak sih yang mosting tentang teknik ini, tapi aku mau coba dengan gaya bahasa aku. Semoga kawan bisa mengerti dan paham yaa. Teknik ini berfungsi untuk menyembunyikan link², widget jadi, gambar/file, dan masih banyak lagi. Kalo contoh di blog aku tuh yang seperti :

yang pake image tersebut kawan², dg diklik maka akan muncul apa yg ada didalamnya. Terserah kawan² sih, mo pake image ato nggak jg (dg tulisan jg bisa) [berkreasilah dg image kawan masing²]. Mau mosting rumusnya juga males ginih BEU !!! Mulai : (Tak perlu diceklis expand widgetnya)

1. Expand/collapse buat Label. Ingat yaa L A B E L

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
Cari kode diatas dengan memencet CTRL + F. Setelah ketemu kodenya, ganti dengan rumusan dibawah ini :

<b:widget id='Label2' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('</a>');
//]]>
</script>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>

<ul>
<b:loop values='data:labels' var='label'>
<li>


<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
</li>
</b:loop>
</ul>

<script type='text/javascript'>
//<![CDATA[
document.write('</div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


Beres. Save dan lihat hasilnya. [+/-] <-- ini bisa diganti dg kreasi kawan masing².

2. Expand/collapse buat didalam postingan. Ikuti langkah-langkah tentang bagaimana expand / collapse buat Label. Nah untuk menampilkan fungsi expand / collapse tersebut didalam postingan kita tinggal menambahkan rumus berikut :

<a aiotitle="click to expand" href="javascript:togglecomments('UNIQUE NAME')">+/-</a><div class="commenthidden" id="UNIQUE NAME"><p>LETAKAN TEKS/LAIN2 YANG MAU DISEMBUNYIIN DICINIH</div>
Beres. Save dan simpan hasilnya. NB : Ingat dan harus sama dalam memberikan UNIQUE NAME. Ocret ^.^
Teknik tersebut bisa diapresiasikan dimana saja, tergantung daya kreatip kawan² sampe mana mau mengapresiasikannya.
Terima kasih kepada Annie. Klik link tersebut untuk melihat berbagai macam teknik expand/collapse. Good Luck !!!

Tidak ada komentar:

Posting Komentar