给你的Emlog博客加个底部滚动公告栏

      新的学年就要开始了,最近忙死了。家里有几个家伙要准备开学,大家下辈子投胎一定要记得别做大的,做老大累死人啊。当然,要是你一不小心投胎到李刚家里,那你就无忧了。

      这个东西说是公告栏,其实又不是公告栏,但看着像公告栏,所见就当时公告栏吧 = =!

      这个公告栏不是插件,要自己加载代码,很简单的,稍微动下手就能实现了。而且我也不会做插件。

      首先说明一下这个公告栏是在这个 wp 博客整过来的,基本没做什么修改,你可以自己修改美化。

      这个公告栏跟我现在的模板的首页和自建页面有点冲突,估计跟我移植的 Simple-M 模板也会有冲突。具体跟你的模板有没有冲突请自行测试了。


      这个公告栏有两个主要特点,一是在公告栏左边滚动显示随机日志,随机显示条数可以在后台的 widgets 里设定,也就是跟侧栏的随机日志的显示条数一样的;二是公告栏右边有个社会化分享工具,而且是非第三方的,安全有保障。怎样加入到你的模板,这里我提供两个方法,

      第一:

      首先你得保证能成功加载 JQ 库,这个是必须的。

      下面是 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)));box-shadow:10px 0 5px #000;}
#gg a{color:#fff;font-size:13px;letter-spacing:2px;text-shadow:0 1px 0 #000;}
.close a{float:right;margin:0 10px 0 0;}
.bulletin{float:left;height:23px;color:#fff;margin:0 0 0 20px;background:url(images/bulletin.gif) no-repeat;min-height:23px;overflow:hidden;}
.bulletin li{height:23px;padding-left:25px;}
/** 公告正文 **/
.archive_box_z{font-size:13px;padding:10px;}
.archive_title_box_b{width:948px;}
.archive_title_b{float:left;}
.archive_info_b{float:right;}
.archive_b{width:948px;margin:10px 0 0;}
.clear12{padding:5px;}
.author_a img{float:left;margin:3px 5px 0 0;}
下面是js代码
// 文字滚动
(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});//修改此数字调整滚动时间
});
这里是html代码,放到你模板的footer.php里。
<div id="gg">
<div class="close"><a href="javascript:void(0)" onclick="$('#gg').slideUp('slow');" title="关闭">×</a>
<div id="feedb">
<a href="<?php echo BLOG_URL; ?>rss.php" title="欢迎订阅本站" class="image"><img src="<?php echo TEMPLATE_URL; ?>images/feed.gif" /></a>
</div>
<div class="weibo"><a class="sina_t" href="javascript:(function(){window.open('http://v.t.sina.com.cn/share/share.php?title='+encodeURIComponent(document.title)+'&url='+encodeURIComponent(location.href)+'&source=bookmark','_blank','width=450,height=400');})()"title="分享到新浪微博" rel="nofollow">新浪微博</a></div>
<a class="qq_t" href="javascript:void(0);" onclick="window.open('http://v.t.qq.com/share/share.php?title='+encodeURIComponent(document.title.substring(0,76))+'&url='+encodeURIComponent(location.href)+'&rcontent=','_blank','scrollbars=no,width=600,height=450,left=75,top=20,status=no,resizable=yes'); " title="分享到腾讯微博" rel="nofollow" >分享到:腾讯微博</a></div>
<?php
$index_randlognum = Option::get('index_randlognum');
$Log_Model = new Log_Model();
$randLogs = $Log_Model->getRandLog($index_randlognum);?>
<div class="bulletin">
<ul>
<?php foreach($randLogs as $value): ?>
<li><a href="<?php echo Url::log($value['gid']); ?>" title="<?php echo $value['title']; ?>"><?php echo $value['title']; ?></a></li>
<?php endforeach; ?>
</ul>
</div>
</div>

      上面的各种代码具体怎样插入到你的模板你自己看着办吧,我就不啰嗦了。


      第二:

      这个我把 js 和 CSS 都做成一份文件,首先到下面下载附件,解压出来后上传到你的模板目录,然后打开 header.php,在 <head> 到 </head> 之间增加两句代码加载 CSS 和 js 文件。分别是

      <link rel="stylesheet" type="text/css" media="all" href="<?php echo TEMPLATE_URL; ?>gg.css" />

      <script type="text/javascript" src="<?php echo TEMPLATE_URL; ?>js.js"></script>

      如果跟你原来的模板原有文件重名的话自行改名。CSS 文件最好加载在你的主题 CSS 后面,js 文件最好加载到你的 JQ 库后面。

接着复制上面第一个方法写到的 html 代码到你的 footer.php 里。完成。

插件:http://down.qiannao.com/space/file/xinxin8816/share/2011/9/3/-4e3aEMLOG-52a0-4e0a-5e95-90e8-6eda-52a8-516c-544a-680f.zip/.page

本文链接:https://zeallr.com/read/180.html
若无特别说明,本文系原创,且遵循 创意共享 4.0 许可证 (署名 - 非商业性使用 - 相同方式共享)

    丁丁
    丁丁  2011-09-04, 08:37

    做的不错啊,把EM变得挺像WP,这个模板好像也是WP移植的吧?

    丁丁
    丁丁  2011-09-04, 08:38

    另外把评论验证码和审核关闭吧

    Mr.Xin Xin
    Mr.Xin Xin  2011-09-04, 08:40

    @丁丁:恩,就是移植的

    Mr.Xin Xin
    Mr.Xin Xin  2011-09-04, 08:40

    @丁丁:呃,审核可以关,验证码还是开着吧

    Mr.Xin Xin
    Mr.Xin Xin  2011-09-04, 08:56

    @丁丁:另外我怀疑你的身份

    陈晓伟
    陈晓伟  2011-09-07, 19:21

    终于可以滚了。。。。。。{smile:17}{smile:17}{smile:17}

    DaZuoo
    DaZuoo  2011-09-08, 17:42

    半透明效果很赞,哇咔咔,收藏了,看下次装修的时候用上不~呼呼感谢分享~~~

    SkyWalker
    SkyWalker  2012-01-27, 11:23

    我用你的插件下下来在Emlog上安装不成功啊!

    Mr.Xin Xin
    Mr.Xin Xin  2012-01-27, 11:27

    @SkyWalker:我那不是插件,要改模板的。。

    SkyWalker
    SkyWalker  2012-01-27, 11:35

    @Mr.Xin Xin:插件:http://down.qiannao.com/space/file/xinxin8816/share/2011/9/3/-4e3aEMLOG-52a0-4e0a-5e95-90e8-6eda-52a8-516c-544a-680f.zip/.page 那这个是什么东西

    Mr.Xin Xin
    Mr.Xin Xin  2012-01-27, 18:04

    @SkyWalker:这个是帮你把要改的打包了