要怎麼增加<>的這兩個浮動按鈕咧? - 部落格

增加<>的這兩個浮動按鈕的方法

好讀網頁板:http://yong-chang-chinese-herbs.blogspot.tw/2013/02/blogger.html
(為店家網誌 不喜誤入 一行不縮了)



1.把"下一篇"改成"圖片"

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

將黃底字已想要的文字取代

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl'
expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;'
expr:title='data:newerPageTitle'><data:newerPageTitle/></a>

將黃底字取代為上一篇的圖片：改為 <img src='圖片網址'/>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl'
expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'
expr:title='data:olderPageTitle'><data:olderPageTitle/></a>

將黃底字取代為下一篇的圖片：改為 <img src='圖片網址'/>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

將黃底字取代為回首頁的圖片：改為 <img src='圖片網址'/>

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

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;}


剛開始貼上之後 由於每個人版面寬窄的不同

剛開始不一定找的到浮動按鈕的位置 需要"自行調整"按鈕位置

紅為調整按鈕於頁面上下 (按鈕大多同高)

藍為調整按鈕於頁面左右 (-為向左 +為向右)

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

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 圖

依照不同按鈕大小需修改紅色的按鈕尺寸

--