 |
| Membuat Widget Pintasan Popup Subscribe Youtube di Blogger |
Widget Pintasan Popup Subscribe Youtube
Ada cara mudah menambah jumlah view di video dan blog youtube yang bisa membantu anda menambah jumlah subscriber di channel youtube anda, jika anda seorang blogger yang juga seorang youtuber, maka Widget Pop Up Subscribe di Youtube sangat bermanfaat, karena akan langsung terlihat di mata pengunjung blog.
Seperti yang kita ketahui, channel YouTube dapat dimonetisasi oleh Adsense hanya jika jumlah subscriber Anda telah mencapai 1.000 dan volume tonton publik 4.000 jam telah selesai dalam 12 bulan terakhir. Yang perlu kerja keras untuk mencapainya, menambahkan tombol berlangganan pop up YouTube di posting blog dapat memberikan sedikit bantuan untuk lalu lintas blog bersama dengan saluran.
Cookie Popup Subscribe
Cookie penyimpanan digunakan untuk peringatan pop up ini, jadi setiap kali ditutup, popup tidak akan muncul lagi, kecuali browser ditutup dan dibuka kembali dan itu tidak akan mengganggu.
Skrip Tombol Animasi Subscribe Pop Up untuk Blogger
Tutorial ini akan dibagi menjadi 3 bagian.
- Langkah pertama adalah menambahkan JQuery Script
- Langkah kedua adalah menambahkan kode CSS Subscribe Button Style
- Langkah terakhir adalah menambahkan Button
Tutorial
Cara membuat widget pintasan Popup Subcribe Youtube di Blogger, sebagai berikut.
1. Menambahkan JQuery Script
Pertama Anda harus pergi ke menu Dashboard Blogger - Edit Template HTML dan tambahkan kode skrip jQuery di bawah ini di grup kode <head> di blog Anda. Singkatnya, silakan klik Tema dan klik Edit HTML. Jangan lupa untuk mem-backup template anda terlebih dahulu untuk menghindari kesalahan editing.
Salin kode script di bawah ini dan tempelkan sebelum </head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
2. Menambahkan Kode CSS Subscribe Button Style
Salin kode CSS ini dan tempelkan di atas atau sebelum kode ]]></b:skin>
/* Pop Up subscribe animation button by thewebtrick.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 #f09800;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}}
/* CSS Code for Darkmode or Removed this section */
.dark-mode .Ytwrap,.dark-mode .YtcloseIcon svg{background:#2d2d30}
.dark-mode .Ytwrap{border-color:#444}
.dark-mode .Ytdetails span,.dark-mode .Ytdetails p{color:#e2e2e2}
Keterangan :
Di dalam Blogger kode css ini bisa ditampilkan di tag <b:skin>...</b:skin> . Jika anda kesulitan menemukan kode css di atas, anda bisa mencari kode </head> kemudian letakkan kode css tadi , tepat di atas kode atau sebelum </head> , dengan catatan <style>...</style> kode tersebut harus anda gunakan. Misalnya seperti ini :
<style>
<!--[ Fill in the CSS Code above ]-->
</style>
3. Menambahkan JavaScript - Tampilan Tombol Subscribe
Kode skrip ini berfungsi untuk menampilkan tombol berlangganan youtube di blog, setelah menambahkan kode skrip di bawah ini di blog, secara otomatis tombol berlangganan mengambang akan terlihat.
Cara termudah untuk menambahkan kode JavaScript adalah dengan menempatkan kode javascript nya di tag </body> . Biasanya tag </body> ini berada di bagian bawah template. Salin JavaScript di bawah ini dan tempel tepat di atas atau sebelum tag </body>
<!--Menambahkan JavaScript - Tampilan Tombol Subscribe-->
<div class='Ytwrap'>
<div class='Ytcontent'>
<div class='Yticon'><img alt='code' class='logo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPoy2-6U8K0eU-2zi_xKHIC3W9PudCn8uGP3CxnW22-5B0p_6HldO__I2EB6fqkx4755hTr9ekk_IeaoLcuxWipy4oE4Qx6-PvWHPF9SrsTR67KFsyRsAelkmcvKPJNTE34QRVjyiWroXGWj84SPh1y9sHxeH2peYJvY_A0rPuCM7S0l7v4wksqjzu/s225/blogx.png.webp' width='150' height='150'/></div>
<a class='Ytdetails' href='https://www.youtube.com/channel/XXXXXXXXXXXXXXXX?sub_confirmation=1' target='_blank'>
<span>Subscribe Channel</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>
<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>
<!--Menambahkan JavaScript - Tampilan Tombol Subscribe-->
*) Pada bagian var time = 5000; Artinya pop up akan muncul dalam 5 detik, silahkan sesuaikan dengan kebutuhan Anda.
4. Simpan
Demo
Demo pop up ini terdapat cokies penyimpanan, jadi setiap kali popup ditutup, popup tidak akan muncul lagi, kecuali browser ditutup dan dibuka kembali dan itu tidak akan mengganggu blog anda.
Subscribe