Powered by and 圖示來源

2008年9月17日 星期三

忽然,有一個想法。上面google區塊aide優選文章區塊有沒有辦法動態變換位置。它們的位置不就是簡單的css float屬性而已嗎?應該很簡單。

所以我就開工了,至於為什麼要想讓它們動態變換位置呢? 最有可能的原因是"太閒"。

在寫javascript的過程中我發現一個問題,那就是CSS的float居然是null,本來就沒有值的東西,我去改它,當然不會動,這個地方有問題。

上網查資料,果然在這邊找到了解法。

想要控制css的float要用:
obj.style.cssFloat = "left";

而不是
obj.style.float = "left";
(一般控制css都是這樣用的,Object.style.屬性= xxx)


就這樣完工了,上面兩個大block會亂數的左右換,如果我把sidebar還有sidebar與本文也這樣做,那麼整個blog就會有8個不同的樣貌。

如果再多寫一些,讓它們換來換去,不知道會變成多樣化還是變成很混亂


2008年9月4日 星期四

阿土伯版跟CJH版在用了一陣子之後,總覺得效果不好,所以今天再度把繼續閱讀改版。

這次的繼續閱讀,以效能為主。

有使用繼續閱讀的人應該會發現,文章一開始是展開的,在整個script執行完畢之後,才會收合起來。

在展開狀態下,如果本文中有影片還是圖片,它們其實已經在下載了,這樣不就失去繼續閱讀的意義嗎? 至少我個人就是要加快速度只做預覽才這加這個功能的。

現在我找一個快速的方法達成這麼目標,完全不需要script,只要css就能搞定的作法。而且不會先展開再收合,利用css的屬性變化來決定展開與否,而屬性變化由本來blogger的語法(server side)做控制。

我就一步一步告訴大家怎麼作。

第一步:
範本->修改html(->繼續),將展開小裝置範本打勾。

第二步:
尋找</head>
取代為:

<style>
<b:if cond='data:blog.pageType == "item"'>
   div.fullpost {display:inline;}
<b:else/>
   div.fullpost {display:none;}
</b:if>
</style>
  </head>


第三步:
尋找<p><data:post.body/></p>
取代為

      <p><data:post.body/></p>
<b:if cond='data:blog.pageType != "item"'>
<div align='right'>
   <a expr:href='data:post.url'>你想要的字串</a>
</div>
<br/>
</b:if>

其中 align那邊可依自己的喜好變換位置,也可加入圖,這個看個人修行,真的很想變又變不出來,那就留留言,看看能不能幫忙出點力。

第四步:
到文章中,把想收合的部分以<div class="fullpost"> </div>包起來。

這樣就大功告成了,但為了往後方便,我們把這些固定的語法寫到文章範本中。
所以……

第五步:
設定->格式->文章範本加入下面字句:

這裡是文章的開頭。
<div class="fullpost">
這裡是文章的其餘部份。
</div>


這樣,完全不需要script就能做出繼續閱讀的功能。

但它有一個小問題,當文章很短不想做收合時,它還是會必然的出現一個繼續閱讀的鏈結。

相關文章:
如何建立可擴充的文章摘要?
[改造部落格] "繼續閱讀"


ps: 另外發現一個轉code的好網頁


總網頁瀏覽量