Animasi Image Profil Blogger dg css3 AnimationClick here to get more tutorials!

Kini sudah saatnya para blogger untuk menggunakan kode css3 transisiton, css3 transformation dan css3 animation untuk mengembangkan desain blog agar menjadi lebih menarik. Hanya melalui css3 transition & css3 transformation berbagai fungsi menarik & cantik sudah bisa dibuat, apalagi jika kita menggabungkannya dengan css3 animation. Anda bisa melihat salah satu hasil penggunaan css3 animation yang digabungkan dengan css3 transition, css3 transformation dan beberapa css property lainnya melalui demo animasi image profil blogger di bawah. Animasi pada image profil blogger murni menggunakan kode css dan sama sekali tanpa javascript. Kode CSS animasi seperti yang digunakan dalam image blogger dalam demo dapat anda lihat dan gunakan. Silahkan copy dan mungkin bisa anda kembangkan untuk mendapatkan bentuk animasi yang berbeda.

Kode CSS untuk animasi image profil (gambar profil) blogger menyertakan beberapa perubahan elemen di widget profil, seperti perubahan bentuk image profil menjadi bulat serta mengganti icon blogger menjadi icon berbeda. Satu persyaratan yang harus dipenuhi untuk widget profil yang dilengkapi animasi image profil adalah lebar widget profil harus lebih dari 300px. Jika anda menempatkan widget ini di elemen sidebar atau yang lain tetapi lebarnya tak memenuhi syarat, sebaiknya pindahkan posisinya pada bagian blog yang lebarnya mencukupi (pemindahan dilakukan di elemen laman/page element).

D e m o

Silahkan lihat profile blogger di kolom sebelah kanan-bawah!

Kode CSS Animasi Image Profil Blogger

@keyframes imgprofil-anima{0%{opacity:0.5;transform:scale(2.0) translate(20px,10px);}20%{opacity:1.0;transform:scale(2.0) translate(40px,10px);}60%{opacity:1.0;transform:rotate(-180deg) scale(1.0);}80%{opacity:0;transform:rotate(-60deg) skew(15deg,15deg) scale(0.7);}100%{opacity:1.0;transform:skew(-15deg,-15deg) scale(0.8) rotate(180deg);}}
@-o-keyframes imgprofil-anima{0%{opacity:0.5;-o-transform:scale(2.0) translate(20px,10px);}20%{opacity:1.0;-o-transform:scale(2.0) translate(40px,10px);}60%{opacity:1.0;-o-transform:rotate(-180deg) scale(1.0);}80%{opacity:0;-o-transform:rotate(-60deg) skew(15deg,15deg) scale(0.7);}100%{opacity:1.0;-o-transform:skew(-15deg,-15deg) scale(0.8) rotate(180deg);}}
@-ms-keyframes imgprofil-anima{0%{opacity:0.5;-ms-transform:scale(2.0) translate(20px,10px);}20%{opacity:1.0;-ms-transform:scale(2.0) translate(40px,10px);}60%{opacity:1.0;-ms-transform:rotate(-180deg) scale(1.0);}80%{opacity:0;-ms-transform:rotate(-60deg) skew(15deg,15deg) scale(0.7);}100%{opacity:1.0;-ms-transform:skew(-15deg,-15deg) scale(0.8) rotate(180deg);}}
@-moz-keyframes imgprofil-anima{0%{opacity:0.5;-moz-transform:scale(2.0) translate(20px,10px);}20%{opacity:1.0;-moz-transform:scale(2.0) translate(40px,10px);}60%{opacity:1.0;-moz-transform:rotate(-180deg) scale(1.0);}80%{opacity:0;-moz-transform:rotate(-60deg) skew(15deg,15deg) scale(0.7);}100%{opacity:1.0;-moz-transform:skew(-15deg,-15deg) scale(0.8) rotate(180deg);}}
@-webkit-keyframes imgprofil-anima{0%{opacity:0.5;-webkit-transform:scale(2.0) translate(20px,10px);}20%{opacity:1.0;-webkit-transform:scale(2.0) translate(40px,10px);}60%{opacity:1.0;-webkit-transform:rotate(-180deg) scale(1.0);}80%{opacity:0;-webkit-transform:rotate(-60deg) skew(15deg,15deg) scale(0.7);}100%{opacity:1.0;-webkit-transform:skew(-15deg,-15deg) scale(0.8) rotate(180deg);}}
#Profile1 a img.profile-img{
    animation:imgprofil-anima 8s infinite alternate;
    -o-animation:imgprofil-anima 8s infinite alternate;
    -ms-animation:imgprofil-anima 8s infinite alternate;
    -moz-animation:imgprofil-anima 8s infinite alternate;
    -webkit-animation:imgprofil-anima 8s infinite alternate;
    margin-top:10px;
    margin-left:5px;
    width:60px; /* by http://gubhugreyot.blogsopt.com */
    height:60px;
    padding:2px;
    border:4px solid #555;
    border-radius:36px;
    box-shadow:0 0 6px #aaa;
    transition:1.5s;
}
#Profile1:hover a img.profile-img{
    animation:imgprofil-anima 0s;
    -o-animation:imgprofil-anima 0s;
    -ms-animation:imgprofil-anima 0s;
    -moz-animation:imgprofil-anima 0s;
    -webkit-animation:imgprofil-anima 0s;
}
a.profile-name-link{
    padding:4px 0 4px 25px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCSylt0TiznxSf-NhxMNHjVsp75tXVk2xP2hac495Hi7wlpMrrsofM5QUqLwiMRTKnjxUP8whakSd0n_cchsXiIY8wZBvsJFrIRkP1XgXIzVEwKeKiomTOpXo30a8tWmsAyhJm9mmE64s/h120/indonesian-flag-20x15.gif) left center no-repeat !important;
}

Cara menambahkan kode css :

1. Login ke Blogger
2. Dasbor (Dasboard)
3. Template
4. Backup/Restore Template. Panduannya bisa dibuka disiniKlik untuk mengikuti panduan cara melakukan backup/restore template.
5. Edit HTML
6. Template › Edit HTML
   • Procced (Lanjutkan)
   • Cari Kode : ]]></b:skin>
   • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
   • Copy & paste-kan kode css tepat di atas kode tersebut.
   • Simpan Template/Save Template
7. Selesai...
8. Buka blog dan lihat penampilan image profile blogger baru anda!

Contoh posisi penempatan kode css template :

#Profile1 .widget-content img.profile-img{
    margin-bottom:5px;
    padding:1px;
    border-radius:43px;
    border:2px solid #444; /* warna border bisa dirubah - #444 */
}
]]></b:skin>