Hot Post

Nút Like - Love Bài viết trên Blogger có lưu thống kê số lượng click với hiệu ứng đẹp mắt

8/15/2018 A+ a-
Chia sẻ Facebook Blog This! Chia sẻ Email
Bình luận
4

Add Like & Love Button to your Blogger Post

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/AVvXsEhIJIz7vfRwWLmXw12F9zwyZkNDe339-4M24nZcIxAinimWYGiYHl5dL0coekK9wu4kHFnGXd9fN42fu6jhyUI1Be6bzEFeyJC6vlSD1X1tPUkFKxyu7jUqCpk2HK2vzKYWxuHsNI4Xafhz/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 + &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>


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ưới 
.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}

2Tì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 + &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>



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!

Created by Patrycja Radaczyńska/Nodws/Iris Tips
Iris Tips

Đăng ký nhận tin khuyến mãi, thủ thuật mới

Mẹo nhỏ khi bình luận
  • - Để viết chữ in đậm hãy sử dụng thẻ <b>chữ in đậm</b>
  • - Để viết chữ in nghiêng hãy sử dụng thẻ <i>chữ in nghiêng</i>
  • - Để viết code hãy sử dụng công cụ Conversion ở bên dưới để mã hóa và sau đó dán vào khung bình luận.
  • - Để chèn hình ảnh, video chỉ cần dán link trực tiếp của hình ảnh hoặc video vào khung bình luận (hỗ trợ: jpg, gif, png, bmp, Youtube).
  • - Bạn có thể upload hình ảnh, tập tin trực tiếp từ máy tính bằng cách sử dụng công cụ Up ảnh hoặc Up file ở bên dưới.
  • - Bạn có thể check vào ô Notify me ở khung nhận xét để nhận thông báo qua email khi ai đó trả lời bình luận của bạn.

4 Comments

  1. Unknown8/22/2018 12:07 SA

    Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  2. PNALLC10/04/2018 5:34 CH

    Sao mình làm hoài không được nhỉ

    Trả lờiXóa
    Trả lời
    1. Iris Tips10/04/2018 8:13 CH

      Bạn để lại link blog để mình check lại cho bạn nhé

      Xóa
  3. Nặc danh3/13/2024 2:47 SA

    bạn ơi!

    <
    blog mình tìm mãi không có

    Trả lờiXóa

Đăng nhập bằng Google


Cùng tham gia bình luận bài viết này nhé!

Đăng ký: Đăng Nhận xét (Atom)