Create Animations on Blogger Profile using CSS3 Transition-Transformation

Semakin banyak kreatifitas bisa kita ciptakan dengan datangnya CSS 3, terutama CSS 3 Transition - Transformation. Hal-hal yang sebelumnya begitu sulit diciptakan, dan kalaupun bisa harus menggunakan javascript atau jQuery dan Motool, kini cukup menggunakan kode CSS terbaru yang kita kenal sebagai CSS 3. Masih cukup terbatas memang, namun cukuplah untuk sementara ini sambil menunggu para browser berlomba untuk melengkapi diri pada dukungannya terhadap CSS 3. Tak lama lagi bila opera (Opera 1062)) dan Mozilla (Segera download Mozilla Firefox 4.0 beta 6! Biar nggak ketinggalan kereta!) juga sudah mempercepat dukungannya terhadap semua kode CSS 3, seperti CSS3 animation, pasti akan lebih banyak lagi desain yang lebih menarik akan tercipta. Saat ini cukup kita manfaatkan semaksimal mungkin CSS3 transition dan transformation yang sudah didukung dengan cukup baik oleh Mozilla dan Opera, serta Google Chrome dan Safari (webkit).

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. Animasi ini dengan sengaja memang kita buat dengan melibatkan margin supaya gerak yang tercipta lebih dinamis dan bikin mata melotot serta nafas ngos-ngosan (memangnya lagi ngapain pakai ngos-ngosan? Ah ... bikin pikiran kotor jadi muncul di batok kepala. He ... he ... emang kamu suka yang pakai ngos-ngosan?!). Bagaimana bentuk sebenarnya dari animasi di profile blogger ini? Anda bisa melihatnya dengan melihat profile blogger "About Me" melalui link DEMO di bawah ini!

D E M O

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!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 


• 

» Happy Blogging - gubhugreyot «