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

Posted on By Admin
Tiện ích cố định liên hệ dưới chân trang cho blogspot
20
thg 12
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 !
Admin
Admin

Liên hệ tác giả trên Facebook: fb.com/nguyenthanhdoanofficial
Liên hệ tác giả qua Email: nguyenthanhdoan1992@gmail.com

0 Nhận xét

Cùng chuyên mục