如何为Z-Blog博客添加一个实时天气预报模块

很多站长都想充实自己的Z-Blog博客,博客除了里面要有实质性的内容外,首页的装饰也是十分重要的,比如在Z-Blog博客的首页增添一个实时天气预报模块。下面,就让我们来看看如何实现这个功能吧

设置步骤

1、进入新知天气官网:https://www.seniverse.com,注册一个账号;

如何为Z-Blog博客添加一个实时天气预报模块 教程 Z-Blog 第1张

2、进入插件配置页面:https://www.seniverse.com/widgetv3,选择免费产品按需求配置插件,然后点击 [生成代码],如下图:

如何为Z-Blog博客添加一个实时天气预报模块 教程 Z-Blog 第2张

3、我们需要用到的是插件网页版链接,将这个链接复制下来备用,如下图:

如何为Z-Blog博客添加一个实时天气预报模块 教程 Z-Blog 第3张

4、进入Z-Blog后台,打开 [模块管理],然后选择 [新建模块];

如何为Z-Blog博客添加一个实时天气预报模块 教程 Z-Blog 第4张

5、类型选择DIV,正文填入以下代码,然后 [提交] 生成模块;

<iframe style="display:block;width:100%;height:350px" src="//插件网页版链接" frameborder="0" scrolling="no"></iframe>

说明:HTML ID填写类似side-adimg1可以实现无白边模块的效果,如果是其他主题,可自行通过设置css代码处理。

如何为Z-Blog博客添加一个实时天气预报模块 教程 Z-Blog 第5张

6、最后将模块拖到需要显示的侧栏即可,如下图:

如何为Z-Blog博客添加一个实时天气预报模块 教程 Z-Blog 第6张

7、Z-Blog博客添加天气预报模块后的效果;

如何为Z-Blog博客添加一个实时天气预报模块 教程 Z-Blog 第7张

8、除了使用新知天气官网的插件,这里再推荐一款全球天气网的天气预报调用插件,有丰富的主题和灵活的样式定制,也是完全免费的,地址:https://www.tianqi.com/plugin/

✅来源:十一张博客
© 版权声明
THE END
如果觉得这篇文章对您有帮助,不妨考虑请我喝杯奶茶😄
点赞3赞赏 分享
评论 抢沙发
头像
评论人工审核通过显示,请勿重复提交!
提交
头像

昵称

取消
昵称表情代码

    暂无评论内容