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

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 !
0 Nhận xét