Cara Buat Author Box Animasi Untuk Blogger


Author Box merupakan bagian yang biasanya berada di bawah artikel blog untuk menunjukkan bio singkat penulis artikel tersebut. Dengan ini pengunjung akan lebih mudah mengenali siapa penulis artikel atau pemilik blog.

Author Box yang beranimasi Doraemon ini akan mudah di pasang jika template blog yang kamu pakek viomag dan untuk template lain belum pernah saya coba, tapi kalian bisa mencobanya sendiri  siapa tau berhasil di template yang kamu gunakan.

Berikut ini tutorialnya, disimak baik-baik

1. Masuk dulu Blogger kamu.
2. Kemudian pergi ke Tema dan Edit HTML atau kalian bisa mecadangkan tema dan edit di notepad lain biar lebih mudah.
3. Lalu copy code HTML di bawah ini tepat di bawah code </article>. 

<!-- Author Box -->
<b:if cond='data:view.isPost'>
<div class='tukangredesign_Author'>
<div class='avatar'>
<div class='avatar_gif' style='background-image: url(https://1.bp.blogspot.com/-aQ-IBbeMXXY/XtZYe5-2srI/AAAAAAAAAlY/65bITijc_4AznzSSU5xGmd5R558Aw9wJgCLcBGAsYHQ/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='Abang isar'>
<data:post.author/>
</a>
</div>
<div class='author-desc'>
Hanya penulis biasa yang masih pelajar.
</div>
</div>
</div>
</b:if>

4. Belum selesai sampai disini, selanjutnya copy code CSS di bawah ini tepat di atas code </b:skin> atau </style>.

/* Author Box */
.tukangredesign_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;
}

.tukangredesign_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;
}
.tukangredesign_Author .avatar{
width:81px;
height:81px;
min-width:81px;
min-height:81px;
margin-right:20px;
}
.tukangredesign_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;
}
.tukangredesign_Author .avatar:before{
width:81px;
height:81px;
}
.tukangredesign_Author img, .Profile img{
border:3px solid #fff;
position:relative;
border-radius:100px;
transition:all .5s ease;
}

.tukangredesign_Author img{
width:65px;
height:65px;
}
.tukangredesign_Author .bottom{
width:100%;
flex-grow:1;
z-index:99;
}
.tukangredesign_Author .author-name{
font-size:1.15rem;
font-weight:600;
margin-bottom:7px;
}
.tukangredesign_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;
}
.tukangredesign_Author .author-name a{
color:#666;
font-weight:400;
transition:all .5s ease;
}

.tukangredesign_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;
}

5. Kemudian Simpan Tema dan lihat hasilnya, untuk demo kalian bisa lihat Author Box saya di bawah.
avatar
Penulis
Tampilkan Komentar
Sembunyikan Komentar

3 Responses to "Cara Buat Author Box Animasi Untuk Blogger"

  1. Komentar ini telah dihapus oleh administrator blog.

    ReplyDelete
    Replies
    1. Komentar ini telah dihapus oleh pengarang.

      Delete
    2. Komentar ini telah dihapus oleh pengarang.

      Delete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel