Cara Membuat Efek Gambar Saat Cursour Mouse Diarahkan Ke Gambar Menggunakan CSS

Cara Membuat Efek Gambar Saat Cursour Mouse Diarahkan Ke Gambar Menggunakan CSS

Tutorial kali ini berhubungan dengan CSS , Tips ini sangat menarik untuk sebuah blog ,  semakin enak saat pengunjung sedang berkunjung di blog kalian .

Dengan memsang efek dari CSS ini otomatis blog kalian akan terlihat lebih keren dan menarik , bagi kalian yang suka membuat efek pada blognya apa salahnya kalau menambahkan efek yang satu ini caranya sangat mudah buat sobat , bisa kita  lihat caranya seperti berikut ini ,

Seperti ini Langkah-langkahnya :

1. Masuk Blogger > Dashbor
2. Pilih Template  > Sesuaikan 
    ( Lihat Gambar )

3. Maka sobat akan pergi ke Blogger Template Designer ,
    Pilih Tingkat lanjut >> Tambahkan CSS .  ikuti petunjuk sesuai gambar
   ( Lihat Gambar )

4. Masukan Kode CSS berikut .

.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); }

 

5.  Kalau sudah . Klik Terapkan Ke blog

Sekian Tutrial pertama saya menggunakan CSS , semoga bisa membantu dan membuat blog kalian lebih keren .. :D

Tweet