Assalamu'alaikum Warohmatullahiwabarakatuh..
Apa kabar sobat blogger? Kali ini EskrimSandwich akan berbagi tutorial blog sederhana tapi keren hehehe, yaitu cara agar semua Gambar pada blog kita Membesar saat disorot oleh kursor mouse. Kalian pasti sering menjumpai blog saat gambarnya disorot mouse akan tampil lebih besar. Selain keren, dengan cara ini pengunjung blog kita juga akan lebih mudah dan jelas saat inign melihat gambar pada blog kita. Nah ingin tahu cara membuat gambar di blog membesar saat disorot mouse ? Langsung sedot gan!
Cara Pertama
1. Silahkan masuk ke menu Template - Edit HTML.
2. Lalu cari kode <head>, gunakan Ctrl+F agar mempermudah pencarian.
3. Setelah ditemukan copy pastekan script berikut ini tepat dibawah <head>
<style>
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2);
</style>
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2);
</style>
Cara Kedua
1. Silahkan masuk ke menu Template - Edit HTML.
2. Lalu cari kode ]]></b:skin>, gunakan Ctrl+F agar mempermudah pencarian.
3. Setelah ditemukan copy pastekan script berikut ini tepat dibawah ]]></b:skin>
.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
4. Lalu klik tombol Simpan, kemudian lihat hasilnya.
NB : Sebaiknya Template diback-up terlebih dahulu untuk meminimalisir kesalahan.
Semoga postingan Saya kali ini bermanfaat, jika masih ada yang bingung silahkan tinggalkan komentar.
Terima Kasih Wassalamu'alaikum Warohmatullahiwabarakatuh..
Judul: Cara Membuat Gambar di Blog Membesar
Ditulis Oleh: Unknown
Blogger Sejati Selalu Meninggalkan Komentar Berupa Kritik dan Saran
