系列文章目录
提要:如果你有阅读我上一篇文章,那么恭喜你,你已经学会设置CSDN自定义模块的简单操作模式了,下面的教程将是进阶教程,目的是让你的博客更有气氛、更酷,重点是与众不同。
简单设置模式回顾:
《CSDN自定义模块简单设置之——添加模块并填入图片、文字、链接等内容》
本期高级设置模式:
《CSDN自定义模块高级设置之(1)——向模块中添加动态效果、网页、3D效果、游戏等互动元素功能》
《CSDN自定义模块高级设置之(2)——设置主页左则及详情页背景(打造节日气氛)》
提示:需要设置的朋友们请先收藏本文章,方便日后查看设置
前言
上期有同学说在设置CSDN自定义模块时入口找不到或无法操作:
那是因为你帐号级别不够,什么意思呢?下面是CSDN官方对此功能的使用提示,就是告诉你要支持下CSDN官方,充个会员或去认证博客专家身份,当然帐号企业认证也可以。
栏目内容支持HTML格式,不支持JS,
最多添加1个自定义栏目,VIP、博客专家、企业博客才可在个人详情页显示
博客主页效果:
博客内容详情页效果:
提示:图片换成自己的,那不是重点,有兴趣一起交流的朋友请帮忙来个一键三连+评论
一、CSDN自定义模块进阶设置?
本次对CSDN自定义模块高级设置功能主要有:向模块中添加动态效果、网页、3D效果、游戏等互动元素功能。听起来就是很厉害,看到效果你就知道了。
怎么看效果:
下面这个博客详情页可以看到:看效果传送链接
连手指都懒得动的可以看下面图片,里面都是动态的效果和可交互的效果。
二、简单模式设置步骤
1.设置入口
我们先进行设置入口:
2.代码编写
1.动态效果:
我们下面开始写代码:
<p>
<div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo3/" scrolling="no" style="width: 100%;height: 100%;">
</iframe>
</div>
</p>
<p>
</div><div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo1/" scrolling="no" style="width: 100%;height: 100%;">
</iframe>
</div>
</p>
效果如下:
因为是截图,看不出动的效果,可以在电脑上打开下面的链接查看我做的效果:
查看效果地址(请在电脑上打开查看):查看效果
代码写完后请将上面代码中复制粘贴到栏目内容里保存。
2.网页效果:
我们下面写下代码:
<p>
</div><div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
<iframe frameborder="0" src="【要显示的网页网址】" scrolling="no" style="width: 100%;height: 100%;">
</iframe>
</div>
</p>
请将上面代码中“【中文】”的内容换成自己要添加的网址,其他操作跟上面一样,编写代码后将代码复制粘贴到栏目内容里保存,然后打开自己的任意一篇文章详情页去查看效果。
3.3D效果:
我们下面实现3D效果,代码如下:
<p>
<div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo5/" scrolling="no" style="width: 100%;height: 100%;">
</iframe>
</div>
</p>
动态效果如下(这里随机截了三张图):
因为是截图,看不出动的效果,可以在电脑上打开下面的链接查看我做的效果:
查看效果地址(请在电脑上打开查看):查看效果
代码写完后请将上面代码中复制粘贴到栏目内容里保存。
下面我们再来实现一个3D效果,代码如下:
<p>
<div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo11/" scrolling="no" style="width: 100%;height: 100%;">
</iframe>
</div>
</p>
动态效果如下(这里同样随机截了三张图):
上面的效果是可以用鼠标去旋转的。
想尝试的同学可以打开这个链接去旋转看看:
查看效果
跟上面操作一样,编写完代码后请将上面代码复制粘贴到栏目内容里保存,然后打开自己任意一篇博文在详情页查看。
4.游戏互动效果:
我们下面来实现在游戏并来互动玩下这个游戏,代码如下:
<p>
<div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo7/" scrolling="no" style="width: 100%;height: 100%;">
</iframe>
</div>
</p>
效果如下:
同样想尝试的同学可以打开这个链接去旋转玩玩这个小游戏:
查看效果
编写完代码后请将上面代码复制粘贴到栏目内容里保存,然后打开自己任意一篇博文在详情页查看。
5.PPT播放效果:
我们下面实现类似播放PPT样的效果做日出日落,代码如下:
<p>
<div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo9" scrolling="no" style="width: 100%;height: 100%;">
</iframe>
</div>
</p>
效果如下:
同样想尝试的同学可以打开这个链接去通过鼠标滚动向下翻页,当右边滚动条滚到最底部是就播放完了:
查看效果
最后同样是编写完代码后请将上面代码复制粘贴到栏目内容里保存,然后打开自己任意一篇博文在详情页查看。
上面的代码只是部分,下面贴出完整的代码:
<div>
<p>
<div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo5/" scrolling="no" style="width: 100%;height: 100%;">
</iframe>
</div>
</p>
<p>
<img src="此处修改为自己的图片地址" alt=""/>
</p>
<hr><hr>
<p>
<div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo11/" scrolling="no" style="width: 100%;height: 100%;">
</iframe>
</div>
</p>
<p>
<a href="此处修改为自己的网页地址" style="color:#FF0000;" target="view_window">加油!继续努力,终有一天你也会成为一名技术大佬!</a>
</p>
<hr><hr>
<p>
<div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo3/" scrolling="no" style="width: 100%;height: 100%;">
</iframe>
</div>
</p>
<p>
<span style="color:#A67D3D;">CSDN博客:</span>
<a href="此处修改为自己的博客地址" target="view_window">点击进入</a>
</p>
<p>
<span style="color:#A67D3D;">博客园博客:</span>
<a href="此处修改为自己的博客地址" target="view_window">点击进入</a>
</p>
<hr><hr>
<p>
</div><div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo1/" scrolling="no" style="width: 100%;height: 100%;">
</iframe>
</div>
</p>
<p>
<span style="color:#A67D3D;">个人GitHub:</span>
<a href="此处修改为自己的GitHub地址" target="view_window">点击进入</a>
</p>
<p>
<span style="color:#A67D3D;">个人Gitee:</span>
<a href="此处修改为自己的Gitte地址" target="view_window">点击进入</a>
</p>
<hr><hr>
<p>
<div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo9" scrolling="no" style="width: 100%;height: 100%;">
</iframe>
</div>
</p>
<p>
<span style="color:#A67D3D;">个人邮箱:</span>
1069945237@qq.com
</p>
<p>
<span style="color:#A67D3D;">个人微信:</span>
huidaoli2010
</p>
<hr><hr>
<p>
<div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo7/" scrolling="no" style="width: 100%;height: 100%;">
</iframe>
</div>
</p>
<p>
<a href="https://www.baidu.com/s?wd=huidaoli" style="color:#FF0000;" target="view_window">代码敲累了,玩个游戏吧!</a>
</p>
<hr><hr>
<p>
<div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo12/" scrolling="no" style="width: 100%;height: 100%;">
</iframe>
</div>
</p>
<p>
<a href="https://www.baidu.com/s?wd=huidaoli" style="color:#FF0000;" target="view_window">提前祝大家圣诞元旦快乐!!</a>
</p>
<hr><hr>
<p>
<div style="position: absolute;width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:-1;">
<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo12/" scrolling="no" style="width: 100%;height: 100%;">
</iframe>
</div>
</p>
</div>
最后的效果就是上面第一张图片效果:
总结
今天就先讲这里,相信高级设置模式你已经掌握了,效果是不是更好,下篇文章再给大家讲《CSDN自定义模块高级设置之(2)——设置主页左则及详情页背景(打造节日气氛)》,效果可以到我博客去看:
以上就是今天要讲的内容,希望大家感兴趣,支持我的同学请点个一键3连。