3.02.2009

把 Anobii 網路書櫃貼紙改成橫排

Anobii網路書櫃中有個建立部落格小貼紙的功能(需要先註冊一個Anobii書櫃的帳號並且建立好自己的書庫,已經有Anobii帳號的只要點上面的聯結就能進去囉)。可以在部落格上放一個小書櫃。

原本的Anobii貼紙是直排的,在一些部落格版型中,也許會想擺個橫排的網路書櫃貼紙,這時只要改一點點程式碼就可以了。以下是我現在用的貼紙 CSS style 部份(標色的地方是重點,其他應該只有做一些微調吧...)

/* ------[ For the whole badge ]------ */
#badge a:hover {}
#badge a:link {}
#badge a:active {}
#badge a:visited {}
#badge {margin-top:10px; padding: 10px 5px 10px 5px; width: 450px; border: 1px solid #cccccc;}

/* ------[ For each item in the badge ]------ */
#badge .item_cell {list-style: none;float:left ; text-align: center; padding: 5px; margin: 0px; width:140px}
#badge .cover {}
#badge .cover img {border: 1px solid #cccccc; padding: 3px; background-color: #f7f7f7;}
#badge .title {text-indent: 0;padding: 0; margin: 0;}
#badge .subtitle {}
#badge .author {}


每本書都下 float:left 的標籤,並且限制寬度(在這裡用140px)。再把整個貼紙的寬度改寬(預設是200px,改成450px了),讓貼紙寬度容納得下要擺的書就可以了,多試幾次便能得到最美觀的 layout.

如果對於貼紙的其他部分進行更多更改,可以參考aNobii原網站提供的貼紙大解析

沒有留言:

張貼留言

Related Posts Plugin for WordPress, Blogger...

LinkWithin