给网站右下角添加SSL国际安全认证图标显示教程-过客博客

前言

不少细心的朋友会发现，很多正规网站的页脚或角落会挂一个SSL安全认证小图标，点击就能查看网站的安全评估报告，让人浏览时更安心。如果你已经给网站部署了HTTPS（地址栏有小锁图标），今天这篇教程就教你给网站右下角添添加MySSL的安全认证签章，4款样式随心选，新手也能3分钟搞定～

教程

为什么要加SSL认证签章？

可能有朋友会问：“我网站已经有HTTPS小锁了，为啥还要多此一举？”其实很简单：

普通访客可能不懂“HTTPS”和小锁的意义，但看到“安全认证”的直观图标，会更清晰感知网站安全性；
点击图标可跳转到MySSL的官方验证页面，用第三方权威报告增强信任（尤其咱们过客博客分享资源、源码，信任感太重要了）；
操作零成本，纯前端代码添加，不影响网站加载速度。

4款签章样式：悬浮/固定位置任选，适配不同风格

下面分享4款官方签章样式，一款是固定悬浮在右下角（全程可见），另外三款适合放在页脚（随页面滚动），大家可以根据网站风格挑一款，已经为外链添加了“nofollow”，防止博客权重流失～

样式一

图片[1]-给网站右下角添加SSL国际安全认证图标显示教程-过客博客

方法：在页脚插入以下代码：

<!-- 网站右下角添加ssl安全认证图标 开始 https://blog.gkym.top/-->
<div id="cc-myssl-id" style="position: fixed;right: 0;bottom: 0;width: 65px;height: 65px;z-index: 99;"><a rel="nofollow" href="你的域名" target="_blank" rel="nofollow noopener noreferrer"><img src="https://static.myssl.com/res/images/myssl-id.png" target="_blank" rel="nofollow noopener noreferrer"  style="width:100%;height:100%"></a></div>
<!-- 网站右下角添加ssl安全认证图标 结束 https://blog.gkym.top/-->

移动端和PC端显示效果：

图片[2]-给网站右下角添加SSL国际安全认证图标显示教程-过客博客

★说明：“你的域名”格式示例(子比主题):https://blog.gkym.top/?golink=https://myssl.com/blog.gkym.top?from=mysslid

样式二

图片[3]-给网站右下角添加SSL国际安全认证图标显示教程-过客博客

方法：在页脚插入以下代码：

<!-- 网站右下角添加ssl安全认证图标 开始 https://blog.gkym.top/-->
<div id="cc-myssl-id"> <a rel="nofollow"  href="你的域名"><img src="https://static.myssl.com/res/images/myssl-id3.png"  style="max-height:50px;display:block;margin:0 auto"></a> </div>
<!-- 网站右下角添加ssl安全认证图标 结束 https://blog.gkym.top/-->

移动端和PC端显示效果：

图片[4]-给网站右下角添加SSL国际安全认证图标显示教程-过客博客

★说明：“你的域名”格式示例(子比主题):https://blog.gkym.top/?golink=https://myssl.com/blog.gkym.top?from=mysslid

样式三

图片[5]-给网站右下角添加SSL国际安全认证图标显示教程-过客博客

方法：在页脚插入以下代码：

<!-- 网站右下角添加ssl安全认证图标 开始 https://blog.gkym.top/-->
<div id="cc-myssl-id">
    <a rel="nofollow"  href="你的域名"><img src="https://static.myssl.com/res/images/myssl-id2.png"  style="max-height:50px;display:block;margin:0 auto"></a>
</div>
<!-- 网站右下角添加ssl安全认证图标 结束 https://blog.gkym.top/-->

移动端和PC端显示效果：

图片[6]-给网站右下角添加SSL国际安全认证图标显示教程-过客博客

★说明：“你的域名”格式示例(子比主题):https://blog.gkym.top/?golink=https://myssl.com/blog.gkym.top?from=mysslid

样式四

图片[7]-给网站右下角添加SSL国际安全认证图标显示教程-过客博客

方法：在页脚插入以下代码：

<!-- 网站右下角添加ssl安全认证图标 开始 https://blog.gkym.top/-->
<div id="cc-myssl-id"> <a rel="nofollow"  href="你的域名"><img src="https://static.myssl.com/res/images/myssl-id1.png"  style="max-height:50px;display:block;margin:0 auto"></a> </div>
<!-- 网站右下角添加ssl安全认证图标 结束 https://blog.gkym.top/-->

移动端和PC端显示效果：

图片[8]-给网站右下角添加SSL国际安全认证图标显示教程-过客博客

★说明：“你的域名”格式示例(子比主题):https://blog.gkym.top/?golink=https://myssl.com/blog.gkym.top?from=mysslid

进阶优化：让签章更适配你的网站

如果觉得默认样式不够完美，这些小技巧能帮你调整：

改大小：悬浮款改width和height数值（比如60px），页脚款改max-height（比如45px）；
调位置：悬浮款想往上移一点？把bottom:0改成bottom:20px；想靠左？把right:0改成left:0；
移动端适配：如果移动端显示变形，可把行内样式分离到CSS，用@media单独设置（例：手机端图标缩小到50px）。

文章版权归作者所有，未经允许请勿转载。

版权声明 1 本网站名称：过客博客-专注资源分享与网络教学
2 本站永久网址：https://blog.gkym.top/
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，本站采用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权，未标注转载均为本站原创，转载时请以链接形式注明文章出处。如有侵权、不妥之处，请联系站长删除。敬请谅解！
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END