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://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;

}

2
Hãy để lại một câu trả lời bạn muốn

avatar
250
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Nam ViệtNgoc Recent comment authors
  Subscribe  
Mới nhất Lâu đời nhất
Thông báo
Nam Việt
Khách

hay bác

Ngoc
Khách

Bài viết hay

Scroll to top
0353.456.495