Chia sẻ tiện ích liên hệ cho blogspot cố định bên trái

Posted on by Admin
[blog]
Chia sẻ tới các bạn mẫu tiện ích liên hệ cho blogspot, tiện ích sẽ nằm cố định bên trái màn hình blog, tiện ích liên hệ gồm: Gọi điện, Zalo, Messenger. Phù hợp cho các trang blogspot bán hàng.

Mẫu tiện ích đơn giản chỉ gồm CSS và HTML

3 biểu tưởng icon liên hệ:

Chia sẻ tiện ích liên hệ cho blogspot cố định bên trái
Khi chúng ta di chuyển chuột vô sẽ hiển thị tên của từng icon

Chia sẻ tiện ích liên hệ cho blogspot cố định bên trái


Các bạn copy toàn bộ CSS và HTML bên dưới dán dưới thẻ mở <body> hoặc trước thẻ đóng </body>  đều được.

<style>

.the-article-tools{top:200px;z-index:1000;position:fixed;margin-left:0;width:43px;left:0}

.the-article-tools li{width:43px;height:43px;display:block;cursor:pointer;font-size:16px;line-height:46px;text-align:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative}

.the-article-tools li a,.the-article-tools li button{color:#FFF;display:block;width:100%;height:100%;border:none;outline:none;box-shadow:none}

.the-article-tools li span.label{display:none;height:30px;line-height:30px;border-top-right-radius:15px;border-bottom-right-radius:15px;position:absolute;left:60px;top:7px;white-space:nowrap;padding:0 15px 0 6px;background:#555;color:#FFF}

.the-article-tools li span.label:before{content:"";top:0;left:-14px;position:absolute;display:block;width:0;height:0;border-top:15px solid transparent;border-right:15px solid #555;border-bottom:15px solid transparent}

.the-article-tools li:hover span.label{display:block}

.the-article-tools li.btnZalo{background:#018fe5}

.the-article-tools li.btnZalo .ti-zalo{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKuHb0GKHKyunI1unhky0O-Em1x7FXCvRVN3f5R5Ov_1q86cwNIYlLJ4sbu0lsZz_7lTSX6wO8jSt5EO1WWsXu3j86ucum6DUXD-kdPAbdtWYc8HuDH3SimB-y7vVkBJC-EtMojIkIumm4/s1600/zalo.png) no-repeat 50% 50%;width:20px;height:20px;display:inline-block;background-size:20px;vertical-align:middle;margin-right:2px;position:relative;top:-2px}

.the-article-tools li.btnZalo span.label{background:#018fe5;color:#FFF}

.the-article-tools li.btnZalo span.label:before{border-right-color:#018fe5}

.the-article-tools li.btnFacebook{background:#306199}

.the-article-tools li.btnFacebook .ti-facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFT1S4Z0VFzRNN626OTeXc0r8wedbYYxvOaFUOD5UtvRxjs3623bQnrYeug2wHsQrufJWp4gGgm3Af4NeoW5OpHcL6DeGxtUn2y98Wf8IiC2vNmT3N0URupICJ-xfsr9QVFxXjMbmTmXzc/s320/messenger.png) no-repeat 50% 50%;width:20px;height:20px;display:inline-block;background-size:20px;vertical-align:middle;margin-right:2px;position:relative;top:-2px}

.the-article-tools li.btnFacebook span.label{background:#306199;color:#FFF}

.the-article-tools li.btnFacebook span.label:before{border-right-color:#306199}

.the-article-tools li.btnphone{background:#1eaf8b}

.the-article-tools li.btnphone .ti-phone{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhddN2u8liaB-jDpyR5ovQJrx2nVM_16utDhW1cmKuIF6vmA2JK0RqiIHBxewvt8P7An_vbfzsudXqHvqj-EuAaWrKQNjkvG0WKfHsm9xnHjbsrOMp0yo0GGXEUFYbOL75wJ-eRa5nBchdb/s320/icon-phone.png) no-repeat 50% 50%;width:20px;height:20px;display:inline-block;background-size:20px;vertical-align:middle;margin-right:2px;position:relative;top:-2px}

.the-article-tools li.btnphone span.label{background:#1eaf8b;color:#FFF}

.the-article-tools li.btnphone span.label:before{border-right-color:#1eaf8b}

</style>

<ul class='the-article-tools'>

    <li class='btnZalo zalo-share-button'>

        <a href='http://zalo.me/xxxxxxx' target='_blank' title='Zalo'>

            <span class='ti-zalo'></span>

        </a>

        <span class='label'>Zalo</span>

    </li>

    <li class='btnFacebook'>

        <a href='https://www.messenger.com/t/xxxxxx' target='_blank' title='Messenger'>

            <span class='ti-facebook'></span>

        </a>

        <span class='label'>Messenger</span>

    </li>

    <li class='btnphone'>

        <a href='tel:11111111111' title='Gọi điện'>

            <span class='ti-phone'></span>

        </a>

        <span class='label'>Hotline</span>

    </li>

</ul>

Sau khi các bạn copy dán xong thì sửa lại số điện thoại, facebook, zalo cho phù hợp.

Cập nhật thêm icon telegram theo yêu cầu, các bạn lấy code dưới

Chia sẻ tiện ích liên hệ cho blogspot cố định bên trái


<style>

.the-article-tools{top:200px;z-index:1000;position:fixed;margin-left:0;width:43px;left:0}

.the-article-tools li{width:43px;height:43px;display:block;cursor:pointer;font-size:16px;line-height:46px;text-align:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative}

.the-article-tools li a,.the-article-tools li button{color:#FFF;display:block;width:100%;height:100%;border:none;outline:none;box-shadow:none}

.the-article-tools li span.label{display:none;height:30px;line-height:30px;border-top-right-radius:15px;border-bottom-right-radius:15px;position:absolute;left:60px;top:7px;white-space:nowrap;padding:0 15px 0 6px;background:#555;color:#FFF}

.the-article-tools li span.label:before{content:&quot;&quot;;top:0;left:-14px;position:absolute;display:block;width:0;height:0;border-top:15px solid transparent;border-right:15px solid #555;border-bottom:15px solid transparent}

.the-article-tools li:hover span.label{display:block}

.the-article-tools li.btnZalo{background:#018fe5}

.the-article-tools li.btnZalo .ti-zalo{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKuHb0GKHKyunI1unhky0O-Em1x7FXCvRVN3f5R5Ov_1q86cwNIYlLJ4sbu0lsZz_7lTSX6wO8jSt5EO1WWsXu3j86ucum6DUXD-kdPAbdtWYc8HuDH3SimB-y7vVkBJC-EtMojIkIumm4/s1600/zalo.png) no-repeat 50% 50%;width:20px;height:20px;display:inline-block;background-size:20px;vertical-align:middle;margin-right:2px;position:relative;top:-2px}

.the-article-tools li.btnZalo span.label{background:#018fe5;color:#FFF}

.the-article-tools li.btnZalo span.label:before{border-right-color:#018fe5}

.the-article-tools li.btnFacebook{background:#306199}

.the-article-tools li.btnFacebook .ti-facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFT1S4Z0VFzRNN626OTeXc0r8wedbYYxvOaFUOD5UtvRxjs3623bQnrYeug2wHsQrufJWp4gGgm3Af4NeoW5OpHcL6DeGxtUn2y98Wf8IiC2vNmT3N0URupICJ-xfsr9QVFxXjMbmTmXzc/s320/messenger.png) no-repeat 50% 50%;width:20px;height:20px;display:inline-block;background-size:20px;vertical-align:middle;margin-right:2px;position:relative;top:-2px}

.the-article-tools li.btnFacebook span.label{background:#306199;color:#FFF}

.the-article-tools li.btnFacebook span.label:before{border-right-color:#306199}

.the-article-tools li.btnphone{background:#1eaf8b}

.the-article-tools li.btnphone .ti-phone{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhddN2u8liaB-jDpyR5ovQJrx2nVM_16utDhW1cmKuIF6vmA2JK0RqiIHBxewvt8P7An_vbfzsudXqHvqj-EuAaWrKQNjkvG0WKfHsm9xnHjbsrOMp0yo0GGXEUFYbOL75wJ-eRa5nBchdb/s320/icon-phone.png) no-repeat 50% 50%;width:20px;height:20px;display:inline-block;background-size:20px;vertical-align:middle;margin-right:2px;position:relative;top:-2px}

.the-article-tools li.btnphone span.label{background:#1eaf8b;color:#FFF}

.the-article-tools li.btnphone span.label:before{border-right-color:#1eaf8b}

.the-article-tools li.btntelegram{background:#656565}

.the-article-tools li.btntelegram .ti-telegram{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSQLMR11C9fNsr0NaiDijr1uSpp2Faf9uB_QxgVKmqoac9KZKWasD05hvG0yg2RAOdJZL4WRfi8eVa7CndPaDkt2iTJNY8-IJpaEmx4JiBaRpArDbecx6zRd9UJsrTuRVB0nfP7RnsF1WF/s320/telegram.png) no-repeat 50% 50%;width:20px;height:20px;display:inline-block;background-size:20px;vertical-align:middle;margin-right:2px;position:relative;top:-2px}

.the-article-tools li.btntelegram span.label{background:#656565;color:#FFF}

.the-article-tools li.btntelegram span.label:before{border-right-color:#656565}

</style>

<ul class='the-article-tools'>

    <li class='btnZalo zalo-share-button'>

        <a href='http://zalo.me/xxxxxxx' target='_blank' title='Zalo'>

            <span class='ti-zalo' />

        </a>

        <span class='label'>Zalo</span>

    </li>

    <li class='btnFacebook'>

        <a href='https://www.messenger.com/t/xxxxxx' target='_blank' title='Messenger'>

            <span class='ti-facebook' />

        </a>

        <span class='label'>Messenger</span>

    </li>

    <li class='btnphone'>

        <a href='tel:11111111111' title='Gọi điện'>

            <span class='ti-phone' />

        </a>

        <span class='label'>Hotline</span>

    </li>

    <li class='btntelegram'>

        <a href='https://telegram.org/' target='_blank' title='Telegram'>

            <span class='ti-telegram' />

        </a>

        <span class='label'>Telegram</span>

    </li>

</ul>
 [/blog]

Bài viết cùng chủ đề: