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. Tidak memperindah juga sih, cuma agar ketika disorot bergerak zoom dan berputar-putar. Seperti apa contohnya ? Buka saja demo agar tahu seperti apa contohnya.

Tanpa berlama-lama berikut di bawah ini cara membuatnya :

• Login ke blogger.com, jika sudah,
• Pilih Template → Edit HTML
• 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

Itulah artikel mengenai cara membuat foto profile pada blog berputar saat disentuh cursor mouse. Semoga bermanfaat untuk kalian.