Cara Membuat Notifikasi Popup Subscribe Youtube
Blogging, CSS

Cara Membuat Animasi Popup Subscribe Channel Youtube

Cara Membuat Animasi Popup Subscribe Channel Youtube – Pernahkah anda temukan seorang blogger yang memiliki website sekaligus channel youtube? Jika pernah, maka hal ini bisa dikatakan wajar salah satunya untuk meningkatkan jumlah penghasilan mereka di internet.

Pada dasarnya menggunakan trik promosi seperti ini sangatlah menguntungkan, asal mengerti dan menguasai algorithma salah satu media tersebut. Sekedar saran, awali dahulu dari membuat blog yang kemudian disusul membuat kanal youtube.

Jika anda sudah memiliki trafik yang stabil di blog, maka untuk tahap selanjutnya bisa dipastikan lebih mudah. Jadi fokuskan dan prioritaskan mencari trafik terlebih dahulu pada media utama agar anda tidak bekerja dua kali seperti masalah yang dialami oleh kebanyakan content creator lainnya.

Sesuai dengan penjelasan diatas, tutorial ini saya peruntukkan bagi para blogger yang ingin mempromosikan kanal youtube nya di platform blogger.

Cara Membuat Animasi Popup Subscribe Youtube

Sangat saya sarankan untuk melihat demo nya dahulu yang terdapat dibawah tutorial ini. Jika merasa cocok, silakan pahami dan ikuti tutorial berikut.

  1. Silakan login ke Dashboard Blogger terlebih dahulu.
  2. Lalu pilih menu Tema > Edit HTML
  3. Kemudian copas kode CSS berikut ini dan letakkan diatas ]]></b:skin>
    /* POPUP Animasi Subscribe */
    .PL-Container{position:fixed;margin-left:30px;right:30px;bottom:20px;align-items:center;justify-content:space-between}.PL-Container .PLBox{background:#fff;display:flex;align-items:center;justify-content:space-between;border-radius:10px;padding:15px 25px 15px 15px;box-shadow:0 5px 10px rgba(0,0,0,.2);position:relative;animation:show_box .8s ease forwards}@keyframes show_box{0%{transform:translateX(100%)}40%{transform:translateX(-5%)}80%{transform:translateX(0)}100%{transform:translateX(-10px)}}#PLHide:checked~.PLBox{animation:hide_box .8s ease forwards}@keyframes hide_box{0%{transform:translateX(0)}40%{transform:translateX(5%)}80%{transform:translateX(0)}100%{transform:translateX(calc(100% + 35px))}}.PLClose svg{position:absolute;fill:#878787;font-size:20px;cursor:pointer;height:28px;width:28px;text-align:center;right:13px;top:8px;border-radius:50%;background:#f2f2f2;transition:all .3s ease}.PLClose:hover svg{fill:#444}.PL-Container .PLBox i{position:absolute;right:15px;top:10px;color:#666;cursor:pointer;transition:all .3s ease}.PL-Container i:hover{color:#000}.PL-Container .PLogoIcon{height:90px;width:90px;margin-right:15px}.PL-Container .PLogoIcon img{height:100%;width:100%;object-fit:cover}.PLBox .PLInfo{display:flex;flex-direction:column}.PLBox .PLInfo .PLJudul{font-size:18px;font-weight:600;color:#333}.PLBox .PLInfo .PLDeskripsi{font-size:14px;color:#666;margin:2px 0 8px 0}.PLBox .PLInfo a{font-size:18px;font-weight:500;display:block;padding:8px 0;background:#7467fb;border-radius:6px;color:#fff;text-align:center;text-decoration:none;transition:all .4s ease}.PLBox .PLInfo a:hover{background-color:#24d8fc}.PL-Container #PLHide{display:none}
  4. Copas juga kode HTML berikut dan letakkan diatas </body>
    <div class="PL-Container">
      <input type="radio" id="PLHide"/>
      <div class="PLBox">
        <label class="PLClose" for="PLHide"><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></label>
        <div class="PLogoIcon">
          <img src="fernn.png" alt="Fernn Official"/>
        </div>
        <div class="PLInfo">
          <div class="PLJudul">Fernn Official</div>
          <div class="PLDeskripsi">News & Tutorial</div>
          <a href="https://youtube.com/channel/UCo4M3_f6YK5BP07otRW10Aw"
            target="_blank">Subscribe</a>
        </div>
      </div>
    </div>
  5. Terakhir silakan klik Simpan untuk menerapkan perubahan diatas.

Jika anda mengikuti arahan diatas dengan benar, bisa dipastikan hasilnya akan mirip seperti pada demo berikut ini.

See the Pen
Popup Subscribe YT
by Fernn Inc. (@fernnje)
on CodePen.

Nah itulah Cara Membuat Animasi Popup Subscribe Channel Youtube, apabila ada pertanyaan silahkan ajukan langsung ke kolom komentar yang tersedia dibawah artikel ini.

Mungkin sekian dulu yang bisa saya share, jika dirasa bermanfaat bagi orang banyak jangan lupa untuk di share ke sosial media anda agar semakin banyak yang terbantu.
Terimakasih

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *