Cara Memasang Tombol Floating YouTube Subscribe di Blogger

Apakah Anda ingin mendorong lebih banyak penayangan ke video youtube Anda dan menumbuhkan pemirsa Anda, maka artikel ini akan membantu Anda.   

Pada artikel ini, Anda akan mempelajari cara menambahkan tombol Floating YouTube Subscribe  ke situs web Blogger Anda.

Jadi, tombol Floating atau Mengambang berfungsi sebagai tombol ajakan bertindak (CTA) tempat Anda meminta pengunjung untuk berlangganan saluran Anda, mendaftar surat Email, mengarahkan ke halaman produk atau layanan, dll. 

Nah pada artikel kali ini kita membahas tentang tombol popup Youtube di Blogger dimana akan muncul popup di bagian bawah halaman web yang meminta untuk berlangganan channel Youtube. 

Jadi, ketika pengguna mengklik tombol subscribe maka akan dialihkan ke channel Youtube. Jadi, dengan cara ini Anda dapat mengalihkan pengguna dari situs web Anda ke saluran Youtube Anda. 

Cara ini membantu Anda meningkatkan jumlah Pelanggan berbasis pengguna di YouTube. Jadi, mari kita mulai bagaimana Anda dapat menambahkannya ke situs web Blogger Anda. 

cara Menambahkan tombol subscribe floating di Blogger

Untuk menambahkan tombol Subscribe floating di Blogger, ikuti langkah-langkah di bawah ini. 

Langkah-1 : Buka dasbor Blogger Anda dan klik edit HTML. 

Langkah-2 : Sekarang ambil cadangan sebelum melanjutkan ke langkah berikutnya. 

Langkah-3 : cari tag </body>. 

Langkah-4 : Sekarang Tambahkan kode HTML & CSS di bawah ini di atasnya. 

<style>
  
  .YT-subscribe {position: fixed;left: 35px;bottom: 20px;background-color: #ececec;padding: 12px 12px 12px 12px;border-radius: 10px 10px 0px 0px;display: flex;align-items: center;max-width: 320px;
  min-width: 280px;height: auto;color: #000000;overflow: hidden;z-index: 100;border-bottom: 4px solid #ff3b00;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
  .YT-subscribe .YT-subscribe-close { position: absolute; top: 4px; right: 8px; } 
  .YT-subscribe .YT-subscribe-close svg { width: 22px; height: 22px; fill: #000; } 
  .YT-subscribe .YT-subscribe-img { width: 70px; height: 50px; } 
  .YT-subscribe .YT-subscribe-img img { display: flex; align-items: center; justify-content: center; width: 50px; } 
  .YT-subscribe .YT-subscribe-content { width: calc(100% - 70px); padding-left: 1px; } 
  .YT-subscribe .YT-subscribe-content a { display: block; color: inherit; } 
  .Subscribe_btn {font-weight: 600;font-size: 12px;display: flex;align-items: center;justify-content: center;width: 120px;height: 30px;padding: 5px 6px;background-color: #e4393c;border-radius: 4px;
   color: #fff;margin-top: 12px;bottom: 0;right: 0;flex-wrap: wrap;flex-direction: row;align-content: center;}
  .YT-subscribe .YT-subscribe-content .YT-title { display: block; font-weight: 700; font-size: 13px; text-align: left; padding-left: 12px }
  .YT-subscribe .Subscribe_btn a { display: block; color: inherit; color:#fff; } 
  .YT-subscribe .YT-subscribe-content .YT-desc { display: block; font-size: 10px; margin-top: 5px; color: #000; text-align: left;padding-left: 12px; line-height: normal; font-weight: 500; }
  .YT-btn-text{margin-left:9px}
  </style>
  
  <div class='YT-subscribe' id='YT-btn'>
  <div class='YT-subscribe-close' onclick='document.getElementById(&quot;YT-btn&quot;).style.display=&quot;none&quot;'><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 class='YT-subscribe-img'><img alt='Youtube Channel Image' src='https://www.pngarts.com/files/9/Vector-YouTube-Logo-PNG-Free-Download.png'/>
  </div>
  <div class='YT-subscribe-content'>
  <span class='YT-title'>hadehana</span>
  <span class='YT-desc'>Subscribe</span>
  </div>
    <div class='Subscribe_btn'>
    <a href='saluran channel anda' target='_blank'>
    <span class='YT-btn-text'>Subscribe</span></a>
  </div></div>

Langkah-5 : Sekarang ubah URL Gambar Anda, Nama saluran YouTube, dan Tautan. 

Langkah-6 : Sekarang simpan kode dan tombol berlangganan mengambang ditambahkan ke situs web Anda. 

Di sini, Anda dapat menyesuaikan warna dan ukuran font dengan memodifikasi kode CSS. Jika Anda memiliki masalah selama proses ini, jangan ragu untuk bertanya kepada saya di bagian komentar.