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

%title插图%num

效果预览

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

使用方法.

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

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


			<div style="text-align: center;"> 
	<link type="text/css" media="all" href="https://a-oss.zmki.cn/20190606/love.css" rel="stylesheet">
				<img src="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: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;"/>
			<svg viewbox="0 0 1024 1024" style="margin-left: 5px;margin-right: 5px;" version="1.0" width="15" height="15" class="my-face">
				<path d="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>
				
			<img src="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: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;"/><br/> 
				
		<span id="htmer_time"></span></div> 
		<script type="text/javascript" language="javascript">function setTime() {
        var create_time = Math.round(new Date(Date.UTC(2018, 10, 26, 6, 45, 0)).getTime() / 1000);
        var timestamp = Math.round((new Date().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;
    }
    function secondToDate(second) {
        if (!second) {
            return 0;
        }
        var time = new Array(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;
        }
        return time;
    }
    setInterval(setTime, 1000);
		</script>
   

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

  1. 在服务器上创建一个html文件
  2. 把上边的代码放到创建的html文件里
  3. 在小工具里放入下面的代码
    <iframe src="你的html文件链接地址" width="300" height="100" frameborder="0" scrolling="No" align="center"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>
    

    %title插图%num

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

#2019-6-16更新

 

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

代码如下:

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
		<link rel="stylesheet" href="https://a-oss.zmki.cn/2019/190616-5d05c81dbbaf5.css">
		<style type="text/css">
.widget_text .aplayer {margin: -12px -16px }
.widget_text .aplayer .aplayer-info {padding: 7px 7px 7px 10px}
.widget_text .aplayer .aplayer-info .aplayer-music {margin: 0 0 13px 0}
.giligili-item {
	position: relative;
	width: 100%;
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
	/*margin-bottom: 8px;*/  /*阴影*/
	padding: 12px 16px;
	-webkit-box-shadow: 0 1px 3px rgba(26,26,26,.1);
	box-shadow: 0 1px 3px rgba(26,26,26,.1)
}
		</style>
	</head>
	<body style="background-color: #FFFFFF;"bgcolor="#FFFFFF">
		<div class="widget_text giligili-item">
            <div class="textwidget custom-html-widget">
              <div style="text-align: center;">
                <img src="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: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;" />   
                <i class="fa fa-heart  throb" aria-hidden="true" style="color:red"></i> 
                <img src="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: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;" />
                <br/>
                <span id="htmer_time"></span>
              </div>
              <script type="text/javascript" language="javascript">function setTime() {    
                  var create_time = Math.round(new Date(Date.UTC(2018, 10, 26, 6, 45, 0)).getTime() / 1000);
                  var timestamp = Math.round((new Date().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;
                }
                function secondToDate(second) {
                  if (!second) {
                    return 0;
                  }
                  var time = new Array(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;
                  }
                  return time;
                }
                setInterval(setTime, 1000);</script>
            </div>
		
		
	</body>
</html>

 

 

文章最后更新于 2019-06-26

给TA买糖
共{{data.count}}人
人已赞赏
WordpressWordPress优化WordPress插件wordpress美化前端网络资源

xydown下载插件 移植美化版V2.0

2019-6-2 19:44:42

WordpressWordPress优化

wordpress文章内添加按钮

2019-6-8 23:46:11

21 条回复 A文章作者 M管理员
  1. […] Alextao 原创文章  html  2019-06-02  11,964  20  0 […]

  2. Mtoly Mtoly

    这个吗

  3. Mtoly Mtoly

    解决乱码不显示中文只要在第一行加上?

  4. 你好,如果放置在一个html文件里,使用调用的话怎么设置成页面自适应,跟随屏幕大小变化的
    链接:https://Mtoyl.gi111.com/
    调用代码:
    麻烦大佬抽空看看? 😉

    • 把iframe宽度用100%试试

      <iframe src="https://mtoyl.gi111.com/1.html" width="100%" height="300" frameborder="0" scrolling="No" align="center"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>
      

       

    • Alextao

      感谢回复,测试后发现手机端访问:mtoyl.gi111.com/正常,电脑端位于左下角,我是想把这个位于正中间的

    • 改成100%就正常居中了啊
      宽度100%

    • Alextao

      噔噔蹬,谢谢

  5. 这下好了,都知道你有女朋友了 ❓

    • 嗯…. 但是是负数啊!! 😥 😥 😥

  6. 求问怎么把中间的闪电改成爱心啊,像这个博客一样https://shawnzeng.com/giligili-help
    不过他的代码貌似有点错误,用不了

    • 明天我扒一下

    • Alextao

      在您保存前必须修正 4 个错误。/有点小问题,自建txt文档改html显示没问题,但是自定义html的时候会出现这个

    • 用引用外链方式:
      wordpress小工具里边写
      你把源码修改下时间上传到一个网页,然后这条评论代码里的链接替换一下

    • Alextao

      那个爱心的链接吗,代码我看不太懂,只知道点皮毛,博主可以详细说下吗 🙂

    • 写了一个教程,在本帖的中间部分:https://www.zmki.cn/3454.html#616 你看一下,这个还理解不了就没办法了 💡

    • Alextao

      感谢!解决了,就是位置变成了偏右边,看起来不是很和谐https://www.loveleimu.com/

    • 你试一下调用第一个闪电的那个,看看位置会不会对,第二个有写了定位。把爱心里边下边的样式删掉应该就可以了!.giligili-item {
      position: relative;
      width: 100%;
      background: #fff;
      border-radius: 4px;
      overflow: hidden;
      /*margin-bottom: 8px;*/ /*阴影*/
      padding: 12px 16px;
      -webkit-box-shadow: 0 1px 3px rgba(26,26,26,.1);
      box-shadow: 0 1px 3px rgba(26,26,26,.1)
      }

    • Alextao

      第一个位置也不对

    • 你也可以尝试把嵌入代码写小一点。 🙄