Link-List Biasa dengan Style Peek-a-Boo
May 21, 2008 by Adam Pahlevi
Filed under Google Blogger
Aku pernah memosting hack Singpolyma tentang Peek-a-Boo Link-List dengan Scrolling. Namun kali ini, bagi yang tidak suka dengan model Scrolling, Singpolyma memiliki model lain tanpa Link-List-nya kok.
Widget ini dibedakan menjadi 2, yakni widget yang akan ter-expand atau ter-collapse jika Title Widget-nya diklik (atau kita sebut By Title aja biar mudah). Dan juga Widget yang akan ter-expand atau ter-collapse jika menekan link [+/-] didekatnya (By icon).
Implementasi kode By Title
Ini kodenya, tau kan nanti kode ini diapakan? kode ini tidak ditaruh di Page Elements. Namun di taruh di Edit HTML di bagian Sidebar kita secara manual. Jika bingung, nanti saya kan membantu kalian.
<b:widget id=’ALIST’ locked=’false’ title=’List Title’ type=’LinkList’>
<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("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;">');
//]]>
</script>
<b:if cond=’data:title’><h2><data:title/></h2></b:if>
<script type=’text/javascript’>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<div class=’widget-content’>
<script type=’text/javascript’>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<ul>
<b:loop values=’data:links’ var=’link’>
<li><a expr:href=’data:link.target’><data:link.name/></a></li>
</b:loop>
</ul>
<script type=’text/javascript’>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>
Implementasi kode By Icon
Ini adalah kode pengimplementasian By Icon:
<b:widget id=’ALIST’ locked=’false’ title=’List Title’ type=’LinkList’>
<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("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:left;margin-right:5px;">[+/-]<\/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:links’ var=’link’>
<li><a expr:href=’data:link.target’><data:link.name/></a></li>
</b:loop>
</ul>
<script type=’text/javascript’>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>
Gimana? mudah? sulit? jika ada pertanyaan, gak usah jauh-jauh melayang ke situsnya si Singpolyma. Karena Insya Allah nanti saya bisa membantu kok! Oia, jika ingin memiliki lebih dari 2 buah widget dari versi ini, kita tinggal merubah ALIST menjadi BLIST, dan selanjutnya dan selanjutnya. Pokoknya tidak boleh ada variable penamaan yang sama.
Comments
Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!