Sliding Image Gallery CSS3

Sliding image gallery css3 adalah sebuah gallery yang dibuat hanya menggunakan kode css3 dengan memanfaatkan CSS3 box shadow, css3 border radius, css3 transition dan css3 transformation. Fungsi hover dan css3 transform menjadi kunci utama bekerjanya sliding image gallery. Dengan menggeser masing-masing image ke arah kanan sebesar 20px melalui fungsi translate (css3 transform), maka seluruh image dalam gallery akan memiliki sisi yang dapat disentuh cursor hingga hover yang juga digunakan untuk membuka image dapat bekerja sempurna. Sliding image gallery didesain untuk image berukuran width sebesar 300px dan height sebesar 225px dengan kemampuan memuat 10 buah image. Jika dalam blog anda juga menggunakan sebuah widget image/media viewer (seperti lightbox) maka anda bisa menggabungkan fungsi keduanya. Preview image yang berukuran lebih besar dapat dilakukan melalui image viewer/media viewer (lightbox).

The most practical way to post images

Posting yang hanya berupa teks adalah bentuk posting yang paling sederhana, sekalipun sebenarnya jika dalam teks tersebut digunakan berbagai variasi font, color, ketebalan font serta ukuran font maka posting tak lagi dapat dikatakan sederhana. Ukuran posting sederhana atau rumit itu sendiri akan kita ukur dari banyak sedikitnya kode html yang dilibatkan di halaman posting. Anda tak akan pernah menemukan betapa rumitnya box posting yang dijejali dengan kode html jika hanya berkutat di mode posting Compose. Cobalah sekali-sekali buka box posting pada mode Edit HTML. Memanfaatkan posting pada mode Edit HTML memberi banyak kemungkinan dan keuntungan bagi blogger. Berbagai modifikasi dapat dilakukan dengan menambahkan kode HTML baru (CSS atau javascript) di dalam template. Sebelum kita lanjutkan ada sebuah pertanyaan penting yang perlu diperhatikan! Mengapa blog menyediakan 2 (dua) mode posting? Mengapa harus disertakan mode Rdit HTML.

Membuat Slideshow CSS3 u Pelengkap Lightbox

Untuk melengkapi lightbox image viewer dengan slideshow yang manfaatkan sebagai image gallery, kita hanya akan membuatnya menggunakan kode css3. Sekalipun tanpa javascript, jangan sekalipun punya anggapan bahwa slideshow css3 ini menjadi sama sekali tak menarik atau bahkan tak layak ditampilkan sebagai kelengkapan blog. Cobalah anda lihat dulu dan baru kemudian anda bisa beri komentar! He ... he .. setelah melihat dan mencoba pasti anda akan banyak mengerenyitan dahi yang terlihat sudah dipenuhi dengan keriput itu. He... he .. pasti anda akan jadi terlihat jauh lebih tua! He ... he .. ini yang pasti...!!! Anda akan memberikan acungan jempol kaki sambil bergumam ... bagus...bagus...bagus...

Demo & Tutorial Lightbox Slideshow : Cara Membuat Lightbox Slideshow di blogger

Jika selama ini kita selalu terpancang untuk menggunakan jQuery untuk membangun desain blog dengan segala pernak-perniknya, kini cakrawala coba kita kembangkan dengan mencoba beberapa desain menarik image preview (lightbox) dari prototype.js dan scriptaculous.js. Setelah pada posting sebelumnya kita buat sebuah lightbox cantik, kini satu lagi lightbox yang sudah dilengkapi dengan slideshow bisa menjadi pilihan alternatif bagi anda. Prototype-1.6.0.2.js dan scripttaculous.1.8.1.js mampu memberikan suguhan menarik dalam sebuah bentuk lightbox slideshow.

D E M O

Silahkan klik pada salah satu thumbnail dan tunggu beberapa saat. Ketika image dengan ukuran yang jauh lebih besar terlihat, maka secara otomatis slideshow akan bekerja dan demi satu image (berukuran besar) ditampilkan di halaman blog sesuai dengan banyaknya thumnail. Untuk menghentikan slideshow silahkan klik "Stop Slideshow" dan klik "Start Slideshow" untuk mengaktifkan kembali slideshow. Jika ingin mengoperasikan secara manual klik "Stop Slideshow", kemudian gunakan fungsi "Nex" dan "Previous".

Tips & Trick Merubah ukuran thumbnail & image di posting blogger

Ini hanyalah sebuah tips dan trik sederhana yang mungkin saja tak tersentuh oleh banyak blogger. Sebuah cara untuk merubah ukuran sebuah image (terutama thumbnail) agar bisa dibuat sesuai selera blogger. Semua cukup dilakukan melalui halaman posting pada posting mode Compose dan mode Edit HTML.

Pengaturan ukuran images/thumbnail sangat diperlukan dengan pertimbangan;

• Untuk mendapatkan image/thumbnail dengan ukuran tepat agar dapat ditampilkan di halaman blog dengan cantik.
• Untuk mengatur beban images agar loading blog selalu dalam keadaan sempurna. Perlu diperhatikan bahwa penggunaan images berukuran besar dengan beban berat dalam jumlah banyak akan sangat mempengaruhi kecepatan loading.
• Pengaturan ukuran thumbnail (image berukuran kecil dan biasanya berukuran maksimal 200px pada width atau height) yang tepat dan seragam memungkinkan blogger membuat sebuah image gallery dalam berbagai ukuran dengan penampilan tetap menarik.