創用 CC 授權條款
著作係採用創用 CC 姓名標示-非商業性-禁止改作 3.0 台灣 授權條款授權.

Tantibus VenatorBlogger部落格率先更新


江湖人  某者痞客邦部落格率先更新

2014/1/10

ANOBII網路書櫃貼紙語法設定教學(進階版)



  承上篇ANOBII網路書櫃貼紙語法設定教學

  原本是不打算再貼第二篇佔篇數,但想一想做了個劃分為進階版好了。

  先為以上的基本程式碼做說明:
<!-- Badge begins. The badge consists of two sections: style and HTML -->
<!-- This is the style section. If you want, you can move it to the header section or CSS -->
<style type="text/css">
/* ------[ For the whole badge ]------ */
#badge a:hover {}
#badge a:link {}
#badge a:active {}
#badge a:visited {}
#badge {padding: 10px 5px 10px 5px; width: 200px; border: 1px solid #cccccc;}
/* ------[ For each item in the badge ]------ */
#badge .item_cell {list-style: none; text-align: center; padding: 5px; margin: 0px;}
#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 {} 
/* ------[ The bottom part ]------ */
#badge .link_cell {list-style: none; text-align: center; padding: 5px; margin: 0px; clear: both;}
#badge .link_cell dt {text-align: center; margin: 0px;}
#badge .link_cell dd a {font-size: 10px; font-family: Verdana;}
#badge .link_cell dd {text-align: center; margin: 0px;}
#badge .link_cell img {border: none;}
</style>
<!-- This is the HTML section of the badge -->
<div id="badge">
<script type="text/javascript" src="http://www.anobii.com/anobi/badge_generator.php?p=0193b96668a21e28a9&language=1,2,3,4&tag=0,5,2,3,8,12,7,4,6,13,10,9&count=5&recent=1&progress=3&title=title&subtitle=0&author=0&img=small&link_to=1&az_site=&a_id="></script>
</div>
<!-- Badge ends -->
這個基礎的anobii網路書櫃的基本程式碼設定:

1:顯示最近滙入的5本書;
2:直排顯示;
3:顯示書名;
4:顯示書封為小型;
5:語言種類為英、繁、簡、日;
6:標籤全部;
7:櫃子全部的書。

  其中主要的變數在這個部份。
語言language=1,2,
標籤tag=0,6,3,5,8,10,
書數count=5
最近匯入recent=0
progress=3

書名title=title
副標題subtitle=0
作者author=0
圖片img=small
link_to=1
az_site=
a_id=
這部份的設定變數,要看anobii的定值,我無法確定anobii設定那些數值,所以沒法做完全破解,只能做部份解釋。

  在上段程式碼中的最末段,在上篇有提到修正為自己書櫃時改的id,之後所接的部份,可以用ctrl+f搜尋。
書數count=5
   紅字5自行設定要顯示的書數。
最近匯入recent=0
  紅字1為固定,0為隨機。
書名title=title
副標題subtitle=0
作者author=0
紅字0為不顯示,1為顯示。
圖片img=small
  紅字small可以改成large或square,但後面需另設定長寛width: 100px,
height: 100px,數字100 請自行依欄位大小調整。



  最後,剩下的調整就請自行參考:css基礎教學


文/某者 



<!-- Badge begins. The badge consists of two sections: style and HTML -->
<!-- This is the style section. If you want, you can move it to the header section or CSS -->
<style type="text/css">
/* ------[ For the whole badge ]------ */
#badge a:hover {}
#badge a:link {}
#badge a:active {}
#badge a:visited {}
#badge {padding: 10px 5px 10px 5px; width: 200px; border: ridge 5px #000000;}
(外框與橫式)
/* ------[ For each item in the badge ]------ */
#badge .item_cell {list-style: none; text-align: center; padding: 5px; margin: 0px;}
 (字型與書封面間距與排列,插入float:left可以橫式)
#badge .cover {}
#badge .cover img {border: 1px solid #cccccc; padding: 3px; background-color: #f7f7f7;width:
114px;height: 152px;}
  (書封面外框線與框內背景色)
#badge .title {text-indent: 0;padding: 0; margin: 0;}
#badge .subtitle {}
#badge .author {}
/* ------[ The bottom part ]------ */
#badge .link_cell {list-style: none; text-align: center; padding: 5px; margin: 0px; clear: both;}
#badge .link_cell dt {text-align: center; margin: 0px;}
#badge .link_cell dd a {font-size: 10px; font-family: Verdana;}
#badge .link_cell dd {text-align: center; margin: 0px;}
#badge .link_cell img {border: none;}
</style>
<!-- This is the HTML section of the badge -->
<div id="badge">
<script type="text/javascript" src="http://www.anobii.com/anobi/badge_generator.php?
p=01dcb7f527e1b675d3&language=1,2,3,4&tag=0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18
,19,20&count=5&recent=0&progress=3&title=title&subtitle=0&author=1&img=large&link_to=
1&az_site=&a_id="></script>
</div>
<!-- Badge ends -->













2 則留言: