原本的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原網站提供的貼紙大解析。
沒有留言:
張貼留言