低一度博客“首页公告”代码共享

2010-9-3 - diyidu - 网页设计 - Views

本来想把这个写成插件再发布的，但今天又有同学留言找我要这个，算了，先抛出来吧，相信有不少同学会需要它。哥这段时间实在太忙啦：工作开始琐碎繁杂起来了，还有就是在准备参加某个考试（暂时不便透露呵），另外，还在私底下筹建一个新站（pcwhy.org，电脑十万个为什么）……哎哟，简直要晕乎过去了。经常熬夜的后果是，哥的眼圈越来越像一只熊猫，真是造孽啊！希望这样的日子能快点儿过去。好了，一起来看代码及操作教程——

步骤一：将以下代码保存为JS文件——gonggao.js，上传至目录“./THEMES/主题ID/TEMPLATE/..//SCRIPT/”下。

步骤二：编辑修改首页模板文件“default.html”，在<head></head>标签中，插入代码——

<script src="<#ZC_BLOG_HOST#>THEMES/<#ZC_BLOG_THEME#>/SCRIPT/gonggao.js" type="text/javascript"></script>

调用JS，然后在文章摘要顶部的位置，如<div class="content">后面插入如下代码——

<table border="0" cellspacing="0" class="rollboder">
<tbody>
<tr>
    <td class="rollleft">
      <div class="rollTextMenus">
      <div id="rollTextMenu1" style="display:block"><strong>本站公告：</strong><a
      href="http://www.diyidu.cn/" target="_blank">即日起主博客停止换链，请勿再申请！</a></div>
      <div id="rollTextMenu2" style="display:none"><strong>站长推荐：</strong><a
      href="http://www.diyidu.cn/post/diyidu_theme_download.html" target="_blank">低一度Z-blog系列主题汇总</a></div>
      <div id="rollTextMenu3" style="display:none"><strong>站长推荐：</strong><a
      href="http://www.diyidu.cn/post/aqua_dyd_problem.html" target="_blank">对主题aqua_dyd的一些技术解答</a></div>
      <div id="rollTextMenu4" style="display:none"><strong>微博推荐：</strong><a
      href="http://www.diyidu.cn/blog/post/360-mobie-safe-2.html" target="_blank">360手机卫士V1.7.2正式版下载</a></div>
      <div id="rollTextMenu5" style="display:none"><strong>微博推荐：</strong><a
      href="http://www.diyidu.cn/blog/post/xheditor1.html" target="_blank">xhEditor1.0在线xhtml编辑器</a></div>
      <div id="rollTextMenu6" style="display:none"><strong>本周热文：</strong><a
      href="http://www.diyidu.cn/post/zblog_theme_dyd3.html" target="_blank">再扒3张老外的靓皮for Z-Blog</a></div></div>
    </td>
      <td class="rollcenter" id="pageShow">1/6</td>
      <td class="rollright"><a href="javascript:rollText(-1);"><img src="<#ZC_BLOG_HOST#>THEMES/<#ZC_BLOG_THEME#>/STYLE/images/last.gif" alt="上一条" /></a> <a href="javascript:rollText(1);"><img src="<#ZC_BLOG_HOST#>THEMES/<#ZC_BLOG_THEME#>/STYLE/images/next.gif" alt="下一条" /></a></td>
</tr>
</tbody>
</table>

OK，提交保存。（注意，相关公告内容需要自己手动添加哦。）

步骤三：定义样式。打开编辑模板下的CSS文件，在合适的位置，插入如下代码——

.rollboder{border-bottom:#b3c58e 1px solid;margin:10px 0 0 15px;text-align:center;}
.rollleft{float:left;width:596px;padding-left:5px;}
.rollleft strong{color:#df0031;}
.rollTextMenus a{color:#436206;}
.rollcenter{width:30px;background:#b3c58e;}
.rollright{width:40px;}

相关参数根据自己的需要，可自行修改。最后提交保存即可。

That's all.（演示效果参见本博）

关键词 // 公告代码 JS实例网页设计低一度
出处：低一度，链接：http://www.diyidu.cn/post/gonggaocode_dyd.html

上一篇：jQuery1.4.1中文参考文档下载下一篇：Backy LLC提供的1G免费PHP空间

随机推荐

to "低一度博客“首页公告”代码共享"

#1 集趣回复该留言 2010-9-3 17:55:38

虽然我不是很需要，但力挺你了！
爱好者博客于 2010-9-3 18:03:17 回复
没抢到沙发我就来挤。哼！~
记忆之家于 2010-9-4 8:22:23 回复
挤挤更健康。
记忆之家于 2010-9-4 8:22:54 回复
其实，我早已经猜到了啊度要出这个了，哈哈。
英文seo 于 2010-9-4 13:15:21 回复
哥们我很需要，低一度是牛人呀！
英文seo 于 2010-9-4 13:16:05 回复
哇，低一度的博客pr为5，牛！

#2 爱好者博客回复该留言 2010-9-3 18:00:08

去试一下看看。
爱好者博客于 2010-9-3 18:00:29 回复
看有没有人在我前面抢到。

#3 acboy 回复该留言 2010-9-3 18:00:11

fuck，没抢到。

#4 晓潘回复该留言 2010-9-3 18:00:12

日，网速慢，差了一步坐沙发。

#5 SEO图书馆回复该留言 2010-9-3 18:02:22

哎呀。。来晚了。

#6 阿普雷回复该留言 2010-9-3 18:44:29

呵呵，还是要保重身体啊。

#7 人好哇回复该留言 2010-9-3 18:50:19

这个要支持，无私分享美~不过更期待插件版的，但应该是z-blog专用的吧？wp的估计悲剧了。

#8 哎哟回复该留言 2010-9-3 19:03:14

哈哈，正在为公告栏扒你的首页呢，结果在扒下来的页面里看到你写出了“首页公告”代码共享。谢谢桶哥了，真是高手，学习了！模仿了。

#9 BoKeam 回复该留言 2010-9-3 19:27:18

谢谢博主大公无私的分享。

#10 痕迹回复该留言 2010-9-3 20:16:14

JS一直没有学好啊。

#11 石头回复该留言 2010-9-3 20:42:50

可以全部封装到JS里嘛。
桶哥于 2010-9-3 20:51:25 回复
是可以啊，但不是人人都需要这功能，所以还是独立好。

#12 星星之火回复该留言 2010-9-3 21:17:35

还是做一个插件的好。

#13 快乐的村长回复该留言 2010-9-3 22:51:22

是原创就得顶。

#14 英文seo 回复该留言 2010-9-3 23:20:06

我只能说顶顶更健康。

#15 新蛋回复该留言 2010-9-4 1:31:15

看文章啦。

#16 记忆之家回复该留言 2010-9-4 8:23:37

力挺阿度出新产品。

#17 小新回复该留言 2010-9-4 9:51:35

我也觉得插件就好了，方便使用，哈。

#18 Ken 回复该留言 2010-9-4 14:15:32

谢谢分享了，呵。

#19 Lvtu 回复该留言 2010-9-4 18:55:56

改天整到PJ上面去试一下！

#20 Bee君回复该留言 2010-9-4 23:46:41

研究研究，不过现在对广告没信心了。

#21 joyla 回复该留言 2010-9-5 0:39:36

啊哦！啊哦，这个我纯支持！

#22 七七回复该留言 2010-9-5 9:11:25

(*^__^*) 嘻嘻……，感谢分享！

#23 3499全能搜索回复该留言 2010-9-5 15:06:28

支持低一度大侠，支持！

#24 17kka 回复该留言 2010-9-5 15:09:55

支持分享，爱你！

#25 车备网回复该留言 2010-9-5 16:22:31

过来支持下桶哥！

#26 Ewa 回复该留言 2010-9-5 16:23:27

这个代码还算简单，收了。

#27 xyz 回复该留言 2010-9-5 21:42:56

暂时不想换主题了，学习一下。

#28 刘晓林回复该留言 2010-9-5 22:05:04

好多的步骤啊，我的就直接加一个，不像你6个！

#29 airmaxshoes 回复该留言 2010-9-6 9:16:40

是啊，怎么需要加这么多呢？

#30 巫术时代回复该留言 2010-9-6 11:29:27

啊，真的给做出来了啊，谢谢你。

#31 吉光片羽回复该留言 2010-9-7 22:03:50

好久没来了，这里成抢沙发的地啦，呵呵，真热闹的说。呃，什么时候做成插件，貌似不错的一个想法，只是现在都手动编辑的哦？回头看看我的站上能应用得到不。
桶哥于 2010-9-7 22:38:28 回复
哥，你是高手啊，别这么谦虚哦，多提意见呵。
英文seo 于 2010-9-8 18:11:40 回复
不错呀，我喜欢！