Cara Membuat Author Box Seperti Jagoandzgn

April 14, 2020

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.