作者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)