|
| Membuat Widget Pintasan Popup Subscribe Youtube di Blogger |
Cookie Popup Subscribe Youtube
Sekilas mengenai arti subscribe dapat diterjemahkan sebagai langganan dalam bahasa Indonesia. Dalam Youtube, pengertian subscribe adalah fasilitas yang diberikan kepada para pengguna Youtube untuk berlangganan terhadap semua konten dalam channel tertentu. Ibaratnya subscribe itu sama seperti kita berlangganan koran.
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 blog dapat memberikan sedikit bantuan untuk lalu lintas blog bersama dengan saluran.
Cookie Popup Subscribe adalah 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.
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 Pop Up Subscribe di Youtube sangat bermanfaat, karena akan langsung terlihat di mata pengunjung blog.
Tutorial
Bagaimana cara membuat popup subscribe ? Cara membuat widget pintasan Popup Subscribe Youtube di Blogger, ikuti langkah-langkahnya sebagai berikut.
- Langkah pertama adalah menambahkan JQuery Script
- Langkah kedua adalah menambahkan kode CSS Subscribe Button Style
- Langkah terakhir adalah menambahkan Button
Script Popup Subscribe Youtube
- Masuk ke Dashboard Blogger
- Pilih Tema
- Masuk ke Edit HTML
- Salin kode script di bawah ini dan tempelkan sebelum </head>
- Kemudian salin kode CSS ini dan tempelkan di atas atau sebelum kode ]]></b:skin>
- Salin kode script javascript di bawah ini dan tempelkan tepat di atas atau sebelum tag </body>
- Terakhir - Simpan
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
/* 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>
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.
<!--Menambahkan JavaScript - Tampilan Tombol Popup 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-->
Demo
Demo tampilan pop up ini subscribe youtube 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.
SubscribeDemikian Cara Membuat Widget Pintasan Popup Subscribe Youtube di Blogger, semoga bermanfaat.