Chào mừng!

Bằng cách đăng ký với chúng tôi, bạn sẽ có thể thảo luận, chia sẻ và nhắn tin riêng tư với các thành viên khác trong cộng đồng của chúng tôi.

Đăng ký ngay!
  • Chào Khách,
    Bạn cần liên hệ với admin ??? ZALO & TELEGRAM

Share Code ông già Noel

TTB

Tham gia
4/11/18
Bài viết
31
Lượt Thích
10
Coins
1,000
Chào các member vuicode.net hôm nay mình sẽ hướng dẫn cách bạn tạo Code ông già Noel cho trang web trông cực cute :3

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)
[HIDEREPLY]
HTML:
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
[/HIDEREPLY]
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
[HIDEREPLY]
HTML:
<!-- Noel -->
<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'>
<a href='https://www.facebook.com/iambinhsliver' rel='nofollow'><img class='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>
<script type='text/javascript'>
//<![CDATA[
var modal=document.querySelector(".modal");var trigger=document.querySelector(".trigger");var closeButton=document.querySelector(".close-button");function toggleModal(){modal.classList.toggle("show-modal");}
function windowOnClick(event){if(event.target===modal){toggleModal();}}
trigger.addEventListener("click",toggleModal);closeButton.addEventListener("click",toggleModal);window.addEventListener("click",windowOnClick);
//]]>
</script>
<script type='text/javascript'>
/*<![CDATA[*/var x=document.getElementById('x');s=['Xin chào!','Bạn đã có người yêu chưa','Nếu chưa thì lo kiếm người yêu đi nhé','Sặp đện Noel rội đọ :3'];var times=0;let delayTime=8*1000;const run=function loop(){jQuery('#animate').css('display','block')
var loops=setTimeout(loop,3000);if(times==4){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++;return false;};setTimeout(run,delayTime);
/*]]>*/
</script>
[/HIDEREPLY]
Chúc bạn thành công!
Code được tách từ trang web: http://www.thehinh.com/ và được chỉnh sửa lại vài thứ.
 
Sửa lần cuối bởi điều hành viên:
L

Lê Thế Tân

bên em nhận tăng mắt live và share vào gr fb tăng doanh thu bán hàng. cần lh e nhé
 
  • Like
Cảm xúc: TTB

Bài mới nhất

Top Bottom
AdBlock Detected

We get it, advertisements are annoying!

Sure, ad-blocking software does a great job at blocking ads, but it also blocks useful features of our website. For the best site experience please disable your AdBlocker.

I've Disabled AdBlock
No Thanks