Nút Like - sau mỗi Bài viết trên Blogger với hiệu ứng đẹp mắt

⛨ Nút Love hình trái tim Nút hình trái tim sau bài viết Demo filter_1 Vào Chủ đề >> Chỉnh sửa HTML và dán trước thẻ ]]></b:sk...

thủ thuật blog

⛨ Nút Love hình trái tim

Nút hình trái tim sau bài viết

Demo

Và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/AVvXsEhrxtKrDsKDNR9aCLYAOdDtCq08vb1QBWKMGFKrSEFkPM1uuV8gtwlqspNBAQhpzoi7YV2bjyrVhNrw1lUtxrIIfsZVnPHIkZrIDNINcMnJYtDbejB8wnwXItcOAgTlpBenNC1b8oNynLU/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}}

Tiế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>

Cuố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 + &quot;_&quot; + 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>

⛨ Nút Love kiểu bung tim

Nút hình trái tim sau bài viết

Demo

Và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;margin:20px 0;}
.lovebutton-iristips .inner{text-align:center;display:inline-table}
.lovebutton-iristips .total{position:absolute;top:-20px;right:-10px;font-size:20px;display:inline;color:rgba(247,40,109,0.6);text-shadow:0 0 1px rgba(247,40,109,1)}
.wrapper{position:relative}
.heart{display:inline-flex;height:25px;position:absolute;left:-5px;top:-15px;z-index:8;fill:#ff796b;stroke:none;display:inline-flex;opacity:0}
.heart:nth-child(1){animation:boom1 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom1{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(54px,-86px);opacity:0}}
.heart:nth-child(2){animation:boom2 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom2{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(128px,28px);opacity:0}}
.heart:nth-child(3){animation:boom3 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom3{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(159px,-140px);opacity:0}}
.heart:nth-child(4){animation:boom4 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom4{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(104px,0px);opacity:0}}
.heart:nth-child(5){animation:boom5 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom5{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(-76px,15px);opacity:0}}
.heart:nth-child(6){animation:boom6 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom6{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(-7px,-138px);opacity:0}}
.heart:nth-child(7){animation:boom7 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom7{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(51px,-27px);opacity:0}}
.heart:nth-child(8){animation:boom8 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom8{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(-91px,-137px);opacity:0}}
.heart:nth-child(9){animation:boom9 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom9{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(139px,-131px);opacity:0}}
.heart:nth-child(10){animation:boom10 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom10{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(20px,-17px);opacity:0}}
.heart:nth-child(11){animation:boom11 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom11{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(-12px,-77px);opacity:0}}
.heart:nth-child(12){animation:boom12 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom12{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(63px,-121px);opacity:0}}
.heart:nth-child(13){animation:boom13 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom13{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(13px,-58px);opacity:0}}
.heart:nth-child(14){animation:boom14 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom14{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(-16px,-67px);opacity:0}}
.heart:nth-child(15){animation:boom15 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom15{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(-47px,-111px);opacity:0}}
.sg-icon{fill:#fff;max-width:24px;max-height:24px;height:24px;width:24px}
.sg-label{display:inline-block;position:relative;overflow:hidden;text-overflow:ellipsis;line-height:1.5rem;min-height:1.5rem;margin:0;overflow:visible;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.sg-label__text,.sg-label__number{font-size:.75rem;min-height:.75rem;line-height:.875rem;line-height:1 !important;overflow:visible;display:block;color:#020a1b;font-weight:700;margin-right:6px}.sg-label__text:last-child,.sg-label__number:last-child{margin-right:0}.sg-label__icon{width:16px;height:16px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin-right:6px}.sg-label__icon:last-child{margin-right:0}.sg-label__icon--align-top{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}.sg-label--emphasised{text-transform:uppercase;letter-spacing:0}.sg-label--secondary .sg-label__text,.sg-label--secondary .sg-label__number{color:#434e66}.sg-label--small{min-height:0}.sg-label--small .sg-label__text,.sg-label--small .sg-label__number{font-size:.625rem;min-height:.625rem;line-height:.625rem;line-height:1 !important;overflow:visible;margin-right:4px}.sg-label--small .sg-label__text:last-child,.sg-label--small .sg-label__number:last-child{margin-right:0}.sg-label--small .sg-label__icon{margin-right:4px;width:14px;height:14px}.sg-label--large .sg-label__text,.sg-label--large .sg-label__number{font-size:1.125rem;min-height:1.125rem;line-height:1.125rem;line-height:1 !important;overflow:visible}.sg-label--large .sg-label__text:last-child,.sg-label--large .sg-label__number:last-child{margin-right:0}.sg-label--large .sg-label__icon{margin-right:12px;width:24px;height:24px}.sg-label--unstyled .sg-label__text,.sg-label--unstyled .sg-label__number{color:inherit}
.sg-icon--x16{max-width:16px;max-height:16px;height:16px;width:16px}.sg-icon--x14{max-width:14px;max-height:14px;height:14px;width:14px}.sg-icon--x10{max-width:10px;max-height:10px;height:10px;width:10px}.sg-icon--x8{max-width:8px;max-height:8px;height:8px;width:8px}.sg-icon--adaptive{fill:inherit}
.sg-button-secondary{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:relative;cursor:pointer;border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline-width:0;text-decoration:none;overflow:hidden;white-space:nowrap;font-weight:700;text-transform:uppercase;box-shadow:0 1px 4px 0 rgba(0,0,0,0.2);-webkit-transition-property:box-shadow, opacity, -webkit-transform;transition-property:box-shadow, opacity, -webkit-transform;transition-property:box-shadow, transform, opacity;transition-property:box-shadow, transform, opacity, -webkit-transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;border-radius:7px;height:1.875rem;padding:0 18px;font-size:.875rem;color:#fff;fill:#fff;background-color:#7ed7ac}.sg-button-secondary:hover,.sg-button-secondary:focus{box-shadow:0 2px 16px 0 rgba(0,0,0,0.25)}.sg-button-secondary:active{box-shadow:0 1px 3px 0 rgba(0,0,0,0.2);-webkit-transform:scale(0.985);transform:scale(0.985)}.sg-button-secondary:active:focus{box-shadow:0 1px 3px 0 rgba(0,0,0,0.2)}.sg-button-secondary:active,.sg-button-secondary:focus,.sg-button-secondary:hover{text-decoration:none}.sg-button-secondary__container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.sg-button-secondary--full-width{width:100%}.sg-button-secondary--alt{background-color:#57b2f8}.sg-button-secondary--dark{background-color:#434e66}.sg-button-secondary--inverse{background-color:#fff;color:#7ed7ac;fill:#7ed7ac}.sg-button-secondary--alt-inverse{background-color:#fff;color:#57b2f8;fill:#57b2f8}.sg-button-secondary--dark-inverse{background-color:#fff;color:#434e66;fill:#434e66}.sg-button-secondary--disabled{opacity:0.45;cursor:default;box-shadow:0 1px 4px 0 rgba(0,0,0,0.2)}.sg-button-secondary--disabled:active{-webkit-transform:none;transform:none}.sg-button-secondary--disabled:active,.sg-button-secondary--disabled:focus,.sg-button-secondary--disabled:hover{box-shadow:0 1px 4px 0 rgba(0,0,0,0.2)}.sg-button-secondary--small{padding:0 14px;height:1.5rem;border-radius:5px;font-size:.75rem}.sg-button-secondary--active-inverse{background-color:#fff;color:#ff796b;fill:#ff796b;-webkit-transition-property:box-shadow, background-color, color, fill, opacity, -webkit-transform;transition-property:box-shadow, background-color, color, fill, opacity, -webkit-transform;transition-property:box-shadow, transform, background-color, color, fill, opacity;transition-property:box-shadow, transform, background-color, color, fill, opacity, -webkit-transform}.sg-button-secondary--active-inverse:hover,.sg-button-secondary--active-inverse:active,.sg-button-secondary--active-inverse:focus{background-color:#ff796b;color:#fff;fill:#fff}

Tiếp tục dán đoạn JS bên dưới vào trước thẻ </body>.

<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>

Cuố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 + &quot;_&quot; + 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>

Chúc bạn thành công!.

Nút Like - sau mỗi Bài viết trên Blogger với hiệu ứng đẹp mắt

⛨ Nút Love hình trái tim

⛨ Nút Love kiểu bung tim

CHIA SẺ CHO BẠN BÈ

BẠN CÓ THỂ QUAN TÂM

Bình luận

Nút Like - sau mỗi Bài viết trên Blogger với hiệu ứng đẹp mắt

Xếp hạng bài viết

⛨ Nút Love hình trái tim

⛨ Nút Love kiểu bung tim

CHIA SẺ CHO BẠN BÈ

BẠN CÓ THỂ QUAN TÂM

Bình luận