Chuyên mục

Blogger
  • Blogger Template 5
    • Seo Blogspot 29
      • Thiết kế Blogspot 23
        • Thủ thuật Blogspot 64
          • Tiện ích Blogspot 27
            Máy tính
            • Phần mềm 43
              • Sửa lỗi Windows 18
                • Thủ thuật Windows 78
                  • Cài đặt Windows 41

                    Thêm hiệu ứng ẩn hiện nút chia sẻ Facebook khi hover vào ảnh bài viết ngoài trang index

                    Tác dụng khi thêm hiệu ứng ẩn hiện nút chia sẻ Facebook khi hover vào ảnh bài viết ngoài các trang index giúp người đọc thêm lựa chọn nhanh đăng bài viết lên Facebook. Ngoài ra cách làm này chỉ thêm liên kết chia sẻ cùng với ảnh hiển thị bài viết nên không ảnh hưởng đến tốc độ tải trang.
                    Thêm hiệu ứng ẩn hiện nút chia sẻ Facebook khi hover vào ảnh bài viết ngoài trang index
                    Cách làm như sau:

                    1. Kiểm tra HTML ảnh trong template, vì mỗi template sử dụng các class khác nhau nên bạn phải tìm chính xác đoạn code hiển thị ảnh. Mình ví dụ với đoạn code HTML sau của template Blog mình:

                    Copy
                    <b:if cond='data:post.featuredImage'>
                    <!--Nếu bài viết có ảnh lấy ảnh đầu tiên của bài viết-->
                      <div class='post_thumb'>
                        <img expr:alt='data:post.title' expr:src='data:post.featuredImage' expr:srcset='sourceSet(data:post.featuredImage, [200,320,400,640,1600], &quot;16:9&quot;)' sizes='(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)'/>
                        <div class='hover'>
                          <a expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url.canonical' onclick='javascript:window.open(this.href, &apos;&apos;,&apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=550&apos;);return false;' rel='nofollow' target='_blank' title='Chia sẻ với Facebook'>Chia sẻ</a>
                        </div>
                      </div>
                    <b:else/>
                    <!--Nếu bài viết không có ảnh sử dụng ảnh thay thế-->
                      <div class='post_thumb'>
                        <img expr:alt='data:post.title' expr:srcset='sourceSet(&quot;https://4.bp.blogspot.com/-00O66C-eBQs/W0IcokXSnOI/AAAAAAAAL_k/g4KtDm7SkQsoe7_G0vZ_C_nU0Gf_-kyVQCLcBGAs/s1600/safe_image.png&quot;, [200,320,400,640,1600], &quot;16:9&quot;)' sizes='(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)' src='https://4.bp.blogspot.com/-00O66C-eBQs/W0IcokXSnOI/AAAAAAAAL_k/g4KtDm7SkQsoe7_G0vZ_C_nU0Gf_-kyVQCLcBGAs/s320/safe_image.png'/>
                        <div class='hover'>
                          <a expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url.canonical' onclick='javascript:window.open(this.href, &apos;&apos;,&apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=550&apos;);return false;' rel='nofollow' target='_blank' title='Chia sẻ với Facebook'>Chia sẻ</a>
                        </div>
                      </div>
                    </b:if>

                    Thay <b:if cond='data:post.featuredImage'> bằng <b:if cond='data:post.firstImageUrl'> nếu là widget Blog1 version="1"

                    Khi hiển thị ngoài trang index ta có đoạn HTML hiển thị ảnh ví dụ như sau:

                    Copy
                    <div class="post_thumb">
                      <img alt="Snagit 2019 cập nhật nhiều tính năng mới đã tốt nay còn tốt hơn" sizes="(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)" src="https://2.bp.blogspot.com/-DkZk9M9hXbE/W-pAyveL54I/AAAAAAAANYQ/dg0XoLLdgnIgQ1WvEHc0Zys1oStEccyTQCLcBGAs/s320/snagit-2019.png" srcset="https://2.bp.blogspot.com/-DkZk9M9hXbE/W-pAyveL54I/AAAAAAAANYQ/dg0XoLLdgnIgQ1WvEHc0Zys1oStEccyTQCLcBGAs/w200-h112-p-k-no-nu/snagit-2019.png 200w, https://2.bp.blogspot.com/-DkZk9M9hXbE/W-pAyveL54I/AAAAAAAANYQ/dg0XoLLdgnIgQ1WvEHc0Zys1oStEccyTQCLcBGAs/w320-h180-p-k-no-nu/snagit-2019.png 320w, https://2.bp.blogspot.com/-DkZk9M9hXbE/W-pAyveL54I/AAAAAAAANYQ/dg0XoLLdgnIgQ1WvEHc0Zys1oStEccyTQCLcBGAs/w400-h225-p-k-no-nu/snagit-2019.png 400w, https://2.bp.blogspot.com/-DkZk9M9hXbE/W-pAyveL54I/AAAAAAAANYQ/dg0XoLLdgnIgQ1WvEHc0Zys1oStEccyTQCLcBGAs/w640-h360-p-k-no-nu/snagit-2019.png 640w, https://2.bp.blogspot.com/-DkZk9M9hXbE/W-pAyveL54I/AAAAAAAANYQ/dg0XoLLdgnIgQ1WvEHc0Zys1oStEccyTQCLcBGAs/w1600-h900-p-k-no-nu/snagit-2019.png 1600w">
                      <div class="hover">
                        <a href="https://www.facebook.com/sharer.php?u=https://www.vietblogdao.com/2018/11/sangit-2019-cap-nhat-nhieu-tinh-nang-moi-da-tot-nay-con-tot-hon.html" onclick="javascript:window.open(this.href, '','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=550');return false;" rel="nofollow" target="_blank" title="Chia sẻ với Facebook">Chia sẻ</a>
                      </div>
                    </div>

                    Đọc thêm:
                    2. Thêm hiệu ứng css khi hover vào ảnh

                    Copy
                    .post_thumb {
                        display: block;
                        position: relative;
                    }
                    .post_thumb img {
                        height: 100%;
                        width: 100%;
                    }
                    .post_thumb .hover {
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        height: 100%;
                        width: 100%;
                        opacity: 0;
                        transition: .5s ease;
                        background-color: rgba(0,0,0,.85);
                    }
                    .post_thumb:hover .hover {
                        opacity:1
                    }
                    .post_thumb .hover a {
                        color: #ffffff;
                        font-size: 15px;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        -webkit-transform: translate(-50%,-50%);
                        -ms-transform: translate(-50%,-50%);
                        transform: translate(-50%,-50%);
                        text-align: center;
                    }
                    Nội dung chính