Di artikel sebelumnya saya sudah membahas Cara Memasang Tombol Subscribe Youtube di Blog yang memerlukan pemanggilan script eksternal dari Google API. Kali ini ada versi alternatif lain yang tidak memerlukan script eksternal apapun sehingga tombolnya lebih ringan dan tidak menambah waktu loading halaman.
Mendapatkan Youtube Subscription Link
Disini kita akan menggunakan Youtube subscription link yang dibungkus ke dalam tombol agar tampilannya lebih menarik. Jadi ketika ada yang membuka URL tersebut, dia akan langsung berlangganan channel kita secara otomatis. Tapi sebelum itu tetap harus melalui tahap konfirmasi dulu sih, baru setelahnya akan menjadi subscribers.
Selain dipasang di blog, URLnya bisa langsung kamu sebar di berbagai tempat. Bisa di Facebook, Twitter, bahkan diiklankan melalui Google Ads atau Facebook Ads agar subscribers lebih cepat bertambah. Ini karena subscribe channel Youtube melalui URL memang sangat praktis.
Format:
https://www.youtube.com/c/NamaChannel/?sub_confirmation=1https://www.youtube.com/channel/IDChannel/?sub_confirmation=1Artinya kamu hanya perlu menambahkan ?sub_confirmation=1 ke URL channel agar link subscribe Youtube ini bisa bekerja.
Jika SUDAH mendapatkan custom URL, maka format URLnya seperti ini:
https://www.youtube.com/c/Igniel?sub_confirmation=1Jika BELUM mendapatkan custom URL, maka format URLnya seperti ini:
https://www.youtube.com/channel/UCIXIYlGPzLpWTYAaqQFLtQA?sub_confirmation=1Membuat Tombol Subscribe Youtube Dengan CSS dan HTML
Nah...setelah link didapatkan, sekarang saatnya membuat tombol subscribe channel Youtube di blog agar lebih menarik. Usahakan tampilannya semirip mungkin dengan tombol asli yang memerlukan script eksternal itu. Tapi karena yang asli tombolnya kecil, disini agak diperbesar sedikit. Ikonnya menggunakan icon SVG sehingga sangat ringan karena tidak perlu memanggil library font apapun.Saya sediakan 2 pilihan tampilan. Pilih salah satu yang paling disukai.
1. Layout Default
Tampilan sederhana, hanya tampil tombolnya saja. Tambahkan kode CSS ini "SEBELUM / DI ATAS"</style> atau ]]></b:skin>..ignielSubs {
background-color: #e62117;
color: #fefefe;
font-weight: 400;
font-size: 16px;
padding: 3px 7px;
display: inline-block;
border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 0 1px 0 rgba(0,0,0,0.05);
outline: 0;
line-height: 0px;
}
.ignielSubs svg {
width:24px;
height:24px;
vertical-align: -6px;
margin-right: 3px;
}
.ignielSubs svg path {
fill: #fff;
}Lalu simpan kode HTML ini dimanapun kamu menginginkannya. Kode ini berfungsi untuk menampilkan tombol. Jangan lupa ganti URLnya dengan channel kamu sendiri.
<a href='https://www.youtube.com/c/Igniel?sub_confirmation=1' title='Igniel on Youtube' target='_blank'>
<div class='ignielSubs'>
<svg viewBox='0 0 24 24'> <path d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z'/></svg>Subscribe
</div>
</a>Hasil akhir:
Subscribe
2. Layout Full
Foto dan nama channel akan muncul. Tambahkan kode CSS ini "SEBELUM / DI ATAS"</style> atau ]]></b:skin>..ignielSubsFull {
margin: 0px;
padding: 0px;
line-height: 21px;
}
.ignielSubsFull_img {
float: left;
margin-right: 7px;
}
.ignielSubsFull_img img {
width: 55px;
height: 55px;
}
.ignielSubsFull_name, a.ignielSubsFull_name {
color: #555;
text-align: left;
line-height: 16px;
}
.ignielSubsFull_button {
background-color: #e62117;
color: #fefefe;
font-weight: 400;
font-size: 16px;
padding: 3px 7px;
display: table;
border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 0 1px 0 rgba(0,0,0,0.05);
outline: 0;
margin-top: 8px;
line-height: 0px;
}
.ignielSubsFull svg {
width:24px;
height:24px;
vertical-align: -6px;
margin-right: 3px;
}
.ignielSubsFull svg path {
fill: #fff;
}Dan kode HTML ini bisa diletakkan dimanapun tergantung posisi munculnya tombol. Ganti URL channel dan URL fotonya.
<a href='https://www.youtube.com/c/Igniel?sub_confirmation=1' title='Igniel on Youtube' target='_blank'>
<div class='ignielSubsFull'>
<div class='ignielSubsFull_img'><img src='https://lh4.googleusercontent.com/-7OrG2Z5mX54/AAAAAAAAAAI/AAAAAAAAFMo/N-mVqL2qsfk/s55-c/photo.jpg' title='Igniel on Youtube' alt='Igniel on Youtube'/>
</div>
<span class='ignielSubsFull_name'>Igniel</span>
<div class='ignielSubsFull_button'>
<svg viewBox='0 0 24 24'> <path d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z'/></svg>Subscribe
</div>
</div>
</a>Hasil akhir:
Tambahan Penting
Link diatas hanya bekerja jika dibuka di desktop. Ketika saya coba di handphone, linknya tidak bekerja dan hanya akan membuka channel saja tanpa ada konfirmasi subscribe. Mungkin memang tidak bisa untuk Youtube versi mobile, mungkin juga ini bug yang belum diperbaiki. Ya semoga saja bug dan bisa segera normal, karena jarang terjadi ada link yang tidak bisa dibuka di salah satu jenis perangkat.Maka jika kamu mengiklankan URL subscribe Youtube ini, untuk sementara pastikan hanya memilih audience dari desktop saja agar tidak rugi. Jika ada info terbaru mengenai versi mobile akan segera diupdate disini.
Demikian tutorial lengkap tentang cara memasang tombol subscribe Youtube otomatis dengan link. Berikan masukan tutorial apa lagi yang perlu dibuat dengan menulisnya di kolom komentar di bawah.
