作者eddy1221 (rolling)
看板Blog
標題Re: [Blogger]要怎麼增加<>的這兩個浮動按鈕咧?
時間Tue Feb 5 14:04:28 2013
增加<>的這兩個浮動按鈕的方法
好讀網頁板:
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 + "_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='圖片網址'/>
------------------------------------------------------------------------------
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 圖
依照不同按鈕大小需修改紅色的按鈕尺寸
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 36.233.209.230
1F：推 raphea:謝謝，等等就來試試看:) 02/05 20:31
2F：推 weihsi:感覺教學文和部落格主題不符XDDD 02/06 12:12
純粹分享 應鄉民需求PO的 XD
3F：推 n17a2:原來這能自己改，超強 XD 02/26 12:48
4F：推 linweijie:變色弄不出來耶...不知道問題在哪 03/03 20:58
要看你"4個組合圖"的大小來修改數據喔~
5F：→ linweijie:64換成128的意思?我是用你提供的...還是要切割成4個? 03/04 22:01
要用128*128的圖 你再試試看吧~
6F：→ linweijie:我有用128...但會回直接顯示128那張耶(4個圖示) 03/05 01:07
還要加程式碼喔 不行的話不知會不會其他CSS覆蓋在它上面
可能要換一下程式碼上下位置 再不行就無解了
這是我網路找來的拼裝車 (我也不是專家..) 自己試試吧~
※ 編輯: eddy1221 來自: 36.233.204.203 (03/05 15:50)