网站底部添加随机文章滚动条,适用于wordpress、zblog、typecho

最近在逛一些大佬的博客的时候,看到大佬们的博客在网站底部放了一个随机文章滚动条,也算是一个底部滚动公告条。观察来看,滚动条可以随机的滚动一些文章,可以让自己博客已经放灰的文章在一次次的滚动中得以重见天日。增加文章的曝光率,我也是在网上找到了这样一份代码,然后修改了一下,特地分享给大家,这里十分感谢张戈大佬。下面以wordpress为例

首先大家可以直接看看张戈大佬这篇文章:原创插件:WordPress博客友好对话框+文章随机推荐滚动条插件(附代码版)

[c-alert type="error"]大佬的wordpress插件已经被wordpress下架,由于安全问题[/c-alert]

[c-alert type="error"]大佬的JS代码安装可能会对部分主题不生效[/c-alert]

[c-alert type="success"]可以直接使用下面的方法进行快速设置,代码也来自张戈大佬[/c-alert]

博主尝试了一下,发现wordpress插件对自己当前主题有些缺陷,并且在手机端的时候不会显示,也尝试了一下使用JS安装办法,发现还是不能成功,如果你也有这样的问题,可以直接使用博主下面的代码。

PHP代码

这部分代码直接放在主题footer.php文件的末尾或者开头,确保在</body>之前即可

 <div id="gg">
   <div class="wp_close"><a href="javascript:void(0)" onclick="$('#gg').slideUp('slow');" title="关闭">×</a>
     <div id="feedb"><a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=hi@beiwangshan.com" rel="nofollow" target="_blank" title="联系北忘山" class="image"><img alt="订阅图标按钮" src="https://cdn.beiwangshan.com/uploads/images/blog/202112/202112132059059.gif" style="width:23px;height:23px;" /></a></div>
       <div class="bulletin">
     <ul>
     <?php wp_reset_query();query_posts( array ( 'orderby' => 'rand', 'showposts' => 5, 'ignore_sticky_posts' => 10 ) ); while ( have_posts() ) : the_post();?>
     <li><a href="<?php the_permalink(); ?>" target="_blank" title="细看 <?php the_title(); ?>">
     <?php echo '随机推荐:《';the_title();echo '》';if(function_exists('the_views')) {print '( 阅读';the_views();print '次 |</a>';}comments_popup_link('坐等沙发','1条评论','%条评论'); ?>)</li>
     <?php endwhile; ?>
         </ul>
     </div>
 </div>
 <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/gg.js" ></script>

然后将其中的邮箱换位自己的邮箱,或者如果你的博客开启了RSS订阅,直接更换href=""中的内容为你RSS订阅地址,并且其中img标签的src路径是一张RSS图标,也建议通过下载下面的两个图标,上传到你自己的博客,更换为博客中的图片地址。

CSS 和 JS

js

在自己网站的主题目录新建gg.js文件,该文件和主题的footer.php是同一个目录

 function turnoff(obj) {
     document.getElementById(obj).style.display = "none";
 }
 // 文字滚动
 (function($) {
     $.fn.extend({
     Scroll: function(opt, callback) {
     if (!opt) var opt = {};
         var _this = this.eq(0).find("ul:first");
         var lineH = _this.find("li:first").height(),
         line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10),
         speed = opt.speed ? parseInt(opt.speed, 10) : 7000, //卷动速度,数值越大,速度越慢(毫秒)
                 timer = opt.timer ? parseInt(opt.timer, 10) : 7000; //滚动的时间间隔(毫秒)
         if (line == 0) line = 1;
         var upHeight = 0 - line * lineH;
         scrollUp = function() {
             _this.animate({
                 marginTop: upHeight
             }, speed, function() {
                 for (i = 1; i <= line; i++) {
                     _this.find("li:first").appendTo(_this);
                     }
                     _this.css({
                     marginTop: 0
                     });
                 });
             }
             _this.hover(function() {
                 clearInterval(timerID);
             }, function() {
                 timerID = setInterval("scrollUp()", timer);
             }).mouseout();
         }
     })
 })(jQuery);
 $(document).ready(function() {
     $(".bulletin").Scroll({
         line: 1,
         speed: 1000,
         timer: 5000
     }); //修改此数字调整滚动时间
 });

如果需要调整滚动速度或者滚动时间,可以查看代码中的注释,时间代码均为ms毫秒!

css

如果自己的主题有自定义CSS的地方,可以直接把下面的代码放进去保存

如果主题没有,放在主题目录下面的style.css文件的最末尾即可

 #gg{position:fixed;bottom:0;background:#000;width:100%;height:23px;line-height:23px;z-index:9999;opacity:.60;filter:alpha(opacity=60);_bottom:auto;_width:100%;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));-webkit-box-shadow:10px 0 5px #000;-moz-box-shadow:10px 0 5px #000;box-shadow:10px 0 5px #000}
 #gg a{color:#fff;letter-spacing:2px;text-shadow:0px 1px 0px #000}
 .wp_close a{float:right;margin:0 10px 0 0}
 .bulletin{height:23px;color:#fff;margin:0 0 0 20px;background:url(./images/bulletin.gif) no-repeat;min-height:23px;overflow:hidden}
 .bulletin a{float:left}
 .bulletin li{height:23px;padding-left:25px}

同样的修改css中的./images/bulletin.gif为自己的上传的图标即可,可以直接放图片地址,例如:

 background:url(https://cdn.beiwangshan.com/uploads/images/blog/202112/202112132009193.gif)

反正换成自己的,会快一点

图标下载

大家直接右键保存即可

小喇叭(bulletin)图标:

图片[1]-网站底部添加随机文章滚动条,适用于wordpress、zblog、typecho-北忘山博客

RSS图标:

img

效果演示

参考本站底部滚动条

image-20211213213213566

速度修改适中即可

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容