• 作者:SuperPaxxs扶摇直上九万里,绝云气,负青天,不知图哪了,正在努力搜索中..
    • 请在Chrome、Firefox等现代浏览器浏览本站。 有事 点击这里 联系博主
    • 想在魔帆博客投稿? 点击这里 联系博主
    • [ 既然来了就多看两篇文章嘛,你好意思走么? ]
    • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏魔帆博客吧

Https 安全链接 添加侧边栏提醒代码分享

目录
[隐藏]

众所周知,Https除了安全性更高这一好处外,HTTPS对SEO也是有一定益处的百度不说话。但是可能由于之前有别的网站引用了我们网站的URL,所以一部分用户访问还是以HTTP形式进入的,而QQ邮箱订阅有不支持HTTPS,所以我们不能完全禁用HTTP,不如再侧边栏加一个提醒,当用户点击后,自动跳转到HTTPS,是不是非常机智呢,我都被我自己的才华吓到了 :shock:

先上效果图:

代码:

先在主题style.css中添加:

.ishttps {
    background-color: #2ecc71;
    padding-top: 5px;
    border-radius: 2px;
    color: #fff;
    box-shadow: 0 2px 3px rgba(0,0,0,.1);
}

.nothttps {
    background-color: #d9534f;
    padding-top: 5px;
    border-radius: 2px;
    color: #fff;
    box-shadow: 0 2px 3px rgba(0,0,0,.1);
}

.nothttps:hover {
    color: #fff;
    background-color: #e6162d;
}

.ishttps:hover {
    color: #fff;
    background-color: #24ae5f;
}

.warn-content {
    padding: 15px;
}

然后侧边栏小工具中添加:[这是html代码,随便加哪都行]

<a class="" id="wcp" href="https://morfans.cn/">
    <div class="warn-content" align="center" id="wc"></div>
</a>
<script type="text/javascript">
    if ('https:' == document.location.protocol) {
        document.getElementById("wc").innerHTML = "<i class="fa fa-lock"></i> 当前采用HTTPS加密传输";
        document.getElementById('wcp').className = "ishttps";
    } else {
        document.getElementById("wc").innerHTML = "<i class="fa fa-exclamation-triangle"></i> 警告:当前连接未经加密";
        document.getElementById('wcp').className = "nothttps";
    }
    document.getElementById("wcp").href = "https:" + window.location.href.substring(window.location.protocol.length);
</script>

:shock: 至于效果..就不演示了 等我博客全面Https时你们自己看 啦啦啦


魔帆博客 , 版权所有丨如未注明 , 均为原创丨本网站均采用BY-NC-SA协议进行授权 , 转载请注明Https 安全链接 添加侧边栏提醒代码分享
喜欢 (3)
[]
分享 (0)
Super Paxxs
关于作者:
一只初中狗,对网站建设和编程非常感兴趣。
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. Super Paxxs
    :oops: 已标注好来源,最近博客由他人代管,很多复制的文章还未著来源,欢迎指出!
    Super Paxxs2016-04-03 23:17 回复
  2. 默默占沙发。
    VectorST2016-02-19 14:29 回复
×
订阅图标按钮