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.

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0or4Lg0RFsBYU41b0cy-GLbUjZYpdXY43WyctKgJnpf-ctmiUpfDB7YgTEKcJ0jvoZb5Ok26Zigr5wA5LRFYyul3vvM47jcwux5h0_xYS6dNInRxJYE27H7o28IlSexbIf6ohKq7BWvn9/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0or4Lg0RFsBYU41b0cy-GLbUjZYpdXY43WyctKgJnpf-ctmiUpfDB7YgTEKcJ0jvoZb5Ok26Zigr5wA5LRFYyul3vvM47jcwux5h0_xYS6dNInRxJYE27H7o28IlSexbIf6ohKq7BWvn9/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9JXX9_SRGilgYqDz5ZLgKOE6uF6UlfvMm435Qw1KhV8EE4Ib8Q5Vy4g91775l1FDfE2VHWDhz4i79PR-bmHGoO04W6tQkniZFizwZ74rOIgKlLWqpBhWquoKTPraxDFMSmL8vF1bBDLjt/s320/snagit-2019.png" srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9JXX9_SRGilgYqDz5ZLgKOE6uF6UlfvMm435Qw1KhV8EE4Ib8Q5Vy4g91775l1FDfE2VHWDhz4i79PR-bmHGoO04W6tQkniZFizwZ74rOIgKlLWqpBhWquoKTPraxDFMSmL8vF1bBDLjt/w200-h112-p-k-no-nu/snagit-2019.png 200w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9JXX9_SRGilgYqDz5ZLgKOE6uF6UlfvMm435Qw1KhV8EE4Ib8Q5Vy4g91775l1FDfE2VHWDhz4i79PR-bmHGoO04W6tQkniZFizwZ74rOIgKlLWqpBhWquoKTPraxDFMSmL8vF1bBDLjt/w320-h180-p-k-no-nu/snagit-2019.png 320w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9JXX9_SRGilgYqDz5ZLgKOE6uF6UlfvMm435Qw1KhV8EE4Ib8Q5Vy4g91775l1FDfE2VHWDhz4i79PR-bmHGoO04W6tQkniZFizwZ74rOIgKlLWqpBhWquoKTPraxDFMSmL8vF1bBDLjt/w400-h225-p-k-no-nu/snagit-2019.png 400w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9JXX9_SRGilgYqDz5ZLgKOE6uF6UlfvMm435Qw1KhV8EE4Ib8Q5Vy4g91775l1FDfE2VHWDhz4i79PR-bmHGoO04W6tQkniZFizwZ74rOIgKlLWqpBhWquoKTPraxDFMSmL8vF1bBDLjt/w640-h360-p-k-no-nu/snagit-2019.png 640w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9JXX9_SRGilgYqDz5ZLgKOE6uF6UlfvMm435Qw1KhV8EE4Ib8Q5Vy4g91775l1FDfE2VHWDhz4i79PR-bmHGoO04W6tQkniZFizwZ74rOIgKlLWqpBhWquoKTPraxDFMSmL8vF1bBDLjt/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;

}