今天是   本站已创建

记录宝宝成长、关注育儿知识、石油科技、电脑技术!!!!

现在的位置: 首页 博客电脑 >正文
 
2010年5月11日 ⁄ 暗潮 博客电脑 ⁄ 评论数 0+ ⁄ 被围观 +

 通过z-blog的官方论坛,还有Z-Wiki,学习到很多的东西,也加深了对z-blog外围程序结构及代码的理解,所以,自己也想着怎么利用自己现在的一点时间和精力,继续做一份带有自己特色的东西。看到网易的“无跟帖,不新闻”之后,我很感兴趣,也有一些感动。所以,也想仿着网易的新闻留言板文本框,把自己的博客logo作为背景图片,加入到博客的文本框中,再动态在文本框显示自己需要写的一些文字。在论坛里找了一下,这方面的内容不是很多,所以就想着自己做做,尽管作出来可能有些花哨架子,但是,每个人的习惯风格不一样,也希望有朋友能够喜欢。

除了网上流行的修改方法,还可以通过修改CSS文件实现添加图片的功能
在相应模板的CSS文件中找到下面的:

#txaArticle {width:60%; }

提换成(粉色字为添加的内容、图片地址请替换为自己网站的绝对地址):

#txaArticle {width:60%; background:url(http://www.wu2007.cn/image/logo.gif) no-repeat  right center;}

另一种方法是修改b_article_commentpost.html模板文件,搜索第17行的textarea代码,添加以下代码:

<p><textarea name="txaArticle" id="txaArticle" onchange="GetActiveText(this.id);" onfocus="GetActiveText(this.id);" class="text" cols="50" rows="4" tabindex="5" onclick="this.style.background='#FFF'" style="background:url(http://www.wu2007.cn/image/logo.gif) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" onclick="GetActiveText(this.id);" ></textarea></p>

-----------------------------------------我是可爱的分割线-----------------------------------------
自使用z-blog做自己的博客平台以来,随着接触的不断增多,对这个平台了解的也越来越深,如何利用z-blog的核心程序,打造一个自己喜欢的主题或者说页面,可以说,应该是每一个blogger的愿望,我也一样,希望自己的blog可以按照自己的想法,做一些修改和调整,使其更加方便适合自己的使用和娱乐。
通过z-blog的官方论坛,还有Z-Wiki,学习到很多的东西,也加深了对z-blog外围程序结构及代码的理解,所以,自己也想着怎么利用自己现在的一点时间和精力,继续做一份带有自己特色的东西。看到网易的&ldquo;无跟帖,不新闻&rdquo;之后,我很感兴趣,也有一些感动。所以,也想仿着网易的新闻留言板文本框,把自己的博客logo作为背景图片,加入到博客的文本框中,再动态在文本框显示自己需要写的一些文字。在论坛里找了一下,这方面的内容不是很多,所以就想着自己做做,尽管作出来可能有些花哨架子,但是,每个人的习惯风格不一样,也希望有朋友能够喜欢。
在z-blog的文本框部分,有几个重要文件(进入主题样式管理,模板与样式文件列表可以看到这些文件),分别是:

 -- b_article-guestbook.html - 留言页正文模板
 -- b_article_comment.html - 每条评论内容显示模板
-- b_article_commentpost-verify.html - 评论验证码显示样式
-- b_article_commentpost.html - 评论发表框模板
 

在本次的制作中,主要设计到的是:b_article_commentpost.html - 评论发表框模板,有这个文件可以看到,发表评论框的各种参数,为了避免修改主题css文件带来的一些麻烦,我们也可以直接从这个文件做修改,具体方法如下,在b_article_commentpost.html 文件中的上部,加入以下代码:

<style type="text/css">
<!--.
txaArticle {background:#f3f3f3 url(http://www.wu2007.cn/image/logo.gif) no-repeat 315px 80px; }
--></style>

 注:代码中的url(?)部分,括号内请填写你自己需要实现的背景图片。背景图片的显示位置,你可以参考修改两个315px(水平,距离做边框)、80px(垂直,距离上边框),或者如top为顶部,bottom为底部,right、left为左右。

然后,再修改一下textarea  name="txaArticle"  中的有关代码,修改好之后的具体如下(可根据自己需要修改相关文字内容):

<textarea name="txaArticle" id="txaArticle" class="txaArticle" onchange="GetActiveText(this.id);" onclick="GetActiveText(this.id);" type="text" cols="40" rows="8" tabindex="5"onfocus="if(this.value==' 暗潮欢迎你! 不跟贴,怎博客? - www.wu2007.cn') {this.value='';}this.style.color='#000000';" onblur="if(this.value=='') {this.value=' 暗潮欢迎你! 不跟贴,怎博客? - www.wu2007.cn';this.style.color='#000000';}" > 暗潮欢迎你! 不跟贴,怎博客? - www.wu2007.cn</textarea></p><br>

 好啦,到此为止,现在可以提交修改,再重建以下你的文件,就可以看看是不是有效果出来了。鼠标点击文本框,文字消失,离开之后,文本框的文字又出现啦,呵呵,就是这么简单,喜欢的话,可以试一试!

 

另外,经本人测试,这个程序不仅仅在z-blog中可以用,在其他的一些程序中,也可以实现文本框背景图片及文字动态显示。而且本功能实现的代码安全,不影响系统性能。这个功能,可根据个人是否喜好、需要来决定,自己做这个,一是喜欢,再就是感觉有需要。

 

 
【版权声明】本站部分文章来自网络,欢迎转载本人原创文章、图片,请提供本博客中相应文章的链接。
请勿将原创图片、文章用于商业用途!对于给您带来的不便表示抱歉!!
本站所分享的影视作品均转自网络,仅供测试和学习交流。请在下载后24小时内删除,请购买/支持正版。
若有侵权,请即时留言告知,万分感谢!
 
 
 
 
目前有 7+ 人访问,有 0+ 条评论! 感谢支持!
 

 
日历
网站分类
搜索
最新留言
站点统计
Tags列表
 
Copyright ©2007-2018 暗潮天空 BlueSky wu2007.Cn京ICP备08005769

Powered By Zblog Theme By 流年岁月