Tạo Thanh Menu Support Cực Chất Cho Blogger Tạo Thanh Menu Support Cực Chất Cho Blogger | Drivers

Tạo Thanh Menu Support Cực Chất Cho Blogger


Xin chào các bạn đã ghé thăm Blog của mình cũng đã khá lâu rồi mình chưa viết bài cho Blog chủ yếu các bài khác do CTV đăng :)) nên hôm nay rảnh rỗi mình bỏ chút ít thời gian chia sẻ cho các bạn một code cực kì đơn giản nhưng lại có tác dụng lớn đối với Blog.

Hướng dẫn sử dụng :
- Đầu tiên các bạn đăng nhập vào Blogger - tìm Bố Cục - thêm tiện ích  - HTML/Java Script
- Chèn code này vào nhé :
<!-- Support --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"/> <style> .support-online{position:fixed;z-index:999;left:1%;bottom:27%} .support-online a{position:relative;margin:20px 10px;text-align:left;width:40px;height:40px} .support-online i{width:40px;height:40px;background:#43a1f3;color:#fff;border-radius:100%;font-size:20px;text-align:center;line-height:1.9;position:relative;z-index:999} .support-online a span{border-radius:2px;text-align:center;background:#67b634;padding:9px;display:none;width:180px;margin-left:10px;position:absolute;color:#fff;z-index:999;top:0;left:40px;font-size:14.5px;transition:all .2s ease-in-out 0;-moz-animation:headerAnimation .7s 1;-webkit-animation:headerAnimation .7s 1;-o-animation:headerAnimation .7s 1;animation:headerAnimation .7s 1} .support-online a:hover span{display:block} .support-online a{display:block} .support-online a span:before{content:&quot;&quot;;width:0;height:0;border-style:solid;border-width:10px 10px 10px 0;border-color:transparent #67b634 transparent transparent;position:absolute;left:-10px;top:10px} .kenit-alo-circle-fill{width:60px;height:60px;top:-10px;position:absolute;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;background-color:rgba(0,175,242,0.5);opacity:.75;right:-10px} .kenit-alo-circle{width:50px;height:50px;top:-5px;right:-5px;position:absolute;background-color:transparent;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid rgba(30,30,30,0.4);opacity:.1;border-color:#0089B9;opacity:.5} .support-online .btn-support{cursor:pointer} </style> <div class='support-online'> <div class='support-content'> <a class='call-now' href='tel:01208.021.643' rel='nofollow'> <i aria-hidden='true' class='fa fa-whatsapp'/> <div class='animated infinite zoomIn kenit-alo-circle'/> <div class='animated infinite pulse kenit-alo-circle-fill'/> <span>Hotline: 01208.021.643</span> </div></div></i></a> <a class='mes' href='https://www.facebook.com/messages/t/QuocRyo.Dz.Vn'> <i aria-hidden='true' class='fa fa-facebook-official'/> <span>Nhắn tin facebook</span> </i></a> <a class='zalo' href='http://zalo.me/0162.527.1155'> <i aria-hidden='true' class='fa fa-comment'/> <span>Zalo: 0162.527.1155</span> </i></a> <a class='sms' href='sms:0982802531'> <i aria-hidden='true' class='fa fa-weixin'/> <span>SMS: 01208.021.643</span> </i></a> </div> <a class='btn-support'> <i aria-hidden='true' class='fa fa-user-circle'/> <div class='animated infinite zoomIn kenit-alo-circle'/> <div class='animated infinite pulse kenit-alo-circle-fill'/> </div></div></i></a> </div> <script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ $('a.btn-support').click(function(e){ e.stopPropagation(); $('.support-content').slideToggle(); }); $('.support-content').click(function(e){ e.stopPropagation(); }); $(document).click(function(){ $('.support-content').slideUp(); }); }); //]]> </script> <!-- End Support -->
- Ấn Lưu và tận hưởng thành quả !

Lời kết :  Chúc các bạn thành công ^^

                                                                                 Bài Viết Bởi : Star Quốc - Nguồn Code : Blog Chia Sẻ Thủ Thuật

Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
Mọi chi tiết xin liên hệ:
Email: Naruto95qt@gmail.com
Star Quốc Blog
CHUYÊN MỤC

Comments của bạn (38 nhận xét)

  1. Trả lời
    1. Em gửi anh cái logo blog em để a thêm liên kết

      Xóa
    2. http://lh4.googleusercontent.com/-cDK0SCsv-tY/AAAAAAAAAAI/AAAAAAAAAK0/RKDYt1n9Nh0/s512-c/photo.jpg
      Nè <3

      Xóa
  2. Temp mới đẹp quá ô, qua xem blog tui với ^^

    Trả lờiXóa
  3. Thanks! Đỡ phải đi F12 blog khác :v

    Trả lờiXóa
  4. Cái theme này hay vãi nhỉ...ai code cái theme này vậy bác :D??
    MEOVUI.VN

    Trả lờiXóa
  5. Lúc bình viết bài này là a xài đàu tiên nè!

    Trả lờiXóa
  6. sao ko có liên kết của Hùng Coder vậy bạn ?

    www.hungcoder.com

    Trả lờiXóa
    Trả lời
    1. bạn ơi cho mình slot liên kết với https://www.kenhit.ga/

      Xóa

Hotline: 01208.021.643
Nhắn Tin Facebook Zalo: 01208.021.643
Liên hệ hợp tác & phát triển
Naruto95qt@gmail.com