网站LOGO
公爵书房 | 技术分享
页面加载中
2月24日
网站LOGO 公爵书房 | 技术分享
以指键之轻,承载知识之重
菜单
  • 公爵书房 | 技术分享
    以指键之轻,承载知识之重
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    给博客底部添加通用底部导航栏
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。

    给博客底部添加通用底部导航栏

    公爵 · 原创 ·
    笔记 · 子比美化wordpress
    共 10807 字 · 约 1 分钟 · 184
    本文最后更新于2023年09月02日,已经过了175天没有更新,若内容或图片失效,请留言反馈

    效果预览:

    只需要把下列代码压缩后放入 自定义底部HTML代码 里即可

    html 代码:
    <style type="text/css">@media screen and (max-width:768px){.pc-down{display:none;}}</style>
    <div class="pc-down">
        <script src="https://cdn.nesxc.com/js/down-icon.js"></script>
        <div class="footwaveline"><i style="background-image: url(https://cos.gjcloak.xyz/pigo/202302200813397.png?imageMogr2/format/webp/interlace/1/quality/80);width: 200px;height: 58px;position: fixed;bottom: 0;z-index: 110;background-size: 100%;"></i>
            <div class="footwavewave" style="background: url(https://cos.gjcloak.xyz/pigo/202303301140324.png?imageMogr2/format/webp/interlace/1/quality/0) 0 0 repeat-x;height: 3px;width: 100%;position: fixed;background-size: 10px 3px;z-index: 98;bottom: 30px;">
        </div>
    
        <div class="pc-down-text" style="width: 100%;height: 30px;position: fixed;bottom: 0;z-index: 97;box-shadow: 0 -2px 10px rgb(0 0 0 / 10%);background:#fff;">
            <nav class="pc-down-main" style="float: right;margin-right: 50px;margin-top: -7px;">
                <span class="pc-down-main-text" style="display: inline-block;margin-top: 10px;margin-left: 10px;font-size: 18px;">
                    <svg class="iconfont" aria-hidden="true"><use xlink:href="#icon-pengyouquan"></use></svg><a href="/links">友情链接</a></span>
                <span class="pc-down-main-text" style="display: inline-block;margin-top: 10px;margin-left: 10px;font-size: 18px;">
                    <svg class="iconfont" aria-hidden="true"><use xlink:href="#icon-liuyan"></use></svg><a href="/content">在线留言</a></span>
                <span class="pc-down-main-text" style="display: inline-block;margin-top: 10px;margin-left: 10px;font-size: 18px;">
                    <svg class="iconfont" aria-hidden="true"><use xlink:href="#icon-canbaozhuangtai"></use></svg><a href="https://v6.51.la/s/Kth3jvIRhezMegB">页面在线情况</a></span>
                <span class="pc-down-main-text" style="display: inline-block;margin-top: 10px;margin-left: 10px;font-size: 18px;">
                    <svg class="iconfont" aria-hidden="true"><use xlink:href="#icon-SSLzhengshu"></use></svg><a onclick="window.open('https://myssl.com/seal/detail?domain=blog.gjcloak.top','MySSL安全签章','height=800,width=470,top=0,right=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no')">SSL加密</a></span>
            </nav>
        </div>
    </div>

    其中

    html 代码:
    https://cos.gjcloak.xyz/blog/js/down-icon.js
    https://cos.gjcloak.xyz/pigo/202302200813397.png?imageMogr2/format/webp/interlace/1/quality/80 (原图看这:https://img.cdn.nesxc.com/pic/S1/63535dafcb3cc.png)
    LOGO:https://cos.gjcloak.xyz/pigo/202303301140324.png?imageMogr2/format/webp/interlace/1/quality/0

    可以更换成自己的链接

    down-icon.js 代码

    html 代码:
    window._iconfont_svg_string_3722327='<svg><symbol id="icon-liuyan" viewBox="0 0 1024 1024"><path d="M896 192H128c-35.3 0-64 28.7-64 64v512c0 35.3 28.7 64 64 64h576.6l191.6 127.7L896 832c35.3 0 64-28.7 64-64V256c0-35.3-28.7-64-64-64z" fill="#3D5AFE" ></path><path d="M640 512c0-125.4-51.5-238.7-134.5-320H128c-35.3 0-64 28.7-64 64v512c0 35.3 28.7 64 64 64h377.5c83-81.3 134.5-194.6 134.5-320z" fill="#536DFE" ></path><path d="M256 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#FFFF8D" ></path><path d="M512 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#FFFF00" ></path><path d="M768 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#FFEA00" ></path></symbol><symbol id="icon-SSLzhengshu" viewBox="0 0 1024 1024"><path d="M0 115.2m76.8 0l870.4 0q76.8 0 76.8 76.8l0 640q0 76.8-76.8 76.8l-870.4 0q-76.8 0-76.8-76.8l0-640q0-76.8 76.8-76.8Z" fill="#1989FA" opacity=".3" ></path><path d="M563.2 396.8m25.6 0l281.6 0q25.6 0 25.6 25.6l0 0q0 25.6-25.6 25.6l-281.6 0q-25.6 0-25.6-25.6l0 0q0-25.6 25.6-25.6Z" fill="#1989FA" ></path><path d="M563.2 512m25.6 0l281.6 0q25.6 0 25.6 25.6l0 0q0 25.6-25.6 25.6l-281.6 0q-25.6 0-25.6-25.6l0 0q0-25.6 25.6-25.6Z" fill="#1989FA" ></path><path d="M563.2 640m25.6 0l140.8 0q25.6 0 25.6 25.6l0 0q0 25.6-25.6 25.6l-140.8 0q-25.6 0-25.6-25.6l0 0q0-25.6 25.6-25.6Z" fill="#1989FA" ></path><path d="M294.4 422.4m-140.8 0a140.8 140.8 0 1 0 281.6 0 140.8 140.8 0 1 0-281.6 0Z" fill="#1989FA" ></path><path d="M261.1584 611.5328l-73.0624 126.5536-88.6912-51.2 69.0432-119.5776a191.3088 191.3088 0 0 0 92.7104 44.224z m162.816-47.4496l66.9696 116.0064-88.6784 51.2-69.6832-120.6912a191.4496 191.4496 0 0 0 91.392-46.5152z" fill="#1989FA" ></path></symbol><symbol id="icon-fuwuqi" viewBox="0 0 1024 1024"><path d="M891.0336 879.3088H134.6048c-11.3152 0-20.48-9.1648-20.48-20.48v-222.72h797.3376v222.72c0.0512 11.3152-9.1648 20.48-20.4288 20.48z" fill="#DCEDFF" ></path><path d="M891.0336 124.0576H134.6048c-25.3952 0-46.08 20.6848-46.08 46.08v688.64c0 25.3952 20.6848 46.08 46.08 46.08h756.3776c25.3952 0 46.08-20.6848 46.08-46.08V170.1376c0.0512-25.3952-20.6336-46.08-46.0288-46.08zM139.7248 418.4576h746.1376v192H139.7248v-192z m0-243.2h746.1376v192H139.7248v-192z m746.1888 678.4512H139.7248v-192h746.1376v192z" fill="#5B90EF" ></path><path d="M749.9776 267.9808m-31.3344 0a31.3344 31.3344 0 1 0 62.6688 0 31.3344 31.3344 0 1 0-62.6688 0Z" fill="#6491F2" ></path><path d="M749.9776 514.4576m-31.3344 0a31.3344 31.3344 0 1 0 62.6688 0 31.3344 31.3344 0 1 0-62.6688 0Z" fill="#6491F2" ></path><path d="M749.9776 757.7088m-31.3344 0a31.3344 31.3344 0 1 0 62.6688 0 31.3344 31.3344 0 1 0-62.6688 0Z" fill="#6491F2" ></path></symbol><symbol id="icon-canbaozhuangtai" viewBox="0 0 1024 1024"><path d="M869.181 128c45.105 0 81.676 36.571 81.676 81.676v324.267c-41.447-40.229-98.743-64.61-160.914-64.61-129.22 0-232.838 104.838-232.838 232.838 0 71.924 32.914 136.534 84.114 179.2H136.533c-45.104 0-81.676-36.571-81.676-81.676V209.676c0-45.105 36.572-81.676 81.676-81.676h732.648z m-74.362 402.286c96.305 0 173.105 78.019 173.105 173.104s-76.8 174.324-173.105 174.324-173.105-78.019-173.105-173.104 78.02-174.324 173.105-174.324z m108.495 115.81h-29.257c-2.438 0-4.876 1.218-6.095 2.437h-2.438l-92.648 86.553-48.762-45.105c-1.219-1.22-3.657-2.438-6.095-2.438h-30.476c-2.438 0-6.095 1.219-8.533 3.657-3.658 3.657-3.658 9.752 0 14.629l1.219 1.219 73.142 68.266c4.877 4.876 10.972 7.315 17.067 7.315h7.314c4.877-1.22 10.972-2.439 14.629-6.096l2.438-1.219 115.81-108.495c2.438-2.438 3.657-4.876 3.657-8.533 0-7.315-4.876-12.19-10.972-12.19zM252.343 463.237l-6.095 1.22c-7.315 2.437-15.848 4.875-23.162 7.313l-8.534 3.658-59.733 26.819c-15.848 7.314-26.819 23.162-28.038 40.228V563.2c0 8.533 6.095 14.629 13.41 15.848h326.704c7.315-1.22 13.41-6.096 13.41-13.41v-19.505c0-17.066-9.753-34.133-25.6-41.447l-2.438-1.22-60.953-28.037c-10.971-4.877-20.724-8.534-31.695-10.972l-4.876-1.219c-34.133-8.533-69.486-8.533-102.4 0z m51.2-264.533c-62.172 0-112.153 49.98-112.153 110.933 0 42.667 24.381 80.457 60.953 98.743 15.847 7.314 32.914 12.19 51.2 12.19s35.352-4.876 51.2-12.19c36.571-18.286 60.952-56.076 60.952-98.743 0-60.952-49.98-110.933-112.152-110.933z" fill="#1679FF" ></path></symbol><symbol id="icon-pengyouquan" viewBox="0 0 1024 1024"><path d="M217.061339 810.97913a425.984 425.984 0 1 0 602.421836-602.442865 425.984 425.984 0 1 0-602.421836 602.442865Z" fill="#00A0E9" ></path><path d="M602.9312 436.1728c0-54.528-0.1024-109.1072 0.1536-163.6352 0-5.5808-2.816-6.8096-7.0144-8.0384-33.2288-9.8304-67.1744-13.568-101.6832-10.496-21.4016 1.8944-42.4448 6.0928-63.6928 15.0016l171.9808 169.984c0.1024-0.4608 0.256-1.6384 0.256-2.816zM754.8416 425.0112c-57.9072 57.1392-117.3504 115.6608-174.6432 172.2368 1.024 0 1.6896 0 2.8672-0.1024h6.7584c53.0432 0 106.0352-0.1536 159.0784 0.2048 6.9632 0.0512 9.5232-2.6624 10.8032-8.6528 4.864-22.9376 9.5232-44.9536 10.5472-68.864 1.4336-32.256-3.328-63.6416-15.4112-94.8224zM429.6192 586.496c0 53.0432 0.1536 106.0864-0.2048 159.0784-0.0512 6.7072 2.6624 8.7552 8.0384 10.4448 22.6816 7.0656 45.9776 10.1376 69.5808 10.9056 32.0512 1.0752 63.2832-3.328 94.464-15.5648l-171.8784-173.7216v8.8576zM530.7904 400.384c-2.048-2.2016-3.6352-4.096-5.3248-5.8368-37.3248-37.3248-74.8032-74.5472-111.872-112.1792-4.9152-4.9664-8.3456-4.5568-13.6704-1.536-33.4848 18.8928-62.3104 43.2128-84.7872 74.4448-9.7792 13.568-20.736 30.0544-28.672 45.056 1.792 0.0512 2.7136 0 4.096 0.0512h240.2304zM743.7312 402.0224c4.096-4.096 2.304-7.0144 0.256-10.7008-23.1936-41.984-55.1424-75.5712-96.2048-100.3008-7.0656-4.2496-14.592-7.68-23.3984-12.2368v242.176c1.28-0.9728 2.304-1.6384 3.1232-2.4576 38.7072-38.8608 77.3632-77.7728 116.224-116.48zM446.464 424.1408c-54.5792 0.4608-109.1072 0.0512-163.6864-0.1536-5.6832 0-6.7584 3.2768-7.936 7.3216-7.4752 25.7024-11.4688 51.968-11.3152 78.7456 0.1536 29.184 4.7104 57.4976 15.9744 85.8624 56.3712-57.6512 112.384-114.7904 168.192-171.8784-0.3584 0.0512-0.8704 0.1024-1.2288 0.1024zM409.9072 741.1712V500.3776c-40.3456 40.704-81.152 81.8176-122.4192 123.4432 27.2896 50.9952 66.6624 91.392 122.4192 117.3504zM504.4736 622.1312c39.1168 39.1168 78.2336 78.1824 117.1968 117.4528 3.4304 3.4304 5.8368 2.56 9.216 0.6656 47.8208-26.5216 85.1456-63.3344 110.08-112.2816 1.1776-2.304 1.9456-4.864 3.328-8.448H502.7328c0.8704 1.3824 1.2288 2.0992 1.7408 2.6112z" fill="#FFFFFF" ></path></symbol></svg>',function(l){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var c,i,a,n,o,h=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}c=function(){var t,e=document.createElement("div");e.innerHTML=l._iconfont_svg_string_3722327,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?h(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),c()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(a=c,n=l.document,o=!1,s(),n.onreadystatechange=function(){"complete"==n.readyState&&(n.onreadystatechange=null,d())})}function d(){o(o=!0,a())}function s(){try{n.documentElement.doScroll("left")}catch(t){return void setTimeout(s,50)}d()}}(window);

    代码默认屏蔽手机端显示,你可以删除以下代码在手机端显示。

    html 代码:
    <style type="text/css">@media screen and (max-width:768px){.pc-down{display:none;}}</style>

    部分css是直接用的子比css,如果你的站点显示错误,可能需要你自己调试css!

    声明:本文由 公爵(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    发一条! 发一条!
    博客logo 公爵书房 | 技术分享 以指键之轻,承载知识之重 51统计 百度统计
    MOEICP 萌ICP备20226257号 ICP 赣ICP备2022001242号-1 ICP 闽公网安备35020502000606号 又拍云 本站由又拍云提供CDN加速/云存储服务

    🕛

    本站已运行 2 年 35 天 20 小时 17 分

    🌳

    自豪地使用 Typecho 建站,并搭配 MyLife 主题
    公爵书房 | 技术分享. © 2022 ~ 2024.
    网站logo

    公爵书房 | 技术分享 以指键之轻,承载知识之重
     
     
     
     
    壁纸