Mở đầu

Một cách để tăng lượng người đăng kí kênh Youtube của bạn thông qua Blog đó, thì việc cài đặt popup youtube subscribe có thể rất hữu ích cho bạn vì nó sẽ hiển thị ngay khi mọi người truy cập vào blog.

Như chúng ta đã biết về điều kiện tham gia chương trình kiếm tiền cùng youtube Phải có từ 1000 người đăng ký trở lên. Đạt được 4.000 giờ xem công khai trong 12 tháng qua, với cái Popup nó sẽ giúp đỡ được phần nào.

Hướng dẫn

Bước 1: Thêm jQuery bên dưới đặt vào trên thẻ </head> hoặc &lt;!--</head>--&gt;&lt;/head&gt;

<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(&#39;welcomeSession&#39;);if(welcomeSession === null){$(window).bind(&#39;load&#39;,function(){setTimeout(function(){$(&#39;.xtproYTwrap&#39;).css(&quot;display&quot;,&quot;block&quot;);welcomeSession = sessionStorage.setItem(&#39;welcomeSession&#39;,true)}
,time);$(&#39;.xtproYtcloseIcon&#39;).click(function(){$(&#39;.xtproYTwrap&#39;).addClass(&#39;hide&#39;)}
)})}</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.