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.

Tips-Trik Membuat Image & Thumbnail berikut kode Lightbox di Blogger

Sebelum melangkah lebih jauh perlu saya tekankan bahwa yang dimaksud dengan title posting (post title) di atas adalah:

1. Image adalah gambar (image) berukuran besar yang akan dibuka melalui lightbox.
2. Thumbnail:
   Sebuah image berukuran kecil dengan ukuran berkisar maksimal 200px (width). Thumbnail disamping biasa dimanfaatkan untuk melengkapi posting juga digunakan untuk lebih memperjelas (mendeskripsikan) maksud yang terkandung dalam rangkaian teks posting (pepatah mengatakan: acapkali apa yang dilihat dari sebuah gambar jauh lebih mudah dimengerti dari pada seribu rangkaian kata!).
   Cobalah deskripsikan thumbnail di atas! Ditanggung orang tak akan tahu apa yang anda terangkan dengan kata-kata/teks. Itulah salah satu kegunaan thumbnail/images.

Cara Membuat Image Gallery untuk Lightbox

Membuat image galley beserta box yang dipergunakan sebagai wadah pada intinya adalah sebuah cara untuk membuat penataan image agar terlihat rapi hingga sebuah web/blog menjadi lebih menarik dan enak dipandang serta nyaman dinikmati pengunjung. Sebuah kunci yang harus dijadikan patokan ketika ingin membuat image gallery adalah keseragaman gambar. Patokan yang tentunya tak berlaku bagi beberapa blogger yang sudah cukup menguasai kode html. Bagi anda yang masih dalam tahap belajar tak perlu berkecil hati tentang pernyataan di atas, karena "sekalipun seseorang telah cukup ahli dalam penguasaan kode html", penataan image dalam sebuah gallery dengan ukuran bervariasi pada kenyataanya tak terlalu banyak digunakan karena kode html yang dipergunakan menjadi terlalu banyak dan bisa dikatakan blogger yang melakukan ini tak ubahnya "mempersulit diri".

Demo & Kode Html Lightbox Image Viewer for Blogger

Demo Single Image dan Image Gallery

Lightbox Image Viewer bisa difungsikan pada satu buah image (single image) atau beberapa buah image yang terangkai dalam sebuah gallery (image gallery). Untuk single image kode yang dituliskan cukup rel="GRlightbox", sedangkan untuk image gallery bisa ditambahkan nama gallery yang sesuai dengan kategori galelery. Kode dasar yang digunakan adalah rel="GRlightbox[gallery]". Kategory [gallery] bisa anda rubah untuk lebih disesuaikan dengan kebutuhan, seperti misanya [photo-keluarga], [pasar-malam] atau [rumah-adat].

Cara Menggunakan Lightbox Blogger Plugins u Posting

Blogger kini telah melengkapi diri dengan sebuah plugin baru berupa lightbox. Lightbox Blogger Plugins ini telah diset dalam kondisi "ready to use" sehingga setting ulang tak perlu lagi dilakukan jika anda ingin menggunakannya. Saat anda membuat sebuah blog di blogger maka secara otomatis lighbox langsung bisa digunakan sebagai sebuah image viewer yang berfungsi untuk menampilkan sebuah image berukuran besar melalui image link (berupa thumbnail=image berukuran kecil). Semua proses untuk mem-fungsikan lightbox dapat dilakukan secara langsung di boks posting, baik melalui mode "Edit HTML ataupun "Compose". Image Viewer Lightbox Blogger Plugins sendiri sama sekali tidak memanfaatkan efek-efek tertentu yang biasanya digunakan oleh banyak media preview lainnya. Jika boleh dikatakan, Lightbox Blogger Plugins ditampilkan sesederhana mungkin hingga akhirnya justru terlihat amat sangat sederhana atau bahkan bisa dikatakan kurang menarik. Hal yang sebenarnya amat sangat disayangkan karena sebuah widget yang sebenarnya bisa dibuat semenarik akhirnya justru terlihat tampil ala kadarnya. Sekalipun demikian, toh setiap blogger sebenarnya punya selera yang tak sama. Bagi yang suka tampilan minimalis barangkali lightbox ini justru akan sangat cocok untuk digunakan.

Mengenal Lightbox Media Viewer

Lightbox dalam dunia blog lebih dikenal sebagai sebuah image viewer yang berguna untuk mempreviewkan sebuah image dengan ukuran besar melalui fungsi klik dari image lain yang berukuran jauh lebih kecil (thumbnail/miniatur) atau bisa juga preview image berukuran besar tersebut dihasilkan dari sebuah teks link. Dalam arti yang lebih luas, lightbox adalah sebuah media viewer yang pada saat bekerja memanfaatkan efek cahaya latar guna memperindah fungsi. Lightbox yang ada pada saat ini dikenal dengan beberapa nama dengan fungsi tak lagi hanya sebagai sebuah image viewer namun banyak berkembang sebagai sebuah media vierwer. Kebanyakan dari media viewer tersebut terinspirasi oleh lightbox yang pada awalnya dikembangkan oleh Leandro Vieira Pinho (Brazil-jQuery plugins) dan Lokesh Dhakar yang menggunakan scripttaculous.js dan prototype.js.

Beberapa media seperti image file, video file, html file (iframe) kini tak lagi harus ditampilkan secara langsung di halaman blog, namun cukup dengan memanfaatkan sebuah link berupa teks atau image. Metode seperti ini memberi keuntungan besar bagi blogger karena image, video atau iframe dalam jumlah sedikit atau banyak tak harus melalui loading secara bersamaan dengan bagian blog yang lain. Loading file yang berupa gambar (image), video atau iframe hanya akan terjadi ketika sebuah link (berupa teks atau thumbnail) di klik (umumnya memanfaatkan fungsi klik). Blog atau web yang menggunakan lightbox tak perlu lagi menampilkan gambar (image), video atau iframe berukuran besar yang justru menjadi beban tersendiri bagi blog. Beberapa buah image dalam ukuran kecil (thumbnail) atau teks link bisa menjadi sarana bagi "dimunculkanya" file-file berukuran besar seperti dimaksud di atas.

berbagai macam lightbox kini tersedia dalam bentuk gratisan. Anda bisa menggunakannya secara bebas sekaligus bisa memilih media viewer yang diinginkan. Ada yang hanya berfungsi sebagai image viewer, namun banyak pula yang berupa media viewer.