Punya blog di Blogger dan ingin menambahkan kotak subscribe YouTube yang menampilkan jumlah subscriber secara realtime? Ini dia tutorial lengkapnya! Kita akan bahas mulai dari apa itu kotak subscribe, manfaatnya, hingga langkah-langkah memasangnya di Blogger secara detail.
Apa Itu Kotak Subscribe YouTube?
Kotak subscribe YouTube adalah widget kecil yang bisa kamu pasang di blog untuk menampilkan informasi channel YouTube, seperti:
Nama Channel – Menampilkan nama channel YouTube secara otomatis.
Jumlah Subscriber – Menunjukkan jumlah subscriber yang selalu diperbarui secara realtime.
Jumlah Video – Memperlihatkan total video yang telah diunggah ke channel.
Tombol Subscribe – Pengunjung blog bisa langsung berlangganan hanya dengan satu klik.
Dengan adanya kotak ini, kamu bisa lebih mudah menarik perhatian pembaca blog agar ikut mendukung channel YouTube milikmu.
Fungsi dan Manfaat Memasang Kotak Subscribe di Blogger
Ada banyak alasan mengapa kotak subscribe ini sangat bermanfaat bagi pemilik blog, terutama bagi yang juga memiliki channel YouTube. Berikut adalah beberapa keuntungannya:
Meningkatkan Jumlah Subscriber – Pengunjung blog yang tertarik dengan kontenmu bisa langsung subscribe tanpa harus pergi ke YouTube terlebih dahulu.
Membantu Branding – Menampilkan channel YouTube di blog bisa meningkatkan kepercayaan dan kredibilitas brand atau personal branding kamu.
Menampilkan Data Secara Realtime – Dengan API YouTube, data jumlah subscriber dan video akan selalu diperbarui secara otomatis.
Meningkatkan Engagement – Semakin banyak orang yang melihat channel YouTube-mu, semakin besar peluang untuk mendapatkan lebih banyak interaksi dari penonton.
Cara Memasang Kotak Subscribe YouTube di Blogger
Berikut adalah langkah-langkah yang perlu kamu ikuti untuk memasang kotak subscribe YouTube di Blogger dengan tampilan yang menarik dan update secara otomatis.
1. Masuk ke Blogger dan Edit HTML
Buka Blogger dan login ke akun kamu.
Pilih blog yang ingin ditambahkan widget kotak subscribe.
Masuk ke menu Tema > Edit HTML.
2. Tambahkan CSS untuk Kotak Subscribe
Tambahkan kode CSS berikut di atas kode ]]></b:skin> atau di dalam tag <style> yang sudah ada:
.ytbox { position: relative; display: flex; align-items: center; max-width: 400px; background-color: #fefefefe; box-shadow: 0 5px 12px -2px rgb(0 0 0 / 12%); padding: 10px; border-radius: 5px; } .ytbox img { width: 80px; height: 80px; border-radius: 10px; margin: 5px; } .ytinfo { display: flex; flex-direction: column; margin: 10px; } .namaChannel { font-size: 1.2em; font-weight: 800; } .channelInfo { font-size: 0.8em; color: #666; } .ytSubscribe { display: flex; align-items: center; padding: 3px 8px; font-size: 14px; height: 27px; width: 122px; background-color: #ff0000; color: #fff; text-decoration: none; border-radius: 5px; } .ytSubscribe:hover { opacity: 0.3; } .ytSubscribe svg { fill: none !important; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; opacity: .8; width: 20px; height: 20px; margin: 0 5px; }3. Tambahkan HTML Kotak Subscribe
Tambahkan kode HTML berikut di tempat yang kamu inginkan di dalam blog, misalnya di dalam widget HTML/Javascript atau di bawah postingan dengan meletakkannya di bawah <data:post.body/>.
<div class="ytbox">
<img src="" alt="Channel Thumbnail">
<div class="ytInfo">
<div class="namaChannel"></div>
<div class="channelInfo">
<span id="ytSubscriber">...</span> Subscriber |
<span id="ytVideo">...</span> Video
</div>
<a class="ytSubscribe" href="https://www.youtube.com/channel/UCGG8l4oYp_66PuTFoOtnBoQ" target="_blank">SUBSCRIBE
<svg class="line" viewBox="0 0 24 24">
<path d="M12 6.43994V9.76994" stroke-miterlimit="10"></path>
<path
d="M12.02 2C8.34002 2 5.36002 4.98 5.36002 8.66V10.76C5.36002 11.44 5.08002 12.46 4.73002 13.04L3.46002 15.16C2.68002 16.47 3.22002 17.93 4.66002 18.41C9.44002 20 14.61 20 19.39 18.41C20.74 17.96 21.32 16.38 20.59 15.16L19.32 13.04C18.97 12.46 18.69 11.43 18.69 10.76V8.66C18.68 5 15.68 2 12.02 2Z"
stroke-miterlimit="10"></path>
<path
d="M15.33 18.8201C15.33 20.6501 13.83 22.1501 12 22.1501C11.09 22.1501 10.25 21.7701 9.65004 21.1701C9.05004 20.5701 8.67004 19.7301 8.67004 18.8201"
stroke-miterlimit="10"></path>
</svg></a>
</div>
</div>- Ganti
https://www.youtube.com/channel/UCGG8l4oYp_66PuTFoOtnBoQlink channel kalian
4. Tambahkan JavaScript untuk Update Jumlah Subscriber
Letakkan kode JavaScript ini di atas kode </body> agar dapat mengambil data jumlah subscriber secara otomatis.
<script>/*<![CDATA[*/
var idchannel = "UC2GuZiW4axkZvTpH2hI2oBg";
var ytkey = "AIzaSyBQEM8r1Sd8CWB52sBBi1uw7mGwJcl2l-c";
async function fetchSubscribers() {
try {
const response = await fetch(`https://www.googleapis.com/youtube/v3/channels?part=snippet,statistics&id=${idchannel}&key=${ytkey}`);
const data = await response.json();
if (data.items && data.items.length > 0) {
const channel = data.items[0];
document.querySelector(".ytbox img").src = channel.snippet.thumbnails.medium.url;
document.querySelector(".namaChannel").textContent = channel.snippet.title;
document.getElementById("ytSubscriber").textContent = channel.statistics.subscriberCount;
} else {
document.getElementById("ytSubscriber").textContent = "Data tidak ditemukan";
}
} catch (error) {
document.getElementById("ytSubscriber").textContent = "Error";
console.error("Error fetching data:", error);
}
}
fetchSubscribers();
/*]]>*/</script>- Ganti
UC2GuZiW4axkZvTpH2hI2oBgdengan id channel kalian masing masing,id ini bisa kalian dapatkan di youtube studio. - Ganti
AIzaSyBQEM8r1Sd8CWB52sBBi1uw7mGwJcl2l-cdengan api key kalian masing masing,untuk caranya ada dibawah ini.
5. Cara Mendapatkan API Key YouTube
Untuk mendapatkan API Key yang diperlukan pada kode di atas, ikuti langkah berikut:
Kunjungi Google Cloud Console.
Klik Project Baru, beri nama project sesuai keinginan, lalu klik Buat.
Pilih menu Library, cari YouTube Data API v3.
Klik Enable, lalu pilih Create Credentials.
Pada bagian Select API, pilih YouTube Data API v3.
Centang Public Data, lalu klik Next.
Setelah itu, akan muncul API Key, salin dan gunakan pada kode JavaScript di atas.
Penutup
Itulah cara memasang kotak subscribe YouTube di Blogger dengan update jumlah subscriber secara realtime. Dengan adanya widget ini, pengunjung blog bisa langsung melihat statistik channel kamu dan lebih mudah untuk subscribe.
Jangan lupa untuk menyesuaikan desain sesuai dengan tampilan blog kamu. Semoga berhasil dan happy blogging! 🚀