Memperbesar gambar secara otomatis di blog

Bagaimana cara memperbesar gambar secara otomatis di blog

Mempercantik tampilan postingan memang dibutuhkan untuk menarik perhatian pengunjung, dan hal ini memang juga salah satu trik dari seo. Tutorial berikut ini adalah tentang bagaimana cara membuat gambar membesar secara otomatis di blog. Manfaat dari teknik ini bisa digunakan saat saudara ingin mempost gambar yang memiliki detail kecil; gambar rumus, diagram dll. Lantas bagaimana caranya? ikutilah tutorialnya dibawah ini.

1. Masuklah ke edit template >>> edit HTML

2. Untuk mempermudah pencarian, gunakanlah search function dengan mengklik sembarang di halaman editor, dan selanjutnya tekan ctrl + f

3. Carilah kode  ]]></b:skin>

4. Copy paste script dibawah ini, tepat diatas kode   ]]></b:skin>

.post-body img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3,1.3);
-o-transform: scale(1.3,1.3);
-webkit-transform: scale(1.3,1.3); }

6. Klik preview untuk memastikan apakah berhasil atau tidak, dan sekiranya hal ini tidak berhasil, lanjutkan ketahap berikutnya.

7. Kembali klik edit template, dan hapus script diatas/ timpa dengan script dibawah ini.

.post .post-body img{margin:5px; padding:5px; border:1px solid #e0e0e0; -o-transition: all 0.5s; -moz-transition:all 0.5s; -webkit-transition: all 0.5s;}
.post .post-body img:hover{-o-transition:all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform:scale(1.2); -o-transform:scale(1.2); -webkit-transform:scale(1.2);}

8. Kembali privew hasilnya (ditahapan ini punya admin berhasil), setelah berhasil &gt;&gt;&gt; save
Ket:
- angka 1.3 =  angka perbesaran yang akan terjadi
- angka o.3s=  angka tempo pembesaran, waktu yang diperlukan untuk membesarkan gambar setelah point mouse mengarah


Artikel ini kuketik, sebagai catatan inspirasi perjalan blog-ku. Selamat Mencoba "-"