cara membuat pop up subscribe youtube channel di blog

popup subscribe youtube channel di blog dengan sessionStorage

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat pop up subscribe youtube channel di blog.

salah satu cara untuk menaikkan jumlah viewers pada video youtube adalah dengan menambah jumlah subscribers, jika kamu adalah seorang blogger yang sekaligus merangkap youtuber, maka pemasangan pop up subscribe youtube bisa sangat membantu karena akan langsung terlihat oleh pengunjung.

seperti yang kita ketahui youtube hanya akan meloloskan channel untuk dimonetasi adsense jika jumlah subscribersnya sudah mencapai 1.000 subscriber dan telah mencapai 4.000 jam tonton publik yang vilid dalam waktu 12 bulan terakhir. maka itu kita perlu kerja keras untuk mencapai itu semua, dengan adanya pop up subscribe youtube yang dipasang di blog ini mungkin bisa sedikit membantu.

untuk jenis pop up ini saya menggunakan sessionStorage atau cookies sementara gitulah, jadi ketika pop di close tidak akan muncul terus - terusan sampai pengunjung menutup browser dan membukanya lagi jadi tidak akan menggangu, ok buat kalian yang ingin membuatnya mari simak caranya di bawah ini.

Cara Membuat Pop Up Subscribe Youtube Channel Di Blog

pastikan template kalian sudah terpasang jQuery jika belum ada, bisa salin kode di bawah ini dan letakkan di atas kode </head> atau &lt;!--</head>--&gt;&lt;/head&gt;

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

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letkkan di atas kode ]]></b:skin> atau di atas kode </style>

/* pop up subscribe youtube channel by wendy code */
@keyframes show_wendyYT{0%{transform:translateX(100%)}40%{transform:translateX(-10%)}80%{transform:translateX(0%)}100%{opacity:1;pointer-events:auto;transform:translateX(-10px)}}
@keyframes hide_wendyYT{0%{transform:translateX(-10px)}40%{transform:translateX(0%)}80%{transform:translateX(-10%)}100%{transform:translateX(calc(100% + 100px))}}
.wendyYTwrap{position:fixed;z-index:9999999;right:55px;bottom:20px;animation:show_wendyYT 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 #f09800;width:300px;align-items:center;justify-content:space-between;display:none}
.wendyYTwrap.hide{animation:hide_wendyYT 0.8s ease forwards}
.wendyYTcontent{display:flex;align-items:center}
.wendyYTicon .wendylogo{max-width:60px;border-radius:100%;transition:all 0.3s ease}
.wendyYTcontent .wendyYTdetails{margin-left:15px;text-decoration:none;outline:none}
.wendyYTdetails span{font-family:Noto Sans;position:relative;font-size:18px;font-weight:600;color:#000000;top:10px}
.wendyYTdetails p{color:#878787;font-size:12px}
.wendyYtcloseIcon 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}
.wendyYTwrap:hover .wendyYTicon img{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
.wendyYtcloseIcon:hover svg{fill: #444;}
@media screen and (max-width: 480px){.wendyYTwrap{right:25px}}
/* css untuk darkmode silakan sesuaikan classnya jika berbeda atau bisa di hapus bagian ini */
.dark-mode .wendyYTwrap,.dark-mode .wendyYtcloseIcon svg{background:#2d2d30}
.dark-mode .wendyYTwrap{border-color:#444}
.dark-mode .wendyYTdetails span,.dark-mode .wendyYTdetails p{color:#e2e2e2}

lanjut silakan salin kode di bawah ini dan letakkan di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<div class='wendyYTwrap'>
   <div class='wendyYTcontent'>
     <div class='wendyYTicon'><img alt='wendycode' class='wendylogo' src='https://cdn.staticaly.com/img/1.bp.blogspot.com/-Z1dA_G3X3Ro/X9SMbhKD9xI/AAAAAAAACO8/KAGlrPV2SncdnM2yXR3tzFqR08V9ebF7QCNcBGAsYHQ/s0/wendycode-logo-s300.png'/></div>
        <a class='wendyYTdetails' href='https://www.youtube.com/channel/UCKlfXy_XQHZmWSnUUvKJSzQ?sub_confirmation=1' target='_blank'>
         <span>Wendy Code</span>
        <p>Subscribe YouTube Kami Juga Ya</p>
       </a>
     </div>
   <div class='wendyYtcloseIcon'><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 wendy code
var time = 5000;
var welcomeSession = sessionStorage.getItem('welcomeSession');if(welcomeSession === null){$(window).bind('load',function(){setTimeout(function(){$('.wendyYTwrap').css("display","block");welcomeSession = sessionStorage.setItem('welcomeSession',true)}
,time);$('.wendyYtcloseIcon').click(function(){$('.wendyYTwrap').addClass('hide')}
)})}</script>

bagian yang saya tandai seperti var time = 5000; artinya pop up akan muncul dalam waktu 5 detik, silakan di sesuaikan saja sesuai kebutuhan kalian
ganti juga https://www.youtube.com/channel/UCKlfXy_XQHZmWSnUUvKJSzQ dengan url youtube kalian.

ok jadi sekian cara membuat pop up subscribe youtube channel di blog semoga bermanfaat.