Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 26
        • Thủ thuật Blogspot 81
          • Tiện ích Blogspot 31
            Máy tính
            • Phần mềm 45
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 43

                    Hướng dẫn tạo nút chia sẻ bài viết với hiệu ứng popup

                    Tác dụng của tạo nút chia sẻ bài viết với hiệu ứng popup thứ nhất không bị plugin quảng cáo chặn hiển thị, thứ hai tiết kiệm diện tích khi đặt nút chia sẻ vào vị trí nào đó. Thủ thuật gồm 3 bước tạo style cho nút, chèn jquery và đặt nút vào vị trí muốn hiển thị.

                    1. Tạo style cho nút chia sẻ chèn trong <b:skin>

                    Copy
                    .dropdown-container {
                        position: absolute;
                        background: #ffffff;
                        display: none;
                        z-index: 10;
                        border: 1px solid #e5e5e5;
                        border-radius: 2px;
                        max-width: 190px;
                        width: 160px;
                        margin-top: 5px;
                    }
                    .dropdown-container_sub1 {
                        background-image: url(//i.imgur.com/d0NQI5b.png);
                        background-position: center top;
                        background-repeat: no-repeat;
                        height: 12px;
                        left: 20px;
                        position: absolute;
                        top: -9px;
                        width: 20px;
                    }
                    .dropdown-container li {
                        list-style:none
                    }
                    .dropdown-container li a {
                        font-size: 15px;
                        color: #333333;
                        display: block;
                        font-weight: 400;
                        padding: 8px 15px;
                        text-transform: none;
                    }
                    .dropdown-container li a:hover {
                        background-color:#edf4ff
                    }
                    .dropdown svg {
                        height: 24px;
                        width: 24px;
                        min-width: 24px;
                        fill: #707070;
                    }
                    .fb-share:before,.tw-share:before,.ma-share:before,.go-share:before,.rss-follow:before {
                        font-family:fontawesome;
                        margin-right:10px;
                        vertical-align:text-bottom;
                        text-align:center;
                        color:#fff;
                        height:20px;
                        line-height:20px;
                        width:20px;
                        float:left;
                        font-size:14px
                    }
                    .fb-share:before {
                        content:'\f09a';background:#5a7abf
                    }
                    .tw-share:before {
                        content:'\f099';background:#19BFE5
                    }
                    .go-share:before{
                        content:'\f0d5';background:#D64136
                    }
                    .ma-share:before{
                        content:'\f0e0';background:#23A215
                    }

                    2. Chèn js trước thẻ đóng </body>

                    Copy
                    <script>
                    //<![CDATA[
                    $(document).ready(function() {
                       $('.dropdown').each(function() {
                         var $dropdown = $(this);
                         $(".dropdown-link", $dropdown).click(function(e) {
                           e.preventDefault();
                           $div = $(".dropdown-container", $dropdown);
                           $div.toggle();
                           $(".dropdown-container").not($div).hide();
                           return false;
                         });
                       });
                       $('html').click(function() {
                         $(".dropdown-container").hide();
                       });
                    });
                    //]]>
                    </script>

                    3. Chèn nút chia sẻ vào vị trí muốn hiển thị

                    Copy
                    <div class='dropdown'>
                      <a class='dropdown-link' title='Gửi nội dung này đến bạn bè hoặc đăng trên dòng thời gian của bạn'>
                        <svg><use xlink:href='/responsive/sprite_v1_6.css.svg#ic_share_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/></svg>
                      </a>
                      <div class='dropdown-container'>
                        <ul>
                          <li class='dropdown-container_sub1'/>
                          <li><a class='fb-share' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>Facebook</a></li>
                          <li><a class='tw-share' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>Twitter</a></li>
                          <li><a class='go-share' expr:href='data:post.sharePostUrl + &quot;&amp;target=googleplus&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' target='_blank' title='Chia sẻ với Google+'>Google+</a></li>      
                          <li><a class='ma-share' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' target='_blank' title='Gửi Email'>Email</a></li>
                        </ul>
                      </div>
                    </div>

                    Kiểm tra xem template đã có thư viện font-awesome chưa nếu chưa có chèn link bên dưới trong thẻ <head>

                    Copy
                    <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

                    Xem demo tại trang chủ của Blog mình. Chấm hết bài!!!
                    Nội dung chính
                      Bài đăng mới hơn Bài đăng cũ hơn