WordPress美化 自定义HTML代码设置给网站右侧栏添加天气预报

我常常因为忽视天气预报而遇到不便，但幸运的是，我每天都会浏览博客。为了解决这个问题，我决定在博客上添加一个实时天气显示功能。经过一番搜寻，我找到了一段非常出色的代码，它不仅能显示天气，还能在鼠标悬停时提供更详尽的信息。今天，我很高兴能将这段实用的代码分享给各位。

效果图展示：

                               
登录/注册后可看大图

代码

1. <div id="tp-weather-widget"></div>
   
2. <script>
   
3.   (function(a,h,g,f,e,d,c,b){b=function(){d=h.createElement(g);c=h.getElementsByTagName(g)[0];d.src=e;d.charset="utf-8";d.async=1;c.parentNode.insertBefore(d,c)};a["SeniverseWeatherWidgetObject"]=f;a[f]||(a[f]=function(){(a[f].q=a[f].q||[]).push(arguments)});a[f].l=+new Date();if(a.attachEvent){a.attachEvent("onload",b)}else{a.addEventListener("load",b,false)}}(window,document,"script","SeniverseWeatherWidget","//cdn.sencdn.com/widget2/static/js/bundle.js?t="+parseInt((new Date().getTime() / 100000000).toString(),10)));
   
4.   window.SeniverseWeatherWidget('show', {
   
5.     flavor: "slim",
   
6.     location: "WX4FBXXFKE4F",
   
7.     geolocation: true,
   
8.     language: "zh-Hans",
   
9.     unit: "c",
   
10.     theme: "auto",
    
11.     token: "6cc2a314-5422-4e9c-b3ad-7b9217f4e494",
    
12.     hover: "enabled",
    
13.     container: "tp-weather-widget"
    
14.   })
    
15.   </script>

复制代码