Cara Membuat Grid Skema Lisensi dan Perbandingan Fitur Template Blogger Versi 3
Panduan mendalam merancang komponen tabel komparasi interaktif yang responsif dengan efek hover mikro menggunakan Tailwind CSS.
Saat merilis sebuah produk digital seperti tema blog, landing page, maupun berkas modifikasi, kejelasan informasi mengenai aturan lisensi sangatlah krusial. Anda perlu memisahkan hak guna apa saja yang didapatkan oleh pengguna versi gratis (Free License) dan pengguna versi berbayar (Pro Premium).
Konsep Layout Komponen Keren Versi 3 Ini: Menggunakan struktur tata letak hibrida. Di layar perangkat genggam (Mobile Smartphone), kartu akan otomatis melipat ke samping dalam mode **Horizontal Scroll Snap** agar tidak memakan ruang vertikal. Sementara di layar komputer (Desktop), layout otomatis melebar ke dalam format **4 Kolom Sejajar**.
Hasil akhir tampilan 4 kartu informasi lisensi saat diakses melalui browser desktop.
Salin Kode Komponen Lengkap
Gunakan blok kode siap pakai di bawah ini. Komponen ini dirancang murni menggunakan kelas utilitas CSS modern sehingga sangat ringan tanpa memerlukan aset pustaka tambahan:
<div class='w-full px-4 lg:px-12 py-16 font-sans bg-slate-100 relative z-10 mt-0 mb-8 overflow-hidden'>
<!-- Wrapper Konten Utama -->
<div class='max-w-6xl mx-auto'>
<!-- Header Section Kecil -->
<div class='text-center mb-12'>
<h3 class='text-2xl font-black text-slate-800 tracking-tight sm:text-3xl'>Pilih Versi Sesuai Kebutuhan Anda</h3>
<p class='text-sm text-gray-500 mt-2'>Perbandingan transparan antara versi Free dan Premium News Lakete</p>
</div>
<!-- Layout: HP Scroll Samping, Desktop Grid 4 Kolom Baris -->
<div class='flex overflow-x-auto snap-x snap-mandatory gap-6 pb-6 scrollbar-none md:grid md:grid-cols-4 md:gap-6 md:pb-0'>
<!-- KARTU 1: Versi Free (Akses Dasar) -->
<div class='group bg-white rounded-3xl shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300 transform hover:-translate-y-2 flex flex-col justify-between pt-12 pb-8 px-6 min-h-[320px] w-[80vw] sm:w-[50vw] flex-shrink-0 snap-center md:w-full md:flex-shrink-1 relative overflow-visible'>
<!-- Badge Melengkung Khas Sesuai Gambar (Orange) -->
<div class='absolute -top-3 left-6 w-14 h-16 bg-amber-500 rounded-b-full shadow-md flex flex-col items-center justify-center text-white transform transition-transform duration-300 group-hover:-translate-y-1'>
<span class='text-lg font-black leading-none'>01</span>
<span class='text-[9px] font-bold tracking-widest uppercase mt-0.5 text-amber-100'>FREE</span>
</div>
<!-- Area Ikon Utama (Bisa Berputar saat Hover) -->
<div class='flex justify-end text-slate-300 group-hover:text-amber-500 transition-colors duration-300 transform group-hover:rotate-12'>
<svg class='w-12 h-12 stroke-current' fill='none' stroke-width='1.5' viewBox='0 0 24 24'><path d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.603 10.603z' stroke-linecap='round' stroke-linejoin='round'/></svg>
</div>
<!-- Konten Teks -->
<div class='mt-4 flex-grow'>
<h4 class='text-base font-black text-slate-800 tracking-wide uppercase mb-2'>Lisensi Gratis</h4>
<p class='text-xs text-gray-500 leading-relaxed'>
Cocok untuk personal blog pemula. Anda mendapatkan fitur layout standar yang bersih dengan performa yang tetap dioptimalkan.
</p>
</div>
<div class='border-t border-gray-100 pt-4 mt-4 text-xs font-bold text-amber-600'>Fitur Esensial Dasar</div>
</div>
<!-- KARTU 2: Aturan Atribusi (Red) -->
<div class='group bg-white rounded-3xl shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300 transform hover:-translate-y-2 flex flex-col justify-between pt-12 pb-8 px-6 min-h-[320px] w-[80vw] sm:w-[50vw] flex-shrink-0 snap-center md:w-full md:flex-shrink-1 relative overflow-visible'>
<!-- Badge Melengkung Khas (Red) -->
<div class='absolute -top-3 left-6 w-14 h-16 bg-rose-500 rounded-b-full shadow-md flex flex-col items-center justify-center text-white transform transition-transform duration-300 group-hover:-translate-y-1'>
<span class='text-lg font-black leading-none'>02</span>
<span class='text-[9px] font-bold tracking-widest uppercase mt-0.5 text-rose-100'>CREDIT</span>
</div>
<div class='flex justify-end text-slate-300 group-hover:text-rose-500 transition-colors duration-300 transform group-hover:scale-110'>
<svg class='w-12 h-12 stroke-current' fill='none' stroke-width='1.5' viewBox='0 0 24 24'><path d='M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1A3.75 3.75 0 0012 18z' stroke-linecap='round' stroke-linejoin='round'/><path d='M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z' stroke-linecap='round' stroke-linejoin='round'/></svg>
</div>
<div class='mt-4 flex-grow'>
<h4 class='text-base font-black text-slate-800 tracking-wide uppercase mb-2'>Footer Link Terkunci</h4>
<p class='text-xs text-gray-500 leading-relaxed'>
Pada versi Free, wajib menyertakan kredit link penulis di footer blog. Menghapus kredit secara paksa akan memicu pengalihan (redirect) halaman.
</p>
</div>
<div class='border-t border-gray-100 pt-4 mt-4 text-xs font-bold text-rose-600'>Wajib Atribusi Link</div>
</div>
<!-- KARTU 3: Keunggulan Premium (Purple) -->
<div class='group bg-white rounded-3xl shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300 transform hover:-translate-y-2 flex flex-col justify-between pt-12 pb-8 px-6 min-h-[320px] w-[80vw] sm:w-[50vw] flex-shrink-0 snap-center md:w-full md:flex-shrink-1 relative overflow-visible'>
<!-- Badge Melengkung Khas (Purple) -->
<div class='absolute -top-3 left-6 w-14 h-16 bg-purple-600 rounded-b-full shadow-md flex flex-col items-center justify-center text-white transform transition-transform duration-300 group-hover:-translate-y-1'>
<span class='text-lg font-black leading-none'>03</span>
<span class='text-[9px] font-bold tracking-widest uppercase mt-0.5 text-purple-200'>PRO</span>
</div>
<div class='flex justify-end text-slate-300 group-hover:text-purple-600 transition-colors duration-300'>
<svg class='w-12 h-12 stroke-current transform transition-transform duration-300 group-hover:rotate-45 origin-center' fill='none' stroke-width='1.5' viewBox='0 0 24 24'>
<path d='M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.43l-1.003.767c-.308.236-.48.602-.48.995l.004.18c0 .393.172.759.48.995l1.004.768a1.125 1.125 0 01.26 1.43l-1.297 2.247a1.125 1.125 0 01-1.37.491l-1.216-.456c-.356-.133-.751-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.43l1.004-.767c.308-.236.48-.602.48-.996V12c0-.393-.172-.759-.48-.996l-1.004-.767a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.645-.869l.214-1.28z' stroke-linecap='round' stroke-linejoin='round'/><path d='M15 12a3 3 0 11-6 0 3 3 0 016 0z' stroke-linecap='round' stroke-linejoin='round'/></svg>
</div>
<!-- Konten Teks -->
<div class='mt-4 flex-grow'>
<h4 class='text-base font-black text-slate-800 tracking-wide uppercase mb-2'>Bebas Hapus Kredit</h4>
<p class='text-xs text-gray-500 leading-relaxed'>
Pada versi Premium, Anda memiliki hak penuh untuk menghapus seluruh link atribusi di kaki blog, diganti dengan merek dagang agensi atau bisnis Anda sendiri.
</p>
</div>
<div class='border-t border-gray-100 pt-4 mt-4 text-xs font-bold text-purple-600'>100% White-Label Removable</div>
</div>
<!-- KARTU 4: Keuntungan Tambahan Premium (Teal) -->
<div class='group bg-white rounded-3xl shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300 transform hover:-translate-y-2 flex flex-col justify-between pt-12 pb-8 px-6 min-h-[320px] w-[80vw] sm:w-[50vw] flex-shrink-0 snap-center md:w-full md:flex-shrink-1 relative overflow-visible'>
<!-- Badge Melengkung Khas (Teal/Cyan gelap) -->
<div class='absolute -top-3 left-6 w-14 h-16 bg-teal-600 rounded-b-full shadow-md flex flex-col items-center justify-center text-white transform transition-transform duration-300 group-hover:-translate-y-1'>
<span class='text-lg font-black leading-none'>04</span>
<span class='text-[9px] font-bold tracking-widest uppercase mt-0.5 text-teal-100'>MAX</span>
</div>
<div class='flex justify-end text-slate-300 group-hover:text-teal-600 transition-colors duration-300 transform group-hover:-translate-y-1'>
<svg class='w-12 h-12 stroke-current' fill='none' stroke-width='1.5' viewBox='0 0 24 24'><path d='M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.281m5.94 2.28l-2.28 5.941M3.75 15.75h-.75V15h.75v.75z' stroke-linecap='round' stroke-linejoin='round'/></svg>
</div>
<!-- Konten Teks -->
<div class='mt-4 flex-grow'>
<h4 class='text-base font-black text-slate-800 tracking-wide uppercase mb-2'>Update & Support Pro</h4>
<p class='text-xs text-gray-500 leading-relaxed'>
Mendapatkan pembaruan berkala gratis selamanya jika ada perubahan algoritma Google, serta akses prioritas grup bantuan khusus premium jika mengalami kendala instalasi.
</p>
</div>
<div class='border-t border-gray-100 pt-4 mt-4 text-xs font-bold text-teal-600'>Premium Support Prioritas</div>
</div>
</div>
<!-- Petunjuk Geser Layar HP -->
<div class='flex items-center justify-center gap-2 mt-4 md:hidden'>
<span class='text-[10px] font-bold text-gray-400 uppercase tracking-widest animate-pulse'>Geser untuk melihat detail lisensi</span>
<span class='text-xs text-gray-400 animate-bounce'>➔</span>
</div>
</div>
</div>Bedah Detail Fitur Animasi Mikro (Micro-Interactions)
Daya tarik utama komponen ini terletak pada keluwesan pergerakan elemennya saat disorot kursor mouse (*hover effect*). Berikut rincian parameternya:
group-hover:-translate-y-2
Berfungsi untuk menaikkan kartu setinggi beberapa piksel ke atas saat kursor menyentuh area pembungkus. Memberikan efek kedalaman spasial tiga dimensi yang halus.
group-hover:rotate-12 & rotate-45
Diterapkan langsung pada elemen ikon SVG dasar di pojok kanan kartu. Ikon pencarian atau roda gigi mekanis akan otomatis berputar sedikit untuk menciptakan kesan interaktif interaksi antarmuka.
absolute -top-3 left-6 rounded-b-full
Teknik memposisikan penanda nomor kartu digital (01, 02, dst) menembus batas atas kartu induk dengan bentuk melengkung setengah silinder di bagian bawah, persis meniru rancangan gambar sketsa asli produk.
Cara Memasang Komponen Ini di Halaman Blog Anda
Komponen tabel ini sangat fleksibel dan dapat ditempatkan di mana saja. Ikuti petunjuk berikut:
Buka Dokumen Posting atau Halaman Baru
Masuk ke panel kontrol admin blog Anda, lalu pilih menu **Postingan** atau **Halaman**. Buat artikel baru atau sunting artikel yang sudah ada.
Alihkan Editor ke Mode Tampilan HTML
Di sudut kiri atas kolom penulisan artikel Blogger, klik ikon **Pensil**, lalu ubah modenya menjadi **Tampilan HTML**.
Tempel Kode Komponen
Cari baris kosong paling bawah atau di tengah paragraf artikel Anda, kemudian paste seluruh kode grid lisensi yang telah Anda salin sebelumnya. Klik tombol **Publikasikan** atau **Perbarui**.
<svg> pada masing-masing kartu sesuai kebutuhan representasi visual blog Anda.
Posting Komentar