CARA MEMBUAT TOMBOL FLOATING SUBSCRIBE DI BLOG

Assalamualaikum Wr.Wb.

Selamat datang kembali sobat, kali ini saya akan membagikan sebuah tutorial yaitu ' CARA MEMBUAT TOMBOL FLOATING SUBSCRIBE DI BLOG '

Sebelum saya mulai tutorialnya, saya pastikan bahwa anda sudah mengetahui link url YouTube anda, jika belum silahkan cari tutorialnya di Google.

Baiklah, mari kita mulai tutorialnya.

CARA MEMBUAT TOMBOL FLOATING SUBSCRIBE DI BLOG

1. Buka & masuk ke dalam blogger sobat.
2. Silahkan masuk ke menu Tema dan pilih Edit HTML
3. Kemudian cari code </head>, lalu tempelkan/paste kode dibawah ini tepat DIATAS nya.
<style type='text/css'>
/* Button Floating Subscribe by Ferdichocs */
.FC-sub { position: fixed; left: 55px; bottom: 20px; background-color: #f2f2f2; padding: 12px 15px 12px 12px; border-radius: 15px; box-shadow: 0 4px 12px 0 rgba(9,32,76,.05); display: flex; align-items: center; max-width: 300px; min-width: 280px; color: #000000; overflow: hidden; z-index: 50;} .FC-sub .FC-sub-close { position: absolute; top: 4px; right: 8px; } .FC-sub .FC-sub-close svg { width: 22px; height: 22px; fill: #000; } .FC-sub .FC-sub-img { width: 70px; height: 50px; } .FC-sub .FC-sub-img img { display: flex; align-items: center; justify-content: center; width: 50px; } .FC-sub .FC-sub-content { width: calc(100% - 70px); padding-left: 1px; } .FC-sub .FC-sub-content a { display: block; color: inherit; } .at-btn{font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: flex-end; width: 73px; height: 25px; padding-right: 12px; background-color: #e4393c; border-radius: 4px; color: #fff; margin-top: 12px; bottom: 0; right: 0; } .FC-sub .FC-sub-content .title { display: block; font-weight: 700; font-size: 13px; text-align: left; padding-left: 12px }.FC-sub .at-btn a { display: block; color: inherit; color:#fff; } .FC-sub .FC-sub-content .desc { display: block; font-size: 10px; margin-top: 5px; color: #000; text-align: left;padding-left: 12px }.bt-text{margin-left:9px}
</style>
4. Lalu cari code <body>, dan tempelkan/paste kode dibawah ini tepat DIBAWAH nya.

<div class='FC-sub jhfdiuh0' id='at746427'>
<div class='FC-sub-close' onclick='document.getElementById(&quot;at746427&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='FC-sub-img'><img alt='FERDI ANANDA'  src='#'/>
</div>
<div class='FC-sub-content'>
<span class='title'>FERDI ANANDA</span>
<span class='desc'>Subscribe our Youtube Channel</span>
</div>
  <div class='at-btn'>
  <a href='https://youtube.com/c/FERDIANANDA?sub_confirmation=true' target='_blank'>
  <span class='bt-text'>Subscribe</span></a>
</div></div>

Silahkan ganti tanda # yang ditandai dengan url gambar profil YouTube sobat.
5. Selesai, sobat sudah membuat tombol floating subscribe nya.

Gimana? Mudah bukan membuat nya, jika sobat merasa bahwa konten-konten dari saya bermanfaat, silahkan sobat subscribe blog ini, agar sobat mendapatkan notifikasi tentang informasi postingan terbaru dari blog ini, terimakasih.
Saya akhiri postingan ini dengan,
Wassalamu'alaikum Wr.Wb.
FERDI ANANDA

Halo, Perkenalkan Nama Saya Ferdi Ananda, saya seorang Front-end Web Developer, Graphic Designer dan Content Creator. Hubungi Saya Jika Memerlukan Sesuatu.

Post a Comment (0)
Previous Post Next Post

Below Post Ad