Codepelajar – fitur pop-up notifikasi subscribe YouTube pada Blogspot dapat membantu Anda memperluas jangkauan dan meningkatkan basis penggemar di saluran YouTube Anda. Dengan menampilkan pop-up notifikasi bergaya yang menarik, pengunjung blog Anda akan memberikan izin untuk menerima pemberitahuan tentang konten video terbaru yang Anda unggah. Dengan demikian, Anda dapat meningkatkan jumlah langganan dan meningkatkan eksposur saluran YouTube Anda.
Cara Membuat Fitur Notifikasi Subscribe
Silahkan buka Blogspot > tema > edit html salin CSS di bawah ini dan tempel di atas kode ]]></b:skin> atau </style>
• • •
/* pop up subscribe youtube by codepelajar */
@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}
• • •
Namun jika Anda belum memasang jQuery silahkan pasang dulu dengan tempelkan kode dibawah ini di atas kode </head> atau <!–</head>–></head>
• • •
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
• • •
Setelah itu, salin kode dibawah ini dan tempelkan di atas kode </body>
• • •
<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_sjsHZmWSnUUvKJSzQ?sub_confirmation=1' target='_blank'>
<span>Code Pelajar</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 codepelajar
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>
• • •
Pada bagian var time = 5000; itu menunjukkan bahwa Pop Up akan muncul dalam waktu 5 detik, Anda dapat menentukan waktunya semau Anda.
Oke mungkin itu saja yang dapat saya sampaikan semoga bermanfaat dan blog Anda dapat diminati pengunjung.
