之前和大家分享過我部落格使用的熱門文章樣式,
可以把熱門文章小工具從預設的「垂直顯示」修改成「並排顯示」
前幾天有網友留言詢問我,修改樣式和文章標題的長度是否有關聯?
一開始我以為兩者之間是沒有關聯的...
但後來經過我實際測試之後發現彼此之間是會有影響的,因為有些文章的標題長度會超過一行,在並排顯示的時候會產生有些標題需要換行有些則不用換行的情況,導致最後顯示的結果產生了錯誤。
註:原因來自於我們並不知道每篇熱門文章的標題長度到底有多長...
為了解決這樣的問題,我把之前分享的 css code 稍微修改了一下,在熱門文章的顯示裡加入了固定的高度,可以解決因為文章標題換行所產生的問題,並且加入了註解,讓想要套用此樣式的使用者可以更自由的操作樣式。
樣式的插入方式可以參考Blogger熱門文章樣式裡的教學
#hot-post li {
float: left;
width: 140px; /* 每篇熱門文章的固定寬度 */
height: 110px; /* 每篇熱門文章的固定高度, 高度越大, 可顯示的行數越多 */
margin: 2px 2px;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
.item-title {
width: 100%;
height: auto;
margin: 0px;
padding: 0px;
clear: both;
}
.item-thumbnail {
width: 100%;
height: 80px;
margin: 0px;
padding: 0px;
clear: both;
}
如有發現問題,歡迎留言和我討論,謝謝 :)
我使用格主提供的程式碼,有成功顯示了:)
回覆刪除不過最近發現有些熱門文章的縮圖會無法顯示哩
不曉得是哪裡出問題了!?
請確定圖片的路徑, 盡量遵守官方的限制,
刪除因為要是採用自己的圖片路徑, 有些路徑會抓不到縮圖的樣子
所以我後來都是用google提供的圖床來放照片了.
覺得不錯
回覆刪除