Cara Membuat Efek Zoom Pada Teks di Blog – jika biasanya efek
zoom itu diterapkan pada gambar yang terdapat pada posting blog maka
sekarang akan membahas tutorial untuk cara membuat efek zoom pada teks
di blog.
Efek zoom ini bisa
diterapkan pada kalimat kecil maupun paragraf panjang sekalipun. Namun
sebenarnya bukan hanya efek zoom saja, tapi melainkan efek rotate atau
berputar juga terjadi pada efek ini pada saat hover atau tersentuh
mouse. Teks dapat dengan mudah di atur dengan menggunakan kode CSS yang
ada dibawah. Apabila ingin merubah background maupun yang lainnya maka
tinggal ubah saja kode warna pada bagian background color. Cara
membuatnyapun cukup mudah dan tidak banyak menggunakan kode sehingga
tidak memberatkan loading blog. Sedangkan jika mungkin berminat untuk
membuat efek zoom ini dan menerapkan kedalam blognya, maka berikut
adalah tutorial Cara Membuat Efek Zoom Pada Teks di Blog menggunakan kode CSS dan cara penerapannya:1. Login ke akun blogger.
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).
#tekszoom {
background-color: #eee;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#tekszoom:hover { background-color: #fc3;
-webkit-transform: rotate(360deg) scale(2);
-moz-transform: rotate(360deg) scale(2);
-o-transform: rotate(360deg) scale(2);
-ms-transform: rotate(360deg) scale(2);
transform: rotate(360deg) scale(2);
}
Keterangan:
Tulisan berwarna merah adalah warna background font default, silahkan sesuaikan.
Tulisan berwarna biru adalah warna background font hover, silahkan sesuaikan.
3. Klik Terapkan ke Blog.
4. Selanjutnya pada saat posting maka menggunakan mode HTML dan untuk membuat efek zoom pada teks di postingan blog maka caranya copy kode berikut kemudian paste di kolom posting blog anda:
Tulisan berwarna merah adalah warna background font default, silahkan sesuaikan.
Tulisan berwarna biru adalah warna background font hover, silahkan sesuaikan.
3. Klik Terapkan ke Blog.
4. Selanjutnya pada saat posting maka menggunakan mode HTML dan untuk membuat efek zoom pada teks di postingan blog maka caranya copy kode berikut kemudian paste di kolom posting blog anda:
<div id="tekszoom">DEMO
Silahkan di isi dengan teks/paragraf yang di inginkan
</div>
