[Blogger][側邊欄工具] 簡易安裝的分類文章縮圖 Widget
最近研究了一下 Blogger 的 JSON,參考了一個抓最新文章縮圖的寫法,將之改寫為抓取某分類文章縮圖的工具,順便想了一下怎麼讓大家安裝最方便。 稍微了解 Blogger 的 JSON 怎麼抓之後,發現其實蠻多事可以做的,比如這個版型上方的推薦文章輪播區,就可以配合這個抓分類文章縮圖的工具,再搭配像是 jQuery Cycle Plugin 或者 jQuery Nivo Slider Plugin 就可以抓某個要放在上方輪播區的文章分類,不用像之前必須要手動進版型複製貼上了,所以已經順手把上方的輪播區改好了,順利愉快。 不過為了方便介紹,我想把題目先訂為安裝一個側邊欄的小工具,並且兩個步驟就完成安裝,以我的弱格影音部落格,右側側邊欄的寬度是 300px,底下的範例就是以這個寬度來設定,您可以自行調整 CSS 來符合您的版型邊欄。 工具安裝》 #1 進到版型設計的頁面,新增一個 HTML/Javascript 的小工具。 #2 填入以下的代碼,儲存,搞定。 <style> .widget-wrapper {margin:0 auto;width:300px;text-align:center;} .tn-post {float:left;width:72px;height:110px;overflow:hidden;margin:1px;} .tn-thumbnail {text-align:center;top: 0px; left: 0px; width: 70px; height: 70px; background: #E6E6E6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu-GAQ4awCGSGWMLNv7Hor7ZOlGd2PIqa-B-m1USdEpOoO552kifwilmKbKjmq88425bXihXgBjnOWBIFdxKwb0XKSI7joIJtYM2v6o-uAy-JyDs8dOqx-0JQOIZneJEN9RYCX/s800/background.png); overflow:hidden;border:1px solid #999;} .tn-post h3.fp-title {f...