痞客邦|熱門與最新文章加上排名圖案|免費CSS樣式語法，直接複製貼上－倉鼠日常

Yellow and Turquoise Vivid Professional Static Quote General News Instagram Post

前幾篇文章倉鼠有分享版型物件CSS樣式語法和頁頭、公告版位。而今天要分享右側區塊中熱門與最新文章加上排名圖案的CSS樣式語法

可以參考「倉鼠日常」右側區塊中熱門與最新文章使用到的CSS樣式語法，如果這個樣式你也喜歡，歡迎直接複製貼到你的後台唷~!

CSS樣式項目(點選以下項目可以快速跳頁)

熱門文章加小圖案(3則)
最新文章加小圖案(5則)

使用說明

看到喜歡的樣式，選取並複製相關的CSS語法
到「我的部落格後台」->「樣式管理」->「部落格CSS原始碼」
在最下面語法的最後貼上剛剛複製的CSS語法

小提示

如果你想要確保所有的樣式套用都可以相同(取得最大的相容性)，你可以在「樣式管理」選擇「七月預設主題水淺聰」

熱門文章加小圖案(三則)

/*熱門文章加小圖案*/
#hot-article .box-text {
padding: 0px 8px 0;
}
#hot-article li:before {
content: "";
display: block;
float: left;
width: 25px;
height:25px;
align-items: center;
text-align: center;
overflow: hidden;
}
#hot-article .box li a {
display: block;
float: left;
width: calc(100% - 30px) !important;
vertical-align: top;
font-size: 16px;
padding-left: 5px;
align-items: center;
}
#hot-article .box-text li {
padding: 12px 0;
display: block;
float: none;
overflow: hidden;
border-bottom: 1px dashed #dfdfdf;
}
#hot-article li:before {
background-size: 25px 25px;
background-position: center;
}
#hot-article li:nth-child(1):before {
background-image: url(https://pic.pimg.tw/jacksonlife/1626701303-1312894215-g.png);
}
#hot-article li:nth-child(2):before {
background-image: url(https://pic.pimg.tw/jacksonlife/1626701303-4191185351-g.png);
}
#hot-article li:nth-child(3):before {
background-image: url(https://pic.pimg.tw/jacksonlife/1626701303-784699719-g.png);
}
#hot-article #hotArtUl span{
display:none !important;
}

最新文章加小圖案(5則)

/*最新文章加小圖案*/
#recent-article .box-text {
padding: 0px 8px 0;
}
#recent-article li:before {
content: "";
display: block;
float: left;
width: 25px;
height:25px;
align-items: center;
text-align: center;
overflow: hidden;
}
#recent-article .box li a {
display: block;
float: left;
width: calc(100% - 30px) !important;
vertical-align: top;
font-size: 16px;
padding-left: 5px;
align-items: center;
}
#recent-article .box-text li {
padding: 12px 0;
display: block;
float: none;
overflow: hidden;
border-bottom: 1px dashed #dfdfdf;
}
#recent-article li:before {
content: "";
display: block;
float: left;
width: 25px;
height:25px;
text-align: center;
overflow: hidden;
align-items: center;
}
#recent-article li:before {
background-size: 25px 25px;
background-position: center;
}
#recent-article li:nth-child(1):before {
background-image: url(https://pic.pimg.tw/jacksonlife/1626704340-1798447477-g.png);
}
#recent-article li:nth-child(2):before {
background-image: url(https://pic.pimg.tw/jacksonlife/1626704340-3773712657-g.png);
}
#recent-article li:nth-child(3):before {
background-image: url(https://pic.pimg.tw/jacksonlife/1626704340-2016358732-g.png);
}
#recent-article li:nth-child(4):before {
background-image: url(https://pic.pimg.tw/jacksonlife/1626704340-556705557-g.png);
}
#recent-article li:nth-child(5):before {
background-image: url(https://pic.pimg.tw/jacksonlife/1626704340-3334872432-g.png);
}

CSS相關文章