Membuat Author Box di Blog Dengan GIF Doraemon

Membuat Author Box - Author Box merupakan sebuah bagian dibawah setiap tulisan yang berguna untuk menunjukkan bio singkat dari sang penulis artikel. Author Box sangat cocok digunakan apalagi jika di blog Anda terdapat beberapa penulis/kontributor.

Apakah Saya Perlu Membuat Author Box?

Agar si penulis artikel menjadi lebih dekat kepada pembaca, saya pikir Anda perlu menggunakan Author Box di blog Anda.Di dalam author box Anda bisa menyematkan deskripsi singkat tentang diri Anda sebagai penulis artikel, apa yang Anda kerjakan saat ini, juga menyematkan foto profil Anda.

Membuat Author Box box juga merupakan satu dari berbagai cara bagi si penulis untuk berinteraksi dengan pembacanya. Author Box pada umumnya digunakan oleh blog/website yang terdiri dari banyak penulis, sehingga lebih mudah unutk membedakan siapa penulis untuk sebuah artikel yang sedang Anda baca.

Jika Anda memiliki blog yang isinya Anda kembangkan sendiri tanpa adanya penulis kontributor, Anda mungkin tidak membutuhkannya. Membuat halaman About Me saya kira sudah cukup, namun kebanyakan orang mungkin tidak ingin repot untuk membuka halaman yang terpisah, dan akan lebih terbantu dengan Membuat Author Box untuk mengenali identitas si penulis artikel di setiap artikel yang dibaca.

Cara Membuat Author Box Dengan Animasi GIF

1. Login dulu ke Blogger.
2. Dalam Dashboard Blogger pilih menu Tema dan Edit HTML.
3. Setelah itu copy code HTML dibawah ini dibawah tag </article>.

<!-- Author Box -->
<b:if cond='data:view.isPost'>
<div class='mashengki_Author'>
<div class='avatar'>
<div class='avatar_gif' style='background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOY8-wQNhTRWY5GvD8JLFuZM16lmyvdEyZ45x12rEEYugXP-kRG0F806teiPxpVVksCQq9CsQ2MgSJKc_P2EgqoQ7pNHH23zf2DL0B4A75iwK5R2V0V3aqA6s4Gi1AWHsi1EivLwBUtgg/s1600/gambar-animasi-jepang-doraemon-bergerak-gif.gif);'/>
<img alt='avatar' expr:src='data:post.authorPhoto.url' height='100' title='Abang isar' width='100'/>
</div>
<div class='bottom'>
<div class='author-name'>
<a expr:href='data:i.userUrl' rel='author' title='mashengki'>
<data:post.author/>
</a>
</div>
<div class='author-desc'>
Aku hanya redesigner yang masih amatir :v
</div>
</div>
</div>
</b:if>

4. Tetap didalam Edit HTML, lanjut copy code CSS dibawah ini diatas tag </b:skin> atau </style>.

/* Author Box */
.mashengki_Author{
display:-webkit-box;
display:-webkit-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
align-items:flex-start;
margin-top:20px;
background:#ececec;
padding:10px;
border-radius:10px;
transition:all .5s ease;
}

.mashengki_Author .avatar, .Profile .avatar{
display:-webkit-box;
display:-webkit-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
align-items:center;
justify-content:center;
position:relative;
}
.mashengki_Author .avatar{
width:81px;
height:81px;
min-width:81px;
min-height:81px;
margin-right:20px;
}
.mashengki_Author .avatar:before, .Profile .avatar:before{
content:'';
background:linear-gradient(to right, #009fff, #ec2f4b);
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
margin:auto;
border-radius:100px;
animation:ignielSpin 3s linear infinite normal;
-moz-animation:ignielSpin 3s linear infinite normal;
-webkit-animation:ignielSpin 3s linear infinite normal;
-o-animation:ignielSpin 3s linear infinite normal;
}
.mashengki_Author .avatar:before{
width:81px;
height:81px;
}
.mashengki_Author img, .Profile img{
border:3px solid #fff;
position:relative;
border-radius:100px;
transition:all .5s ease;
}

.mashengki_Author img{
width:65px;
height:65px;
}
.mashengki_Author .bottom{
width:100%;
flex-grow:1;
z-index:99;
}
.mashengki_Author .author-name{
font-size:1.15rem;
font-weight:600;
margin-bottom:7px;
}
.mashengki_Author .author-name:after{
content:'';
display:inline-block;
background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z' fill='%234285F4'/%3E%3C/svg%3E") center no-repeat;
width:15px;
height:15px;
vertical-align:-2px;
}
.mashengki_Author .author-name a{
color:#666;
font-weight:400;
transition:all .5s ease;
}

.mashengki_Author .author-desc{
color:#8f8f96;
font-size:.95rem;
line-height:initial;
}

/* Avatar GIF */
.avatar_gif {
  position:absolute;
  width:300px;
  height:157px;
  background:no-repeat center center scroll transparent;
  background-size:53px;
  z-index:9;
  top:-19px;
  left:-80px;
}

DemoClick here

Share this post