Cara Membuat Efek Zoom Pada Teks di Blog

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:

<div id="tekszoom">
Silahkan di isi dengan teks/paragraf yang di inginkan
</div>

DEMO: silahkan arahkan mouse anda pada teks dibawah ini.

Cara Membuat Efek Zoom Pada Teks di Blog