Pages

Showing posts with label spin. Show all posts
Showing posts with label spin. Show all posts

Cara Membuat Gambar Header Berputar Saat Disentuh Cursor

Thursday, March 28, 2013
      
Cara Membuat Gambar Header Berputar Saat Disentuh Cursor - Bagi sebagian atau keseluruhan blogger, template blog yang cantik tentu menjadi kepusan tersendiri, entah untuk menggaet visitor atau hanya sekedar mempercantik blog. Banyak sekali tutorial blog khusunya blogspot yang berterbangan di internet seperti halnya Memasang Like Box Facebook pada Blog, Tombol Share Melayang, memasang Google Custom Search Engine, dan lain-lain. Namun pada kali ini saya akan membahas tentang cara membuat header berputar saat disentuh mouse.

Cara ini cukup simple, karena tutorial yang saya berikan tidak terlalu susah. Tahapan membuat header berputar saat disentuh cursor (Mouse) juga bisa dilakukan oleh seorang yang baru terjun ke dunia Blogging. Sebagai contohnya silahkan arahkan cursor mouse anda menuju ke header atau seperti gambar dibawah ini:

Cara Membuat Header Berputar Saat Disentuh Cursor
Sebelumnya, anda harus menyiapkan sebuah gambar / logo untuk dipasang pada header blog anda. Jika header blog anda sudah terpasang logo, tinggalkan saja langkah ini untuk membuat header berputar saat disentuh cursor.

Pertama, buka edit template. Caranya: Login ke blogger.com kemudian pilih Template >> Edit Template, beri tanda centang pada "Expand Template Widget". Demi keamanan template anda jika terjadi galat, silahkan back up template terlebih dahulu. Cari kode ]]></b:skin> dan letakkan kode berikut ini tepat diatas kode tersebut.


Sebelum disave, sebaiknya pratinjau terlebih dahulu apakah terjadi masalah atau tidak, jika template tidak mengalami masalah, klik simpan. Demikian tutorial membuat gambar header bergerak saat disentuh cursor.

Cara Membuat Foto Profile Di blog Berputar Saat Tersentuh Mouse

                   
Hay Para Visitor blog ini :D !!
udh lama ya ? admin gk post hahaah karna admin udh agak bosen ngeblog :3 haahah tpi skarang admin akan post Cara Membuat Foto Profile Di blog Berputar Saat Tersentuh mouse seperti gambar di samping :D klik aja klo kurang jelar gambar nya :) dan baca juga postingan admin kemaren oke Sekarang Admin akan Share Tutorial Cara Membuat Foto Profile Di blog Berputar Saat Tersentuh mouse Perhatikan Baik-Baik kwkwkwwk
TUTOTIAL :
1 LOGIN BLOGGER
2 masuk ke rancangan
3 klik EDIT HTML
4 Paste kan CSS du bawah ini di atas kode ]]></b:skin>


/* Profile berputar by X-T */
.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}
5 . Simpan dan lihat hasil nya arahkan mouse ke foto profile blog kamu :)
 

bloger sejati Copyright © 2008-2009 | Edited By : arieadie