Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Cara Membuat Efek Zoom Pada Teks di Blog

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).
Efek Zoom Pada Teks di Blog
#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

Berlangganan artikel via email

19 Response to "Cara Membuat Efek Zoom Pada Teks di Blog"

So ...keren mas ...jd keliat lebih beda dan menarik ya...di tambah ga bikin loading berat juga...mantapp

Matur suwun sanget ..loh
ting... :)

Balas

wah ini ni yang saya cari-cari, mksih mas udah share...


Salam kenal, mampir balik yaa !!

Balas

keren mas, saya sering menjumpai zoom teks di blog kawan. ternyata spt ini toh cara bikinnya.

Balas

wah keren text nya, jdinya unik ya sob.

Balas

wah keren nc mas kayag gambar yang bisa muter2 juga

Balas

Keren nih ada tutor CSS baru

Balas

Keren juga ya sob hasilnya... makasih udah berbagi :)

Balas

mantap sob, apa nggak memberatkan loading blog sob?

Balas

Bagus nih tutorialnya, bikin blog jadi tambah keren :D
Makasih mas :)
Ijin save hehe

Balas

wuih keren nih mas andes, bgus kyanya klo d psang d blog ane :D
thanks mas andes udah sharing, mampir klo smpet :)

Balas

owh jadi text bisa juga yah .. lumayan tuh buat dipraktekin ;D

btw itu ngerti buat bgtu gimana sih caranya ? hihihi

Balas

kalau dilihat demonya ternyata mantap juga sobat, mungkin suatu saat perlu dicoba nih kalau sempat, Okey sobat terima kasih banyak atas tutorialny yg sangat bermanfaat.

Balas

mantabs ms semangat terus posting tutorial blognya biar sy gk puyeng praktenya hehehe

Balas

hadir akhir pekan :)

Balas

thanks infonya sob kunjung balik blog ane di http://zaidinwelder.blogspot.com

Balas

bagus demonya kang ,tapi kebanyakan script bikin berat loading blog

Balas

Keren Min, kunjung balik ya
herryhacker.blogspot.com

Balas

makasih infonya gan

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Cara Membuat Efek Zoom Pada Teks di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode