Cara Membuat Tombol Subscribe Youtube di Blog Dengan URL

Di artikel sebelumnya aku 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 memakai Youtube subscription link yang dibungkus ke dalam tombol semoga tampilannya lebih menarik. Makara ketika ada yang membuka URL tersebut, ia akan pribadi berlangganan channel kita secara otomatis. Tapi sebelum itu tetap harus melalui tahap konfirmasi dulu sih, gres setelahnya akan menjadi subscribers.

Cara Berlangganan Youtube Otomatis Melalui URL

Selain dipasang di blog, URLnya sanggup pribadi kau sebar di aneka macam tempat. Bisa di Facebook, Twitter, bahkan diiklankan melalui Google Ads atau Facebook Ads semoga subscribers lebih cepat bertambah. Ini alasannya subscribe channel Youtube melalui URL memang sangat praktis.


Format:
https://www.youtube.com/c/NamaChannel/?sub_confirmation=1
Atau
https://www.youtube.com/channel/IDChannel/?sub_confirmation=1

Artinya kau hanya perlu menambahkan ?sub_confirmation=1 ke URL channel semoga link subscribe Youtube ini sanggup bekerja.

Jika SUDAH mendapat custom URL, maka format URLnya menyerupai ini:
https://www.youtube.com/c/Carabuatblogitu?sub_confirmation=1

Jika BELUM mendapat custom URL, maka format URLnya menyerupai ini:
https://www.youtube.com/channel/UCIXIYlGPzLpWTYAaqQFLtQA?sub_confirmation=1


Membuat Tombol Subscribe Youtube Dengan CSS dan HTML

Nah...setelah link didapatkan, kini saatnya membuat tombol subscribe channel Youtube di blog semoga lebih menarik. Usahakan tampilannya semirip mungkin dengan tombol orisinil yang memerlukan script eksternal itu. Tapi alasannya yang orisinil tombolnya kecil, disini agak diperbesar sedikit. Ikonnya memakai icon SVG sehingga sangat ringan alasannya 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 instruksi 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 instruksi HTML ini dimanapun kau menginginkannya. Kode ini berfungsi untuk menampilkan tombol. Jangan lupa ganti URLnya dengan channel kau sendiri.
<a href='https://www.youtube.com/c/Carabuatblogitu?sub_confirmation=1' title='Carabuatblogitu 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 instruksi 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 instruksi HTML ini sanggup diletakkan dimanapun tergantung posisi munculnya tombol. Ganti URL channel dan URL fotonya.
<a href='https://www.youtube.com/c/Carabuatblogitu?sub_confirmation=1' title='Carabuatblogitu 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='Carabuatblogitu on Youtube' alt='Carabuatblogitu on Youtube'/>     </div>     <span class='ignielSubsFull_name'>Carabuatblogitu</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:
Carabuatblogitu on Youtube
Carabuatblogitu
Subscribe



Tambahan Penting

Link diatas hanya bekerja jikalau dibuka di desktop. Ketika aku coba di handphone, linknya tidak bekerja dan hanya akan membuka channel saja tanpa ada konfirmasi subscribe. Mungkin memang tidak sanggup untuk Youtube versi mobile, mungkin juga ini bug yang belum diperbaiki. Ya semoga saja bug dan sanggup segera normal, alasannya jarang terjadi ada link yang tidak sanggup dibuka di salah satu jenis perangkat.

Maka jikalau kau mengiklankan URL subscribe Youtube ini, untuk sementara pastikan hanya menentukan audience dari desktop saja semoga tidak rugi. Jika ada info terbaru mengenai versi mobile akan segera diupdate disini.

Demikian tutorial lengkap wacana cara memasang tombol subscribe Youtube otomatis dengan link. Berikan masukan tutorial apa lagi yang perlu dibentuk dengan menulisnya di kolom komentar di bawah.
Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours