Widget Social Media Animasi Mobil untuk Blogger + Generator

---

Ikon sosial media merupakan salah satu elemen yang sering digunakan pada blog untuk menghubungkan pengunjung dengan akun sosial media, halaman komunitas, channel, RSS atau layanan lain yang dimiliki pemilik website.

Tampilan social icon tidak harus selalu berupa deretan icon statis. Dengan CSS, kita dapat membuat konsep yang lebih unik tanpa menggunakan library animasi tambahan.

Pada tutorial CodeFlare kali ini saya memperbarui salah satu eksperimen widget lama, yaitu Social Media dengan Animasi Mobil Box Bergerak. Setiap akun ditampilkan sebagai sebuah mobil yang bergerak melewati background kota.

Konsep aslinya tetap dipertahankan, tetapi source code dan generator sudah diperbarui agar lebih ringan, responsive dan lebih mudah dimodifikasi.

Animasi utama tetap menggunakan CSS. JavaScript hanya digunakan pada generator artikel untuk menghasilkan kode widget sehingga script generator tidak perlu ikut dipasang pada blog.

Informasi Singkat

---

Widget ini menampilkan beberapa gambar kendaraan yang berfungsi sebagai link menuju akun sosial media atau halaman lainnya.

Kendaraan bergerak otomatis melintasi background menggunakan CSS animation dan berhenti sementara ketika pengguna mengarahkan pointer ke kendaraan.

Anda bebas mengganti URL tujuan, judul, gambar kendaraan dan background melalui generator yang tersedia pada artikel ini.

DAFTAR ISI

1. Live Preview Widget
2. Cara Kerja Widget
3. Generator Social Media
4. Cara Memasang di Blogger
5. Pengaturan dan Modifikasi
6. Troubleshooting

Live Preview Widget

Berikut contoh konsep widget social media mobil bergerak. Background kota digunakan sebagai lintasan sedangkan setiap gambar mobil berfungsi sebagai tombol menuju akun sosial media.

SOCIAL DRIVE CODEFLARE

CSS ANIMATION NO JS ENGINE

Pada preview tersebut setiap kendaraan memiliki sedikit perbedaan waktu mulai sehingga tidak menumpuk pada satu posisi. Ketika pointer berada di atas kendaraan, animasi kendaraan tersebut akan berhenti sementara sehingga link lebih mudah diklik.

Pada perangkat yang mengaktifkan reduced motion, animasi otomatis akan dihentikan untuk menghormati preferensi aksesibilitas pengguna.

Cara Kerja Widget

Struktur widget sebenarnya cukup sederhana. Sebuah elemen digunakan sebagai lintasan dan background, kemudian setiap akun sosial media dibuat menggunakan link HTML.

Di dalam link tersebut terdapat gambar mobil yang mewakili akun tujuan.

<div class="cfSocDrive"> <a class="cfSocVehicle" href="https://facebook.com/username" target="_blank" rel="noopener nofollow" title="Facebook"> <img src="URL-GAMBAR-MOBIL" alt="Facebook" /> </a> </div>

Pergerakan kendaraan dilakukan menggunakan CSS @keyframes. Posisi kendaraan bergerak dari luar sisi kanan menuju luar sisi kiri widget.

@keyframes cfSocMove{ from{transform:translateX(calc(100% + 70px))} to{transform:translateX(-70px)} }

Dibandingkan source code lama, metode transform seperti ini lebih sederhana dan tidak membutuhkan kumpulan vendor prefix animasi untuk browser modern.

Catatan

Widget ini menggunakan gambar sebagai icon kendaraan. Pastikan gambar yang digunakan berasal dari sumber yang Anda miliki atau mempunyai izin untuk digunakan. Anda juga dapat membuat gambar kendaraan sendiri agar desain widget benar-benar sesuai dengan identitas blog.

Generator Social Media Mobil Bergerak

Generator berikut dapat digunakan untuk membuat kode widget tanpa harus mengedit HTML dan CSS secara manual. Masukkan background kemudian atur masing-masing akun yang ingin ditampilkan.

Anda dapat menambah atau menghapus akun hingga maksimal enam kendaraan. Generator akan membuat kode HTML dan CSS siap copy.

SOCIAL DRIVE GENERATOR Native JavaScript

READY

BACKGROUND

Template Background Town View Urban View City Hall Custom URL

Background URL

Tinggi Widget 180px 200px 220px 250px

Kecepatan Cepat Normal Santai

SOCIAL ACCOUNT 4 / 6

LIVE PREVIEW

Setiap akun mempunyai tiga data utama:

Judul Teks yang menjelaskan akun atau layanan ketika kendaraan disentuh atau mendapatkan fokus.

Target URL Alamat akun sosial media atau halaman yang akan dibuka ketika kendaraan diklik.

Image URL Alamat gambar kendaraan yang akan digunakan sebagai icon.

WARNING

Pastikan URL tujuan diawali dengan https://. Jika sebuah akun tidak digunakan, hapus akun tersebut dari generator daripada membiarkan URL tujuan kosong.

Cara Memasang di Blogger

Kode hasil generator sudah berisi HTML dan CSS sehingga dapat langsung dipasang sebagai gadget Blogger.

01

Buat Kode

Isi akun sosial media pada generator kemudian tekan Generate Code.

02

Copy Code

Tekan tombol Copy Code untuk menyalin seluruh source widget.

03

Buka Tata Letak

Masuk ke dashboard Blogger kemudian pilih menu Tata Letak.

04

Tambahkan Gadget

Pilih area yang diinginkan kemudian tekan Tambahkan Gadget → HTML/JavaScript.

05

Paste Kode

Tempel kode hasil generator ke dalam bagian konten gadget.

06

Simpan

Simpan gadget kemudian buka blog untuk memastikan ukuran dan animasi sudah sesuai.

Widget juga dapat ditempatkan langsung pada template Blogger jika diperlukan. Namun untuk penggunaan biasa, gadget HTML/JavaScript lebih mudah karena widget dapat dipindahkan melalui menu Tata Letak tanpa membuka source template.

Pengaturan dan Modifikasi

Mengubah kecepatan kendaraan

Nilai durasi animasi berada pada CSS variable:

--cfSocSpeed:16s;

Nilai lebih kecil membuat kendaraan bergerak lebih cepat. Nilai lebih besar membuat kendaraan bergerak lebih lambat.

Mengubah ukuran kendaraan

--cfSocVehicle:50px;

Ukuran sekitar 45–55px biasanya cukup untuk widget sidebar. Jika widget digunakan pada area yang lebih lebar, ukurannya dapat diperbesar.

Mengganti background

Background dapat diganti langsung melalui generator atau mengubah URL pada CSS berikut:

background-image:url("URL-BACKGROUND");

Gunakan gambar landscape yang dapat diulang secara horizontal atau mempunyai komposisi yang tetap terlihat baik ketika menggunakan background-size:cover.

Menggunakan Instagram, YouTube atau layanan lainnya

Generator tidak membatasi jenis platform. Masukkan URL akun dan gambar kendaraan yang ingin digunakan. Jadi widget dapat digunakan untuk Instagram, YouTube, TikTok, GitHub, Telegram, WhatsApp Channel atau halaman lain sesuai kebutuhan.

Troubleshooting

Kendaraan tidak bergerak

Periksa apakah browser atau perangkat mengaktifkan prefers-reduced-motion. Widget sengaja menghentikan animasi pada kondisi tersebut.

Gambar mobil tidak muncul

Periksa URL gambar. Pastikan file dapat dibuka langsung melalui browser dan tidak diblokir oleh server sumber.

Kendaraan terlalu cepat

Naikkan nilai durasi animasi, misalnya dari 16s menjadi 22s.

Background terpotong

Hal tersebut normal jika rasio gambar berbeda dengan ukuran widget. Anda dapat mengganti background-size:cover menjadi ukuran lain sesuai gambar.

Kendaraan sulit diklik di smartphone

Gunakan ukuran kendaraan minimal sekitar 48px dan jangan memasukkan terlalu banyak kendaraan ke dalam satu widget.

Widget bentrok dengan template

Versi baru menggunakan prefix cfSoc untuk mengurangi kemungkinan class widget bertabrakan dengan CSS template Blogger.

Widget ini memang dibuat sebagai elemen dekoratif sekaligus navigasi sosial. Karena itu jangan memasukkan terlalu banyak kendaraan hanya karena generator mendukung beberapa akun. Pilih akun yang benar-benar penting agar pengunjung tetap mudah memahami fungsi setiap kendaraan.

Dibandingkan versi awal, source code baru jauh lebih sederhana karena tidak lagi membutuhkan vendor prefix animasi lama maupun fungsi Add to Blogger berbasis jQuery. Generator hanya digunakan untuk membantu membuat source code dan tidak menjadi dependency widget produksi.

Konsep mobil box bergerak tetap saya pertahankan karena justru bagian inilah yang membuat widget berbeda dari social icon biasa. Anda dapat mengembangkan konsep yang sama menggunakan gambar kendaraan sendiri, background sesuai tema blog atau bahkan membuat versi malam dan siang.

CODEFLARE BLOGGER DEVELOPMENT Punya Ide Widget Blogger yang Unik?

CodeFlare menerima pembuatan widget custom, modifikasi template, perbaikan script dan pengembangan fitur Blogger sesuai konsep yang Anda inginkan.

Hubungi CodeFlare