|

最早看到這個左右翻頁是在盧松松的博客,其實這個翻頁功能也挺簡單,就是把原本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
|