美文网首页
为博客添加恋爱天数小工具

为博客添加恋爱天数小工具

作者: Alextao_0a86 | 来源:发表于2019-07-12 10:47 被阅读0次

效果预览

扒自Shawn在售的主题超级漂亮!!喜欢的可以去看看。

使用方法.

在wordpress后台 外观-小工具 添加自定义html即可

/*代码中的时间需提前一个月*/

<divstyle="text-align:center;"><linktype="text/css"media="all"href="https://a-oss.zmki.cn/20190606/love.css"rel="stylesheet"><imgsrc="https://a-oss.zmki.cn/20190601/img_9879.jpg"style="width:50px;height:50px;vertical-align:-20px;border-radius:50%;margin-right:5px;margin-bottom:5px;-webkit-box-shadow:1px1px1pxrgba(0,0,0,.1),1px1px1pxrgba(0,0,0,0.1),1px1px1pxrgba(0,0,0,0.1);box-shadow:1px1px1pxrgba(0,0,0,.1),1px1px1pxrgba(0,0,0,0.1),1px1px1pxrgba(0,0,0,0.1);border:2px solid#fff;"/><svgviewbox="0 0 1024 1024"style="margin-left:5px;margin-right:5px;"version="1.0"width="15"height="15"class="my-face"><pathd="M863.597631 513.574282l-271.33965-140.213484L729.783667 81.926656c3.583731-7.87141 7.167462-15.742819 7.167462-25.214109C736.887134 25.226908 708.345275 0.012799 672.635953 0.012799a63.611229 63.611229 0 0 0-39.293053 12.607055c-1.791866 1.59988-3.519736 3.19976-5.311602 3.19976L147.87531 418.925381a55.547834 55.547834 0 0 0-19.646527 47.356448c1.791866 17.278704 14.27093 33.021523 32.125591 42.492813l271.33965 141.749369L292.504463 945.221908c-12.479064 25.214109-1.791866 53.563983 23.166262 69.306802 10.751194 6.335525 23.230258 9.47129 35.709322 9.47129 16.062795 0 32.125591-4.735645 44.604655-15.742819l480.091993-403.297753a55.547834 55.547834 0 0 0 19.646526-47.228458 61.243407 61.243407 0 0 0-32.12559-44.156688z"fill="#515151"/></svg><imgsrc="https://a-oss.zmki.cn/20190601/img_9878.jpg"style="width:50px;height:50px;vertical-align:-20px;border-radius:50%;margin-left:5px;margin-bottom:5px;-webkit-box-shadow:1px1px1pxrgba(0,0,0,.1),1px1px1pxrgba(0,0,0,0.1),1px1px1pxrgba(0,0,0,0.1);box-shadow:1px1px1pxrgba(0,0,0,.1),1px1px1pxrgba(0,0,0,0.1),1px1px1pxrgba(0,0,0,0.1);border:2px solid#fff;"/><br/><spanid="htmer_time"></span></div><scripttype="text/javascript"language="javascript">functionsetTime(){varcreate_time=Math.round(newDate(Date.UTC(2018,10,26,6,45,0)).getTime()/1000);vartimestamp=Math.round((newDate().getTime()+8*60*60*1000)/1000);currentTime=secondToDate((timestamp-create_time));currentTimeHtml=currentTime[0]+' 年 '+currentTime[1]+' 天 '+currentTime[2]+' 时 '+currentTime[3]+' 分 '+currentTime[4]+' 秒';document.getElementById("htmer_time").innerHTML=currentTimeHtml;}functionsecondToDate(second){if(!second){return0;}vartime=newArray(0,0,0,0,0);if(second>=365*24*3600){time[0]=parseInt(second/(365*24*3600));second%=365*24*3600;}if(second>=24*3600){time[1]=parseInt(second/(24*3600));second%=24*3600;}if(second>=3600){time[2]=parseInt(second/3600);second%=3600;}if(second>=60){time[3]=parseInt(second/60);second%=60;}if(second>0){time[4]=second;}returntime;}setInterval(setTime,1000);</script>

无法插入wordpress小工具 提示错误,由于主题不同的原因,直接插入或多或少都有可能出现问题,我们可以围魏救赵嵌入解决

在服务器上创建一个html文件

把上边的代码放到创建的html文件里

在小工具里放入下面的代码

Select Code

Copy

这样我的小工具就直接调用的是上边的html网页,等于小工具嵌入网页

#2019-6-16更新

闪电图标换成了爱心图标,效果如下:

代码如下:

/*代码中的时间需提前一个月*/

<!DOCTYPE html><html><head><metacharset="UTF-8"><title></title><linkrel="stylesheet"href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"><linkrel="stylesheet"href="https://a-oss.zmki.cn/2019/190616-5d05c81dbbaf5.css"><styletype="text/css">.widget_text.aplayer{margin:-12px -16px}.widget_text.aplayer.aplayer-info{padding:7px7px7px10px}.widget_text.aplayer.aplayer-info.aplayer-music{margin:0013px0}.giligili-item{position:relative;width:100%;background:#fff;border-radius:4px;overflow:hidden;/*margin-bottom: 8px;*//*阴影*/padding:12px16px;-webkit-box-shadow:01px3pxrgba(26,26,26,.1);box-shadow:01px3pxrgba(26,26,26,.1)}</style></head><divclass="widget_text giligili-item"><divclass="textwidget custom-html-widget"><divstyle="text-align:center;"><imgsrc="https://a-oss.zmki.cn/20190601/img_9879.jpg"style="width:50px;height:50px;vertical-align:-20px;border-radius:50%;margin-right:5px;margin-bottom:5px;-webkit-box-shadow:1px1px1pxrgba(0,0,0,.1),1px1px1pxrgba(0,0,0,0.1),1px1px1pxrgba(0,0,0,0.1);box-shadow:1px1px1pxrgba(0,0,0,.1),1px1px1pxrgba(0,0,0,0.1),1px1px1pxrgba(0,0,0,0.1);border:2px solid#fff;"/><iclass="fa fa-heart  throb"aria-hidden="true"style="color:red"></i><imgsrc="https://a-oss.zmki.cn/20190601/img_9878.jpg"style="width:50px;height:50px;vertical-align:-20px;border-radius:50%;margin-left:5px;margin-bottom:5px;-webkit-box-shadow:1px1px1pxrgba(0,0,0,.1),1px1px1pxrgba(0,0,0,0.1),1px1px1pxrgba(0,0,0,0.1);box-shadow:1px1px1pxrgba(0,0,0,.1),1px1px1pxrgba(0,0,0,0.1),1px1px1pxrgba(0,0,0,0.1);border:2px solid#fff;"/><br/><spanid="htmer_time"></span></div><scripttype="text/javascript"language="javascript">functionsetTime(){varcreate_time=Math.round(newDate(Date.UTC(2018,10,26,6,45,0)).getTime()/1000);vartimestamp=Math.round((newDate().getTime()+8*60*60*1000)/1000);currentTime=secondToDate((timestamp-create_time));currentTimeHtml=currentTime[0]+' 年 '+currentTime[1]+' 天 '+currentTime[2]+' 时 '+currentTime[3]+' 分 '+currentTime[4]+' 秒';document.getElementById("htmer_time").innerHTML=currentTimeHtml;}functionsecondToDate(second){if(!second){return0;}vartime=newArray(0,0,0,0,0);if(second>=365*24*3600){time[0]=parseInt(second/(365*24*3600));second%=365*24*3600;}if(second>=24*3600){time[1]=parseInt(second/(24*3600));second%=24*3600;}if(second>=3600){time[2]=parseInt(second/3600);second%=3600;}if(second>=60){time[3]=parseInt(second/60);second%=60;}if(second>0){time[4]=second;}returntime;}setInterval(setTime,1000);</script></div></body></html>

文章源自钻芒博客

原文地址:https://www.zmki.cn/3454.html

相关文章

网友评论

      本文标题:为博客添加恋爱天数小工具

      本文链接:https://www.haomeiwen.com/subject/nxfekctx.html