Skip to content Skip to sidebar Skip to footer

Widget HTML #1

Begini Cara Membuat Tombol Subscribe Youtube Otomatis dengan Link di Blog

Begini Cara Membuat Tombol Subscribe Youtube Otomatis dengan Link di Blog
Pada postingan sebelumnya saya sudah menguraikan Cara Memasang Tombol Subscribe Youtube di Blog yang memerlukan pemanggilan script link eksternal dari Google API. Pada kesempatan ini ada versi alternatif lain yang tidak memerlukan script eksternal apapun, sehingga tombolnya lebih ringan dan tidak menambah waktu loading halaman.

Cara Mendapatkan Youtube Subscription Link

Kali ini kita akan menggunakan Youtube subscription link yang dibungkus ke menjadi tombol agar tampilannya lebih menarik. Ketika ada seseorang yang membuka URL tersebut, mereka akan langsung menjadi sebscriber channel kita secara otomatis. Namun, sebelum langsung, tetap harus melalui tahap konfirmasi dulu sih, baru setelahnya akan menjadi subscribers.

Cara Berlangganan Youtube Otomatis Melalui URL

Selain untuk dipasang di blog anda, URL ini bisa langsung anda sebar di berbagai tempat. Contohnya anda share di Facebook, Twitter, bahkan diiklankan melalui Google Ads atau Facebook Ads agar subscribers lebih cepat bertambah. Hal ini dkarenakan 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

Kode tersebut berarti 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/Otomotif-SMKN1SKL?sub_confirmation=1

Jika BELUM mendapatkan custom URL, maka format URLnya seperti ini:
https://www.youtube.com/channel/UCnAECTQ87u7tbaLqZLipVYg?sub_confirmation=1


Membuat Tombol Subscribe Youtube Dengan CSS dan HTML

Oke...setelah link ID channel anda didapatkan, sekarang waktunya membuat tombol subscribe channel Youtube di blog agar lebih menarik. Anda harus membuat tampilannya semirip mungkin dengan tombol asli yang memerlukan script eksternal itu. Tapi karena yang asli tombolnya kecil, disini agak diperbesar sedikit. Ikonnya kita perbesar menggunakan icon SVG sehingga sangat ringan karena tidak perlu memanggil library font apapun.

Kami meyediakan 2 pilihan tampilan tombol. Silahkan anda 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;
}

Kemudian 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/channel/UCnAECTQ87u7tbaLqZLipVYg?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

Tambahkan foto dan nama channel akan muncul pada tombol buatan kita ini. Caranya, cukup menambahkan 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 penempatan kode HTML ini bisa diletakkan dimanapun tergantung posisi munculnya tombol. Ganti URL channel dan URL fotonya.
<a href='https://www.youtube.com/channel/UCnAECTQ87u7tbaLqZLipVYg?sub_confirmation=1' title='Igniel on Youtube' target='_blank'>
  <div class='ignielSubsFull'>
    <div class='ignielSubsFull_img'><img src='https://1.bp.blogspot.com/-2-uByJn0VLM/YFGYKArxjYI/AAAAAAAAEps/EjqY-GbqECsBTWWEeq5CqZ1uh3jxKWCZQCK4BGAYYCw/w1600/otomotif-smkn1skl.png' 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:
Igniel on Youtube
Otomotif-SMKN1SKL
Subscribe



Tambahan Penting

Link diatas hanya bekerja jika dibuka versi di desktop saja. Ketika anda coba membukanya di handphone, linknya tidak bekerja dan hanya akan membuka channel saja tanpa ada konfirmasi subscribe. Mungkin hal ini terjadi karena cara ini 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.

Untuk kamu yang ingin mengiklankan URL subscribe Youtube ini, sementara pastikan hanya memilih audience dari desktop saja agar anda tidak rugi. Jika kami memiliki info terbaru mengenai versi mobile akan segera diupdate disini.

Demikian uraian lengkap tentang cara memasang tombol subscribe Youtube otomatis dengan link. Anda bisa memberikan masukan tutorial apa lagi yang perlu dibuat dengan menulisnya di kolom komentar di bawah.

Post a Comment for "Begini Cara Membuat Tombol Subscribe Youtube Otomatis dengan Link di Blog"