Thêm icon Noen vào blogger

✓Chào các bạn hôm nay mình sẽ hướng dẫn các bạn thêm icon noel vào cho trang web của mình.

HƯỚNG DẪN CÁCH LÀM:

Bước 1: Tiến hành vào Dashboard tìm thẻ </head> và thêm đoạn mã này lên nó (bước này để thêm thư viện Jquery cho trang ai có rồi thì bỏ qua bước này) 

<scriptsrc='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Bước 2: Tìm thẻ </body> và thêm đoạn code dưới lên trên thẻ vừa tìm được 

<style type='text/css'>
.clssimg,.clss2{opacity:0;animation-name:bounceIn;animation-duration:450ms;animation-timing-function:linear;animation-fill-mode:forwards}.clssimg{animation-delay:2s;cursor:pointer}
.clss2{animation-delay:3s}@keyframes bounceIn{0%{opacity:0;transform:scale(0.3) translate3d(0,0,0)}50%{opacity:.9;transform:scale(1.1)}80%{opacity:1;transform:scale(0.89)}100%{opacity:1;transform:scale(1) translate3d(0,0,0)}}@media(min-width:320px) and (max-width:480px){.clssimg{width:60px}.nochatbot{bottom:58px!important;right:50px!important;width:22px!important;height:22px!important;padding:0!important}.modal-content{right:-24px!important;width:19rem!important;bottom:-20px!important}#animate{right:90px!important;bottom:60px!important}}.modal{position:fixed;z-index:999;right:-120px;bottom:53px;opacity:0;visibility:hidden;transform:scale(1.1);transition:visibility 0s linear .25s,opacity .25s 0s,transform .25s}.modal-content{position:absolute;bottom:80px;right:200px;background-color:white;padding:12px;width:24rem;border-radius:12px;box-shadow:0 1pt 12pt rgba(0, 0, 0, .15)}.close-button{float:left;width:18pt;height:24px;line-height:21px;text-align:center;cursor:pointer;border-radius:1.25rem;background-color:lightgray;font-size:20px;font-weight:900;font-family:georgia}.show-modal{opacity:1;visibility:visible;transform:scale(1.0);transition:visibility 0s linear 0s,opacity .25s 0s,transform .25s}.noidungchat{margin-top:-20px;padding-left:38px;padding-top:20px;width:77%;font-family:&#39;Roboto&#39;,sans-serif;font-size:17px;color:#000}.trochuyenngay{font-size:18px;font-weight:400;text-align:center;font-family:sans-serif;width:160.5%;float:left;border-top:.75pt solid rgba(0,0,0,.1);margin:0 -50px;margin-top:10px;padding-top:10px;box-sizing:border-box}.trochuyenngay a{color:rgb(51, 122, 183)}.iconchat{position:absolute;right:15px}.popupchat{position:fixed;bottom:-6px;right:16px}.iconchat img{border-radius:100%}.nochatbot{background:red;width:29px;color:white;border-radius:50px;padding:4px;font-size:11px;right:80px;bottom:93px;position:fixed;text-align:center}.animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s}.animated{-webkit-animation-duration:1s;-webkit-animation-fill-mode:both;animation-duration:1s;animation-fill-mode:both}@-webkit-keyframes bounceOutRight{20%{-webkit-transform:translate3d(-20px,0,0);opacity:1;transform:translate3d(-20px,0,0)}to{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{-webkit-transform:translate3d(-20px,0,0);opacity:1;transform:translate3d(-20px,0,0)}to{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(3000px,0,0);opacity:0;transform:translate3d(3000px,0,0)}60%{-webkit-transform:translate3d(-25px,0,0);opacity:1;transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(3000px,0,0);opacity:0;transform:translate3d(3000px,0,0)}60%{-webkit-transform:translate3d(-25px,0,0);opacity:1;transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}.speech-bubble{position:relative;padding:20px;z-index:99}.speech-bubble:after{content:&#39;&#39;;position:absolute;right:0;top:50%;width:0;height:0;border:10px solid transparent;border-left-color:#0083fe;border-right:0;margin-top:15px;margin-right:-9px}span#x{color:white;font-family:&#39;Open Sans&#39;,sans-serif;padding:10px;background:#0083fe;position:absolute;border-radius:5px;right:0;top:50%}#animate{display:none;position:fixed;right:120px;bottom:80px;width:100%;
</style>
<div class='popupchat trigger'>
<ahref='https://www.facebook.com/iambinhsliver'rel='nofollow'><imgclass='clssimg'height='auto'src='https://www.qoobee.com/wp-content/uploads/2018/11/qoobee-christmas-emoticon.gif'width='auto'/></a>
<div class='nochatbot clss2'><script>document.write(Math.ceil(Math.random()*10)+2)</script></div></div>
<scripttype='text/javascript'>
//<![CDATA[
varmodal=document.querySelector(".modal");vartrigger=document.querySelector(".trigger");varcloseButton=document.querySelector(".close-button");functiontoggleModal(){modal.classList.toggle("show-modal");}
functionwindowOnClick(event){if(event.target===modal){toggleModal();}}
trigger.addEventListener("click",toggleModal);closeButton.addEventListener("click",toggleModal);window.addEventListener("click",windowOnClick);
//]]>
</script>
<div class="animated bounceInRight faster speech-bubble"id="animate"><spanid="x"></span></div>
<scripttype='text/javascript'>
/*<![CDATA[*/
varx=document.getElementById('x');s=['Xin chào!','Bạn đã có người yêu chưa','Nếu chưa thì...','Lo tìm người yêu đi nhé','Sặp tợi Noel rội đọ'];var times=0;letdelayTime=8*1000;construn=function loop(){jQuery('#animate').css('display','block')
varloops=setTimeout(loop,3000);if(times==5){clearTimeout(loops);jQuery('#animate').addClass('bounceOutRight faster');}
else{s.length&&(x.innerHTML=s.shift(),loops);setTimeout(function(){jQuery('#animate').removeClass('bounceInRight faster');},2000);jQuery('#animate').addClass('bounceInRight faster');}
times++;returnfalse;};setTimeout(run,delayTime);
/*]]>*/
</script>

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

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait