Tiện ích cố định liên hệ dưới chân trang cho blogspot

Tiện ích contact fixed – Cố định liên hệ dưới chân trang template blogspotCố định liên hệ dưới chân trang đơn giản và hiệu quả. Bạn ko cần code chỉ cần copy và điền thông tin cho từng mục đã có 1 thanh liên hệ cố định dưới chân trang đẹp mắt.

Tất cả mã chèn dưới , nhớ đổi thông tin như: sđt, zalo, messenger nha mấy thím

+ CSS

                    @media (min-width: 561px) {

                        .devvn_toolbar {

                            position: fixed;

                            bottom: 10px;

                            left: 10px;

                            z-index: 99999999;

                        }

                        .devvn_toolbar ul {

                            list-style: none;

                            margin: 0;

                            padding: 0;

                        }

                        .devvn_toolbar ul li {

                            padding: 0;

                            margin: 0;

                            list-style: none;

                        }

                        .devvn_toolbar ul li a {

                            display: block;

                            width: 40px;

                            height: 40px;

                            border-radius: 50%;

                            -moz-border-radius: 50%;

                            -webkit-border-radius: 50%;

                            margin: 0 0 5px;

                            position: relative;

                            background-position: 50% 50%;

                            background-size: cover;

                        }

                        .devvn_toolbar ul li a br {

                            display: none;

                        }

                        .devvn_toolbar ul li a span {

                            font-weight: 400;

                            color: #ffffff;

                            position: absolute;

                            top: 50%;

                            left: calc(100% + 10px);

                            left: -webkit-calc(100% + 10px);

                            left: -moz-calc(100% + 10px);

                            margin-top: -12.5px;

                            font-size: 14px;

                            height: 25px;

                            line-height: 25px;

                            padding: 0 10px;

                            border-radius: 5px;

                            -moz-border-radius: 5px;

                            -webkit-border-radius: 5px;

                            white-space: nowrap;

                            opacity: 0;

                            visibility: hidden;

                        }

                        .devvn_toolbar ul li a:hover span{

                            opacity: 1;

                            visibility: visible;

                        }

                        .devvn_toolbar ul li a span:after {

                            right: 100%;

                            top: 50%;

                            border: solid transparent;

                            content: " ";

                            height: 0;

                            width: 0;

                            position: absolute;

                            pointer-events: none;

                            border-color: rgba(136, 183, 213, 0);

                            border-right-color: #ffffff;

                            border-width: 5px;

                            margin-top: -5px;

                        }

                        .devvn_toolbar ul li a img {

                            width: auto;

                            height: auto;

                            max-width: 29px;

                            max-height: 29px;

                            position: absolute;

                            top: 50%;

                            left: 50%;

                            transform: translate3d(-50%, -50%, 0);

                            -moz-transform: translate3d(-50%, -50%, 0);

                            -webkit-transform: translate3d(-50%, -50%, 0);

                        }

                    }

                    @media (max-width: 560px) {

                        body.has_devvn_toolbar {

                            padding-bottom: 50px;

                        }



                        .devvn_toolbar {

                            background: #fff;

                            display: inline-block;

                            width: 100%;



                            bottom: 0;

                            left: 0;

                            position: fixed;

                            z-index: 99999999;

                            height: auto;

                            padding: 0;

                            border-top: 0;



                            visibility: hidden;

                            opacity: 0;



                            transform: translate3d(0,120%,0);

                            -moz-transform: translate3d(0,120%,0);

                            -webkit-transform: translate3d(0,120%,0);



                            transition: all .3s linear;

                            -moz-transition: all .3s linear;

                            -webkit-transition: all .3s linear;

                        }



                        .show_contactfix .devvn_toolbar {

                            transform: translate3d(0,0,0);

                            -moz-transform: translate3d(0,0,0);

                            -webkit-transform: translate3d(0,0,0);

                            visibility: visible;

                            opacity: 1;

                        }



                       

                        .devvn_toolbar ul {

                            list-style: none;

                            padding: 0;

                            margin: 0;

                            display: table;

                            border-collapse: collapse;

                            table-layout: fixed;

                            width: 100%;

                        }



                        .devvn_toolbar ul li {

                            text-align: center;

                            display: table-cell;

                            vertical-align: top;

                        }



                        .devvn_toolbar ul li a {

                            display: inline-block;

                            width: 100%;

                            outline: none;

                            text-decoration: none;

                            padding: 5px 3px;

                        }



                        .devvn_toolbar ul li a span {

                            font-weight: 400;

                            color: #ffffff;

                            font-size: 3.5vw;

                        }



                        .devvn_toolbar ul li a img {

                            height: 6vw;

                            width: auto;

                        }



                        .woocommerce-checkout .devvn_toolbar {

                            display: none !important;

                        }

                    }


+ CODE

                <div class='devvn_toolbar'>

                    <ul>

                                                <style>

                            .devvn_toolbar ul li a#devvn_contact_1 span:after {

                                border-right-color: #008000;

                            }

                        </style>

                        <li>

                            <a href='javascript:callme(&apos;tel:0974858395&apos;)' id='devvn_contact_1' style='background-color: #008000;' title='Gọi điện'>

                                <img alt='' class='attachment-full size-full' height='41' src='https://3.bp.blogspot.com/-dEFENdPkA_4/XfyCAwkAvsI/AAAAAAAAZ8s/x-mn0POI1-oDCVQRw1FyubcWhUx499YvwCLcBGAsYHQ/s1600/icon-t1-white.png' width='41'/>

                                <span style='color: #ffffff; background-color: #008000;'>Gọi điện</span>

                            </a>

                        </li>

                                                <style>

                            .devvn_toolbar ul li a#devvn_contact_2 span:after {

                                border-right-color: #e60808;

                            }

                        </style>

                        <li>

                            <a href='javascript:callme(&apos;sms:0974858395&apos;)' id='devvn_contact_2' style='background-color: #e60808;' title='Nhắn tin'>

                                <img alt='' class='attachment-full size-full' height='48' src='https://2.bp.blogspot.com/-tn_FA0g7rTM/XfyB10EjxCI/AAAAAAAAZ8o/BY3xzMjKn2cNjZhFILvCdVqupxPExOizgCLcBGAsYHQ/s1600/icon-t2-white.png' width='56'/>

                                <span style='color: #ffffff; background-color: #e60808;'>Nhắn tin</span>

                            </a>

                        </li>

                                                <style>

                            .devvn_toolbar ul li a#devvn_contact_3 span:after {

                                border-right-color: #008fe5;

                            }

                        </style>

                        <li>

                            <a href='javascript:callme(&apos;https://zalo.me/doannguyennet&apos;)' id='devvn_contact_3' style='background-color: #008fe5;' title='Chat zalo'>

                                <img alt='' class='attachment-full size-full' height='60' src='https://2.bp.blogspot.com/-jYPTPZkTSlI/XfyAausHCJI/AAAAAAAAZ8c/2RKRrUPYm7oV8Qb8Fg5Rw8G3wBDal8F3wCLcBGAsYHQ/s1600/zalo.png' width='60'/>

                                <span style='color: #ffffff; background-color: #008fe5;'>Chat zalo</span>

                            </a>

                        </li>

                                                <style>

                            .devvn_toolbar ul li a#devvn_contact_4 span:after {

                                border-right-color: #3b5998;

                            }

                        </style>

                        <li>

                            <a href='javascript:callme(&apos;https://m.me/nguyenthanhdoanofficial&apos;)' id='devvn_contact_4' style='background-color: #3b5998;' title='Facebook'>

                                <img alt='' class='attachment-full size-full' height='50' src='https://3.bp.blogspot.com/-RJHxBsqj7GE/Xfx_iwiO8tI/AAAAAAAAZ8U/-0YuDZ5VD8kYDjbA5X8GeO334iEt_hZdwCLcBGAsYHQ/s1600/icon-t4-white.png' width='57'/>

                                <span style='color: #ffffff; background-color: #3b5998;'>Facebook</span>

                            </a>

                        </li>

                                            </ul>

                </div>


+ SCript

                <script>

                    function callme(url){

                        window.location = url;

                    }

                    (function ($) {

                        $(document).ready(function () {

                            function dcf_scroll_element(){

                                $top = jQuery(window).scrollTop();

                                if( $top &gt;= 50 &amp;&amp; !($(&#39;body&#39;).hasClass(&#39;show_contactfix&#39;)) ){

                                    $(&#39;body&#39;).addClass(&#39;show_contactfix&#39;);

                                }else if($top &lt; 50 &amp;&amp; $(&#39;body&#39;).hasClass(&#39;show_contactfix&#39;) ){

                                    $(&#39;body&#39;).removeClass(&#39;show_contactfix&#39;);

                                }

                            }

                            dcf_scroll_element();

                            $(window).scroll(function(){

                                dcf_scroll_element();

                            });

                        });

                    })(jQuery);

                </script>

Chúc bạn thành công !

Đăng nhận xét

Tin liên quan