Kode HTML CSS Lengkap Membuat Author Box (Profil Penulis) Menarik di Bawah Artikel

Apa Itu Author Box di Blogger?

Author box adalah elemen yang digunakan untuk menampilkan informasi mengenai penulis sebuah artikel. Elemen ini umumnya diletakkan setelah isi utama artikel atau di bagian bawah halaman.

Informasi yang ditampilkan dapat berupa nama penulis, foto profil, biografi singkat, website, dan tautan media sosial.

Pada Blogger, author box sederhana dapat dibuat langsung menggunakan HTML dan CSS tanpa membutuhkan JavaScript atau plugin tambahan.

Manfaat Menambahkan Author Box pada Blog

Apakah Author Box Membantu SEO?

Author box bukan jaminan bahwa sebuah artikel akan mendapatkan peringkat lebih tinggi di Google. Namun, informasi penulis yang jelas dapat membantu memberikan konteks kepada pembaca mengenai siapa yang membuat sebuah konten.

Untuk artikel yang membahas topik tertentu, informasi mengenai penulis sebaiknya dibuat secara akurat. Jika mencantumkan profesi, pengalaman, sertifikasi, atau keahlian, pastikan informasi tersebut memang benar.

Dengan demikian, author box sebaiknya dipandang sebagai bagian dari pengalaman pengguna dan identitas konten, bukan sebagai trik SEO untuk mendapatkan ranking secara otomatis.

Struktur Author Box yang Akan Dibuat

Author box dalam tutorial ini memiliki empat bagian utama:

• Foto profil: Menampilkan foto penulis dalam bentuk lingkaran.
• Nama penulis: Menampilkan nama asli atau nama pena yang digunakan.
• Biografi singkat: Menjelaskan latar belakang atau topik yang biasa dibahas.
• Media sosial: Menyediakan tautan menuju profil online penulis.

Kode HTML CSS Author Box Blogger

Berikut adalah kode lengkap author box yang dapat digunakan pada artikel Blogger.

Anda tidak perlu mengambil kode dari bagian lain karena seluruh struktur HTML dan CSS author box sudah tersedia dalam satu artikel ini.

CSS dan HTML Author Box

Jika Anda ingin menggunakan author box pada artikel lain, salin bagian kode berikut ke mode HTML Blogger.

<div class="author-box-blogger">

  <div class="ab-photo">
    <img
      src="URL_FOTO_PROFIL_ANDA"
      alt="Foto profil NAMA PENULIS"
      width="110"
      height="110"
      loading="lazy"
    />
  </div>

  <div class="ab-content">

    <h3 class="ab-name">
      NAMA PENULIS
    </h3>

    <p class="ab-bio">
      Tuliskan deskripsi singkat mengenai diri Anda,
      topik yang dibahas, pengalaman, atau informasi
      lain yang relevan dengan blog.
    </p>

    <div class="ab-social">

      <a
        href="URL_FACEBOOK_ANDA"
        target="_blank"
        rel="noopener noreferrer"
      >
        Facebook
      </a>

      <a
        href="URL_INSTAGRAM_ANDA"
        target="_blank"
        rel="noopener noreferrer"
      >
        Instagram
      </a>

      <a
        href="URL_WEBSITE_ANDA"
        target="_blank"
        rel="noopener noreferrer"
      >
        Website
      </a>

    </div>

  </div>

</div>

Cara Memasang Author Box di Blogger

Setelah mengetahui struktur kodenya, sekarang kita masuk ke proses pemasangan pada artikel Blogger.

1. Buka dashboard Blogger.
   Masuk ke Blogger dan buka artikel yang ingin diberi author box.
2. Buka editor HTML.
   Ubah editor artikel ke mode HTML agar kode dapat ditempatkan secara langsung.
3. Selesaikan artikel terlebih dahulu.
   Pastikan isi artikel, kesimpulan, dan bagian lain sudah selesai.
4. Tempatkan author box di bagian bawah.
   Letakkan kode author box setelah paragraf terakhir artikel.
5. Ganti data contoh.
   Masukkan foto, nama, biografi, dan URL media sosial Anda sendiri.
6. Gunakan pratinjau.
   Periksa tampilan sebelum artikel diterbitkan.

Cara Mengganti Foto Profil

Pada kode HTML, cari bagian berikut:

src="URL_FOTO_PROFIL_ANDA"

Ganti teks tersebut dengan URL gambar profil Anda.

Contohnya:

<img
src="https://contoh.com/foto-profil.jpg"
alt="Foto profil penulis"
width="110"
height="110"
/>

Gunakan gambar yang benar-benar dapat diakses oleh browser. Jika URL gambar tidak valid, foto profil tidak akan muncul.

Cara Mengganti Nama dan Bio Penulis

Cari bagian:

<h3 class="ab-name">
  NAMA PENULIS
</h3>

Kemudian ganti NAMA PENULIS dengan nama yang ingin ditampilkan.

Untuk deskripsi, ubah isi bagian:

<p class="ab-bio">
  Tuliskan deskripsi singkat mengenai diri Anda,
  topik yang dibahas, pengalaman, atau informasi
  lain yang relevan dengan blog.
</p>

Sebaiknya gunakan deskripsi yang singkat, jelas, dan sesuai dengan identitas penulis sebenarnya.

Cara Menambahkan Link Media Sosial

Pada bagian media sosial, ganti URL contoh dengan alamat profil yang benar-benar Anda gunakan.

<a
href="https://www.facebook.com/username"
target="_blank"
rel="noopener noreferrer"
>
Facebook
</a>

Anda dapat menambahkan platform lain dengan menyalin elemen <a> dan mengganti URL serta nama platform.

Apakah Author Box Responsif di HP?

Ya. Author box pada kode ini telah dilengkapi media query untuk menyesuaikan layout pada layar kecil.

Tips Membuat Author Box yang Profesional

• Gunakan foto yang jelas. Pilih foto dengan kualitas yang cukup baik dan sesuai dengan identitas penulis.
• Buat bio yang singkat. Jelaskan siapa Anda dan topik apa yang biasa Anda bahas.
• Gunakan tautan yang benar. Periksa kembali setiap URL media sosial sebelum artikel diterbitkan.
• Jangan terlalu banyak tombol. Gunakan hanya media sosial yang memang aktif dan relevan.
• Gunakan informasi yang akurat. Jangan mencantumkan profesi, sertifikasi, pengalaman, atau keahlian yang tidak benar.

Kesalahan yang Sering Terjadi

1. Foto Profil Tidak Muncul

Periksa kembali URL yang terdapat pada atribut src. Pastikan alamat gambar masih aktif dan dapat diakses.

2. Tombol Media Sosial Tidak Berfungsi

Pastikan atribut href berisi URL lengkap dan tidak terdapat kesalahan pengetikan.

3. Tampilan Melebar di Smartphone

Pastikan kode CSS responsif tetap lengkap dan tidak terpotong ketika ditempelkan ke editor HTML Blogger.

4. Desain Bertabrakan dengan Template

Salah satu penyebabnya adalah penggunaan selector CSS yang terlalu umum. Kode tutorial ini menggunakan prefix khusus seperti .author-box-blogger agar aturan desain lebih terisolasi.

Cara Testing Author Box Sebelum Dipublikasikan

Setelah selesai memasukkan kode, lakukan pemeriksaan sederhana sebelum artikel diterbitkan.

• Pastikan foto profil tampil dengan benar.
• Pastikan nama penulis terlihat jelas.
• Pastikan bio tidak terlalu panjang.
• Klik semua tombol media sosial.
• Periksa tampilan pada desktop.
• Periksa tampilan pada smartphone.
• Pastikan halaman tidak mengalami scroll horizontal.

Kesimpulan

Membuat author box di Blogger menggunakan HTML dan CSS dapat dilakukan tanpa plugin tambahan. Dengan kode yang sederhana, Anda dapat menampilkan foto profil, nama, biografi, serta tautan media sosial pada bagian bawah artikel.

Author box juga dapat membantu memperjelas identitas penulis dan memberikan informasi tambahan kepada pembaca. Namun, informasi yang ditampilkan sebaiknya selalu akurat dan sesuai dengan identitas penulis sebenarnya.

Kode pada tutorial ini dibuat dengan CSS yang terisolasi, tanpa JavaScript, serta dilengkapi tampilan responsif sehingga dapat digunakan pada perangkat desktop maupun smartphone.

FAQ tentang Author Box Blogger