GoodReads 在Blogger上的widget

首先，GoodReads的用途就是幫你記錄你看了多少書，
雖然有些中文書可能搜尋不到，但還是不錯用（畢竟被Amazon買走了）。
p.s 有興趣的可以看看這篇 Amazon 為何花 1.5 億美金買下閱讀社群 GoodReads？
建議下載他們的app(怎麼使用，應該摸一下就會了），
可以幫助快速掃描書進去你的書庫（但中文書真的要碰運氣，如果是漫畫的話，可以考慮去找日文的ISBN新增）。
實際上還有另外一個很常聽到的網站，aNobii，一開始我也是用這家，
但他有時讀取真的很慢，然後我找不到可以放在blogger的widget，
以前有，但似乎都掛掉了。

GR有API開放使用，改天可以來研究一下，改進一下他現在的Widget不足之處。

以下正文



現有的Widget從使用者帳號(Account Setting)點進去後，選擇Widget就能看到了。

但試了一下，發現只有 GOODREADS UPDATE WIDGET是動態產生資料的（顯示你對書本的動作,例如：評分、加入書籍..），
其他書庫顯示書的都不是動態，所以這就是改天研究API的方向了。
如果是其他的顯示已經讀過的書，
可以直接把他的CSS那段貼到Blogger上面，
也就是利用Google 的Blogger的版面配置，
新增一個Html/Javascript 小工具的方式新增

再來記錄一下CSS的改法，
因為我版面主題的關係，
所以照原本的貼上去會變成下面這張圖

上面的標題，區塊嚴重不協調。
下方的連結色彩也很糟糕，完全看不見。
本來直接更改裡面的html把 標題從h3改成h2
但他有呼叫一段api會重新產生這段html，

<script src=https://www.goodreads.com/review/custom_widget/67431666.Daimom's%20bookshelf:%20read?cover_position=left&………=thin type="text/javascript" charset="utf-8"></script>

所以只好去改CSS了。
找空位把

h2.gr_custom_header_1538979678 {
     border-bottom: 3px solid #66a8c7;
     margin: 0 0 0 0;
     background-image: none;
     color: #00635d;
     padding:0;
}
#gr_custom_widget_1538979678 a {
     color: #00635d;
}

這段貼上，要注意的是，GR產生的語法後面的數字會不一樣，
gr_custom_widget_1538979678
像這個是1538979678如果更改排序的話，
這個數字就會不一樣了，需要更改。
可以先用瀏覽器開啟開發者模式作測試。
改完後像這樣

清楚多了。