Showing posts with label disentuh. Show all posts
Showing posts with label disentuh. Show all posts
Thursday, December 22, 2016
Cara Membuat Gambar di Blog Berputar saat disentuh Cursor
Cara Membuat Gambar di Blog Berputar saat disentuh Cursor
Selamat sore sahabat blogger semua !!! Kali ini, aq akan membagikan Tips dan Trik nih buat kalian semua tentang Cara Membuat Gambar di Blog Berputar saat Tersentuh Cursor.
Cara Membuat Gambar Berputar Tersentuh Cursor :
- Login Blogger.com
- Klik Template
- Edit HTML => expand template widget => Cari kode ]]></b:skin>
- Letakkan kode di bawah ini di tepat atas kode ]]></b:skin> :
Gambar berputar di posting blog :
.post img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}.postimg:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
Gambar berputar dan membesar di posting blog :
.post img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}.post img:hover{-o-transform: scale(1.2) rotate(360deg) translate(0px);-moz-transform: scale(1.2) rotate(360deg) translate(0px);-webkit-transform: scale(1.2) rotate(360deg) translate(0px);-o-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-webkit-transition: all 1.5s ease;}
Gambar Post dan Komentar :
.img{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out}.img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
Hanya Gambar comment :
.comment img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}.commentimg:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
Hanya Gambar Header saja :
.header img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}.headerimg:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
- Save template
Catatan : Kode-kode diatas sebenarnya sama, yang membedakan hanyalah perintah yang telah aq beri warna merah pada fontnya.
Go to link Download
Saturday, October 29, 2016
Cara Membuat Link Membesar Saat disentuh Kursor
Cara Membuat Link Membesar Saat disentuh Kursor
Tutorial kali ini tentang trik atau cara untuk membuat blog menjadi lebih menarik. "Membuat Link Membesar Saat disentuh Kursor". Maksudnya link yang pada saat dilintasi cursor mouse akan menjadi besar tulisannya, Selain cara ini Anda juga bisa Membuat Gambar Membesar Saat disentuh Cursor, Membuat Link Berkedip Saat Disentuh Cursor, Membuat Link Berwarna Warni, dan lain-lain.
Buat Sobat yang ingin memasang trik ini silakan ikuti tutorial dibawah ini.
Cara Membuat Link Membesar Saat disentuh Kursor :
- Masuk ke akun blogger sobat.
- Pilih Template > Edit HTML.
- Ceklis / Centang Expand Widget Template.
- Cari kode a:hover {
- Ganti kode font-size dengan ukuran yang lebih besar.
Contoh :a:hover {ganti dengan
color:#d2691e;
font-size:10px;
font-style:italic;
cursor:wait;
}a:hover {
color:#d2691e;
font-size:19px;
font-style:italic;
cursor:wait;
} - Terakhir klik Simpan Template.
Selamat Mencoba dan Semoga Bermanfaat...
Go to link Download
Monday, October 24, 2016
Cara Membuat Gambar Membesar Saat disentuh Cursor
Cara Membuat Gambar Membesar Saat disentuh Cursor
Mungkin sebagian Blogger sering melihat gambar yang menjadi besar apabila tersentuh cursor. Dalam dunia blogging fitur seperti ini sering disebut dengan nama Image Zoom Effects atau Hover Zoom Smooth Effects. Fitur yang satu ini lumayan banyak di senangi para blogger walaupun sebenarnya dengan memasang Image Zoom Effects ini di blog dapat menggangu pengunjung yang sedang membaca postingan kita.
Postingan ini saya buat untuk melengkapi Tutorial di blog ini, buat sobat yang ingin memasangnya silakan Anda ikuti tutorial dibawah ini.
Cara Membuat Gambar Membesar Saat disentuh Cursor :
- Masuk ke akun blogger sobat.
- Pilih Template > Edit HTML.
- Ceklis / Centang Expand Widget Template.
- Cari kode ]]></b:skin> , gunakan fungsi Find dengan menekan tombol CTRL+F pada keyboard.
- Kalau sudah ketemu, letakkan kode berikut tepat di atas kode ]]></b:skin>.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); } - Terakhir klik Simpan Template. Sekarang lihat hasilnya di blog Sobat.
Semoga tutorial singkat ini bisa bermanfaat...
Go to link Download
Subscribe to:
Posts (Atom)