Cách chèn nút chia sẻ vào ảnh bài viết và hiển thị nút khi hover vào ảnh

Một thủ thuật khá hay nên được áp dụng vào Blog đó là chèn các nút chia sẻ Facebook và Google Plus vào ảnh bài viết và hiển thị nút khi hover vào ảnh giúp tăng sự tương tác của người đọc khi cần có thể chia sẻ bài viết ngay thay vì tìm các nút chia sẻ trên đầu hay cuối bài.

Ngoài ra khi click vào nút chia sẻ sẽ bật tab trình duyệt dạng popup ở ngay chính giữa màn hình rất chuyên nghiệp. Thủ thuật này mình thấy rất hay nên mình viết sẵn, nếu các bạn test thấy ok có thể thêm vào Blog của mình. Thủ thuật khá đơn giản không phải chèn trực tiếp các nút vào ảnh thay vào đó sẽ sử dụng script để chèn nút. Các bước thực hiện như sau:

1. Viết css cho nút chia sẻ

Chèn trong <b:skin>...</b:skin>

Copy

.post-body .tr-caption-container, .post-body .separator {

    position: relative;

    max-width: 800px;

    margin: 0 auto;

}

.post-body .tr-caption-container a, .post-body .separator a {

    display: inline-block;

}

.post-body .tr-caption-container img,  .post-body .separator img{

    max-width: 100%;

    display: block;

    margin: 0 auto;

    opacity: 1;

    transition: .5s ease;

}

.post-body .tr-caption-container:hover img, .post-body .separator:hover img {

    opacity: 0.3;

}

.post-body .tr-caption-container:hover .shareBtn, .post-body .separator:hover .shareBtn {

    opacity:1;

}

.post-body .shareBtn {

    transition: all 0.5s ease 0s;

    opacity: 0;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    -ms-transform: translate(-50%, -50%);

}

.post-body .share-fb, .post-body .share-gg {

    display: inline-block;

    width: 70px;

    height: 20px;

    cursor: pointer;

}

.post-body .share-fb {

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlWZc1QVKjrfAvEddIi6gYHhrTYmnrv_xUjiir-Ft2d4gILqUXswxabwuJpCCz1wTuf9sOnWhGPI9uLtiFTtU84cnRreNDdNwRhhr-E_RsLLWLK8425Bbzan-OEIwVfZsOP7xNtHuryEMR/s0/share-fb.gif) no-repeat;

}

.post-body .share-gg {

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHP3NrFOyK_ZxWSIYdXoAj2hHCTXRJ5LAV716Qe7xXTwHAx7b6rw83byeNIvXzbG6s017NGwmX7YP_zpJLEfZm4KUDFtOZ8JQrQBXa-OdQYzrVdwXVhLb5Bsf3Nrddh-aX7UT6HuruKZEU/s0/share-gg.gif) no-repeat;

}

2. Chèn link jquery trước thẻ </head>

Copy

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

Nếu template đã có sẵn link jquery thì không cần phải thêm

3. Chèn script ngay dưới thẻ <data:post.body/>

Thẻ này nằm trong <b:includable id='post' var='post'>...</b:includable>

Copy

<b:if cond='data:view.isPost'>

<script type='text/javascript'>

var blogID = &quot;<data:blog.blogId/>&quot;,

  postID = &quot;<data:post.id/>&quot;;

//<![CDATA[

$(function() {

  var fb = "https://www.blogger.com/share-post.g?blogID=" + blogID + "&postID=" + postID + "&target=facebook",

    gg = "https://www.blogger.com/share-post.g?blogID=" + blogID + "&postID=" + postID + "&target=googleplus";

  $('.post-body .separator,.post-body .tr-caption-container tr:first-child td').append('<div class="shareBtn"><span class="share-fb social-wrapper" data-href=' + fb + '></span><span class="share-gg social-wrapper" data-href=' + gg + '></span></div>')

  var postEl = document.getElementsByClassName('social-wrapper')

  var postCount = postEl.length;

  for (i = 0; i < postCount; i++) {

    postEl[i].addEventListener("click", function(url, w, h) {

      var url = this.getAttribute("data-href"),

        h = 450,

        w = 400,

        l = (screen.width / 2) - (w / 2),

        t = (screen.height / 2) - (h / 2);

      window.open(url, 'popUpWindow', 'height=' + h + ',width=' + w + ',left=' + l + ',top=' + t + ',resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')

    })

  }

})

//]]></script>

</b:if>

4. Test demo khi hover vào ảnh

Nội dung chính