Joe主题手机网页底部添加tap栏教程

想来很多网友都在寻找 Joe 主题底部 tap 栏的代码 😀
废话不多说，直接看示例图+代码

效果图

代码

<link rel="stylesheet" href="https://blog.caoor.cn/joe.css">

    <div class="footer-tabbar">                    <a class="tabbar-item" title="首页" href="/" target="_self">

                <icon >

                    <svg class="icon svg" aria-hidden="true">

                        <use xlink:href="#icon-home-color"></use>

                    </svg>

                </icon>

                <text>首页</text>

            </a>

                    <a class="tabbar-item" title="APP" href="/archives/230.html" target="_self">

                <icon >

                    <svg class="icon svg" aria-hidden="true">

                        <use xlink:href="#icon-tag-color"></use>

                    </svg>

                </icon>

                <text>APP</text>

            </a>

                    <a class="tabbar-item" title="发布文章" href="/user/login?referer=%2Fadmin%2Fwrite-post.php" target="_self">

                <icon style="font-size:46px;">

                    <svg class="icon svg" aria-hidden="true">

                        <use xlink:href="#icon-add-color"></use>

                    </svg>

                </icon>

                <text>发布文章</text>

            </a>

                    <a class="tabbar-item" title="消息" href="/user/login?referer=%2Fadmin%2Fmanage-comments.php" target="_self">

                <icon >

                    <svg class="icon svg" aria-hidden="true">

                        <use xlink:href="#icon-msg-color"></use>

                    </svg>

                </icon>

                <text>消息</text>

            </a>

                    <a class="tabbar-item" title="我的" href="/user/login?referer=%2Fadmin%2Fprofile.php" target="_self">

                <icon >

                    <svg class="icon svg" aria-hidden="true">

                        <use xlink:href="#icon-user-color-2"></use>

                    </svg>

                </icon>

                <text>我的</text>

            </a>

            </div>

使用教程：将代码插入主题设置的插入代码→自定义底部HTML代码在　自定义底部HTML代码中插入代码，即可