Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Author Box Effek Doraemon Bergerak di Blogger


IkhsanCoegraphy - Pada artikel kali ini admin akan membagikan tutorial cara membuat author box di bawah postingan blog dengan effek animasi doraemon bergerak. Dengan kalian memasang author box doraemon keren ini, bisa menambah tampilan blog anda menjadi lebih keren dan pengunjung pastinya suka dengan adanya tampilan animasi doraemon yang bergerak & lucu ini.

Cara membuatnya juga cukup mudah, untuk lebih jelas & lebih lengkapnya bisa kalian simak step by step nya yang admin bagikan di bawah ini.

Cara membuat author box dengan effek doraemon di viomagz

Langkah yang harus kalian lakukan yaitu login ke akun blogger kalian masing - masing terlebih dahulu. Kemudian cari kode </article> di template kalian, kalau sudah ketemu, silahkan copy dan pastekan scrip yang saya bagikan di bawah ini tepat di bawah kode tersebut.
<!-- Author Box -->
<b:if cond='data:view.isPost'>
<div class='ikhsan_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='ikhsan'>
<data:post.author/>
</a>
</div>
<div class='author-desc'>
Ngeblog Cuma Iseng Doang :v
</div>
</div>
</div>
</b:if>
Kalian juga bisa mengganti teks deskripsi nya yaitu dengan cara mengubah teks yang saya tandai warna kuning.

Langkah selanjutnya adalah kalian cari kode]]></b:skin> kemudian tinggal kalian pastekan scrip di bawah ini tepat di atasnya
/* Author Box */
.ikhsan_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;
}
.ikhsan_Author .avatar, .Profile .avatar{
-webkit-fle
display:-webkit-box;
display:-webkit-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
align-items:center;
justify-content:center;
position:relative;
}
.ikhsan_Author .avatar{
width:81px;
height:81px;
min-width:81px;
min-height:81px;
margin-right:20px;
}
.ikhsan_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;
}
.ikhsan_Author .avatar:before{
width:81px;
height:81px;
}
.ikhsan_Author img, .Profile img{
border:3px solid #fff;
position:relative;
border-radius:100px;
transition:all .5s ease;
}
.ikhsan_Author img{
width:65px;
height:65px;
}
.ikhsan_Author .bottom{
width:100%;
flex-grow:1;
z-index:99;
}
.ikhsan_Author .author-name{
font-size:1.15rem;
font-weight:600;
margin-bottom:7px;
}
.ikhsan_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;
}
.ikhsan_Author .author-name a{
color:#666;
font-weight:400;
transition:all .5s ease;
}
.ikhsan_Author .author-desc{
color:#8f8f96;
font-size:.95rem;
line-height:initial;
}
/* Avatar GIF Doraemon */
.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;
}

Akhir kata 

Uraian diatas merupakan tutorial cara membuat author box untuk blogger dengan menggunakan template viomagz yang mudah dan simpel. Untuk sobat yang mengalami kesusahan dalam hal pemasangannya bisa hubungi admin melalui halaman contact yang ada di bawah postingan ini, sekian dan terimakasih.

Posting Komentar untuk "Cara Membuat Author Box Effek Doraemon Bergerak di Blogger"