[教學] Blogger熱門文章樣式

Blogger 現在也提供了「熱門文章」的小工具，使用者只要進入管理頁面的設計→新增小工具→熱門文章，就可以新增熱門文章的小工具到 Blogger 的頁面了，小工具本身有提供一些基本設定，包含要顯示的內容(標題、摘要、縮圖)，一次要顯示的文章數量，統計時間的長短等等...

這次要分享的是，我修改「熱門文章」小工具的樣式，因為我嫌「熱門文章」原始的垂直顯示太過冗長，所以我決定透過修改小裝置範本和加入 css code，把垂直顯示改成並排顯示並且設計成我想要的樣式。
註：我的小工具基本設定為一次顯示六篇文章，只顯示標題和縮圖，不顯示摘要

在修改之前，我們要先來分析「熱門文章」小工具的架構，「熱門文章」小工具主要包含三個 class，其分別代表文章的標題、縮圖和摘要三個部分，而顯示文章的迴圈一樣是透過HTML項目標籤來做控制，瞭解架構之後，會寫 css code 的人就可以自己動手做樣式設計了，至於不想或不會自己寫 css code 的人可以參考我下面的步驟。

接下來我會附上我所使用的 css code，和我修改小裝置範本的教學，想要的人可以複製之後貼到管理頁面的設計→修改HTML

首先下載完整範本做備份
然後在小裝置範本上面打勾
打勾後把底下這些 css code 貼到 ]]></b:skin> 之前

<!-- 控制每篇熱門文章的樣式 -->
#hot-post li {
float: left;
width: 140px;
height: 110px;
margin: 2px 5px;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

<!-- 控制每篇熱門文章標題的樣式 -->
.item-title {
width: 100%;
height: auto;
margin: 0px;
padding: 0px;

}

<!-- 控制每篇熱門文章縮圖的樣式 -->
.item-thumbnail {
width: 100%;
height: 80px;
margin: 0px;
padding: 0px;
}

<!-- 控制每篇熱門文章摘要的樣式 -->
.item-snippet {
margin: 0px;
padding: 0px;
}

接著找到底下這段 code，找不到可以搜尋 widget-content popular-posts

<div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>

把 <ul> 改成 <ul id='hot-post'>

結果會變成底下這段 code

<div class='widget-content popular-posts'>
    <ul id='hot-post'>
      <b:loop values='data:posts' var='post'>
      <li>

最後記得儲存範本，重新檢視部落格，就可以看到和我部落格一樣的熱門文章樣式了。