Cara Membuat Tampilan Author Box Dengan Animasi GIF Doraemon Edit
BrioMagz - Brio desain kode css dengan tampilan animasi yang sangat keren sekali, dengan ada nya tampilan animasi doraemon pada tampilan author box sangat keren dan sangat lah cocok buat template.
Cara buat tampilan author box dengan animasi Doraemon
Cara mempercantik tampilan pada sebuah template blog kita menggunakn author box dengan tampilan animasi doraemon, dan maka para pengujung blog kita lebih suka dengan ada nya tampilan author box profil.
Cara memasang kode css Author Box pada template
Masih di tampilan Html dan sekarang cari kode </b:skin> atau </style>
paste kan kode di bawah di tepat di atas kode </b:skin> atau </style>
Sekarang tampilan Author box udah berhasil di buat dan tampilan nya sangat lah keren dan bagus, gunakan kode css ini sebijak mungkin jangan di salah gunakan kode css ini ya.
Cara buat tampilan author box dengan animasi Doraemon
Cara mempercantik tampilan pada sebuah template blog kita menggunakn author box dengan tampilan animasi doraemon, dan maka para pengujung blog kita lebih suka dengan ada nya tampilan author box profil.
Cara memasang kode css Author Box pada template
- Login ke akun blogger kalian
- Masuk ke menu pengeditan template
- Dan Cari kode </article>
- Dan paste kan kode css di bawah
- tepat di bawah kode </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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSw_oJZ5RU0sSb1PmtL-gtx8pZQCD0qj8S0L1pX0veEg9Tz4G4VoFqXd1LQ_TsD4ra6iw1Y69NYfj8DeQJjZfENovXvt9SZEoywGqEv1crIFJRSB7-h6fIWVGDVbENKuhdU6WBH4iVG6A/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'>
Aku hanya redesigner yang masih amatir :v
</div>
</div>
</div>
</b:if>Masih di tampilan Html dan sekarang cari kode </b:skin> atau </style>
paste kan kode di bawah di tepat di atas kode </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;
}Silahkan Save TemplateCara membuat Author Box Dengan Animasi Doraemon udah selesai
Sekarang tampilan Author box udah berhasil di buat dan tampilan nya sangat lah keren dan bagus, gunakan kode css ini sebijak mungkin jangan di salah gunakan kode css ini ya.
