天气预报
心知天气插件配置：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 tpwidget("show");</script>
背景音乐
网易云-背景音乐生成外链播放插件：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 </html>
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 <script src="http://static.tctip.com/js/tctip.min.js"></script>
其中图片路径，可以通过图片https://sm.ms/ 上传图片并生成永久图片路径
宠物Pet
地址：http://cdn.abowman.com/widgets/hamster/hamster.swf
扫描二维码关注公众号，回复：
1453920 查看本文章
我的设置：
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 }
推荐置顶设置
我的设置：
1 /*推荐置顶设置*/ 2 #div_digg{ 3 position:fixed; 4 bottom:5px; 5 width:140px; 6 right:650px; 7 border:2px solid #6FA833; 8 padding:10px; 9 background-color:#fff; 10 border-radius:5px 5px 5px 5px !important; 11 box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); 12 } 13 #div_digg:hover { 14 box-shadow:0 0 0 1px #5F5A4B, 2px 2px 10px 2px rgba(10, 10, 0, 0.5); 15 } 16
段落标题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 }