-->
Cara Membuat Author Box Seperti Jagoandzgn

Cara Membuat Author Box Seperti Jagoandzgn

Author Box merupakan sebuah data diri seorang penulis artikel di dalam blog tersebut dan biasanya terletak di bawah sebuah artikel. Dengan adanya ini, pengunjung bisa mengetahui dan mengenal siapa penulis artikelnya dengan mudah.

Author Box ini biasanya memiliki tampilan yang berbeda-beda di setiap template yang kita pakai atau bahkan tidak ada sama sekali. Lagi malas mungkin yah yang buat template? wkwkwkwk.

Mungkin kebanyakan dari kalian mendapati bahwa tampilan Author Box yang kalian miliki tidak menarik. Jadi, untuk membuatnya lebih menarik saya akan memberikan Cara Membuat Author Box Seperti Jagoandzgn dan tutorial ini hanya bisa dilakukan pada Blogger saja.

Tanpa berlama-lama kita langsung ke langkah-langkahnya saja.

Membuat Author Box Seperti Jagoandzgn

1. Pergi ke Dasbor Blogger > Tema > Edit HTML.

2. Cari kode ]]></b:skin>.

3. Kemudian letakkan kode ini tepat diatasnya.

/* Auto Author Box */
.faishalkc-Author{text-align:center;margin-top:20px;}
.faishalkc-Author .top{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:flex-start;justify-content:center;}
.faishalkc-Author .bottom{text-align:center;margin-top:-35px;padding:45px 15px 15px;border-radius:5px;background:teal;background-image: linear-gradient(110deg,rgba(255,255,255,0.1) 16%,rgba(255,255,255,0.1) 17%,rgba(255,255,255,0.05) 17%,rgba(255,255,255,0.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,0.05) 78%,rgba(255,255,255,0.05) 84%,rgba(255,255,255,0.1) 84%,rgba(255,255,255,0.1));}
.faishalkc-Author img{width:50px;height:50px;border:5px solid #fff;border-radius:100px;}
.faishalkc-Author .author-name{font-size:20px;font-weight:700;margin-bottom:7px;}
.faishalkc-Author .author-name a{color:#ffffff;font-weight:500}
.faishalkc-Author .author-desc {color: #eaeaea;font-family: 'Google Sans',sans-serif;overflow: hidden;line-height: 1.6em;font-size:14px}
.faishalkc-Author .author-desc a {background: #ffffff;padding: 5px 8px;color: black;border-radius: 6px;font-family: 'Google Sans',sans-serif;font-size: 13px;!important: ;}
.faishalkc-Author .author-desc a:hover {color:#0081ff;}
.faishalkc-Author .author-desc li {display : inline-block;padding-top: 5px;}

4. Selanjutnya kalian cari kode seperti ini.

<b:if cond='data:post.authorAboutMe'>...</b:if>

5. Kalian ganti kode tersebut dengan kode ini.

<b:if cond='data:post.authorAboutMe'>
<div class='faishalkc-Author'>
<b:if cond='data:post.authorPhoto.url'>
<div class='top'>
<img itemprop='image' expr:src='data:post.authorPhoto.url' width='90px'/>
</div>
</b:if>
<div class='bottom'>
<div class='author-name'>
<a expr:href='data:post.authorProfileUrl' rel='author' expr:title='data:post.author'>
<span itemprop='name'><data:post.author/></span>
</a>
</div>
<div class='author-desc'><data:post.authorAboutMe/>
<br/>
<li><a href='https://www.facebook.com/' title='Facebook'>Facebook</a></li>
<li><a href='https://wa.me/' title='WhatsApp'>WhatsApp</a></li>
<li><a href='https://www.instagram.com/' title='Instagram'>Instagram</a></li>
</div>
</div>
</div>
</b:if>

6. Silakan edit dengan link sosial media kalian dan tekan Simpan.

Penutup

Semoga artikel ini bermanfaat buat kalian semua dan jika ada yang ingin ditanyakan silakan berkomentar saja di bawah.

Seorang Blogger Pemula yang sedang belajar
  • Facebook
  • WhatsApp
  • Instagram
  • DONASI VIA OVO Bantu berikan donasi untuk blog ini agar bisa tetap semangat memberikan artikel terbaru
    Tampilkan Komentar
    Sembunyikan Komentar

    7 Komentar

    1. Di viomagz kok gabisa ya mas? Viomagz versi terbaru

      BalasHapus
      Balasan
      1. Saya bisa kok
        Kodenya saya modif sendiri soalnya

        Hapus
      2. Pastikan profilnya sudah diberikan deskripsi terlebih dahulu melalui pengaturan profil blogger
        Dan juga jangan lupa centang Tampilkan Informasi Pengarang Di Bawah Post pada "tata letak > blog"
        Pastikan juga langkah ke-4 sudah diikuti dengan benar

        Hapus
    2. Wah boleh tuh dipasang di blog saya

      BalasHapus
    3. cara ganti warnanya gimana gan, kog tidak otomatis mengikuti warna tema nya

      BalasHapus
      Balasan
      1. Tinggal ganti aja warnanya di bagian color pada kode css ".author-desc"

        Hapus
    Catatan
    • Mohon Tinggalkan komentar sesuai dengan judul artikel.
    • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
    • Dilarang mencantumkan link aktif di komentar.
    • Komentar dengan link aktif akan otomatis dihapus
    • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel