在你的点点（通用）博客中加入底部公告栏
在刚玩wordpress的时候，看到过万戈牌工具条，当时就试着把他的代码版的加入我自己的博客中，可是当时神马是js神马是jq都不知道，所以，什么也没弄出来...
现在，这个底部公告栏（工具条）已经广泛用在了wordpress的各种主题了，大家最常见的就是知更鸟的主题了。
昨晚，我就把这个工具条给掰到我的网站来了，效果见记忆碎片，以下为代码内容。
1.js部分
首先是加载jquery库，如果你的模板已经有这个了，就直接跳过，一般都已经加载啦。如果没有，那加上这个目前1.8.2最新版的吧。
<script type="text/javascript" src="http://x.papaapp.com/farm1/2893f5/61551013/jquery-1.8.2.min.js"></script>
jq库外的js部分
<script type="text/javascript">
//底部公告栏 by https://huilang.me/ 2012-10-02
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});
});
</script>
2.html部分
<div id="cobmwsay">
<!--底部公告栏 by https://huilang.me/ 2012-10-02-->
<div class="close"><a href="javascript:void(0)" onclick="$('#cobmwsay').slideUp('slow');" title="关闭">×</a>
<div id="feedb">
<a href="<?= dian.data.meta.rss ?>" title="欢迎订阅本站" class="image"><img src="http://x.papaapp.com/farm1/2893f5/161db1f1/feed.gif" /></a>
</div>
<div class="bulletin">
<ul>
<li>
公告内容1
</li>
<li>
公告内容2
</li>
<li>
公告内容3
</li>
</ul>
</div>
</div>
</div>
自行替换里面的公告内容即可；
如果不想每次修改都要进html中改源码，可以使用以下代码替换以上内容。
{#text:公告内容|value:"<li>公告内容1</li><li>公告内容2</li><li>公告内容3</li>"}
<div id="cobmwsay">
<div class="close"><a href="javascript:void(0)" onclick="$('#cobmwsay').slideUp('slow');" title="关闭">×</a>
<div id="feedb">
<a href="<?= dian.data.meta.rss ?>" title="欢迎订阅本站" class="image"><img src="http://x.papaapp.com/farm1/2893f5/161db1f1/feed.gif" /></a>
</div>
<div class="bulletin">
<ul>
{$_公告内容}
</ul>
</div>
</div>
</div>
很明显 这个后台只适用于点点模板。后台设置的时候，记得使用这种格式
<li>公告内容1</li><li>公告内容2</li><li>公告内容3</li>
即用li标签包起来，当然，数目和内容自行修改。
3.css部分
#cobmwsay{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;}
#cobmwsay a{color: #fff;letter-spacing:2px;text-shadow: 0px 1px 0px #000;}
.close a {float:right;margin:0 10px 0 0;}
.bulletin {float:left;height:23px;color: #fff;margin:0 0 0 20px;background:url(http://x.papaapp.com/farm1/2893f5/141f8c04/bulletin.gif) no-repeat;min-height:23px;overflow:hidden;}
.bulletin a{float:none;margin: 0;letter-spacing: 0px!important;}
.bulletin li{height:23px;padding-left:25px;}
#cobmwsay ul,#cobmwsay li{margin:0px;padding:0px;list-style:none;}
其实就是这么简单了，不仅可以在点点使用，其他各种博客各类网站神马的（通用的话，需要把rss地址改成你需要的，现在为点点自带的rss地址，不通用）。
扩展部分
公告内容支持html语法，比如你可以在里面加个a标签什么的。
可以自行在右侧添加新浪微博图标，腾讯微博图标，twitter等，仿照html部分的第四行写就行，当然图片得自己找下，css部分自己修改下。
附上QQ图标、邮件与新浪微博图标
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1048770133&site=qq&menu=yes" title="与我联系" class="image"><img src="http://x.papaapp.com/farm1/2893f5/40faf6fa/qq.png" /></a>
<a target="_blank" href="mailto:[email protected]" title="给我邮件..." class="image"><img src="http://x.papaapp.com/farm1/2893f5/70d9bf4a/e-mail.png" /></a>
<a target="_blank" href="http://weibo.com/cobmw" title="新浪微博" class="image"><img src="http://m1.img.papaapp.com/farm4/2012/1007/18/D0AEEFC10D250C54639E4A99F0D46CEF8C9E15004114_29_23.PNG" /></a>
分别为第一第二 第三行 其中第一行的1048770133改成你的QQ号码，第二行的[email protected]改成你的邮箱，第三行的微博地址改成你的微博地址即可
如果想加入本站一样的返回顶部效果，则按下面部分添加代码。
js部分添加
<script type="text/javascript">
$(function(){$(".backtotop").click(function(){$("html,body").animate({scrollTop:0},200);return false});$(window).scroll(function(){var A=jQuery(".backtotop");if(A.offset().top>800){A.show()}else{A.hide()}});});
</script>
css部分
.backtotop {width:23px;height:23px;display: none;background: transparent url('http://x.papaapp.com/farm1/2893f5/4c976383/backtotop.png') no-repeat top left;}
html部分 就加在上面html部分的第4行下方插入一句即可
<a title="返回顶部" href="#header" class="backtotop"></a>
顺便补上以下修改
更多点点主题自定义修改内容请自行在本站技术标签中查找