5 Maret 2014

7 Langkah: CSS Untuk Membuat Gambar di Postingan Membesar dengan Kursor







Ini memang blog tentang traveling dan kuliner. Karena akhir-akhir ini banyak masakan yang gagal dan jarang jalan-jalan kecuali pulang kampung. Makanya sekarang berbagi tips aja buat teman-teman yang baru ngeblog. Biasanya saya berbagi tips yang sudah saya gunakan. Kemarin akhirnya saya menemukan caranya supaya kita bisa membuat tampilan gambar di postingan kita membesar saat kursor menyentuh gambar tersebut.

Karena saya sendiri lumayan terganggu dengan tampilan gambar yang tak bisa maksimal di blog. Kalau ditampilkan utuh malah meleber ke samping dan menutupi tulisan yang ada di sidebar. Kelebihan gitu gambarnya. Sedangkan mau mengedit templatenya supaya ukuran kotak postingannya lebih besar juga belum tahu caranya. Maklum ini template gratisan milik Enny Law. Jadi yang harus saya pikirkan adalah bagaimana caranya supaya pembaca tetap bisa mendapatkan gambar yang besar di dalam setiap postingan walaupun gambarnya tidak ditampilkan seutuhnya. Cukup dekatkan kursor ke gambar di dalam postingan tersebut, gambarnya pun menjadi maksimal.

Langkah yang dilakukan sangat mudah. Teman-teman tinggal ikuti saja langkah di bawah ini.

1. Buka dashboard
Silakan log in ke dashboard dengan memasukkan ID dan password yang kita gunakan untuk blog.

2. Buka template
Lalu buka template.

3. Sesuaikan
Pilih sesuaikan.


4. Tingkat lanjut
Pilih 'tingkat lanjut' di bagian paling bawah.




Tambahkan CSS
Pilih 'tambahkan CSS' lalu masukkan CSS di bawah ini semuanya ke dalam kotak tersebut.
.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); }




Terapkan ke blog
Klik sudut kanan atas. Terapkan ke blog. Selesai. Sekarang semua gambar yang ada di dalam postingan akan membesar saat kursor menyentuhnya.



Selamat mencoba.


7 komentar:

Berkomentarlah yang baik. Semua komentar yang masuk akan dimoderasi. (admin: Honeylizious [Rohani Syawaliah]).

@honeylizious

Followers