Auto Read More with Animated Post Thumbnail

Membuat dan menggunakan read more otomatis yang dilengkapi dengan thumbnail pada posting adalah pilihan yang sangat menarik. Dengan auto read more (automatic post summaries with thumbnail) anda tak perlu lagi untuk menggunakan fitur read more (insert jump break)yang telah disediakan blogger karena sebuah javascript akan secara otomatis menampilkan setiap posting dalam bentuk "menggunakan readmore" yang disertai sebuah image berukuran kecil (tentu saja jika posting menyertakan gambar). Jumlah teks yang ditampilkan sebelum read more (di halaman blog) dapat diatur melalui javascript, demikian pula dengan ukuran thumbnailnya.

Jika selama ini sebuah auto readmore selalu tampil ala kadarnya, kali ini kita kan buat yang lebih atraktif dengan bantuan kode css3 transition, css3 transformation, border-radius, box-shadow dan text-shadow.

Zoom Image Using Script

Zoom image bekerja menggunakan javascript dan dipadukan dengan kode css. Fungsi utama javascript sebagai zoomer, sedang kode css membantu mengatur fungsi image dan zoom agar ketika image bertambah besar posisi seluruh elemen disekitarnya tidak terpengaruh. Kode CSS juga berfungsi untuk mengatur posisi image selalu disebelah kiri. Ini akan sama fungsinya dengan pengaturan yang dilakukan saat anda upload di halaman posting blogger. Jika anda menggunakan ini sebagai kelengkapan posting, maka anda tak perlu lagi menggunakan kode hasil upload. Gunakan saja URL hasil anda mengupload dan pasang URLnya di image zoom ini.

Arahkan saja cursor anda ke arah image maka image akan bertambah besar dengan sendirinya. Jangan kuatir bahwa elemen lain akan terganggu karena semua telah diatur dengan cukup baik melalui kode css. Anda juga tak perlu menyertakan kode selain URL seperti misalnya width dan height. Image ini dipatok dengan ukuran 200 x 150 pixel (width x height). Sebuah ukuran yang aku kira tak terlalu besar atau terlalu kecil sebagai sebuah image posting. Tentang image yang digunakan di image zoom? Gunakan saja gambar dengan ukuran tak lebih lebar dari halaman posting agar ketika zoom bekerja gambar tidak melebar hingga sidebar kanan.

Penggunaan kode html <div style="clear;both;"></div> kadang-kadang diperlukan untuk sebuah elemen yang menggunakan floating position (float-left; dan float:right;) seperti yang digunakan di image zoom ini. Gunakan saja kode tersebut saat anda akan menggunakan image zoom lebih dari satu kali dan benar-benar diperlukan.

Bagaimana membuatnya?

Tutorial

Klik link tutorial di bawah ini untuk mendapatkan tutorialnya:

Tutorial: Zoom Image dg Javascript