Cara Membuat Widget Profil Blogger Profesional dan Responsif

Widget profil sangat penting untuk memperkenalkan diri kepada pembaca blog. Dalam artikel ini, kita akan belajar cara membuat widget profil yang profesional, responsif, dan menarik, seperti yang digunakan oleh blogger terkenal. Widget ini menggunakan HTML, CSS, dan sedikit JavaScript agar tampilannya modern dan interaktif.

Tampilan Widget

Widget ini menampilkan:

Foto profil bundar
Nama lengkap dan deskripsi singkat
Informasi kontak seperti email, domain, dan lokasi
Ikon media sosial interaktif (Facebook, Instagram, YouTube, TikTok)
Desain responsif, cocok untuk tampilan desktop maupun mobile

Langkah-langkah Membuat Widget Profil

1. Siapkan Kode HTML

Salin dan tempel kode berikut di bagian "HTML/Javascript" widget di Blogger Anda:

Html

<div style="max-width:1200px;margin:0 auto;padding: 40px 20px;background:#181414;color:#fff;font-family:'Segoe UI',sans-serif;display:flex;flex-wrap:wrap;align-items:flex-start;">
  <!-- Foto Profil -->
  <div style="display:flex;align-items:center;flex:0 0 150px;height:150px;border-radius:50%;overflow:hidden;margin-right:30px;margin-top:25px;background:#fff;">
    <img src="Link Foto Anda" alt="Foto Profil" style="width:100%;height:100%;object-fit:cover;" />
  </div>

  <!-- Info Kontak -->
  <div style="flex:1;min-width:250px;margin-right:20px;text-align:left;">
    <h1 style="margin:0;font-size:28px;font-weight:bold;text-align:left;">HENDAWANSYAH</h1>
    <p style="margin:5px 0 15px;font-size:18px;color:#ccc;text-align:left;">Blogger</p>
    <p style="margin:6px 0;"><i class="fas fa-phone"></i> 62+895–8106–87600</p>
    <p style="margin:6px 0;"><i class="fas fa-envelope"></i> <a href="mailto:kerjasamahendra@gmail.com" style="color:#fff;text-decoration:none;transition:color 0.3s;" onmouseover="this.style.color='#ffcc00'" onmouseout="this.style.color='#fff'">kerjasamahendra@gmail.com</a></p>
    <p style="margin:6px 0;"><i class="fas fa-globe"></i> <a href="https://www.hendraws.com" target="_blank" style="color:#fff;text-decoration:none;transition:color 0.3s;" onmouseover="this.style.color='#00ccff'" onmouseout="this.style.color='#fff'">www.hendraws.com</a></p>
    <p style="margin:6px 0;"><i class="fas fa-map-marker-alt"></i> Pangkalan Bun, Kalimantan Tengah</p>
  </div>

  <!-- Garis Lurus -->
  <div style="width:2px;height:auto;background:#fff;margin:0 20px;align-self:stretch;"></div>

  <!-- Tentang & Sosial Media -->
  <div style="flex:1;min-width:250px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;">
    <h2 style="margin:0 0 10px;font-size:20px;">TENTANG SAYA</h2>
    <p style="margin-bottom:25px;max-width:350px;">Seorang blogger yang setiap hari utak atik template blogger</p>
    <div style="font-size:24px;">
      <a href="https://facebook.com" target="_blank" style="margin-right:15px;color:white;transition:color 0.3s;" onmouseover="this.style.color='#4267B2'" onmouseout="this.style.color='white'"><i class="fab fa-facebook"></i></a>
      <a href="https://instagram.com" target="_blank" style="margin-right:15px;color:white;transition:color 0.3s;" onmouseover="this.style.color='#E1306C'" onmouseout="this.style.color='white'"><i class="fab fa-instagram"></i></a>
      <a href="https://youtube.com" target="_blank" style="margin-right:15px;color:white;transition:color 0.3s;" onmouseover="this.style.color='#FF0000'" onmouseout="this.style.color='white'"><i class="fab fa-youtube"></i></a>
      <a href="https://tiktok.com" target="_blank" style="color:white;transition:color 0.3s;" onmouseover="this.style.color='#010101'" onmouseout="this.style.color='white'"><i class="fab fa-tiktok"></i></a>
    </div>
  </div>
</div>

<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>

Klik tombol "Salin" di atas untuk menyalin konten ke clipboard Anda. Anda bisa menempelkannya di mana saja!

2. Ganti Foto dan Teks

Ganti link "Link Foto Anda" dengan link foto profil Anda. Ubah nama, email, domain, dan teks deskripsi sesuai profil Anda.

Tips Tambahan

Pastikan Anda menyalin seluruh kode dengan benar.
Anda bisa memperkecil ukuran ikon atau warna latar sesuai selera.
Gunakan email dan domain yang aktif agar mudah dihubungi.

Penutup

Dengan menggunakan widget profil ini, tampilan blog Anda akan terlihat lebih profesional dan menarik perhatian pengunjung. Jika Anda suka desain ini, jangan lupa bagikan artikel ini ke teman blogger lainnya!

Selamat mencoba dan semoga bermanfaat!

Tanda Tangan

Allo Widget