嫌痞邦邦的文章分頁按鈕太小嗎?讓我們來修改一下,讓訪客們注意到你的下一頁

2012/11/23 網頁相關

阿湯本身的網站是用 WordPress 建站,所以其實彈性很高,想怎麼修改都可以,相對的如果是 BSP 用戶(像痞客邦、無名、Blogger)等等,可以修改的項目就不多,而版面最主要也只能透過 CSS 做些變化,這二天剛好有朋友也在抱怨痞客邦的文章分頁樣式怎麼那麼小,根本不會有人注意到下一頁,都得自己另外寫上大字說明才會注意到,所以阿湯花了一點時間弄了一小段 CSS 語法,給痞客邦的用戶參考,如果有在使用分頁的朋友可以看看,希望對你們有幫助。

如何修改痞客邦文章分頁樣式?

這是原本痞客邦的文章分頁樣式,可能用的人不多,主要是因為太小了,很多人都不會注意到要去按,所以這次的任務就是來把他變大。

01

語法如下,將語法加到後台的 CSS 原始碼編輯裡,任意找個空白處貼上即可,基本上就會有效果了,之後可以自己依喜好,再更換圖片及大小等等,語法可修改的部份都有附加說明,就不多做介紹。

.article-content .page span{

font-size: 28px !important;

left: 180px; /* 第X頁|全文共X頁 <= 數值愈大愈靠右 */

position: absolute;

}

.article-content .page a.prev,.article-content .page a.next{

display: block;

height: 90px; /* 圖片高度,你上傳的圖片有多高就寫多少 */

text-indent: -999em !important;

width: 180px; /* 圖片寬度,你上傳的圖片有多寬就寫多少 */

margin-top: 30px !important;

}

.article-content .page a.next{

background: url("http://pic.pimg.tw/scorpioliu/1353481895-1608593676.png") no-repeat scroll 0 0 transparent !important; /* 下一頁的圖片網址 */

float: right;

}

.article-content .page a.next:hover{

background: url("http://pic.pimg.tw/scorpioliu/1353481895-1608593676.png") no-repeat scroll 0 0 transparent !important; /* 下一頁的圖片網址 */

}

.article-content .page a.prev{

background: url("http://pic.pimg.tw/scorpioliu/1353481895-493820963.png") no-repeat scroll 0 0 transparent !important; /* 上一頁的圖片網址 */

float: left;

}

.article-content .page a.prev:hover{

background: url("http://pic.pimg.tw/scorpioliu/1353481895-493820963.png") no-repeat scroll 0 0 transparent !important; /* 上一頁的圖片網址 */

}

03

改完後效果就像這樣,夠明顯了吧,如果這樣還不知道要點下一頁,那就要去眼科了,Demo 網址如下:

http://scorpioliu.pixnet.net/blog/post/37386680

02

你可能對這些內容也有興趣

作者:阿湯

對電腦 & 網路資訊充滿興趣與熱情、瘋了似的每日堅持發文,「阿湯」這個名字是由湯姆克魯斯而來的,雖然我沒有他帥氣,也不會演電影,但我會寫文章....

更多關於的文章》

2 個留言

  1. 請問有關Pixnet 上下一則文章按紐的CSS
    是不是用 .pix_article_switch_content 等的語法?
    求DIY修改CSS教學~

    阿湯說:

    這部份請自行研究

  2. Werboy表示:

    我去了宮原眼科,但還是看不好

    阿湯說:

    XDD

發表留言 »

姓名(*)
信箱(*)