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!
  • Truy cập và ủng hộ DienDanIT.NET bằng cách click dăm 3 cái quảng cáo để duy trì sever nhé.

Share Code ông già Noel

TTB

Tham gia
4/11/18
Bài viết
31
Lượt Thích
9
VNĐ
0
VNĐ
0
Chào các member
Xin vui lòng, Đăng nhập hoặc Đăng ký để xem nội dung URL.
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:
Xin vui lòng, Đăng nhập hoặc Đăng ký để xem nội dung URL.
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:
Tham gia
5/11/18
Bài viết
298
Lượt Thích
304
VNĐ
3,504
VNĐ
3,504
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
Top Bottom