Tạo Nút Thả Tim Bài Viết Cho Blogspot
Cập Nhật :
Bạn thích nút "Like" trên Facebook nhưng lại không thích nhúng chúng vào website của mình vì code của FB load khá chậm. Sau đây là một giải pháp thay thế khá hoàn hảo cho bạn với Nút Love có kèm theo hệ thống thống kê lưu lại số lượt đã nhấn "Like" y như trên Facebook và kèm theo các hiệu ứng thả tim khá đẹp mắt.
Cách thực hiện
Style 1: Nút Love hình trái tim
1Vào Chủ đề >> Chỉnh sửa HTML và dán trước thẻ ]]></b:skin> đoạn CSS sau.lovebutton-iristips{position:relative;display:inline-block;text-align:center;min-width:40px;width:40px;min-height:40px;height:40px;margin-bottom:5px}
.lovebutton-iristips .inner{text-align:center;display:inline-table}
.lovebutton-iristips .inner a{padding:0!important}
.lovebutton-iristips .total{position:absolute;top:-10px;right:-10px;font-size:20px;display:inline;color:rgba(247,40,109,0.6);text-shadow:0 0 1px rgba(247,40,109,1)}
#heart{display:block;width:40px;height:40px;background:rgba(120,120,120,1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKbcAlfAQRmaW-h-18jA0ICKC5PrmTNb_NMEANmUXz8wNtU2cJ4zyxhV-VgTk0CdMYScaDrtZabQoMafrPkL4v0cA-eQPSY_eXMFENZPO8Laz2vJYlw54Rzr8iAYib9M9-D5OEU6JrHMwo/s300/iris-love.png) center no-repeat;background-size:100%;border-radius:50%;position:relative;margin:30% auto;box-shadow:0 0 0 0 rgba(247,40,109,1);transition:all 0.4s cubic-bezier(0.64,0.57,0.67,1.53),background-color 0.4s linear}
#heart:hover{animation:beat 1s infinite}
#heart.loved{background-color:rgba(247,40,109,1);box-shadow:0 0 0 5px rgba(247,40,109,1);transform:rotate(-3deg);animation:none}
#heart .ray{width:30px;height:8px;left:20px;top:18px;background:rgba(0,0,0,0);border-radius:4px;position:absolute;transform:rotate(0deg);transform-origin:0% 50%;transition:all 0.1s linear;overflow:hidden;text-align:right;pointer-events:none}
#heart .ray:before{content:"";position:absolute;top:0;right:10%;display:block;width:50%;border-radius:4px;height:8px;background:rgba(247,40,109,0)}
#heart .ray:nth-of-type(2){transform:rotate(45deg)}
#heart .ray:nth-of-type(3){transform:rotate(90deg)}
#heart .ray:nth-of-type(4){transform:rotate(135deg)}
#heart .ray:nth-of-type(5){transform:rotate(180deg)}
#heart .ray:nth-of-type(6){transform:rotate(225deg)}
#heart .ray:nth-of-type(7){transform:rotate(270deg)}
#heart .ray:nth-of-type(8){transform:rotate(315deg)}
#heart.loved .ray{width:50px}
#heart.loved .ray:before{width:10%;right:-10%;background:rgba(247,40,109,1);transition:all 0.4s cubic-bezier(0.085,0.890,0.600,0.115)}
@keyframes beat{0%{opacity:0.5}80%,100%{opacity:0.9}}2Tiếp tục dán đoạn JS bên dưới vào trước thẻ </body>
<script type='text/javascript'>
//<![CDATA[
$('#heart').on('click',function(){$(this).toggleClass('loved');});for (var i = 1; i <= 10; i++){ $('#heart').append('<span class=ray>')}
//]]>
</script><script src='https://sites.google.com/site/iristipsblogger/file/iris-reaction.js' type='text/javascript'></script>3Cuối cùng là dán đoạn code sau vào sau thẻ <data:post.body/> để nút love hiển thị sau mỗi bài viết.
<div class='lovebutton-iristips' expr:data-id='data:blog.blogId + "_" + data:post.id'>
<div class='inner'>
<a href='javascript:;'>
<div class='icon' id='heart'>
</div>
</a>
<div class='total'>...</div>
<div style='clear:both;'/>
</div>
</div>Style 2: Nút Love với hiệu ứng bắn tim
1Vào Chủ đề >> Chỉnh sửa HTML và dán trước thẻ ]]></b:skin> đoạn CSS bên dưới2Tìm đến thẻ </body> và dán đoạn JS sau vào trước thẻ đó
<script type='text/javascript'>
//<![CDATA[
const proto = document.querySelector('.heart');
const wrapper = document.querySelector('.wrapper');
function go() {
for (var i=1; i<15; i++) {
const heart = proto.cloneNode(true);
heart.addEventListener('animationend', () => heart.parentNode.removeChild(heart));
wrapper.append(heart);
}
}
const button = document.querySelector('.js-button');
button.addEventListener('click', () => {
go();
button.blur();
});
//]]>
</script><script src='https://sites.google.com/site/iristipsblogger/file/iris-reaction.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/iristipsblogger/file/heart-icons.js' type='text/javascript'></script>3Cuối cùng là dán đoạn code sau vào sau thẻ <data:post.body/> để nút love hiển thị sau mỗi bài viết.
<div class='lovebutton-iristips' expr:data-id='data:blog.blogId + "_" + data:post.id'>
<div class='inner'>
<a href='javascript:;'>
<div class='icon'>
<div style='display:none'>
<svg viewBox="0 0 32 29.6" class="heart">
<use xlink:href="#icon-heart"></use>
</svg>
</div>
<div class='wrapper'>
<button class="sg-button-secondary sg-button-secondary--small sg-button-secondary--active-inverse js-button">
<div class="sg-label sg-label--secondary sg-label--unstyled">
<div class="sg-label__icon">
<svg class="sg-icon sg-icon--x16 sg-icon--adaptive">
<use xlink:href="#icon-heart"></use>
</svg>
</div>
<div class="sg-label__text">Thank you</div>
</div>
</button>
</div>
</div>
</a>
<div class='total'>...</div>
<div style='clear:both;'/>
</div>
</div>
</div>Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!
Copyright © 2020
Chúc mừng, bạn là người đầu tiên!