How to Make Animated YouTube PopUp Subscribe Button on Blogger ?

YouTube has become a popular platform for many bloggers, and it is a platform that bloggers should not ignore. Since Blogger most of today's generation uses YouTube, it is a good way to increase followers and a great way to drive traffic to your main website. It can also prove to be very helpful in increasing the subscribers of your YouTube channel.

There are easy ways to increase youtube video and blog views which can help you to increase the number of subscribers of your youtube channel, if you are a blogger who is also a youtuber, then setting up pop up on youtube is very important. This will be of great help as it will be immediately visible in the eyes of the visitors. With this, your readers can easily subscribe to your channel.

A YouTube channel monetized with Adsense can range from 1000 to 4,000 hours depending on the number of subscribers you have. It takes a lot of hard work to achieve this. Adding youtube pop up subscribe button in blog post can help a bit in channel as well as blog traffic. If you want to install youtube popup on your blog then read full post

How to Make Animated YouTube PopUp Subscribe Button on Blogger :-

Step 1 :- First of All Go To Blogger.Com And Logon Your Account.

Step 2 :- Then don't forget to back up your template first to avoid editing mistakes.

Step 3 :- Then Click on Edit Html.

Step 4 :- Then Copy The JQuery Code and Place Above Code </head> or &lt;!--<head/>--&gt;&lt;/head&gt; .

 <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 &lt;!--<head/>--&gt;&lt;/head&gt; .

<style type='text/css'>
/* Pop Up Subscribe Animation Button By https://smarttechcarry.blogspot.com/ */
@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 find </body> tag and then paste the code given.

<div class='Ytwrap'>
   <div class='Ytcontent'>
     <div class='Yticon'><img alt='code' class='logo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDkcD5_TCkXrxaMFIzRafcLN2v4asmsfpIAHXXNdYuTv7nwrEv1rjhpEMg2bxYluhckzxaTNpsGB763hBRF8_6ZpD1GxUvUken56OnGrQ6TLUOxD9ot855J42xnTbO_D8SIGSz8WsyG-E/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.

<script type='text/javascript'>
var time = 5000;
var welcomeSession = sessionStorage.getItem(&#39;welcomeSession&#39;);if(welcomeSession === null){$(window).bind(&#39;load&#39;,function(){setTimeout(function(){$(&#39;.Ytwrap,.flashlight&#39;).css(&quot;display&quot;,&quot;block&quot;);welcomeSession = sessionStorage.setItem(&#39;welcomeSession&#39;,true)}
,time);$(&#39;.YtcloseIcon&#39;).click(function(){$(&#39;.Ytwrap&#39;).addClass(&#39;hide&#39;)}
)})}</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 shared with you all How to Make Animated YouTube PopUp Subscribe Button on Blogger. So how did you like this post and tell me by commenting. If you have any question then you can comment. Thanks for visiting our website.

Refrence :
Smart Tech Carry

Go to Link

Rate This Article

Thanks for reading: How to Make Animated YouTube PopUp Subscribe Button on Blogger ?:)

Conclusion

In this article, I have shared How to Make Animated YouTube PopUp Subscribe Button on Blogger ?. I hope you have liked it Please do share it with your friends and follow our blog for more.

Join our Telegram Channel to get the lastest posts updates daily. Thank you!