博客園 CodingLife 模板 翻頁樣式美化方法

博客園 CodingLife 模板 翻頁樣式美化方法

很喜歡這個模板，這個模板也是博客園人氣最高的了吧。

可是它的翻頁其實頗有問題，當翻到第二頁之後，翻頁的樣式讓人用起來很不舒服。鼠標移上移出樣式跳躍太大，給人一種好像樣式有誤的感受。

因此我特意花時間美化了一下。

若是你剛好也是用這個模板的話，把如下代碼複製一下，打開你的博客，而後到【設置】| 【頁面定製CSS代碼】這一欄中粘貼一下，就解決了。

而後預覽看一下吧。

/* Banlieue13 導航欄美化
#navList {
min-height: 45px;
background: #C66767;
width: 80%;
}
#navigator a {
color: #000;
font-family: "verdana","ms song","宋體","Arial","微軟雅黑", "Helvetica", "sans-serif";
font-size: 16pt;
font-weight:bold;
}*/

/*CodingLife模板 翻頁美化*/
.topicListFooter .pager a:link,.topicListFooter .pager a:visited{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #169fe6;
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .09);
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .09);
    box-shadow: 0 0 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .09);
    height: 40px;
    line-height: 40px;
    margin-top: 0px;
    color: #fff;
    display: inline-block;
    padding: 0 15px;
    text-decoration: none;
    border: none
}
.topicListFooter .pager a:hover{
    background: #E86C74;
}
#nav_next_page a {
  background-color: #E86C74;
}
.topicListFooter {
  height:30px;
}
#homepage_top_pager.topicListFooter,#homepage1_HomePageDays_homepage_bottom_pager.topicListFooter {
  height: 68px;
}
#under_post_news {
  width: 848px;
  margin-left: 0px; 
}
#topics .postDesc a{
 margin:0 0.5em;
}