admin @ 2009-01-11 02:34 59
今天玩聚推出了社會化推薦彙總服務中的一項有趣的頁面掛件應用：SRBacks，十分實用也十分有趣。我當即引入自己的部落格頁面，不過發現其中的嵌套有誤、呈現效果不夠理想，於是將指令碼下載下來自訂，改完之後自己感覺還不錯。
對於外來掛件，其內嵌的樣式有時候會給自己的頁面造成挺大的麻煩，因此我盡量刪減指令碼中的內嵌樣式，而是將其賦予偽類值(class)，然後將樣式寫入樣式表，這給自訂樣式的使用者會帶來較大的空間。
在 Twitter 上討論了一番之後，我自行修改指令碼，用笨辦法解決了在列表裡隱藏博主條目的問題。同時，也給帳戶圖片、Google Reader 表徵圖賦予了偽類值，這樣自訂的時候可以輕鬆地將它們隱藏或是設定映像尺寸。
我修改的版本大體上算是自適應的，只是我測試寬度為 180px
的時候出現溢出，這應該是推薦文字中的長連結字元造成的，因此如果您是在側欄調用，最好在設定一下條目 (#srbacks
li.srbacklist )寬度，並加上 overflow: hidden; 應該就能解決。
我建議將我提供樣式表檔案在頁面<head>標籤內單獨引用，修改起來方便一些，我為所有的樣式值之前都添加了 #srbacks 是為避免造成與您頁面裡的樣式表衝突。
下載壓縮包
上傳壓縮包中的 SRbacks.js 及 srback.css 這兩個檔案到您管理的空間，假設路徑是：http://yourdomin.com/widget/
在<head></head>標籤內引入
<link rel="stylesheet" href="http://yourdomin.com/widget/srback.css" type="text/css" media="screen" />
然後在模板內引入
<script type="text/javascript" src="http://yourdomin.com/widget/SRbacks.js"></script>
WordPress 使用者可將其放在模板檔案中的 comments.php 或是 sidebar.php 裡。我推薦是在評論模板裡調用。
樣式表檔案中我已逐項標註了說明，修改時請參閱。下面是兩張：
200px 呈現樣式
500px 呈現樣式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
