|
最早看到這個左右翻頁是在盧松松的博客，其實這個翻頁功能也挺簡單，就是把原本zblog博客自帶的翻頁功能進行了一下美化而已。其實很簡單，為大家分享下吧。
首先，把下面的css樣式復制到被調(diào)用的樣式表里（這個可能都不一樣，盧松松博客模版默認的是LuSongSong-Index.css），注意圖片存放的文件夾位置（images或img）。 1 2 3 4 | a.prev,a.next{display:block;width:108px;height:282px;position:fixed;left:50%;top:50%;margin-top:-141px;background:url("images/arrow.png") no-repeat;}
a.prev{margin-left:-600px;background-position:0 0;}
a.next{margin-left:486px;background-position:0 -320px;}
a.prev:hover,a.next:hover{background-color:#F7F3ED;}
|
然后，使用FTP工具上傳下面這一張圖片到zb_users/THEME/你的主題名稱/STYLE/images文件夾下（本站是在img文件夾下），并命名為arrow.png。 
最后，在想要實現(xiàn)這個功能的頁面添加個A標簽就行了。比如文章頁面：
在b_article-single.html頁面 方法一：把
1 | <div class="post-nav"><#template:article_navbar_l#><#template:article_navbar_r#></div>
|
替換成下面代碼即可。
1 2 3 4 | <div class="post-nav">
<a class="prev" href="<#article/nav_l/url#>"title="<#article/nav_l/name#>"></a>
<a class="next" href="<#article/nav_r/url#>" title="<#article/nav_r/name#>"></a>
</div>
|
方法二：下一行代碼不動
1 | <div class="post-nav"><#template:article_navbar_l#><#template:article_navbar_r#></div>
|
把/wwwroot/zb_system/DEFEND/default/目錄下的
b_article_navbar_l.html和b_article_navbar_r.html里面的代碼分別換成或直接追加下面這兩行也行。 1 2 | <a class="prev" href="<#article/nav_l/url#>" title="<#article/nav_l/name#>"></a>
<a class="next" href="<#article/nav_r/url#>" title="<#article/nav_r/name#>"></a>
|
基本就是這樣。最后文件重建（ [更新緩存] ）、刷新下文章頁面就會看到效果了，本站有演示效果，隨便打開一篇文章看效果！ 注：本站測試過，使用方法二，保持原來的代碼不變，再直接分別追加代碼即可。
好消息！ 現(xiàn)在訂閱阿飛博客，立即贈送最新最好最有價值的資源給你!
第一步：點擊這里
第二步：輸入您的QQ郵箱
第三步：登陸QQ郵箱，點擊確認連接
第四步：成功訂閱
如果感覺本文章對你有價值，可按您心情自愿付費： 支付寶 andyzeng981@163.com 曾德飛
除非注明，文章均為( 阿飛博客 )原創(chuàng)，轉(zhuǎn)載請保留鏈接: http:///197.html
訂閱公眾號：diqiujiayuancom 站長微信(QQ)：81531444
|
