Re: [Blogger]要怎麼增加<>的這兩個浮動按鈕咧?

看板Blog作者eddy1221 (rolling)時間11年前 (2013/02/05 14:04)推噓4(4推 0噓 2→)

留言6則, 4人參與討論串2/2 (看更多)

增加<>的這兩個浮動按鈕的方法好讀網頁板: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

推

raphea

02/05 20:31, , 1^F

02/05 20:31, 1^F

推

weihsi

02/06 12:12, , 2^F

02/06 12:12, 2^F

純粹分享應鄉民需求PO的 XD

推

n17a2

02/26 12:48, , 3^F