Posts
Subscribe button
. If you want to install youtube popup on your blog then read full post
Read Also :
How to Make YouTube PopUp Subscribe Button on Blogger :-
Step 1 :- First of All Go To Blogger.Com And Login Your Account.
Step 2 :- Then Click on Theme Menu.
Step 3 :- After Click on Edit Html.
Step 4 :- Then Copy The JQuery Code and Place Above Code </head> or <!--<head/>--></head>.
javascript<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>Step 5 :- Then Copy The Css Code and Place Above Code </head> or <!--<head/>--></head>.
css<style type='text/css'>
/* Pop Up Subscribe Animation Button By Www.SmartTechMukesh.Online */
@keyframes show_Yt{0%{transform:translateX(100%)}40%{transform:translateX(-10%)}80%{transform:translateX(0%)}100%{opacity:1;pointer-events:auto;transform:translateX(-10px)}}
@keyframes hide_Yt{0%{transform:translateX(-10px)}40%{transform:translateX(0%)}80%{transform:translateX(-10%)}100%{transform:translateX(calc(100% + 100px))}}
.Ytwrap{position:fixed;z-index:9999999;right:55px;bottom:20px;animation:show_Yt 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 #
0a16ff;width:300px;align-items:center;justify-content:space-between;display:none}
.Ytwrap.hide{animation:hide_Yt 0.8s ease forwards}
.Ytcontent{display:flex;align-items:center}
.Yticon .logo{max-width:60px;border-radius:100%;transition:all 0.3s ease}
.Ytcontent .Ytdetails{margin-left:15px;text-decoration:none;outline:none}
.Ytdetails span{font-family:Noto Sans;position:relative;font-size:18px;font-weight:600;color:#000000;top:10px}
.Ytdetails p{color:#878787;font-size:12px}
.YtcloseIcon 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}
.Ytwrap:hover .Yticon img{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
.YtcloseIcon:hover svg{fill: #444;}
@media screen and (max-width: 480px){.Ytwrap{right:25px}}
</style>
Step 6 :- Then Paste The Given Html And JavaScript Code Above The </body> Tag.
html<div class='Ytwrap'>
<div class='Ytcontent'>
<div class='Yticon'><img alt='code' class='logo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCSCcjvfmjoHSvIYLHe0X-oIkSinjLOOW3eSGvFo7c0AoS3dWJT4Gb_KBK1DmYTk_zy7MUmlKVmVknnr6ZfGa4vRYO1U5uLdU2nl-O7OI-SrClXdi3KVGAei5CfXcPZ0R7I59A9TSvCGg/s2048/smarttechmukesh.png'/></div>
<a class='Ytdetails' href='https://www.youtube.com/channel/XXXXXXXXXXXXXXXX?sub_confirmation=1' target='_blank'>
<span>Your Channel Name</span>
<p>Subscribe Our YouTube Channel</p>
</a>
</div>
<div class='YtcloseIcon'><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>Replace the above part of the code with your YouTube Channel URL.
javascript
<script type='text/javascript'>
var time = 5000;
var welcomeSession = sessionStorage.getItem('welcomeSession');if(welcomeSession === null){$(window).bind('load',function(){setTimeout(function(){$('.Ytwrap,.flashlight').css("display","block");welcomeSession = sessionStorage.setItem('welcomeSession',true)}
,time);$('.YtcloseIcon').click(function(){$('.Ytwrap').addClass('hide')}
)})}</script>In this part marked as var time = 5000; That means the pop up will appear within 5 seconds, please adjust it according to your needs.
Step 7 :- Then Don't Forget to Click on Save and Then See The Result.
Conclusion :-
In this post I have explained How to Make Animated YouTube PopUp Subscribe Button on Blogger. I Hope this tutorial can be useful for you. Thank You for Visiting Our Website.
Refrence :
Www.SmartTechMukesh.Online