插件和个性化样式设置

原创

唐宋元明清2188 2022-10-05 19:13:15 ©著作权

©著作权归作者所有：来自51CTO博客作者唐宋元明清2188的原创作品，请联系作者获取转载授权，否则将追究法律责任

天气预报

心知天气插件配置：https://www.seniverse.com/widget/get

我的JS设置：

1 <script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
 2 <script>tpwidget("init", {
 3     "flavor": "bubble",
 4     "location": "WS0E9D8WN298",
 5     "geolocation": "disabled",
 6     "position": "top-left",
 7     "margin": "10px 10px",
 8     "language": "auto",
 9     "unit": "c",
10     "theme": "chameleon",
11     "uid": "UCB885E990",
12     "hash": "0fd41eaf2f177c57fe8d1cdb15e05d4e"
13 });
14

背景音乐

网易云-背景音乐生成外链播放插件：https://music.163.com/#/outchain/2/41500546/m/use/flash

虾米音乐也可以添加

值得注意的是，最好使用embed（flash）,不要使用iframe插件。

iframe 有个很大的毛病，这个网易云也有提示——“很多博客网站不支持嵌入iframe，请试一下您的网站是否支持”。这些都不重要，重要的是博客园就不支持 iframe。

我的设置：

1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8" />
 5 </head>
 6 <body>
 7     <div id="musicPlayer">
 8         <embed src="//music.163.com/style/swf/widget.swf?sid=2226641834&type=0&auto=1&width=310&height=430" width="330" height="450"  allowNetworking="all"></embed>
 9     </div>
10

1 /*播放器*/
2 #musicPlayer {
3     position: fixed;
4     background: transparent;
5     right: 0px;
6     bottom: 0px;
7     z-index: 10000000;
8

支付打赏

源代码：https://github.com/greedying/tctip

插件应用js案例：

1 <script>
 2         window.tctipConfig = {
 3             staticPrefix: "http://static.tctip.com",
 4             buttonImageId: 5,
 5             buttonTip:  "zanzhu",
 6             list:{
 7                 alipay: { qrimg: "https://i.loli.net/2018/06/04/5b14a5e828c6c.png"}, //修改1
 8                 weixin: { qrimg: "https://i.loli.net/2018/06/04/5b14a5e3e2a1b.png"}, //修改2
 9             }
10         };
11 </script>
12

其中图片路径，可以通过图片https://sm.ms/ 上传图片并生成永久图片路径

宠物Pet

地址：http://cdn.abowman.com/widgets/hamster/hamster.swf

我的设置：

1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8" />
 5 </head>
 6 <body>
 7     <div id="mypet">
 8         <object width="200" height="150" data="http://cdn.abowman.com/widgets/hamster/hamster.swf?" type="application/x-shockwave-flash"
 9             style="outline:none;">
10             <param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?">
11             <param name="AllowScriptAccess" value="always">
12             <param name="wmode" value="opaque">
13         </object>
14     </div>
15 </html>

1 /*公告栏*/
 2 #mypet {
 3     background: #fff;
 4     padding: 20px 20px 0px 20px;
 5     color: #7e8c8d;
 6     font-size: 13px;
 7     line-height: 1.8;
 8     margin-top: 0px;
 9    border: 0px solid #dedede;
10 }
11 #profile_block {
12     background: #fff;
13     padding: 0 20px 20px 20px;
14     color: #7e8c8d;
15     font-size: 13px;
16     line-height: 1.8;
17     margin-top: 0px;
18    border: 0px solid #dedede;
19 }
20 #profile_block:hover {
21    border: 0px solid #dedede;
22 }
23 #blog-news {
24    border-width: 1px;
25    border-style: solid;
26    border-color: #dedede;
27 }
28 #blog-news:hover {
29    border-width: 1px;
30    border-style: solid;
31    border-color: red;
32

段落标题Hover效果设置

1  /*段落标题设置*/
 2   #cnblogs_post_body
 3   {
 4       color: black;      
 5       font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;
 6       font-size: 15px;
 7   }
 8   #cnblogs_post_body h1    {
 9       background: #169FE6;
10       border-radius: 4px 4px 4px 4px;
11         font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
12         font-size: 23px;
13         font-weight: bold;
14         height: 25px;
15         line-height: 25px;
16       margin: 18px 0 0 0;
17       padding: 5px 0 5px 5px;
18       transition: all 0.8s;
19   }
20   #cnblogs_post_body h2    {
21       background: #169FE6;
22       border-radius: 4px 4px 4px 4px;
23       color: #FFFFFF;
24         font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
25         font-size: 20px;
26         font-weight: bold;
27         height: 25px;
28         line-height: 25px;
29       margin: 18px 0 0 0;
30       padding: 5px 0 5px 5px;
31       transition: all 0.8s;
32   }
33   #cnblogs_post_body h3    {
34       background: #6FA833;
35       border-radius: 4px 4px 4px 4px;
36       color: #FFFFFF;
37         font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
38         font-size: 18px;
39         font-weight: bold;
40         height: 25px;
41         line-height: 25px;
42       margin: 18px 0 0 0;
43       padding: 5px 0 5px 5px;
44       transition: all 0.8s;
45   }
46   #cnblogs_post_body h4{
47       background: #A8D08D;
48       border-radius: 4px 4px 4px 4px;
49       color: #FFFFFF;
50         font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
51         font-size: 18px;
52         font-weight: bold;
53         height: 25px;
54         line-height: 25px;
55       margin: 18px 0 0 0;
56       padding: 5px 0 5px 5px;
57       transition: all 0.8s;
58   }
59   #cnblogs_post_body h1:hover {
60       transform: rotateX(360deg);
61       background-color: #0066FF;
62   }
63   #cnblogs_post_body h2:hover {
64       transform: rotateX(360deg);
65       background-color: #0066FF;
66   }
67   #cnblogs_post_body h3:hover {
68       transform: rotateX(360deg);
69   }
70   #cnblogs_post_body h4:hover {
71       transform: rotateX(360deg);
72

主页背景和导航设置

1 /*主页背景及导航*/
 2   body {
 3     background-image: url("https://ss2.bdstatic.com/lfoZeXSm1A5BphGlnYG/skin/253.jpg?2");
 4     background-size: cover;
 5     background-repeat: repeat;
 6     color: #000;
 7     font-family: Verdana,Arial,Helvetica,sans-serif;
 8     font-size: 14px;
 9     line-height: 25px;
10     min-height: 101%;
11 }
12 
13 #navList {
14     width: 1200px;
15     margin: 0 auto;
16     height: 60px;
17 }
18 #navigator {
19     background-color: #169fe6;
20     width: 1200px;
21     height: 60px;
22     margin: 0 auto;
23     clear: both;
24     position: relative;
25     border: 1px solid #138cca;
26     border-left: none;
27     border-right: none;
28

QQ联系设置

1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8" />
 5 </head>
 6 <body>
 7    <div id="contackInfo">联系：
 8         <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1016724958&site=qq&menu=yes">
 9             <img align="absmiddle" border="0" src="http://wpa.qq.com/pa?p=2:1016724958:41 &r=0.30709030851721764" alt="欢迎与我联系"
10                 title="欢迎与我联系">
11         </a>    
12     </div>
13 </html>

1 /*公告栏*/
 2 #contackInfo {
 3     background: #fff;
 4     padding: 20px 20px 0px 20px;
 5     color: #7e8c8d;
 6     font-size: 13px;
 7     line-height: 1.8;
 8     margin-top: 0px;
 9    border: 0px solid #dedede;
10 }
11 #profile_block {
12     background: #fff;
13     padding: 0 20px 20px 20px;
14     color: #7e8c8d;
15     font-size: 13px;
16     line-height: 1.8;
17     margin-top: 0px;
18    border: 0px solid #dedede;
19 }
20 #profile_block:hover {
21    border: 0px solid #dedede;
22 }
23 #blog-news {
24    border-width: 1px;
25    border-style: solid;
26    border-color: #dedede;
27 }
28 #blog-news:hover {
29    border-width: 1px;
30    border-style: solid;
31    border-color: red;
32

去除新闻模块

1 /*屏闭新闻 */
 2 #ad_t2 {
 3     display: none;
 4 }
 5 .c_ad_block {
 6     display: none;
 7 }
 8 
 9 #blog-comments-placeholder {
10     display: none;
11 }
12 
13 #under_post_news {
14     display: none;
15 }
16 #under_post_kb {
17     display: none;
18