2-1 Blogger做自適應上、下章及回目錄按鈕

2-1 Blogger做自適應上、下章及回目錄按鈕-01

寫作Blogger和一般Blogger最大的不同，就是有無上、下章和回目錄的按鈕了。又由於是個人創作的部落格，不可能會有專屬手機APP，這些按鈕最好是能夠，自動調節成合適的大小。

那麼會不會很難呢？其實並不難，一樣是編輯CSS就能辦到，這次會利用到的，還有無序清單元素的<li>。但要先說明的是，我套用的Blogger版型，原本就是響應式（自適應），會隨螢幕的大小，進行網頁寬度的調節，所以不適用非響應式的版型。

首先要知道CSS（樣式）擺放位置，一般會放置在]]></b:skin>或</style>之前。進入到Blogger後台／主題／自訂／編輯HTML，進到裡面後，點進html內文，可利用Ctrl＋F進行搜尋。

接著設定放置按鈕的框架，如下圖：

.w-page { border-top: 1.5px dashed #ddd; border-bottom: 1.5px dashed #ddd;  margin:100px 0 40px 0 ; overflow:hidden}

2-1 Blogger做自適應上、下章及回目錄按鈕-02

設置三個按鈕的位置和外框，如下圖：

.w-page li.next { float: right; margin:0px}
.w-page li.previous, .w-page li.center { float: left; margin:0px -1px 0px 0px; border-right:1px solid #ddd}

2-1 Blogger做自適應上、下章及回目錄按鈕-03

最後設定按鈕、文字、按壓的樣式，如下圖：

.w-page li { width: 33.3%; display: inline;text-align: center; font-size: 15px}
.w-page li a { position: relative; display: block; padding: 3px 10px 3px; color:#1895a3}
.w-page li a:hover { color: #ffffff; background:#85cbcc }

2-1 Blogger做自適應上、下章及回目錄按鈕-04

最後只要於文章內，置入以下代碼即完成，是不是比想像中容易。

<div class="w-page">
     <li class="previous">
         <a href="上一章網址">上一章</a></li>
     <li class="center">
         <a href="目錄網址">回目錄</a></li>
     <li class="next">
         <a href="下一章網址">無下章</a></li>
</div>

雖然需在每篇文章，手動放入且設定文章連結，有些麻煩，但可利用Quick Tex Paste（可前往3-6）簡化流程。

全部的CSS代碼：

.w-page { border-top: 1.5px dashed #ddd; border-bottom: 1.5px dashed #ddd;  margin:100px 0 40px 0 ; overflow:hidden}
.w-page li.next { float: right; margin:0px}
.w-page li.previous, .w-page li.center { float: left; margin:0px -1px 0px 0px; border-right:1px solid #ddd}    
.w-page li { width: 33.3%; display: inline;text-align: center; font-size: 15px}
.w-page li a { position: relative; display: block; padding: 3px 10px 3px; color:#1895a3}
.w-page li a:hover { color: #ffffff; background:#85cbcc}.w-page li a:hover { color: #ffffff; background:#85cbcc}

另外，因為我套用的版型，裡面已有許多預設，所以代碼比較簡單。另放上較多設定的版本，以供更多的選擇。

.w-page { border-top: 1.5px dashed #ddd; border-bottom: 1.5px dashed #ddd; margin:100px 0 40px 0 ; overflow:hidden; padding:0px}
.w-page li.next { height:40px; float: right; margin:0px; padding:0px; background:none}
.w-page li.previous, .w-page li.center { height:40px;float: left; margin:0px -1px 0px 0px; border-right:1px solid #ddd; padding:0px; background:none;}
.w-page li { width: 33.3%; display: inline;text-align: center; font-size: 15px}
.w-page li a { position: relative; display: block; padding: 3px 10px 3px; color:#1895a3; transition: color .17s ease; outline:none; text-decoration: none}
.w-page li a:hover { color: #ffffff; background:#85cbcc }