在你的点点(通用)博客中加入底部公告栏

2012.10.02 分享 5402 人浏览 留言

在刚玩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 http://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 http://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&amp;uin=1048770133&amp;site=qq&amp;menu=yes" title="与我联系" class="image"><img src="http://x.papaapp.com/farm1/2893f5/40faf6fa/qq.png" /></a>
<a target="_blank" href="mailto:admin@cobmw.com" 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号码,第二行的admin@cobmw.com改成你的邮箱,第三行的微博地址改成你的微博地址即可

如果想加入本站一样的返回顶部效果,则按下面部分添加代码。

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>

顺便补上以下修改

给你的点点主题添加NIVO SLIDER幻灯效果

给你的博客载入过程添加“正在努力载入中...”效果

点点3D标签云实现方法

更多点点主题自定义修改内容请自行在本站技术标签中查找

文章地址:http://huilang.me/foot-bar/

回复本文

电子邮件地址不会被公开。 必填项已用*标注

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif