Salah satu cara mempercantik blog kalian dengan beberapa efek pada gambar yang kalian posting atau kalian gunakan untuk efek pada sosial media kalian, mungkin kalian pernah melihat di blog-blog orang lain ketika disorot oleh mouse gambar tersebut menyala,berputar,melengkung, dll. nah Edisi Kak Sukirman sekarang adalah berbagi trik mengenai efek-efek blog pada gambar. mudah caranya kok ni saya pandu step per step.
- Pertama kalian login dulu gih, terus pada menu tempate EDIT HTML.
- Terus CTRL+F biar lebih cepet cari kode ini <head>
- Letakan kode dibawah ini, dibawah <head>
<style type="text/css">KODE CSS</style>
- Simpan TemplateLalu untuk memberikan efeknya sekarang menggunakan kode HTML,
<img class='modenya' src='Url Gambar'/>
- Atau bisa dibuat gambar tersebut menuju link yang kamu inginkan ketika diklik,
<a href='Link yang kamu tuju' img class'mode' src='Url Gambar'/></a>
dibawah ini adalah kumpulan efek-efeknya :1. Efek Gambar menyala waktu disorot Mouse
KODE CSS
.mode1 { opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; } .mode1:hover { opacity:1.0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1; }
KODE HTML
<img class="mode1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifghw15kq-u4c7FVpIvko_Okxk2SoIazWfHzBH3YJlvY4OCl07N0zJ1wGEWBkl74pxJA2BhfGszrlXKPzEA5VS_9V0umCwN5o_H_PtdFsmsprn3TaZwLTFEnXRMEIJzUa-oy6v_9hezhY/s1600/tw.gif" />
2. Efek berputar dan membesar saat disorot (rotasi zoom)
KODE CSS
.mode2{
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;
}
.mode2:hover{
-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);
}
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;
}
.mode2:hover{
-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);
}
KODE HTML
<img class="mode2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifghw15kq-u4c7FVpIvko_Okxk2SoIazWfHzBH3YJlvY4OCl07N0zJ1wGEWBkl74pxJA2BhfGszrlXKPzEA5VS_9V0umCwN5o_H_PtdFsmsprn3TaZwLTFEnXRMEIJzUa-oy6v_9hezhY/s1600/tw.gif" />
3. Efek Gambar bergerak kesamping
KODE CSS
.mode3{
-moz-transition: all 0.65s ease-in-out;-webkit-transition: all 0.65s ease-in-out;
}
.mode3:hover{
-moz-transform:translate(5em, 0pt);-webkit-transform:translate(5em, 0pt);
}
-moz-transition: all 0.65s ease-in-out;-webkit-transition: all 0.65s ease-in-out;
}
.mode3:hover{
-moz-transform:translate(5em, 0pt);-webkit-transform:translate(5em, 0pt);
}
KODE HTML
<img class="mode3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifghw15kq-u4c7FVpIvko_Okxk2SoIazWfHzBH3YJlvY4OCl07N0zJ1wGEWBkl74pxJA2BhfGszrlXKPzEA5VS_9V0umCwN5o_H_PtdFsmsprn3TaZwLTFEnXRMEIJzUa-oy6v_9hezhY/s1600/tw.gif" />
sekian ya selamat mencoba semoga bermanfaat, jangan lupa tinggalkan koment kalian