.jpg)
Slideshow ini hanya dibuat dengan css3, namun demikian anda boleh bandingkan dengan yang dibuat menggunakan javascript. CSS3 transition, CSS3 transform, box-shadow, text-shadow dan border-radius mampu menciptakan slideshow yang sangat indah dan takkan mengecewakan untuk digunakan di blog. Dengan hanya menggunakan kode css tentu saja slideshow css3 ini menjadi sangat enteng bebannya. Membuatnyapun terhitung sangat mudah hingga dalam waktu singkat bisa menjadi salah satu bagian dari blog sampeyan. Seperti kata pepatah, tak kenal maka tak sayang, tak makan maka perut keroncongan (he.. he...ngawur, ya?!), kita langsung saja menuju tkp untuk menyaksikan demo css3 slideshow yang telah digabungkan dengan lightbox.
Tampilkan postingan dengan label Images Gallery. Tampilkan semua postingan
Tampilkan postingan dengan label Images Gallery. Tampilkan semua postingan
Ada lightbox yang tak perlu repot-repot kita buat. Lightbox ini merupakan blogger plugins. Sampeyan hanya perlu mengaktifkan lightbox-nya, kemudian gunakan untuk posting. Lighbox Blogger plugins dilengkapi dengan button Close, mini gallery yang berfungsi sebagai image selector sekaligus juga dillengkapi dengan javascript mousewheel yang memungkinkan pengguna untuk menggeser gallery lightbox dengan memanfaatkan scroller (mouse).
Cara mengaktifkan lightbox blogger plugins
Cara mengaktifkan lightbox blogger plugins
Sekalipun lightbox ini sama seperti yang telah terpostingkan sebelumnya, namun satu nilai lebih dari lightbox slideshow ini adalah telah dengan ditambahkannya sebuah fungsi slideshow di dalamnya. Ketika sebuah gallery diaktifkan dengan membuka (klik) salah satu thumbnail maka secara otomatis slideshow akan bekerja. Untuk menghentikan slideshow cukup dengan meng-klik button text yang bertuliskan stop slideshow. Untuk menggunakan lightbox slideshow sampeyan harus upload javascript dan css lightbox-slideshow ke file hosting. Agar lebih praktis dan mudah lakukan saja di Google Sites. Tentang bagaimana cara melakukannya, silahkan bula link di bawah ini:
Panduan cara menyimpan file di Google Sites
Nggak perlu panjang lebar, semua pasti 'dah pada tahu apa tuh lightbox. Image Viewer yang akan kita buat kali ini nggak pakai jQuery namun menggunakan prototype.js dan scriptaculous.js. Semua javascript dan kode CSS-nya dah lengakap n tinggal pasang di bawah tag pembuka header (<head>). Hanya, ... ini sekedar saran tapi cukup penting : setelah di coba dan berhasil, javascript lightbox dan css lightbox-nya sebaiknya sampeyan upload secara pribadi di file hosting agar bisa digunakan secara pribadi pula. mengapa hal seperti ini penting dilakukan? Ya... tentu saja berkaitan dengan bandwidth. Jika sampeyan upload sendiri pastinya yang akan pakai juga hanya sampeyan sendiri juga, so ... dengan begitu loading bisa cepat dan blog sampeyan tetap car .... lancar ...nggak pakai lelet! He .... he ... You, know?!
Oooiiii.... yah... barangkali ada nyang blom tahu apa itu lightbox, silahkan sampeyan buka demonya di bawah ini. Jika demo mungkin lelet ya mohon dimaafkan karena hanya mampu pakai hosting gratisan, bat... sobat!!
Oooiiii.... yah... barangkali ada nyang blom tahu apa itu lightbox, silahkan sampeyan buka demonya di bawah ini. Jika demo mungkin lelet ya mohon dimaafkan karena hanya mampu pakai hosting gratisan, bat... sobat!!
Cara Membuat Lightbox
Bagi yang sering menampilkan gambar berikut deskripsinya sebagai materi posting, images gallery and hidden description with animation using CSS3 transition-transformation menjadi amat menarik untuk digunakan. Mini images gallery ini sangat selain dapat digunakan sebagai sebuah images gallery dapat juga digunakan untuk menampilkan gambar dalam bentuk tunggal (satu gambar) dan amat kompatible untuk browser yang sudah mengakomodir CSS3 untuk memberikan berbagai efek terbaru seperti Mozilla Firefox, Opera, Google Chrome dan Safari serta beberapa browser yang lain. Disamping gambar ditampilkan dalam bentuk animasi, deskripsi juga ditampilkan secara tersembunyi sehingga halaman blog menjadi terlihat amat minimalis. Deskripsi gambar dibuat tersembunyi secara rapi dibagian bawah gambar dengan memanfaatkan tag p berikut span. Deskripsi gambar akan terlihat hanya dibagian judul ketika mouse berada di atas gambar, baru kemudian seluruh deskripsi menjadi terlihat secara keseluruhan ketika mouse diarahkan di atas judul deskripsi. Untuk membuat gambar dan deskripsi ini menjadi lebih menarik, sampeyan bisa memberikan judul deskripsi menggunakan kata atau kalimat yang membuat pengunjung blog secara otomatis mengarahkan cursor ke bagian judul. Pasti akan menjadi sangat menarik dan membuat kita tertantang untuk memunculkan kreatifitas yang membuat semua orang mungkin penasaran menyimak deskripsi secara total.
Supaya lebih jelas memahami bagaimana sebenarnya bentuk gambar serta deskripsi yang semuanya terangkai sebuah animasi ini, silahkan sampeyan lihat dengan membuka link demo di bawah ini.
Untuk membuatnya silahkan lakukan prosedur berikut.
Supaya lebih jelas memahami bagaimana sebenarnya bentuk gambar serta deskripsi yang semuanya terangkai sebuah animasi ini, silahkan sampeyan lihat dengan membuka link demo di bawah ini.
Untuk membuatnya silahkan lakukan prosedur berikut.
- Login : Login to Blogger (login ke blogger)
- Dasboard (Dasbor) : Setelah halaman dasboard terbuka, KLIK link "Design" atau "Rancangan".
- Design (Rancangan) : KLIK ""Edit HTML".
- Find Code : Cari kode CSS ]]></b:skin>.
- Copy-paste : Copy dan pastekan kode CSS di atas ]]></b:skin>.
Catatan : Gunakan Ctrl + F (pada keyboard) untuk mencari kode HTML atau CSS dan Javascript stiap kali melakukan pencarian kode supaya lebih mudah dan cepat. - SAVE (Simpan) Template : KLIK SAVE Template dan lanjutkan dengan menggunakan xHTML di bagian body atau di ruang posting blog.
- Open Blog : Buka blog untuk melihat hasil sekaligus pengecekan hasil.
Kode CSS Image and Hidden Descriptions
Deskripsi gambar dari slider ini berada di sebelah kanan gambar. Deskripsi berfungsi untuk menyampaikan informasi sekaligus memuat link yang berkaitan dengan gambar/image yang ditampilkan. Teks deskripsi gambar harus dibuat seminimal mungkin (seperlunya saja) karena daya tampung ruang yang memang sangat kecil. Anda bisa memasukkan link untuk deskripsi/penjelasan yang lebih detail sehingga pembaca akan terpuaskan.
Keterangan/Catatan:
Keterangan/Catatan:
- Kecepatan slider dapat diatur dengan melakukan perubahan pada javascript (intervalObject --> countDown, 400: semakin besar semakin lama/lambat).
- Anda dapat mengaturnya juga di var totalSec.
- Untuk membuatnya lakukan pengamanan template terlebih dahulu. Caranya lihat di sini.
- Setelah selesai mengamankan template lanjutkan dengan menyimpan KODE CSS di atas KODE ]]></b:skin>
- Simpan JQuery.1.3.2.min.js dan javascript di bawah KODE <head> secara berurutan.
- xHTML digunakan dibagian body atau di ruang posting.
Carousel slideshow dibuat menggunakan jQuery. Slideshow berisikan image, teks, link dan title. Link bisa digunakan sebagai readmore atau dalam bentuk yang lain. Penulisan teks juga harus dibatasi karena box slideshow juga ketinggiannya telah ditentukan. Anda bisa menggunakannya seperti ketika memasang readmore saat posting. Agar lebih jelas silahkan buka link demo yang ada di bawah ini:
D E M O
Cara membuat carousel slideshow
D E M O
Cara membuat carousel slideshow
Vertical Image Slider bisa menjadi pilihan lain setelah di posting sebelumnya telah kita bahas pembuatan Image Slider dalam formasi horizontal. Kalau slider horizontal menggunakan jQuery sebagai pilar utama pembentuk slider, maka untuk kali ini kita hanya menggunakan sebuah javascript yang juga relatif tidak bermuatan besar. Sangat simple dan praktis untuk menerapkannya dalam blog. Dijamin dalam hitungan menit maka vertical slider ini sudah mampu terpampangkan dalam blog.
Slider spesial ini mampu secara otomatis memngulang kembali tampilan setiap gambar/image dengan membalik kembali posisi gambar seperti posisi awalnya. JQuery 1.3.2.min.js kembali kita manfaatkan dengan pertimbangan karena hampir bisa diyakini bahwa sebagian besar blogger memanfaatkannya sehingga kita tidak perlu lagi menambah javascript dengan kapasitas besar hanya untuk membuat sebuah slider dengan kwalitas sangat memenuhi standar dan layak ditampilkan sebagai pelengkap blog. Slider ini didesain untuk mengulang setiap 5 (lima image) dalam setiap periode dengan kecepatan rotasi yang dapat di atur. Image yang digunakan mempunyai ukuran 160px x 180px (width x height. Perubahan yang dilakukan terhadap ukuran gambar/image harus disertai dengan penyesuaian desain slider karena perubahan sekecil apapun (terutama width) akan sangat berpengaruh terhadap penampilan slider yang harus mempunyai kepresisian tinggi berkaitan dengan ketepatan setiap bagian slider terhadap image yang ditampilkan.
Meskipun hanya menggunakan KODE CSS, Hover Tab Image mempunyai tampilan yang sangat menarik. Nilai lebih yang dimiliki tab ini adalah sedikitnya KODE yang digunakan sehingga sangat mempengaruhi kecepatan loadingnya. Untuk menampilkan image/gambar kamu juga tidak perlu susah-susah untuk merubah ukuran gambar karena image akan secara otomatis ditampilkan sesuai ukuran tab. Yang penting bahwa image yang akan ditampilkan harus mempunyai perbandingan ukuran gambar 400 x 230 (lebar:tinggi » pixel). Sangat praktis dan tentu saja mudah untuk membuatnya. O..., ya...Hover Tab Image ini di desain untuk menampilkan 5 buah image. Sangat tepat sekali karena tidak terlalu banyak untuk setiap kali posting. Penasaran untuk melihat seperti apa penampilan Hover Tab Image ? Silahkan lihat melalui DEMO yang sudah tersedia!
D E M O
Langkah untuk membuat Hover Tab Image :
D E M O
Langkah untuk membuat Hover Tab Image :
Panduan BloGGeR dan Tutorial BloGGeR Image Gallery.
Menggunakan image gallery sebagai box untuk menampilkan foto atau gambar menjadi sangat penting sekaligus bermanfaat karena ruang dalam blog menjadi tidak berjejalan. Penggunaan slider sebagai sebuah gallery menjadi sangat jamak karena tidak terlalu banyak penambahan kode CSS ataupun javascript. Kalau kita perhatikan dengan seksama, pada saat ini hampir semua jaringan persuratkabaran, televisi dan radio pastilah menggunakan website sebagai satu media alternatif untuk lebih mendekatkan diri ke tengah masyarakat. Disitulah kita bisa melihat bahwa hampir keseluruhannya menggunakan slider sebagai fungsi penampil gambar atau foto bahkan sekaligus kepala beritanya. Bagaimana sebenarnya slider ini dibuat? Dengan Penggabungan javascript dan sedikit CSS, ditanggung kamupun akan memiliki sebuah slider cantik yang tak kalah menarik dari banyak yang telah kamu lihat.
Langkah pembuatan Onmouseover Image Slider :
CSS Image Gallery didesain untuk memuat 10 buah image. Controll gallery berupa thumbnail serta button next dan previous. Untuk menampilkan setiap image dalam gallery dilakukan dengan meng-klik thumbnail contoll yang menampilkan 5 buah thumbnail dalam bentuk deret horizontal. Thumbnail controll sendiri sebenarnya berisikan 10 thumbnail, sehingga agar setiap thumbnail dapat terlihat maka pergeseran thumbnail dilakukan melalui button prev dan next.
Sebelum melangkah lebih lanjut untuk menggunakan KODE CSS hover melayang, perlu kita pahami bersama terlebih dahulu yang dimaksud dengan haver melayang atau fly hover ini.
Fly hover sebenarnya sama saja seperti bentuk hover yang lain yaitu memunculkan teks atau image saat cursor berada di atasnya. Pada hover biasa, desain hover dengan memperbesar ukuran obyek dari ukuran aslinya akan membuat posisi obyek di sekitarnya berubah sehingga akan mengganggu kenikmatan seseorang saat menikmati obyek-obyek yang ada karena posisi obyek yang lain menjadi berpindah tidak beraturan. Dengan menggunakan fly hover CSS ini, maka sebesar apapun obyek yang diciptakan sebagai hover tidak akan mengganggu atau merubah posisi obyek-obyek lain di halaman blog. Untuk lebih jelasnya kamu bisa membuka link demo di bawah ini.
D E M O
Keterangan tentang demo:
Dalam demo yang akan anda lihat merupakan desain yang sama namun menggunakan effek css3 transition. Fungsinya sama persis dengan seluruh kode dalam posting ini, hanya saja yang di posting ini tidak menggunakan effek css3. Perbedaan yang lain adalah posisi preview image saat thumbnail/image diposisikan di kiri dan kanan posting. Silahkan anda bisa mencoba dari kedua desain yang tersedia, baik di sini atau yang disertakan dalam demo.
KODE CSS dan xHTMLfly hover :
Fly hover sebenarnya sama saja seperti bentuk hover yang lain yaitu memunculkan teks atau image saat cursor berada di atasnya. Pada hover biasa, desain hover dengan memperbesar ukuran obyek dari ukuran aslinya akan membuat posisi obyek di sekitarnya berubah sehingga akan mengganggu kenikmatan seseorang saat menikmati obyek-obyek yang ada karena posisi obyek yang lain menjadi berpindah tidak beraturan. Dengan menggunakan fly hover CSS ini, maka sebesar apapun obyek yang diciptakan sebagai hover tidak akan mengganggu atau merubah posisi obyek-obyek lain di halaman blog. Untuk lebih jelasnya kamu bisa membuka link demo di bawah ini.
D E M O
Keterangan tentang demo:
Dalam demo yang akan anda lihat merupakan desain yang sama namun menggunakan effek css3 transition. Fungsinya sama persis dengan seluruh kode dalam posting ini, hanya saja yang di posting ini tidak menggunakan effek css3. Perbedaan yang lain adalah posisi preview image saat thumbnail/image diposisikan di kiri dan kanan posting. Silahkan anda bisa mencoba dari kedua desain yang tersedia, baik di sini atau yang disertakan dalam demo.
KODE CSS dan xHTMLfly hover :
Bentuk penggabungan dari backckground image yang berupa animasi gif dipadukan dengan effect transisi gambar menggunakan javascript yang memanfaatkan opacity akhirnya menghasilkan sebuah effect yang fantantis dari sebuah image selector. Effect transisi setiap pergantian image juga bisa di atur sehingga bisa dilakukan perubahan oleh pengguna hanya melalui perubahan kecil yang dilakukan di ruang posting. Dengan kata lain ; tidak perlu repot-repot selalu mengobrak-abrik javascriptnya! Keuntungan penggunaan javascript "bgsGRmultifungsi.js" ini adalah bisa digunakan untuk menciptakan effect image dalam bentuk yang lain dengan tetap mengacu pada fungsi opacity.
D E M O
D E M O
Tidak harus menggunakan javascript untuk menciptakan sebuah effect pada sebuah gambar atau photo. Original Size Image on Mouseover menjadi salah satu bukti penciptaan effect yang sangat menarik meskipun murni hanya menggunakan KODE CSS. Gambar atau photo akan ditampilkan dalam bentuk yang lebih kecil, namun ketika cursor menyentuhnya maka gambar dengan ukuran aslinya akan spontan ditampilkan di halaman blog. Penggunaan CSS yang yang relatif kecil ini tentu saja akan sangat bermanfaat kala diterapkan dalam blog karena loading menjadi relatif tidak terpengaruh.Cara menggunakan Original Size Image on Mouseover :
Langganan:
Postingan (Atom)
