Effects For Comments Avatar In Blogger
Today i have an awesome trick for you guys and it is how to add effects to comment avatar you can see the effect in the gif image.
Install It Into Blogger
1. Log Into Blogger2. Navigate To Template
3. Click On Edit HTML
4. Now search for ]]></b: skin>
5. When you will find it paste the following code there.
.comments .avatar-image-container {float: left;width: auto;max-height: 56px;visibility: hidden;opacity: 0;left: 50px;position: relative;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
.comment:hover .avatar-image-container { visibility: visible;opacity: 1;left: 0;}
#comments a {-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;text-decoration: none;}
.comments .avatar-image-container {float: left;width: auto;max-height: 56px;visibility: hidden;opacity: 0;left: 50px;position: relative;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
.comment:hover .avatar-image-container {visibility: visible;opacity: 1;left: 0;}
#comments a {-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;text-decoration: none;}
6. Save Your Template
And DoNe.
0 comments: