Thêm popup đăng kí kênh Youtube trên blog
Mở đầu
Hướng dẫn
Bước 1: Thêm jQuery bên dưới đặt vào trên thẻ </head> hoặc <!--</head>--></head>
<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
Bước 2: Sao chép toàn bộ CSS bên dưới đặt vào trên thẻ ]]></b:skin>
/* pop up subscribe youtube channel by Xuan Trung Pro */
@keyframes show_xtproYT{0%{transform:translateX(100%)}40%{transform:translateX(-10%)}80%{transform:translateX(0%)}100%{opacity:1;pointer-events:auto;transform:translateX(-10px)}}
@keyframes hide_xtproYT{0%{transform:translateX(-10px)}40%{transform:translateX(0%)}80%{transform:translateX(-10%)}100%{transform:translateX(calc(100% + 100px))}}
.xtproYTwrap{position:fixed;z-index:9999999;right:55px;bottom:20px;animation:show_xtproYT 0.8s ease forwards;box-shadow:0 5px 12px rgba(0,0,0,0.2);border-radius:10px;background:#fff;padding:10px;border-left:5px solid #FA5858;width:300px;align-items:center;justify-content:space-between;display:none}
.xtproYTwrap.hide{animation:hide_xtproYT 0.8s ease forwards}
.xtproYTcontent{display:flex;align-items:center}
.xtproYTicon .xtprologo{max-width:60px;border-radius:100%;transition:all 0.3s ease}
.xtproYTcontent .xtproYTdetails{margin-left:15px;text-decoration:none;outline:none}
.xtproYTdetails span{font-family:Noto Sans;position:relative;font-size:18px;font-weight:600;color:#000000;top:10px}
.xtproYTdetails p{color:#878787;font-size:12px}
.xtproYtcloseIcon svg{position:absolute;fill:#878787;font-size:20px;cursor:pointer;height:28px;width:28px;text-align:center;right:13px;top:8px;border-radius:50%;background:#f2f2f2;transition:all 0.3s ease}
.xtproYTwrap:hover .xtproYTicon img{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
.xtproYtcloseIcon:hover svg{fill: #444;}
@media screen and (max-width: 480px){.xtproYTwrap{right:25px}}
/* css untuk darkmode pop up subscribe youtube channel by Xuan Trung Pro */
.dark-mode .xtproYTwrap,.dark-mode .xtproYtcloseIcon svg{background:#2d2d30}
.dark-mode .xtproTwrap{border-color:#444}
.dark-mode .xtproYTdetails span,.dark-mode .xtproYTdetails p{color:#e2e2e2}
Bước 3: Thêm đoạn JS bên dưới đặt vào trên thẻ đóng </body>
<!--pop up subscribe youtube channel-->
<div class='xtproYTwrap'>
<div class='xtproYTcontent'>
<div class='xtproYTicon'><img alt='XTT' class='xtprologo' src='https://i.imgur.com/S6hss9D.jpg'/></div>
<a class='xtproYTdetails' href='https://www.youtube.com/XTTofficial?sub_confirmation=1' target='_blank'>
<span>XTT</span>
<p>Subscribe to my Youtube channel</p>
</a>
</div>
<div class='xtproYtcloseIcon'><svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div>
</div>
<script type='text/javascript'>
//pop up subscribe youtube channel by Xuan Trung Pro
var time = 1000;
var welcomeSession = sessionStorage.getItem('welcomeSession');if(welcomeSession === null){$(window).bind('load',function(){setTimeout(function(){$('.xtproYTwrap').css("display","block");welcomeSession = sessionStorage.setItem('welcomeSession',true)}
,time);$('.xtproYtcloseIcon').click(function(){$('.xtproYTwrap').addClass('hide')}
)})}</script>
<!--close pop up subscribe youtube channel-->
Lưu lại chủ để và tận hưởng thôi nào.
Thay thế toàn bộ phần đã đánh dấu màu cam theo ý của bạn.
Lời kết
Okay, hi vọng là bài viết này sẽ hữu ích với bạn, chúc các bạn thành công và đừng quên chia sẻ bài viết này đến nơi rộng rãi nha.
8 comments
https://www.anandnawal.com
image quote pre code