Peek-A-Boo view of posts in label/archive pages - 收合功能增加 Effect

2009/02/27

2 篇留言

長話短說,先看影片特效,就會明了


首先必須先安裝 「[Blog] Peek-A-Boo view of posts in label/archive pages」這個BloggerHack
  1. 將底下這兩行加到你Templeate的<head>裡頭。
    (註:已有安裝「「繼續閱讀功能」加上淡入淡出 effects」可省略這一步動作)
    <script type='text/javascript' src=
    'http://anniyalogam.com/scriptaculous/src/prototype.js'/ >
    <script type='text/javascript' src=
    'http://anniyalogam.com/scriptaculous/src/scriptaculous.js?load=effects'/ >

  2. 接著,進入「控制台→版面配置→修改 HTML→展開小裝置範本」修改成如下,紅色字為你要修改的部分<table>
    <tr>
    <td width='40px'>
    <a expr:onclick='&quot;Effect.toggle(\&quot;&quot; + data:post.id + &quot;\&quot;, \&quot;appear\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Expand/collapse this post'>[+/-]</a>
    </td>
    <td>
    <h3 class='post-title' style='border-bottom: 0pt none;'><a expr:href='data:post.url'><data:post.title/></a></h3>
    </td>
    </tr>
    </table>
上面程式碼藍色字可更改為「appear (淡入淡出)、Slide(滑動)、Blind(百葉窗) 」三種特效任君選擇。

Effect.toggle - scriptaculous - GitHub
JCargoo for Technology and Programming: Simple Animated Login Form using Scriptaculous

2 篇留言:

Xavier 提到...

你好~我加好囉
請問一下你交換連結的頁面在哪?
我好像找不到>"<

28/2/09 02:37  

我有話要說