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.

7 Comments

  1. 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

Tinggalkan Balasan ke Man Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *