Sabtu, 22 September 2012

Cara Membuat Foto Profile Pada Blog Berputar Saat Disentuh Cursor Mouse


Kali ini Saya akan membahas cara membuat foto profile pada blog berputar saat disentuh cursor mouse.
Tutorial kali ini hanya untuk tambahan saja dan untuk memperindah foto profile pada blog Anda.
Demo.
Tanpa berlama-lama berikut di bawah ini cara membuatnya :
  • Login ke blogger.com, jika sudah,
  • Pilih Template → Edit HTML → Expand Template Widget
  • Cari kode ]]></b:skin> agar mudah mencari tekan f3
  • Letakkan script di bawah ini di atas kode ]]></b:skin>

/* Profile berputar by S☼C☼G */
.profile-img{border: 8px double #aaa; border-radius: 4px; box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #0c00f7;
-moz-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #0c00f7;
-webkit-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #0c00f7;
-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; background:transparent; float:left; margin:0 10px 5px 0; padding:0}
.profile-img:hover { opacity: 1.0; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -moz-box-shadow: 1px 1px 1px #33F, -1px -1px 1px #33F, 0 0 16px #33F; 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.1s, margin-top 1.0s, -o-transform 2.5s ease-out 1.4s, opacity 1s ease-in 1s; -moz-transition: margin 1.5s ease-in 0.1s, -moz-transform 1.0s ease-out 1.4s, opacity 1s ease-in 1s; -webkit-transition: margin 1.5s ease-in 0.1s, -webkit-transform 1.0s ease-out 1.4s, opacity 1s ease-in 1s;}
.profile-data{color:red; margin:0; padding:0; letter-spacing:.1em; font-weight:bold}
.profile-datablock{margin:0}
.profile-textblock{margin:5px 0}
.profile-link{color:blue; font-size:12px; letter-spacing:.1em}



  • Simpan dan lihat hasilnya



Selamat Mencoba !

Tidak ada komentar:

Posting Komentar