Tạo thanh thông báo cực đẹp cho blogger

Chào các bạn, hôm nay mình sẽ hướng dẫn đến các bạn cách Tạo thanh thông báo cực đẹp
cho blogspot. Các bạn có thể thấy demo như trên website của mình.

Cách thực hiện

Đầu tiên các bạn vào Chủ đề > Chỉnh Sửa

Các bạn tìm đến thẻ </body> sau đó thêm đoạn code sau lên trước thẻ </body>

<style>
.thongbao{z-index:999;position:fixed;bottom:0;right:0;left:0;background:#9A12B3;width:100%;border-bottom:1px solid #EEEEEE;box-sizing:border-box;transform:translateY(-150%);color:#FFFFFF;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;animation:thongbao-slide-in 0.8s ease forwards}
.thongbao-content{display:flex;align-items:center;flex-direction:row;justify-content:center;width:100%;margin:0 auto;padding:10px 40px;box-sizing:border-box}
.thongbao-text{font-size:20px;margin:0 20px 0 0}
.thongbao-button{display:inline-block;background:#19B5FE;height:30px;border:0;border-radius:2px;box-shadow:0 2px 4px rgba(#000,0.1);padding:0 10px;color:#fff;font-size:15px;font-weight:700;line-height:30px;text-decoration:none;white-space:nowrap}
.thongbao-close{position:absolute;top:50%;right:20px;font-size:20px;font-weight:600;transform:translateY(-50%);cursor:pointer}
.thongbao-button:hover{color:#fff}
@keyframes thongbao-slide-in{
0%{transform:translateY(-150%)}
100%{transform:translateY(0%)}
}
</style>
<div class='thongbao'>
<div class='thongbao-content'>
<div class='thongbao-text'>
<b>Tuyển cộng tác viên viết bài cho Website</b></div>
<a class='thongbao-button' href='/p/dang-ky.html' target='_blank'>Đăng Ký Ngay</a>
</div>
<div class='thongbao-close'>
<a href='#close' style='color: white;'><i aria-hidden='true' class='fa fa-times'/></a></div>
</div>
<script type='text/javascript'>
//<![CDATA[
jQuery('.thongbao-close').on('click', function() {
jQuery(this).parent().remove();
});
//]]>
</script>

Xong rồi các bạn chỉnh sửa lại nội dung các bạn muốn rồi lưu lại là xong.
Nếu bạn muốn thanh thông báo ở trên cùng thì sửa lại chỗ mình bôi màu vàng thành top:0

Code nút Call gọi điện thoại cho blogger

Là một website bán hàng hay dịch vụ online điều không thể thiếu là có cho mình một tiện ích để khách hành dễ dàng liên lạc với mình , ở bài trước thì ad có viết một bài Hướng Dẫn Tạo Tiện ích live chat chuyên nghiệp cho website để đi đôi với live chat đó là một tiện ích không thể thiếu để khách hàng nhanh chống nhất để liên lạc với bạn , với tiện ích này họ có thể gọi trực tiếp cho bạn để tăng sự uy tín và trách nhiệm cho mình và sự an tâm hơn trong việc nhắn tin ... Để làm được điều này thì nay ad xin chia sẻ cho các bạn một source code tạo tiện ích đó , các bạn cùng tham khảo nhé .

MẪU NÚT CALL 1

để cài đặt nút call cho website các bạn copy đoạn code sau đặt vào nơi mà bạn muốn hiển thị . ví dụ trong tiện ích của blogger .

<style>
/* HOTLINE */
.phonering-alo-phone {position:fixed;visibility:hidden;background-color:transparent;width:200px;height:200px;
 cursor:pointer;z-index:200000!important;right:150px;bottom:-50px;left:-50px;display:block;
 -webkit-backface-visibility:hidden;
 -webkit-transform:translateZ(0);
 transition:visibility .5s;
}
.phonering-alo-phone.phonering-alo-show {visibility:visible}
.phonering-alo-phone.phonering-alo-static {opacity:.6}
.phonering-alo-phone.phonering-alo-hover,.phonering-alo-phone:hover {opacity:1}
.phonering-alo-ph-circle {width:160px;height:160px;top:20px;left:20px;position:absolute;
 background-color:transparent;border-radius:100%;border:2px solid rgba(30,30,30,0.4);
 opacity:.1;
 -webkit-animation:phonering-alo-circle-anim 1.2s infinite ease-in-out;
 animation:phonering-alo-circle-anim 1.2s infinite ease-in-out;
 transition:all .5s;
 -webkit-transform-origin:50% 50%;
 -ms-transform-origin:50% 50%;
 transform-origin:50% 50%
}
.phonering-alo-phone.phonering-alo-active .phonering-alo-ph-circle {
    -webkit-animation:phonering-alo-circle-anim 1.1s infinite ease-in-out!important;
    animation:phonering-alo-circle-anim 1.1s infinite ease-in-out!important
}
.phonering-alo-phone.phonering-alo-static .phonering-alo-ph-circle {
    -webkit-animation:phonering-alo-circle-anim 2.2s infinite ease-in-out!important;
    animation:phonering-alo-circle-anim 2.2s infinite ease-in-out!important
}
.phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone:hover .phonering-alo-ph-circle {
    border-color:#00aff2;
    opacity:.5
}
.phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-circle {
    border-color:#272d6b;
    opacity:.5
}
.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle {
    border-color:#00aff2;
    opacity:.5
}
.phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-circle {
    border-color:#ccc;
    opacity:.5
}
.phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-circle {
    border-color:#75eb50;
    opacity:.5
}
.phonering-alo-ph-circle-fill {width:100px;height:100px;top:50px;left:50px;position:absolute;background-color:#000;
 border-radius:100%;border:2px solid transparent;
 -webkit-animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
 animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
 transition:all .5s;
 -webkit-transform-origin:50% 50%;
 -ms-transform-origin:50% 50%;
 transform-origin:50% 50%
}
.phonering-alo-phone.phonering-alo-active .phonering-alo-ph-circle-fill {
    -webkit-animation:phonering-alo-circle-fill-anim 1.7s infinite ease-in-out!important;
    animation:phonering-alo-circle-fill-anim 1.7s infinite ease-in-out!important
}
.phonering-alo-phone.phonering-alo-static .phonering-alo-ph-circle-fill {
    -webkit-animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out!important;
    animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out!important;
    opacity:0!important
}
.phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone:hover .phonering-alo-ph-circle-fill {
    background-color:rgba(39,45,107,0.5);
    opacity:.75!important
}
.phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-circle-fill {
    background-color:rgba(39,45,107,0.5);
    opacity:.75!important
}
.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle-fill {
    background-color:rgba(0,175,242,0.5);
}
.phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-circle-fill {
    background-color:rgba(204,204,204,0.5);
    opacity:.75!important
}
.phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-circle-fill {
    background-color:rgba(117,235,80,0.5);
    opacity:.75!important
}
.phonering-alo-ph-img-circle {
    width:60px;
    height:60px;
    top:70px;
    left:70px;
    position:absolute;
    background:rgba(30,30,30,0.1) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAABNmlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjarY6xSsNQFEDPi6LiUCsEcXB4kygotupgxqQtRRCs1SHJ1qShSmkSXl7VfoSjWwcXd7/AyVFwUPwC/0Bx6uAQIYODCJ7p3MPlcsGo2HWnYZRhEGvVbjrS9Xw5+8QMUwDQCbPUbrUOAOIkjvjB5ysC4HnTrjsN/sZ8mCoNTIDtbpSFICpA/0KnGsQYMIN+qkHcAaY6addAPAClXu4vQCnI/Q0oKdfzQXwAZs/1fDDmADPIfQUwdXSpAWpJOlJnvVMtq5ZlSbubBJE8HmU6GmRyPw4TlSaqo6MukP8HwGK+2G46cq1qWXvr/DOu58vc3o8QgFh6LFpBOFTn3yqMnd/n4sZ4GQ5vYXpStN0ruNmAheuirVahvAX34y/Axk/96FpPYgAAACBjSFJNAAB6JQAAgIMAAPn/AACA6AAAUggAARVYAAA6lwAAF2/XWh+QAAAB/ElEQVR42uya7W3CMBCG31QM4A1aNggTlG6QbpBMkHYC1AloJ4BOABuEDcgGtBOETnD9c1ERCH/lwxeaV8oPFGP86Hy+DxMREW5Bd7gRjSDSNGn4/RiAOvm8C0ZCRD5PSkQVXSr1nK/xE3mcWimA1ZV3JYBZCIO4giQANoYxMwYS6+xKY4lT5dJPreWZY+uspqSCKPYN27GJVBDXheVSQe494ksiEWTuMXcu1dld9SARxDX1OAJ4lgjy4zDnFsC076A4adEiRwAZg4hOUSpNoCsBPDGM+HqkNGynYBCuILuWj+dgWysGsNe8nwL4GsrW0m2fxZBq9rW0rNcX5MOQ9eZD8JFahcG5g/iKT671alGAYQggpYWvpEPYWrU/HDTOfeRIX0q2SL3QN4tGhZJukVobQyXYWw7WtLDKDIuM+ZSzscyCE9PCy5IttCvnZNaeiGLNHKuz8ZVh/MXTVu/1xQKmIqLEAuJ0fNo3iG5B51oSkeKnsBi/4bG9gYB/lCytU5G9DryFW+3Gm+JLwU7ehbJrwTjq4DJU8bHcVbEV9dXXqqP6uqO5e2/QZRYJpqu2IUAA4B3tXvx8hgKp05QZW6dJqrLTNkB6vrRURLRwPHqtYgkC3cLWQAcDQGGKH13FER/NATzi786+BPDNjm1dMkfjn2pGkBHkf4D8DgBJDuDHx9BN+gAAAABJRU5ErkJggg==) no-repeat center center;
    border-radius:100%;
    border:2px solid transparent;
    -webkit-animation:phonering-alo-circle-img-anim 1s infinite ease-in-out;
    animation:phonering-alo-circle-img-anim 1s infinite ease-in-out;
    -webkit-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    transform-origin:50% 50%
}

.phonering-alo-phone.phonering-alo-active .phonering-alo-ph-img-circle {
    -webkit-animation:phonering-alo-circle-img-anim 1s infinite ease-in-out!important;
    animation:phonering-alo-circle-img-anim 1s infinite ease-in-out!important
}

.phonering-alo-phone.phonering-alo-static .phonering-alo-ph-img-circle {
    -webkit-animation:phonering-alo-circle-img-anim 0 infinite ease-in-out!important;
    animation:phonering-alo-circle-img-anim 0 infinite ease-in-out!important
}

.phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone:hover .phonering-alo-ph-img-circle {
    background-color:#00aff2;
}

.phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-img-circle {
    background-color:#272d6b;
}

.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-img-circle {
    background-color:#00aff2;
}

.phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-img-circle {
    background-color:#ccc;
}

.phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-img-circle {
    background-color:#75eb50
}

@-webkit-keyframes phonering-alo-circle-anim {
    0% {
        -webkit-transform:rotate(0) scale(.5) skew(1deg);
        -webkit-opacity:.1
    }

    30% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
        -webkit-opacity:.5
    }

    100% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
        -webkit-opacity:.1
    }
}

@-webkit-keyframes phonering-alo-circle-fill-anim {
    0% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2
    }

    50% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
        opacity:.2
    }

    100% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2
    }
}

@-webkit-keyframes phonering-alo-circle-img-anim {
    0% {
        -webkit-transform:rotate(0) scale(1) skew(1deg)
    }

    10% {
        -webkit-transform:rotate(-25deg) scale(1) skew(1deg)
    }

    20% {
        -webkit-transform:rotate(25deg) scale(1) skew(1deg)
    }

    30% {
        -webkit-transform:rotate(-25deg) scale(1) skew(1deg)
    }

    40% {
        -webkit-transform:rotate(25deg) scale(1) skew(1deg)
    }

    50% {
        -webkit-transform:rotate(0) scale(1) skew(1deg)
    }

    100% {
        -webkit-transform:rotate(0) scale(1) skew(1deg)
    }
}

@-webkit-keyframes phonering-alo-circle-anim {
    0% {
        -webkit-transform:rotate(0) scale(.5) skew(1deg);
                transform:rotate(0) scale(.5) skew(1deg);
        opacity:.1
    }

    30% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
                transform:rotate(0) scale(.7) skew(1deg);
        opacity:.5
    }

    100% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg);
        opacity:.1
    }
}

@keyframes phonering-alo-circle-anim {
    0% {
        -webkit-transform:rotate(0) scale(.5) skew(1deg);
                transform:rotate(0) scale(.5) skew(1deg);
        opacity:.1
    }

    30% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
                transform:rotate(0) scale(.7) skew(1deg);
        opacity:.5
    }

    100% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg);
        opacity:.1
    }
}

@-webkit-keyframes phonering-alo-circle-fill-anim {
    0% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
                transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2
    }

    50% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg);
        opacity:.2
    }

    100% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
                transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2
    }
}

@keyframes phonering-alo-circle-fill-anim {
    0% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
                transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2
    }

    50% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg);
        opacity:.2
    }

    100% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
                transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2
    }
}

@-webkit-keyframes phonering-alo-circle-img-anim {
    0% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg)
    }

    10% {
        -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
                transform:rotate(-25deg) scale(1) skew(1deg)
    }

    20% {
        -webkit-transform:rotate(25deg) scale(1) skew(1deg);
                transform:rotate(25deg) scale(1) skew(1deg)
    }

    30% {
        -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
                transform:rotate(-25deg) scale(1) skew(1deg)
    }

    40% {
        -webkit-transform:rotate(25deg) scale(1) skew(1deg);
                transform:rotate(25deg) scale(1) skew(1deg)
    }

    50% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg)
    }

    100% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg)
    }
}

@keyframes phonering-alo-circle-img-anim {
    0% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg)
    }

    10% {
        -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
                transform:rotate(-25deg) scale(1) skew(1deg)
    }

    20% {
        -webkit-transform:rotate(25deg) scale(1) skew(1deg);
                transform:rotate(25deg) scale(1) skew(1deg)
    }

    30% {
        -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
                transform:rotate(-25deg) scale(1) skew(1deg)
    }

    40% {
        -webkit-transform:rotate(25deg) scale(1) skew(1deg);
                transform:rotate(25deg) scale(1) skew(1deg)
    }

    50% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg)
    }

    100% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg)
    }
}
</style>
<div class="hotline">
    <div id="phonering-alo-phoneIcon" class="phonering-alo-phone phonering-alo-green phonering-alo-show">
        <div class="phonering-alo-ph-circle"></div>
        <div class="phonering-alo-ph-circle-fill"></div>
        <div class="phonering-alo-ph-img-circle">
            <a class="pps-btn-img " title="Liên hệ" href="tel:0382676858"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI90xxPIjyZk2WVsjn2p6LQrOXJ021kG5iofRCJqRONTE6Pf6Z8mMKuC6kcqKDRjn0k09kaA_kR6YlwTgJF1yhbmmnF5gGUAophja8eK3gnBAZKqHsSrDr32UvM18DZB0WzzHxQtAZ50wt/s1600/v8TniL3.png" alt="Liên hệ" width="50" class="img-responsive"/> </a>
        </div>
    </div>
</div>


<style>

/*Alo-Phone*/

.suntory-alo-phone{background-color:transparent;cursor:pointer;height:100px;position:fixed;left:0;bottom:0;transition:visibility 0.5s ease 0s;width:100px;z-index:999!important}

.suntory-alo-ph-circle{animation:1.2s ease-in-out 0s normal none infinite running suntory-alo-circle-anim;background-color:transparent;border:2px solid rgba(30,30,30,0.4);border-radius:100%;height:100px;left:0;opacity:0.1;position:absolute;top:0;transform-origin:50% 50% 0;transition:all 0.5s ease 0s;width:100px}

.suntory-alo-ph-circle-fill{animation:2.3s ease-in-out 0s normal none infinite running suntory-alo-circle-fill-anim;border:2px solid transparent;border-radius:100%;height:70px;left:15px;position:absolute;top:15px;transform-origin:50% 50% 0;transition:all 0.5s ease 0s;width:70px}

.suntory-alo-ph-img-circle{border-radius:100%;height:50px;left:25px;opacity:1;position:absolute;top:25px;transform-origin:50% 50% 0;width:50px;border:3px solid #fff000}

.suntory-alo-phone.suntory-alo-hover,.suntory-alo-phone:hover{opacity:1}

.suntory-alo-phone.suntory-alo-active .suntory-alo-ph-circle{animation:1.1s ease-in-out 0s normal none infinite running suntory-alo-circle-anim!important}

.suntory-alo-phone.suntory-alo-static .suntory-alo-ph-circle{animation:2.2s ease-in-out 0s normal none infinite running suntory-alo-circle-anim!important}

.suntory-alo-phone.suntory-alo-hover .suntory-alo-ph-circle,.suntory-alo-phone:hover .suntory-alo-ph-circle{border-color:#00aff2;opacity:0.5}

.suntory-alo-phone.suntory-alo-green.suntory-alo-hover .suntory-alo-ph-circle,.suntory-alo-phone.suntory-alo-green:hover .suntory-alo-ph-circle{border-color:#f00;opacity:1}

.suntory-alo-phone.suntory-alo-green .suntory-alo-ph-circle{border-color:#fff000;opacity:1}

.suntory-alo-phone.suntory-alo-hover .suntory-alo-ph-circle-fill,.suntory-alo-phone:hover .suntory-alo-ph-circle-fill{background-color:rgba(0,175,242,0.9)}

.suntory-alo-phone.suntory-alo-green.suntory-alo-hover .suntory-alo-ph-circle-fill,.suntory-alo-phone.suntory-alo-green:hover .suntory-alo-ph-circle-fill{background-color:#02A6E8}

.suntory-alo-phone.suntory-alo-green .suntory-alo-ph-circle-fill{background-color:#02A6E8}

.suntory-alo-phone.suntory-alo-hover .suntory-alo-ph-img-circle,.suntory-alo-phone:hover .suntory-alo-ph-img-circle{background-color:#00aff2}

.suntory-alo-phone.suntory-alo-green.suntory-alo-hover .suntory-alo-ph-img-circle,.suntory-alo-phone.suntory-alo-green:hover .suntory-alo-ph-img-circle{background-color:#02A6E8}

.suntory-alo-phone.suntory-alo-green .suntory-alo-ph-img-circle{background-color:#02A6E8}

@keyframes suntory-alo-circle-anim{0%{opacity:0.1;transform:rotate(0deg) scale(0.5) skew(1deg)}30%{opacity:0.5;transform:rotate(0deg) scale(0.7) skew(1deg)}100%{opacity:0.6;transform:rotate(0deg) scale(1) skew(1deg)}}

@keyframes suntory-alo-circle-img-anim{0%{transform:rotate(0deg) scale(1) skew(1deg)}10%{transform:rotate(-25deg) scale(1) skew(1deg)}20%{transform:rotate(25deg) scale(1) skew(1deg)}30%{transform:rotate(-25deg) scale(1) skew(1deg)}40%{transform:rotate(25deg) scale(1) skew(1deg)}50%{transform:rotate(0deg) scale(1) skew(1deg)}100%{transform:rotate(0deg) scale(1) skew(1deg)}}

@keyframes suntory-alo-circle-fill-anim{0%{opacity:0.2;transform:rotate(0deg) scale(0.7) skew(1deg)}50%{opacity:0.2;transform:rotate(0deg) scale(1) skew(1deg)}100%{opacity:0.2;transform:rotate(0deg) scale(0.7) skew(1deg)}}

.suntory-alo-ph-img-circle img{animation:1s ease-in-out 0s normal none infinite running suntory-alo-circle-img-anim;font-size:30px;line-height:39px;color:#fff;display:block;max-width:100%;height:auto}

@keyframes suntory-alo-ring-ring{0%{transform:rotate(0deg) scale(1) skew(1deg)}10%{transform:rotate(-25deg) scale(1) skew(1deg)}20%{transform:rotate(25deg) scale(1) skew(1deg)}30%{transform:rotate(-25deg) scale(1) skew(1deg)}40%{transform:rotate(25deg) scale(1) skew(1deg)}50%{transform:rotate(0deg) scale(1) skew(1deg)}100%{transform:rotate(0deg) scale(1) skew(1deg)}}

@media screen and (max-width:1280px){

.main-container{padding:0 20px}

}

@media screen and (max-width:1024px) {

#backer .header{width:calc(100% - 284px);padding-right:0}

</style>

<!-- /Call Back Request -->

<a class='suntory-alo-phone suntory-alo-green' href='tel:0382676858' rel='nofollow' title='Gọi điện'>

<div class='suntory-alo-ph-circle'></div>

<div class='suntory-alo-ph-circle-fill'></div>

<div class='suntory-alo-ph-img-circle'>

<img alt='phone' class='img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQbYsbNf0iEQK1pI2iLsynk73kTteeK8Y4TTqQSStzahpYoBiP1T3GXST1u4bkcogHyGtFAVix1ekShkZtPU-xap5z5CvBLhzkSkEOYO6X6pLm3N2TGQrZs732BJkhh8aWSCQhFigOvb4/s1600/phone_alo.png'/>

</div>

</a>

<div class='overlay hidden'></div>

<div class='modal'></div>

LỜI KẾT

Chúc các bạn thành công nhé , cực kỳ đơn giản để tạo một tiện ích nút call cho website đúng không nào.

Chia sẻ template cá nhân tuyệt đẹp cho blogger

Chia sẻ template cá nhân tuyệt đẹp cho blogs v1.0

Share template cá nhân siêu chất cho blogs

Thông tin về template:

Thể loại	Template cá nhân
edit bởi:	lê minh út
chia sẻ Bởi:	Hưng Star it
Responsive:	True
Phiên bản:	1.0
Thiết Kế:	Không Xác Định
Giá bán:	miễn Phí

DOWNLOAD
DÙNG THỬ

Share template blogger đã tối ưu

CHIA SẺ TEMPLATE CODE ĐÂY RỒI TỐI ƯU FAST LOAD

GIỚI THIỆU

Template code đây rồi mode tết này đã được xóa gần như gần hết js , css , html không cần thiết thư viện jquery đã được rút ngắn , đổi và chuyển đổi từ font rotobo , family sang hoàn toàn font awesome nên rất nhẹ... Nâng cấp bố cục lên v3.0 , nâng cấp template lên 1.3.0 , nâng cấp widget lên 2.0 loại bỏ js và css mặc định.Vì việc tối ưu có thể một số tính năng không sử dụng được thì các bạn có thể thêm lại sau nhé...

Điểm mobile chưa nén ảnh là 96/100 và trên máy tính là 100/100

Thông tin về template:

Thể loại	Template Cá Nhân
Tối Ưu:	Lê Minh Út
Tác Giả:	Star út
Responsive:	True
template Version	1.3.0
Thiết Kế:	Trần Thanh Bình
Giá bán:	miễn Phí

DOWNLOAD

Share template Start Tuấn It

Chào các bạn, Hôm nay mình xin chi sẽ cho các bạn template Star Tuấn IT V3.0 được rip bởi Nguyễn Tỉnh. Trước đây thì Star Tuấn có chia sẻ bản v2.0 và Nguyễn Tỉnh đã tải về và rip lại theo bản Star Tuấn đang dùng, và Nguyễn Tỉnh đặt cho bản này là bản 3.0. Bản v3.0 này đã thêm lại khung bình luận cho blogger mà template Star Tuấn không có.

MỘT SỐ THÔNG TIN VỀ TEMPLATE:
Tên Template: Template BlogspotStartuanit V3.0
Người Rip: Nguyễn Tỉnh
Chia sẻ bởi: Nguyễn Tỉnh
Phiên bản: V3.0
Responsive: Chuẩn 100%
Ưu điểm: Chuẩn seo, tốc độ load rất nhanh ( tầm 1s - 1.5s ), template gọn nhẹ
Hướng dẫn cài đặt: Không
Mã hóa bản quyền: Không
Tải Template
=======================
Tải Template
Xem Demo
Link Dự Phòng
=====================
Nếu có vấn đề về bản quyền template, vui lòng liên hệ Nguyễn Tỉnh

Nguồn: nguyentinhblog.com

Mọi thắc mắc các bạn có thể để lại comment bên dưới, mình sẻ giải đáp.

Template blogspot chuẩn SEO về viết các thủ thuật!

Chia sẽ template blogspot cá nhân miễn phí chuẩn seo được Công Nghệ Webblog chuyển mã nguồn từ trang hocban.vn về blogger, một mẫu giao diện được yêu cầu trong chương trình thiết kế template blogger theo yêu cầu miễn phí để tri ân quý khách hàng và các bạn đã ủng hộ chúng tôi trong suốt thời gian qua. Đây là một mẫu đơn giản, tuy nhiên đẹp, tối ưu chuẩn seo, tốc độ load trang tương đối nhanh. Một số tính năng của template blogspot

Template blogspot được tối ưu chuẩn seo, meta, heading….
Dạng template blogspot 2 cột, rất thân tiện với việc làm seo
Được tích hợp responsive thân thiện với mọi thiết bị.
Template blogspot cá nhân được chuyển mã nguồn về blogger gồm 2 phiên bản. + Phiên bản 1: lấy thumbnail chung cho các bài viết. + Phiên bản 2: Lấy ảnh thumbnail tự động ảnh đầu tiên trong bài viết
Không bị mã hóa bản quyển cũng như mã hóa code,tuy nhiên mong các bạn để cho mình dòng text
Bố cục đẹp. gon gàng. Tốc độ load trang nhanh

Demo Download

Template thủ thuật blogger

Vì là Template Responsive nên các bạn vào Blogger => Chủ Đề. Ở phần điện thoại di động. Các bạn nhấn Tủy chỉnh => Không.

THÔNG TIN TEMPLATE :

Tên Theme : Bmag Edited ST.
Thiết kế : Star Tỉnh IT.
Edit : Toàn Siêu Nhân.
Xem Demo : Tại đây
Bố cục : 2 cột Main, 3 cột Footer.
Template Responsive có mã hóa.

DOWNLOAD

Code chia sẻ bài viết cho blogger

Trân trọng gửi tới code chia sẻ bài viếtcác bạn vẫn còn theo dõi các mục do Tuấn Lê trước tâm huyết viết một bài viết mới- rất chất. Bài viết code chia sẻ bài viết trong blogspot được tự code ở anh Nguyễn Tuấn- chủ trang blog thủ thuật windows 10

<a onclick='if(document.getElementById(&apos;spoiler&apos;) .style.display==&apos;none&apos;) {document.getElementById(&apos;spoiler&apos;) .style.display=&apos;&apos;}else{document.getElementById(&apos;spoiler&apos;) .style.display=&apos;none&apos;}' title='Chia sẻ' type='button'><i class='fa fa-share'/> Chia sẻ</a>
<div id='spoiler' style='display: none;padding-bottom:15px;padding-top:15px;'>

<a expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'><i class='fa fa-facebook' style='color:#fff; display: block; float: left; font-size: 18px; height: 30px; line-height: 30px; text-align: center; width: 30px; background:#5a7abf;margin-right: 3px;'/></a>

<a expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><i class='fa fa-twitter' style='color:#fff; display: block; float: left; font-size: 18px; height: 30px; line-height: 30px; text-align: center; width: 30px; background:#19BFE5;margin-right: 3px;'/></a>

<a expr:href='data:post.sharePostUrl + &quot;&amp;target=googleplus&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' target='_blank' title='Chia sẻ lên Google+'><i class='fa fa-google-plus' style='color:#fff; display: block; float: left; font-size: 18px; height: 30px; line-height: 30px; text-align: center; width: 30px; background:#D64136;margin-right: 3px;'/></a>

<a class='e' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' target='_blank' title='Gửi Email'><i class='fa fa-envelope' style='color:#fff; display: block; float: left; font-size: 18px; height: 30px; line-height: 30px; text-align: center; width: 30px; background:#23A215;margin-right: 3px;'/></a>
</div>

Demo

Các bạn có thể xem demo trong bài viết của anh Tuấn trong : http://www.blogthuthuatwin10.com/

Ưu điểm:

Đầu tiên là trên mobile cũng click được. Rất ok !

Button này giống như youtube, thân thiện và dễ sử dụng.
Khi click chuột nó mới hiện
với lại nó không bị plugin quảng cáo chặn
Cảm ơn anh Tuấn đã chia sẻ! Chúc mọi người thành công

Share template Blogspot Từ mocgin

Share template bản edit mocgin
hôm nay mình sẽ share cho các bạn template mà mình đang sử dụng tích hợp tính năng login của Facebook của Siin Blog

THÔNG TIN TEMPLATE

Tên Template: Siin Blog Professional.

Thiết kế lại từ Template MocGin do Blog Sẻ Chia Thủ Thuật share.

Thể loại: Template cá nhân.

Phiên bản: v2.5.

Responsive: Có.

LỊCH SỬ PHÁT TRIỂN TEMPLATE

Phiên bản v1: Template gốc MocGin do Blog Sẻ Chia Thủ Thuật share.

Phiên bản v1.5: Responsive lại thanh navbar ở mobile và thêm chức năng Reaction Comment giống Facebook.

Phiên bản v2: Thêm chức năng đăng nhập, thiết kế lại thanh navbar và có search live giống Facebook.

Phiên bản v2.3: Thêm chức năng tự động chúc mừng sinh nhật đối với người dùng đã đăng nhập bằng Facebook và công khai ngày sinh ở trang cá nhân.

Phiên bản v2.5: Thêm chat room và plugin bình luận.

CÁCH CHỈNH SỬA TEMPLATE

Tìm và sửa số 252312411967413 thành ID app của bạn.
Tìm và sửa số 100009112376938 thành ID của bạn.
Bạn phải tạo một app ở trên Facebook. Hướng dẫn tại đây.
App của bạn phải để ở chế độ Công Khai với mọi người.
Nếu muốn chức năng tự động chúc mừng sinh nhật hoạt động ở blog của bạn, app của bạn phải được xét duyệt chức năng user_birthday. Chi tiết tại đây.
Có thắc mắc gì về template nữa thì comment ở dưới mình sẽ trả lời giúp các bạn!

Link download template:Template Siin Blog

Share template Blogspot khá giống kenh13.info

Tem này mình thuê anh "phantom" bên Sinhvienit.net viết với giá 300k hồi 12/2013 nên nhiều thứ cũng khác sơ sơ chứ không như web gốc kenh13.info 100% được. Các bạn download về chế thêm chút nữa là dùng ok, và 1 lưu ý nữa là tem này leech của kenh13.info nên không có reponsive nhé

Demo và hướng dẫn sử dụng

Đây là demo bản chỉnh sửa 1 xíu của mình nhưng hồi đó nhác phát triển quá nên vứt

Các bạn cứ viết đầy đủ bài, đúng thẻ tag thì sẽ hiện đầy đủ ở trang chủ. Đợt mua thì nó tự get được xvideo, hamterx không biết player nay còn chạy được không nữa.
Để hiện video thì viết theo cấu trúc sau

<id>Tập 1;Link|Tập 2;Link]</id>

Trong thư mục download có 3 file, file cliplmht là mình đã edit như demo, 2 file còn lại là file gốc như lúc mua về của anh "phantom" share

Demo | Tải về

SHOPANIME24H.GA

Tạo thanh thông báo cực đẹp cho blogger

Code nút Call gọi điện thoại cho blogger

Chia sẻ template cá nhân tuyệt đẹp cho blogger

Share template blogger đã tối ưu

Share template Start Tuấn It

Template blogspot chuẩn SEO về viết các thủ thuật!

Template thủ thuật blogger

Code chia sẻ bài viết cho blogger

Share template Blogspot Từ mocgin

Share template Blogspot khá giống kenh13.info

ABOUT ME

Tạo thanh thông báo cực đẹp cho blogger

Cách thực hiện

Code nút Call gọi điện thoại cho blogger

MẪU NÚT CALL 1

LỜI KẾT

Chia sẻ template cá nhân tuyệt đẹp cho blogger

Chia sẻ template cá nhân tuyệt đẹp cho blogs v1.0

Share template blogger đã tối ưu

CHIA SẺ TEMPLATE CODE ĐÂY RỒI TỐI ƯU FAST LOAD

GIỚI THIỆU

Share template Start Tuấn It

Template blogspot chuẩn SEO về viết các thủ thuật!

Template thủ thuật blogger

Code chia sẻ bài viết cho blogger

Demo

Ưu điểm:

Share template Blogspot Từ mocgin

Share template Blogspot khá giống kenh13.info

Dii Nô Blog

Bài viết mới nhất