 |
| Copyright 2024 Tecky AaryaN |
How To Make Pop Up Subscribe Notification For Your Channel
You can see the demo here⤵
Step 1: Go to your
Blogger Dashboard
Step 2 : Go to Themes and then go to Edit HTML Step 3: Now search for Change the Highlighted Text below in HTML and customize it according to your needs Copyright:</head> or <!--</head>--></head> and paste the following CDN just to above it<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
]]></b:skin> and paste thfollowing CSS just to above it/* pop up subscribe/join notification*/
@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}
</body>or <!--</body>--></body> and paste the following HTML just to above it<div class='wendyYTwrap'> <div class='wendyYTcontent'> <div class='wendyYTicon'><img alt='teckyaaryanlogo' class='wendylogo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6HrJ4U1_yM6K3pjMYfJY0x266iDbPbz47I-NoS-pSu7BKCXDXva5xKKlRq-x_FSpsp9f1VInQpWTCgIxkRcd1LP0x9JtyTOZbQuMV4rJuldWto2PrA7rNaaL1dN7CAWWOvjZk7LqrTn4sl8Y-2nd189sP_TiFl77BJmqAd7pSZ_LuNgXOCOAr-XlTSEI/s16000-rw/20231231_193644.jpg'/></div> <a class='wendyYTdetails' href='https://youtube.com/@Teckyaaryan?si=x14qgHDJrp3vPkd6' target='_blank'> <span>Tecky AaryaN</span> <p>Click Here to Subscribe Channel</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>
Tecky AaryaN