Blogger 改造"較舊的文章"變浮動按鈕教學 : -- Chinese herbs -- 永昌蔘藥行

首先依造你想改造的程度依序做下去

1. 把"較舊的文章"改成文字"下一頁"或"圖片按鈕"
2. 把"圖片按鈕"改成"浮動按鈕"
3. "浮動按鈕"改成"點到會變色"

首先先進入範本點選 "編輯HTLM" ~

接者展開小工具範本 就要開始改造工程囉!!

(改造前建議先行備份)
-------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------

1.把"下一篇"改成文字"下一頁"或"圖片"

利用 control+F 尋找以下程式碼

將黃底字取代想要的文字或圖

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
將黃底字取代想要的文字或圖：如)上一篇文章 或改為 <img src='圖片網址'/>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
將黃底字取代想要的文字或圖：如)下一篇文章 或改為 <img src='圖片網址'/>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
將黃底字取代想要的文字或圖：如)首頁或改為 <img src='圖片網址'/>

提供我網站的圖片網址(可案右鍵複製圖片網址) 為64px X 61px

-------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------

2. 把"圖片"改成"浮動按鈕"

利用 control+F 尋找 ]]></b:skin> 程式碼
首先在 ]]></b:skin>之前 加入浮動的程式碼 (如下)

#blog-pager-newer-link {position:fixed; bottom:45%; margin-left:-655px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:transparent;padding:3px 3px 3px 3px;z-index:10;box-shadow: 0 0 0;}/*上一頁的按鈕*/
#blog-pager-newer-link .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
#blog-pager-older-link {position:fixed; bottom:45%; margin-left:410px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:transparent;padding:3px 3px 3px 3px;z-index:10;box-shadow: 0 0 0;}/*下一頁的按鈕*/
#blog-pager-older-link .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
]]></b:skin> <===加在這之前

剛開始貼上之後由於每個人版面寬窄的不同
剛開始不一定找的到浮動按鈕的位置需要"自行調整"按鈕位置

紅為調整按鈕於頁面上下 (按鈕大多同高)
藍為調整按鈕於頁面左右 (-為向左 +為向右)
-------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------

3. "浮動按鈕"改成"點到變色"

首先製作一張四格圖如下(可案右鍵複製圖片網址) 為128px X 128px

下面這張尺寸比較特別要自行修改....... 尺寸數值

把步驟1.的 (上一頁下一頁) 名稱改為<img src='四格圖網址'/>

再加入下列程式碼在 ]]></b:skin>之前

.blog-pager a.blog-pager-newer-link, .blog-pager a.blog-pager-older-link, .blog-pager a.blog-pager-newer-link:hover, .blog-pager a.blog-pager-older-link:hover { background: url("四格圖網址") no-repeat scroll transparent;display: block;height: 64px; overflow:hidden;text-indent: -9999px; width: 64px;z-index:1; }
.blog-pager a.blog-pager-older-link {background-position: -64px 0 ;}
.blog-pager a.blog-pager-older-link:hover{background-position:-64px -64px;}
.blog-pager a.blog-pager-newer-link{background-position: 0 0 ;}
.blog-pager a.blog-pager-newer-link:hover {background-position: 0 -64px ;}

四格圖為64px X 64px 組成的 128px X 128px 圖
依照不同按鈕大小需修改紅色的按鈕尺寸

網頁

##EasyReadMore##