实用美观的工具栏及位置导航 效果见本站

这是从别人网站上扒下来的,分享给大家!可更改文章正文的文字大小以及背景颜色,满足不同人不同的阅读习惯!

首先打开模版文件b_article-single.html,编辑它找到<#article/content#>这里,把它修改为:

<DIV id="article_content">  
<#article/content#>  
</DIV>

然后把这段代码插到最上面

<DIV CLASS="NEW_INFO LEFT locationbar">  
<DIV CLASS="position LEFT">您现在的位置是:<A href="<#ZC_BLOG_HOST#>">首页</A> - <A href="<#article/category/url#>" title="返回<#article/category/name#>列表"><#article/category/name#></A> - 正文</DIV>  
<DIV CLASS='btn_fontsize RIGHT'><A onfocus=if(this.blur)this.blur() href="javascript:put_layer(2);"><IMG title=工具栏 src="<#ZC_BLOG_HOST#>themes/Sean_cms/style/sean_img/btn_tools.gif"></A></DIV>  
<DIV style="DISPLAY: none" id=put_layer2 class=atools><script type='text/javascript' src='<#ZC_BLOG_HOST#>themes/sean_cms/source/Tools.html'></script></DIV>  
</DIV>

接下来就是js功能方面,把他加到common.js文件里面任意位置

function put_layer(no){   
     if ( !!no ){    
        obj = document.getElementById("put_layer" + no);   
        if ( obj.style.display != "none" ) {   
            obj.style.display = "none";    
        }   
        else {   
           obj.style.display = "block";   
        }}    
}   
function setfs(id){   
    document.getElementById('article_content').style.fontSize=id+"px";   
}   
function setbg(id){   
    document.getElementById('article_content').style.backgroundColor=id;   
}   
function setfc(id){   
    document.getElementById('article_content').style.color = id;   
}

最后是css样式部分,把它添加到sean_cms模版css文件中

.atools {   
position:absolute;   
border-right-style:none;   
background:url(Sean_img/t_bg.gif) #fff;   
height:20px;   
overflow:hidden;   
top:6px;   
rightright:45px;   
padding:0 10px 0 7px;   
}   
  
.atools SPAN {   
float:left;   
margin:0 5px;   
}   
  
.atools A {   
float:left;   
}   
  
.bg1 {   
border-bottom:#bebebe 1px solid;   
border-left:#bebebe 1px solid;   
width:10px;   
display:block;   
float:left;   
height:10px;   
font-size:0;   
border-top:#bebebe 1px solid;   
border-right:#bebebe 1px solid;   
background:#fff;   
margin:4px 1px 0;   
}   
  
.bg2 {   
border-bottom:#bebebe 1px solid;   
border-left:#bebebe 1px solid;   
width:10px;   
display:block;   
float:left;   
height:10px;   
font-size:0;   
border-top:#bebebe 1px solid;   
border-right:#bebebe 1px solid;   
background:#336649;   
margin:4px 1px 0;   
}   
  
.bg3 {   
border-bottom:#bebebe 1px solid;   
border-left:#bebebe 1px solid;   
width:10px;   
display:block;   
float:left;   
height:10px;   
font-size:0;   
border-top:#bebebe 1px solid;   
border-right:#bebebe 1px solid;   
background:#f1f1f1;   
margin:4px 1px 0;   
}   
  
.bg4 {   
border-bottom:#bebebe 1px solid;   
border-left:#bebebe 1px solid;   
width:10px;   
display:block;   
float:left;   
height:10px;   
font-size:0;   
border-top:#bebebe 1px solid;   
border-right:#bebebe 1px solid;   
background:#f5faff;   
margin:4px 1px 0;   
}   
  
.bg5 {   
border-bottom:#bebebe 1px solid;   
border-left:#bebebe 1px solid;   
width:10px;   
display:block;   
float:left;   
height:10px;   
font-size:0;   
border-top:#bebebe 1px solid;   
border-right:#bebebe 1px solid;   
background:#333;   
margin:4px 1px 0;   
}   
  
.atools .fz_span {   
margin:0;   
}   
  
.atools .fz_spanz {   
margin:0 0 0 5px;   
}   
  
.fz_spanz A {   
float:left;   
color:#19489e;   
margin:0 2px 0 0;   
}   
  
.atools A.fs {   
color:#19489e;   
}   
  
.btn_fontsize {   
position:absolute;   
top:6px;   
cursor:pointer;   
rightright:5px;   
}   
  
.locationbar {   
position:relative;   
}

这样就大功告成,样式方面这里都是针对sean_cms写的,稍作修改可以用与任何网站里面!下面是要用到的图片及工具文件,下载后解压到sean_cms模版文件夹中就可以了!

下载文件压缩包

评论列表

kaka

kaka 回复

很明显你没改对~(2012-02-05 01:15:03)
kaka

kaka 回复

也可能是).animate({ marginTop:&quot;-25px&quot;
},500 这边的500.我是照字面意思来理解的。js也不是太懂。(2012-02-05 01:40:24)
kaka

kaka 回复

这个哪来的滚动,滚动的是那个新闻效果~关于那个新闻滚动的代码里setInterval('AutoScroll(&quot;#scrollDiv&quot;)',1000) ,setInterval在执行完一次代码之后,经过那个固定的时间间隔,继续重复执行代码,AutoScroll就是自动滚动了。速度好像这里控制不了,只能改间隔(2012-02-05 01:28:26)
娃娃

娃娃 回复

一样的这个滚动速度怎么改变 太快了 确实不大好 纳闷解决??????????????????????(2011-12-27 14:10:47)
kaka

kaka 回复

themes/Sean_Cms/STYLE/Seanloo_Cms.css(2012-02-05 01:16:16)
热门资讯网

热门资讯网 回复

和你一样、、(2011-11-01 12:24:21)
人人导航

人人导航 回复

这个确实不错!(2011-09-04 10:36:49)
kaka

kaka 回复

显示了15条~~下面有点小难看~~谢谢老湿~~您辛苦了~~哈哈哈(2011-08-02 12:12:44)
seanloo

seanloo 回复

你显示数是正常的啊,就在后台网站设置管理-&gt;页面设置-&gt;最近发表文章的数量 这里(2011-08-02 09:11:20)
tutu

tutu 回复

能否问一下?(2012-09-23 01:03:17)
KEVIN

KEVIN 回复

www.315shops.com 于 2011-8-3 20:32:05 回复
zb还在本机调试中,不过按照 心诺 给定的代码进行修改,sean_cms模版css文件中
的修改有3处有点瑕疵:
8.rightright:45px; ----&gt;right:45px;
113.rightright:5px; ----&gt;right:5px;
还缺
.position{clear:both;font-size:12px; padding-left:20px;background:url(Sean_img/icon_01.gif) -4px -596px no-repeat;margin-left:5px}
望修正,不然很多人调试不出你的效果
按照这样来修改一下, 确实OK, 实测通过。
已经3个多月了 ,希望你有空可以修正一下,不然每个人用你的代码,都会碰到同样的问题。
我已经弄好, 猛的用上了。谢谢。(2011-11-19 00:47:22)
乐活健康驿站

乐活健康驿站 回复

非常感谢心诺哥的分享,终于可以告别单调的面包屑了。还要感谢楼上大哥的指导。但是有个问题就是诺哥您主题中的那个列表所标放上去会有显示title,但是其中的时间如何去掉啊。盼望指点。
(2011-08-22 13:35:05)
乐活健康驿站

乐活健康驿站 回复

果然是这样,谢谢你。(2011-08-22 13:29:41)
www.315shops.com

www.315shops.com 回复

zb还在本机调试中,不过按照 心诺 给定的代码进行修改,sean_cms模版css文件中
的修改有3处有点瑕疵:
8.rightright:45px; ----&gt;right:45px;
113.rightright:5px; ----&gt;right:5px;

还缺
.position{clear:both;font-size:12px; padding-left:20px;background:url(Sean_img/icon_01.gif) -4px -596px no-repeat;margin-left:5px}
望修正,不然很多人调试不出你的效果(2011-08-03 20:32:05)
lzwoxx

lzwoxx 回复

你好根据你的所述来操作了,但是工具栏那里显示的是个叉号,怎么办啊(2011-08-03 15:03:57)
kaka

kaka 回复

正好上班前比较闲。。过来看看~~嘿嘿(2011-08-01 11:02:29)
seanloo

seanloo 回复

你神速啊(2011-08-01 09:43:15)
乐活豆子

乐活豆子 回复

继续关注老师文章,顶(2012-04-03 19:46:19)
去黑头产品

去黑头产品 回复

真的很不错啊(2012-03-27 00:45:19)
石家庄二手房

石家庄二手房 回复

感谢分享这么好的文章(2012-03-26 16:55:15)
陈存龙

陈存龙 回复

使用上了,很不错,只是css出了点问题。有两处,本是right:的你写成了rightright了。(2012-03-26 00:22:35)
请教站长

请教站长 回复

非常佩服您的技术,请问您这篇文章下面的“下载文件压缩包”点击后就可以下载,这个功能是如何实现的,谢谢?(2012-02-16 18:14:03)
fumin

fumin 回复

代码有点复杂www.hxss168.com (2012-02-07 17:26:53)
fuminde

fuminde 回复

效果果然不错www.wlcy888.com (2012-02-07 17:25:42)
小田

小田 回复

诺兄 我按照你的改了 为什么显示在底部呢 求解决(2012-01-06 08:35:26)
kaka

kaka 回复

很明显你没改对~(2012-02-05 01:15:03)
天盟网络传媒

天盟网络传媒 回复

你好 我按照你的设置成功了,但是滚动的速度太快,怎么解决呢???
你的速度还可以 这个速度怎么控制啊? 跪求知情者解惑(2011-12-25 22:52:00)
kaka

kaka 回复

也可能是).animate({ marginTop:&quot;-25px&quot;
},500 这边的500.我是照字面意思来理解的。js也不是太懂。(2012-02-05 01:40:24)
kaka

kaka 回复

这个哪来的滚动,滚动的是那个新闻效果~关于那个新闻滚动的代码里setInterval('AutoScroll(&quot;#scrollDiv&quot;)',1000) ,setInterval在执行完一次代码之后,经过那个固定的时间间隔,继续重复执行代码,AutoScroll就是自动滚动了。速度好像这里控制不了,只能改间隔(2012-02-05 01:28:26)
娃娃

娃娃 回复

一样的这个滚动速度怎么改变 太快了 确实不大好 纳闷解决??????????????????????(2011-12-27 14:10:47)
wap

wap 回复

添加成功了哈。大家可以看下我的www.wapueo.com(2011-12-22 12:40:11)
热门资讯网

热门资讯网 回复

最后是css样式部分,把它添加到sean_cms模版css文件中
这个是指哪个啊(2011-11-01 12:14:08)
kaka

kaka 回复

themes/Sean_Cms/STYLE/Seanloo_Cms.css(2012-02-05 01:16:16)
三眼看世界

三眼看世界 回复

挺好的,果断用上了(2011-10-26 00:25:39)
sharson

sharson 回复

我弄了
怎么点击tools那个图标一点反映都没有啊(2011-10-08 09:26:41)
热门资讯网

热门资讯网 回复

和你一样、、(2011-11-01 12:24:21)
襄阳SEO

襄阳SEO 回复

不错下载去看看哦(2011-09-25 22:31:31)
标准三围查询

标准三围查询 回复

纯粹技术流啊,利害(2011-09-18 17:28:47)
北京艺术写真

北京艺术写真 回复

貌似不错,果断试一下。(2011-09-14 15:29:32)
石家庄SEO优化

石家庄SEO优化 回复

感谢博主的分享(2011-09-08 15:20:34)
百瑞

百瑞 回复

我操作了,不知道哪有问题了,工具图标显示成了错号 ,请老大指点!(2011-09-03 13:27:17)
按照教程操作完毕有错误

按照教程操作完毕有错误 回复

你好诺..我按照你说的教程设置了 整体都出来了可是点击tools 后 是这样的 正文字体大中小 色彩方案 方案后面就是这样空白的 ..也不显示颜色选择框,请问是怎么回事怎么弄啊?(2011-09-03 11:42:14)
人人导航

人人导航 回复

这个确实不错!(2011-09-04 10:36:49)
hostgator

hostgator 回复

哦 嗯 博主写的好啊(2011-08-31 08:52:07)
hostgator

hostgator 回复

嗯 博主说得好啊(2011-08-31 08:50:39)
dwad1987

dwad1987 回复

CSS 感觉好难。。(2011-08-29 02:35:30)
乐活健康驿站

乐活健康驿站 回复

非常感谢心诺哥的分享,终于可以告别单调的面包屑了。还要感谢楼上大哥的指导。但是有个问题就是诺哥您主题中的那个列表所标放上去会有显示title,但是其中的时间如何去掉啊。盼望指点。
(2011-08-22 14:31:10)
挨踢留痕

挨踢留痕 回复

你的网站在opera和chrome上浏览,容易跳转到广告上,请检查代码。(2011-08-21 22:04:35)
gch99

gch99 回复

怎么没反应呢,是不是要发贴后在新贴中才能看到?(2011-08-21 05:31:48)
张海华

张海华 回复

有没有DEMO可以看看呀!!?
不然的话,不知道是不是我想要的东西!(2011-08-14 18:44:34)
藻油DHA哪个好

藻油DHA哪个好 回复

有空搞一个ZBLOG试试(2011-08-13 23:56:59)
ryrytr

ryrytr 回复

文章写的好极了http://www.shxiyqi.com因此进行了转载!(2011-08-12 03:25:58)
上海婚庆公司

上海婚庆公司 回复

文章内容饱满结构清晰,是一篇好文章已经被www.66hunqing.com所转载。(2011-08-10 12:31:11)
lqy20130

lqy20130 回复

老师 !我的文章页右边出现了乱码,还有首页的首页连接页是乱码,什么都没有改就加了个JS调用!www.tk1860.com————帮忙看看谢谢!(2011-08-08 02:12:56)
祛痘产品哪种好

祛痘产品哪种好 回复

已经使用了,改变了以前单调的面包屑啊!(2011-08-05 15:53:09)
成都人才网

成都人才网 回复

看着还不错,,不过代码弄起来还是有点麻烦(2011-08-02 14:51:58)
kaka

kaka 回复

老湿我问下。首页N格最新。热门文章的显示数量怎么改?我没找到。。。(2011-08-01 16:28:42)
kaka

kaka 回复

显示了15条~~下面有点小难看~~谢谢老湿~~您辛苦了~~哈哈哈(2011-08-02 12:12:44)
seanloo

seanloo 回复

你显示数是正常的啊,就在后台网站设置管理-&gt;页面设置-&gt;最近发表文章的数量 这里(2011-08-02 09:11:20)
kaka

kaka 回复

果断修改了啊~~哈哈(2011-08-01 09:50:48)
tutu

tutu 回复

能否问一下?(2012-09-23 01:03:17)
kaka

kaka 回复

sofa ~~~强大的心诺老湿~~~(2011-08-01 09:27:44)
KEVIN

KEVIN 回复

www.315shops.com 于 2011-8-3 20:32:05 回复
zb还在本机调试中,不过按照 心诺 给定的代码进行修改,sean_cms模版css文件中
的修改有3处有点瑕疵:
8.rightright:45px; ----&gt;right:45px;
113.rightright:5px; ----&gt;right:5px;
还缺
.position{clear:both;font-size:12px; padding-left:20px;background:url(Sean_img/icon_01.gif) -4px -596px no-repeat;margin-left:5px}
望修正,不然很多人调试不出你的效果
按照这样来修改一下, 确实OK, 实测通过。
已经3个多月了 ,希望你有空可以修正一下,不然每个人用你的代码,都会碰到同样的问题。
我已经弄好, 猛的用上了。谢谢。(2011-11-19 00:47:22)
乐活健康驿站

乐活健康驿站 回复

非常感谢心诺哥的分享,终于可以告别单调的面包屑了。还要感谢楼上大哥的指导。但是有个问题就是诺哥您主题中的那个列表所标放上去会有显示title,但是其中的时间如何去掉啊。盼望指点。
(2011-08-22 13:35:05)
乐活健康驿站

乐活健康驿站 回复

果然是这样,谢谢你。(2011-08-22 13:29:41)
www.315shops.com

www.315shops.com 回复

zb还在本机调试中,不过按照 心诺 给定的代码进行修改,sean_cms模版css文件中
的修改有3处有点瑕疵:
8.rightright:45px; ----&gt;right:45px;
113.rightright:5px; ----&gt;right:5px;

还缺
.position{clear:both;font-size:12px; padding-left:20px;background:url(Sean_img/icon_01.gif) -4px -596px no-repeat;margin-left:5px}
望修正,不然很多人调试不出你的效果(2011-08-03 20:32:05)
lzwoxx

lzwoxx 回复

你好根据你的所述来操作了,但是工具栏那里显示的是个叉号,怎么办啊(2011-08-03 15:03:57)
kaka

kaka 回复

正好上班前比较闲。。过来看看~~嘿嘿(2011-08-01 11:02:29)
seanloo

seanloo 回复

你神速啊(2011-08-01 09:43:15)

发表评论

(必填)

(必填)

(选填)

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新发布

热门讨论