~ WE WALK IN THE DARK, TO SERVE THE LIGHT ~
Beranda
Blogger

Bikin Responsive Widget Melayang di Blogger

Tambah widget melayang di Blogger untuk tombol WhatsApp, link sosial, atau promo! Ikuti tutorial mudah ini dan bikin blog kamu lebih interaktif.

Pernah kepikiran bikin blog kamu makin keren dengan widget melayang yang eye-catching? Yup, widget melayang nggak cuma bikin tampilan blog jadi lebih profesional, tapi juga bisa meningkatkan interaksi pengunjung. Misalnya, tombol WhatsApp melayang, formulir langganan, atau link ke media sosial. Nah, di artikel ini aku bakal kasih tau gimana caranya bikin widget melayang di Blogger dengan cara simpel dan pastinya efektif!

Bikin Responsive Widget Melayang di Blogger

Apa Itu Widget Melayang?

Widget melayang adalah elemen tambahan di blog yang selalu muncul di layar meskipun pengunjung menggulir halaman ke atas atau bawah. Biasanya ditempatkan di pojok layar (kanan bawah atau kiri atas), widget ini super praktis untuk menampilkan tombol penting seperti:
  • Tombol Chat WhatsApp
  • Link Media Sosial
  • Formulir Langganan Email
  • Promosi atau Call-to-Action

    • Cara Membuat Widget Melayang di Blogger

    Persiapan awal adalah saya sarankan untuk membuat akun di Flaticon, karena saya menggunakan icon dari sumber tersebut. Setelah itu, kamu cari kode <head> dan taruh kode ini dibawah kode tersebut: 
    <link href='https://cdn-uicons.flaticon.com/2.6.0/uicons-brands/css/uicons-brands.css' rel='stylesheet'/>

    Tambahkan Widget

    Ikuti langkah-langkah berikut untuk menambahkan widget melayang di blog kamu. Jangan khawatir, caranya gampang banget!

    1. Masuk ke Dashboard Blogger

  • Login ke akun Blogger kamu.
  • Pilih blog yang ingin diberi widget melayang.
  • Klik Tema → Edit HTML.

    • Tambahkan Kode HTML Widget

    Ini adalah contoh kode HTML untuk widget melayang sederhana:
    Sisipkan kode ini di atas kode </body> 
    <div id="akuMelayang">
    <a href="[LINK KAMU DISINI]" target="_blank">
        <i class="fi fi-brands-whatsapp"></i>
    </a>
</div>
  • Kamu bisa juga menambahkan kode diatas di Menu Tata Letak [LIHAT GAMBAR]

    • 3. Tambahkan Gaya dengan CSS

    Supaya widget melayang tampil kece, tambahkan kode berikut diatas </style>: 
    @keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@media (max-width: 768px) {
    #akuMelayang a {
        font-size: 20px;
        width: 40px;
        height: 40px;
    }
}

#akuMelayang {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    cursor: pointer;
}

#akuMelayang a {
    text-decoration: none;
}

#akuMelayang i {
    font-size: 50px; /* Ukuran ikon */
    color: #FBF8EF; /* Warna awal ikon */
    transition: color 0.3s ease, transform 0.3s ease; /* Animasi saat hover */
}

#akuMelayang i:hover {
    color: #FBF8EF; /* Warna saat hover */
    transform: scale(1.2); /* Zoom-in saat hover */
}
  
#akuMelayang:hover {
    animation: pulse 0.5s infinite;
}
    Kode ini bikin widget melayang di pojok kanan bawah layar dengan tampilan yang elegan.
    Silahkan RELOAD Blog kamu, dan kamu bakal tercengang ada Widget yang melayang di bagian kanan-bawah blog kamu.

    Tambahan

    Untuk mengganti icon silahkan cari kode: 
    <i class="fi fi-brands-whatsapp"></i>
    Ganti menjadi kode CSS icon dari Flaticon.
    Contoh icon Facebook: 
    <i class="fi fi-brands-facebook"></i>

    Cara Ambil icon dari Flaticon

    Sebelumnya kamu harus punya akun di Flaticon, pilih salah satu icon yang ingin di pakai, terus Copy kode CSS icon-nya. [LIHAT GAMBAR]
    DEMO WIDGET MELAYANG


    Tips Membuat Widget Melayang yang Menarik

    1. Sederhana dan Tidak Mengganggu
      Jangan sampai widget terlalu besar atau menutupi konten blog.
    2. Tentukan Fungsinya
      Pastikan widget melayani kebutuhan pengunjung, seperti tombol WhatsApp untuk chat langsung.
    3. Gunakan Warna Kontras
      Pilih warna yang mencolok, tapi tetap cocok dengan tema blog kamu.

    Ide Widget Melayang untuk Blog Kamu

  • Tombol Chat WhatsApp: Memudahkan pengunjung untuk menghubungi kamu.
  • Formulir Langganan Email: Menambah daftar subscriber kamu.
  • Promo atau Diskon: Cocok buat blog yang menjual produk/jasa.
  • Link Media Sosial: Memperluas jangkauan pengunjung ke platform lain.
    • Seseorang yang nggak tahu mau ngapain lagi... :) Karena udah di titik tergalau karena cinta selalu di tolak. :(