Home » , » Membuat Animasi Css Profil Blogger

Membuat Animasi Css Profil Blogger

Trimuda Reog | 22.17 | 19komentar
Cara buat animasi css
Selamat malam sobat, belajar CSS Animasi memang perlu ketelatenan dan ke uletan. maka dari tiu saya tidak cepat bisa, soalnya masih newbie. Tapi tak apalah sedikit demi sedikit lama-lama menjadi bukit. Animasi Css Profil Blog ini merupakan salah satu dari sekian banyak efek animasi menggunakan CSS. Animasi ini akan membuat efek yang menarik saat kursor menyentuhnya. Untuk demoya silahkan Lihat profil saya yang ada di home page. Nah bagaimana cara membuat animasi css profil blog? langsung saja kita praktekkan sobat :

1. Login ke Akun Blogger sobat masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode : ]]></b:skin>
7. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin> .
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;
}

8. Save
9. Selamat mencoba

Ada cara untuk modifikasi link dengan animasi css, silahkan kunjungi artikel cara buat animasi link dengan css.

Keterangan:Rubah nilai magrin 60px dengan sesuka sobat semakin kecil angka semakin ke kiri gambar tersebut.
Share this article :

19 komentar:

  1. maksudnya ini animasi buat profil bloger mas xD nice infonya tp dikasih demonya dong mas...

    BalasHapus
    Balasan
    1. demonya silahkan dilihat di home page gan... thanks

      Hapus
    2. oke gan ^_^ oia kalo buat sroll yg bisa ngilang dikomentar seperti diblog sobat gimana ya heheeee

      Hapus
    3. Komentar ini telah dihapus oleh pengarang.

      Hapus
    4. itu mudah gan,,, silahkan copypaste code dibawah ini dan letakkan diatas ]]></b:skin>. kemudian save

      .comments {
      opacity:0.6;
      filter:alpha(opacity=60);
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
      height: 260px;
      overflow:hidden;
      -o-transition: opacity 1s 1s, height 1s 0.2s;
      -moz-transition: opacity 1s 1s, height 1s 0.2s;
      -webkit-transition: opacity 1s 1s, height 1s 0.2s;
      }
      .comments:hover{
      opacity:1.0;
      filter:alpha(opacity=100);
      -ms-filter:"progid.DXImageTransform.Microsoft.Alpha(opacity=100)";
      height:400px;
      overflow:auto;
      overflow-x:hidden;
      -o-transition: opacity 1s 0.1s, height 0.6s 1s;
      -moz-transition: opacity 1s 0.1s, height 0.6s 1s;
      -webkit-transition: opacity 1s 0.1s, height 0.6s 1s;
      }

      maaf baru bisa ol, semoga bermanfaat!

      Hapus
  2. Terima kasih tutorialnya...

    www.womenandperspectives.com

    BalasHapus
  3. Mantep banget sob.Lanjutkan pokoknya :D

    BalasHapus
  4. tutorial bagus sob....
    bsa belajar di sini

    BalasHapus
  5. makasih gan
    ilmu ane jadi nambah lagi nih

    BalasHapus
  6. Mav sob telat ksh komentar hehe..
    Mksh share tutor nya ya :)

    BalasHapus
  7. keren infonya, ntar dicobain ah. thanks y :-D

    BalasHapus
  8. wawww keren Niee Sobb.. Ajibb Dahh pokoknya

    BalasHapus

Tinggalkan Jejak Dengan Berkomentar ya! Terimakasih

Daftar Kategori


close
cbox
 
Alamat: Talun | Ngebel | Ponorogo
Copyright © 2011. PUISI DAN PENDIDIKAN - All Rights Reserved
Template Modify by Cah Ngebel
Proudly powered by Blogger