Membuat Gambar di Blog Memutar dan Membesar Ketika Disorot Mouse

Pada tutorial kali ini blog yaqindlive akan share tentang cara membuat gambar memutar ketika disorot mouse. Untuk apa itu, ya sebenarnya tidak terlalu penting tetapi ini dapat kita gunakan pada contoh gambar yang kita buat dalam sebuah postingan. gambar akan memutar jika disorot mouse oleh pembaca artikel kita. mau tahu contohnya ? silahkan sobat yaqindlive arahkan mouse ke gambar dibawah ini. Gambar siapa di foto itu, itu adalah gambar wanita pendamping saya kelak amin. sebenarnya penjelasan itu ga usah telalu serius ente simak haha ga penting yang penting tutorialnya. mari kita simak.

 

Sorot Gambar

 

1. Masuk ke akun blogger sobat

2. Selanjutnya Klik Rancangan ➨ Edit HTML
3. Jangan lupa untuk selalu memback up template anda takut terjadi kesalahan CentangExpand Template Widget ➨ Download Template
4. Selanjutnya dlam kotak HTML cari kode </head>
5. Copy kode berikut diatas kode </head>

      <style type="text/css">

      #Gambar_memutar div

      {

      height:100px;

      width:100px;

      border: 3px solid #D8D8D8;

      border-style:double;

      margin:10px auto;

      text-align:center;

      -webkit-transition: all 2s ease-in-out;

      -moz-transition: all 2s ease-in-out;

      -o-transition: all 2s ease-in-out;

      -ms-transition: all 2s ease-in-out;  

      transition: all 2s ease-in-out;

      padding-top:5;

      padding-left:5;

      padding-bottom:5;

      padding-right:5;

      }

      #Gambar_memutar div:hover, #Gambar_memutar div.hover_effect

      {

      -webkit-transform:rotate(720deg) scale(2,2);

      -moz-transform:rotate(720deg) scale(2,2);

      -o-transform:rotate(720deg) scale(2,2);

      -ms-transform:rotate(720deg) scale(2,2);

      transform:rotate(720deg) scale(2,2);      

      }

      </style>

6. Save Template.

NOTE : Untuk menerapkannya disetiap postingan sobat tinggal menyisipkan kode <divid="Gambar_memutar"> dan </div> pada image/gambar yang sobat inginkan menjadi berputar dan membesar dan jadinya akan seperti ini:

<div id="Gambar_memutar"><div class="hover"><a href="http://www.yaqindlive.blogspot.com" target="_blank"><img src="https://lh5.googleusercontent.com/-11ZXOu0vmJ4/Tamx8COnUYI/AAAAAAAAAl4/kijyxzscHEY/s1600/Logo%2Bcara%2Bbuat%2Bweb%2Bgratis.jpg" width="100" height="100"/></a>
</div>
</div>

..: Semoga Bermanfaat :..