这个功能就是热点新闻2.3版发布页面上,移动到正文区域渐显的主题更新提示,有童鞋问这个是怎么实现的,感觉这个功能可能会有点用,所以弄个小教程,大家也可以玩玩。
该功能热点新闻2.3版主题基本已具备,就以此主题为例说明一下:
实现的方法其实很简单,文章源自知更鸟-https://zmingcx.com/adding-a-single-filed-prompts.html
- 加载JS代码,实现显隐效果;
- 在单篇文章中加入一个盒子放准备显示的文字或图片;
- 配合相应的样式代码;
- 显隐效果与主题中“阅读全文”按钮实现方法类似,位置样式与滚屏写法一样。
具体方法:
一、首先进入一篇日志的编辑页面,切换到HTML模式,在任意位置加入:文章源自知更鸟-https://zmingcx.com/adding-a-single-filed-prompts.html
- <div class="hotad">这个提示并没有什么特别的意思,其目的只不过是想妨碍你看精彩的文章!</div>
二、打开主题文件夹:js/custom.js
在最后加上:文章源自知更鸟-https://zmingcx.com/adding-a-single-filed-prompts.html
- // 提示
- $(document).ready(function(){
- $('#content').hover(
- function() {
- $(this).find('.hotad').stop(true,true).fadeIn();
- },
- function() {
- $(this).find('.hotad').stop(true,true).fadeOut();
- }
- );
- });
三、在样式文件style.css中加入:文章源自知更鸟-https://zmingcx.com/adding-a-single-filed-prompts.html
- .hotad {
- background:#B0D264;
- width:100px;
- margin-left:540px;
- padding:8px;
- position: fixed;
- display:none;
- z-index: 5;
- _position:absolute;
- _top:expression(eval(document.documentElement.scrollTop));
- }
说明:我用的提示是图片,这个教程中的是文字,这个提示功能IE6下定位不是很好。文章源自知更鸟-https://zmingcx.com/adding-a-single-filed-prompts.html
文章源自知更鸟-https://zmingcx.com/adding-a-single-filed-prompts.htmlps:为了更好测试2.31版,自己也启用此版,进一步完善。文章源自知更鸟-https://zmingcx.com/adding-a-single-filed-prompts.html

版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
2010年11月30日 18点04分 1F
我来个沙发吧!
这个对我现在来说还没有起到太大的作用!
不过我看看这里已经用到2.31的主题了!
我说怎么会hot会没有图片呢!
2010年11月30日 19点03分 2F
哈哈,鸟哥的是个图片哦,我把代码贴出来!
.hotad {
background:url(images/gx.png) no-repeat;
width:150px;
height:105px;
margin-left:540px;
padding:8px;
position: fixed;
display:none;
z-index: 5;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop));
}
2010年11月30日 19点31分 3F
鸟哥,看到日历,我感觉,能不能把放上去显示当日发布的文章这个提示功能,用到页码上面,放到一个准备点击的页码上,提前显示出来当页都有上面文章?嘻嘻,怎么样?
2010年11月30日 19点47分 4F
多谢鸟哥,终于解惑了
2010年12月1日 13点18分 5F
建议把顶部的hot图片设置成随机
因为我很懒,不想每次发帖都添加hot自定义(哈哈)
2010年12月1日 13点30分 B1
@ Tmd 就几秒钟的时间,就那么的纠结?
2010年12月10日 10点07分 B1
@ Tmd hot图片已经随即了吧,你是想最新的文章不添加hot自定义就会到顶部随机图片哪里去吧
2010年12月1日 21点37分 6F
等用到的时候试试
2010年12月2日 17点07分 7F
为什么我的网站无法留言啊 !?
2010年12月3日 11点55分 8F
学习了。支持一下
2010年12月3日 14点19分 9F
鸟哥这个牛B,我再借借
2010年12月4日 08点38分 10F
我看到代码就头晕,慢慢学习吧,这个提示功能在那里显示的啊?
2010年12月6日 12点54分 11F
有空岚女也去折腾折腾。。。
P.S
杯具了,前段时间升级了WP,结果有童鞋说提交不了评论,郁闷
2011年11月19日 21点07分 B1
@ 雅岚 我的网站也提交不了评论 纠结 求鸟哥提供个方法哦
2010年12月8日 14点32分 12F
对了, 你现在的首页是不是你自己重新弄的, 你之前那个带图片轮播的那个挺好的,不知道可否共享下, 谢了
2010年12月10日 15点23分 13F
鸟哥的主题怎么又改了啊?,这个好漂漂,超喜欢。有没有共享这个主题的( ⊙ o ⊙ )!
2010年12月10日 15点39分 B1
@ 易维营销seo 正在作,会升级主题,放出
2010年12月11日 07点44分 14F
恩,这个方法好,很实用~
2010年12月22日 14点48分 15F
站长好!每篇文章的“阅读全文”按钮默认情况下是隐藏的,鼠标经过就出现,这很好,但同时随着这个按钮的出现把这个栏上下变宽了,为什么会这样???站长你的就不会出现这个情况啊????
2010年12月22日 15点23分 B1
@ chzng 看你的缺少什么
2010年12月22日 14点49分 16F
站长好!“阅读全文”按钮鼠标经过就出现,但同时随着这个按钮的出现把这个栏上下变宽了,为什么会这样???站长你的就不会出现这个情况啊????
2010年12月22日 14点50分 17F
请问这种情况这么解决啊?
2010年12月22日 14点52分 18F
”阅读全文”按钮出现出现把文章正文这个栏上下变宽了,这个问题这么解决啊?
2010年12月27日 13点23分 19F
全力支持!
2011年1月12日 15点05分 20F
我想用在别的主题上,但主题里没有:js/custom.js
这个文件..
只能用在你站点这个主题上么?
还有按钮的图片能否也分享出来?
来自外部的引用