Cara Membuat Animasi Tombol Subscribe PopUp YouTube di Blogger

YouTube telah menjadi platform populer bagi banyak blogger, dan merupakan platform yang tidak boleh diabaikan oleh blogger. Karena Blogger sebagian besar generasi saat ini menggunakan YouTube, ini adalah cara yang baik untuk meningkatkan pengikut dan cara yang bagus untuk mengarahkan lalu lintas ke situs web utama Anda. Ini juga terbukti sangat membantu dalam meningkatkan pelanggan saluran YouTube Anda.

Saluran YouTube yang dimonetisasi dengan Adsense dapat berkisar dari 1000 hingga 4.000 jam tergantung pada jumlah pelanggan yang Anda miliki. Dibutuhkan banyak kerja keras untuk mencapai ini. Menambahkan tombol berlangganan pop up youtube di posting blog dapat membantu sedikit di saluran serta lalu lintas blog. Jika Anda ingin memasang popup youtube di blog Anda, baca posting lengkapnya

Langkah 1 :- Pertama-tama Pergi Ke Blogger.Com Dan Masuk Akun Anda.

Langkah 2 :- Kemudian jangan lupa untuk membackup template anda terlebih dahulu untuk menghindari kesalahan editing.

Langkah 3 :- Kemudian Klik Edit HTML.

Langkah 4 :- Kemudian Copy Kode JQuery dan Tempatkan Diatas Code </head> atau &lt;!–<head/>–&gt;&lt;/head&gt;

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

Langkah 5: – Kemudian Salin Kode Css dan Tempatkan Kode Di Atas </head> or &lt;!–<head/>–&gt;&lt;/head&gt; .

<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>

Langkah 6:- Kemudian temukan tag </body> lalu paste kode yang disalin.

<div class="separator" style="clear: both;"><a href="https://1.bp.blogspot.com/-MSjeOSAy9tI/YPZjEnjmL9I/AAAAAAAABzU/AfW1lp-3M8shC-cfRf5zRDIQVeCbp0MgACLcBGAsYHQ/s0/md_5a9797d5c93d3.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="640" data-original-width="640" src=""/></a></div>
<div class="Ytwrap">
   <div class="Ytcontent">
     <div class="Yticon"><img alt="code" class="logo" src="https://1.bp.blogspot.com/-MSjeOSAy9tI/YPZjEnjmL9I/AAAAAAAABzU/AfW1lp-3M8shC-cfRf5zRDIQVeCbp0MgACLcBGAsYHQ/s0/md_5a9797d5c93d3.jpg" /></div>
        <a class="Ytdetails" href="https://www.youtube.com/channel/XXXXXXXXXXXXXXXX?sub_confirmation=1" target="_blank">
         <span>Nama Channel Anda</span>
        <p>Berlangganan YouTube Kami 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"></path></svg></div>
 </div>

Ganti bagian kode di atas dengan URL Channel YouTube Anda.

<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>

Pada bagian ini ditandai sebagai var time = 5000; Artinya pop up akan muncul dalam waktu 5 detik, silahkan sesuaikan dengan kebutuhan anda.

Langkah 7: – Kemudian Jangan Lupa Klik Simpan dan Kemudian Lihat Hasilnya.

Kesimpulan :-

Pada postingan kali ini saya telah membagikan kepada kalian semua Cara Membuat Animasi Tombol Subscribe PopUp YouTube di Blogger. Jadi bagaimana Anda menyukai posting ini dan beri tahu saya dengan berkomentar. Jika Anda memiliki pertanyaan maka Anda dapat berkomentar. Terima kasih telah mengunjungi website kami.