Cara membuat Animasi Pada Profile Blogger Menggunakan CSS3 Transition-Transformation

Membuat sebuah tampilan profile blogger-blogspot dalam bentuk animasi tentulah akan sangat menarik sebagai penyegar wajah blog. Kita akan buat sebuah transparansi pada gambar profil, hingga profil blogger ini mampu membuat penasaran pengunjung karena gambar/image yang terlihat samar-samar. Melalui kondisi ini diharapkan mampu membuat pengunjung menyentuhkan cursornya ke salah satu bagian box blogger profile yang terdapat di sidebar widget (umumnya dipasang di sini!). Apabila kondisi ini terpenuhi, maka dengan segera akan terjadi reaksi pada photo yang terpajang untuk bergerak ke arah kiri dan dilanjutkan sebuah putaran untuk sedikit menciptakan keatraktifan dan baru kemudian secara perlahan gambar yang terlihat suram menjadi kelihatan tajam karena efek transparansi hilang.

Kode CSS Animations on Blogger Profile

dl.profile-datablock {clear: both; text-align:center;}
#sidebar .Profile img.profile-img {
      border: 8px solid #aaa;
      opacity: 0.3;
      border-radius: 6px;
      margin: 20px 0 20px 60px;
      padding: 4px;
      background: #eee;
      box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #444;
      -moz-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #444;
      -webkit-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #444;
      -o-transition: margin-left 1.5s ease-in 2s, margin-top 1.5s 2.5s, -o-transform 1.5s ease-out 1s, opacity 2s ease-in;
      -moz-transition: margin 1.5s ease-in 2s, -moz-transform 1.5s ease-out 1s, opacity 2s ease-in;
      -webkit-transition:margin 1.5s ease-in 2s, -webkit-transform 1.5s ease-out 1s, opacity 2s ease-in;
}
#sidebar .Profile:hover img.profile-img {
      opacity: 1.0;
      border-radius: 12px;
      -moz-border-radius: 12px;
      -webkit-border-radius: 12px;
      -moz-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 16px #222;
      margin: 40px 0px 20px 10px;
      -o-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
      -moz-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
      -webkit-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
      -o-transition: margin-left 1.5s ease-in 0.4s, margin-top 1.5s, -o-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
      -moz-transition: margin 1.5s ease-in 0.4s, -moz-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
      -webkit-transition: margin 1.5s ease-in 0.4s, -webkit-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
}

Cara menggunakan Kode CSS3 "Animations on Blogger Profile"

• Login : Login to Blogger. Gunakan User Name atau Email Address serta Password. Setelah data tersebut dituliskan dengan benar, KLIK "Login".
• Dasboard (Dasbor) : Ini halaman yang akan dijumpai setelah login. Akan terlihat beberapa buah link di dalamnya. Cari dan KLIK "Design (Rancangan)". Tunggu beberapa saat!
• Design (Rancangan) : KLIK link "Edit HTML".
• Edit HTML : Setelah halaman ini terbuka, maka akan terlihat kode html penyusun blog. Silahkan cari kode ]]></b:skin>.
• Copy - Paste : Copy kode CSS di atas dan pastekan tepat di atas kode ]]></b:skin>.
• SAVE Templates (Simpan Template) : KLIK "SAVE Templates" kemudian bukalah blog sampeyan. Sebuah tampilan baru yang cantik dan atraktif siap untuk membuat pengunjung meraba-raba wajah sampeyan yang suram-suram manis! .

Catatan

margin dengan nilai 60px digunakan untuk mengatur posisi gambar. Rubah jika diperlukan. Semakin kecil gambar akan semakin ke kiri!

 

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «