bergabung di grup telegram kami

cara membuat pop up subscribe youtube channel di blog

cara membuat pop up subscribe youtube channel di blog
cara membuat pop up subscribe youtube channel di blog

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 async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

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

/* 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.

Baca juga :

12 komentar



image quote pre code
  1. Terimaksih mas sudah dibuatin tutorialnya,Next buatin tutorial auto scroll seperti blogini
    1. sama2 ya mas, auto scroll kan sudah pernah saya buat
  2. url youtubenya bisa diganti dgn url instagram ga ya, mas?
    1. Bisa mas, bebas aja url apa aja bisa kok
  3. Please make posts in English. Request 🙏🏻
    1. This blog provides a translation widget into English, in the header of this blog, click the translation icon, you will find 2 languages ​​namely Chinese and English
  4. keren, ijin pakai
    1. silakan mas
  5. min buatin dong min yang kaya gini persis tapi untuk video autoplay, jadi munculnya nanti video
  6. ijin comot gan ,gan mau nanya kalau button download di blog supaya bisa mendownload sekalian subscribe channel youtube bisa apa gak gan??mohon di balas
    1. silakan di kembangkan, contoh sederhana
      <!-- ubah -->
      <a class='wendyYTdetails' href='https://www.youtube.com/channel/UCKlfXy_XQHZmWSnUUvKJSzQ?sub_confirmation=1' target='_blank'>

      <!-- jadi -->

      <a class='wendyYTdetails' onclick="window.open('https://www.youtube.com/channel/UCKlfXy_XQHZmWSnUUvKJSzQ?sub_confirmation=1');window.open('https://drive.google.com/uc?export=download&id=1lRv_up8ahHqoU2bnspcD7qLD6bIM9oxl')">
  7. cara hapus rtl mode di median ui gimana bang
© 2020 - Wendy Code