Pembaharuan 26 Mei 2013: Terjadi perubahan besar pada penulisan variabel-variabel di dalam widget ini. Saya terpaksa melakukannya demi pengembangan dan perbaikan widget yang lebih leluasa ke depannya biar tidak mengganggu para pemakai widget ini. Bagi Anda yang sudah menggunakan widget ini sebelum tanggal , Anda akan mendapat teks peringatan bahwa widget Anda harus segera diperbaharui.
Perubahan fitur: (1) Opsi showThumbnails ditiadakan (2) Menambahkan fitur Infinite Scroll (3) Mengganti parameter indeks feed dari window.location.search menjadi window.location.hash dengan santunan event hashchange, sehingga pengguna tidak perlu memuat ulang halaman secara keseluruhan hanya untuk mengubah window.location.search pada address bar.
Sebelum ini Saya telah menciptakan widget Galleria versi pertama, kali ini Saya menciptakan versi yang ke dua dengan dua macam pilihan layout dan konfigurasi yang lebih lengkap.
Masalah besar yang terjadi pada versi pertama yaitu beliau menampilkan semua feed begitu saja sehingga proses muat widget menjadi begitu lama. Kita tidak mempunyai kemampuan untuk memotong proses pemuatan feed kecuali dengan cara menambahkan fitur navigasi. Inilah kabar baiknya:
Widget ini dilengkapi dengan navigasi halaman. Setiap kali halaman berganti, itu akan mengubah nilai Widget ini dilengkapi dengan navigasi halaman. Setiap kali tombol navigasi diklik, itu akan mengubah nilai window.location.search pada address bar. Saya menggunakan angka-angka itu sebagai parameter untuk memilih nilai start-index pada widget iniwindow.location.hash pada address bar. Saya menggunakan angka-angka itu sebagai parameter untuk memilih nilai start-index pada widget ini:
Integrasi Widget ke Blogger
Pertama-tama klik hidangan Laman pada sidebar. Kemudian, pada hidangan Laman Baru pilihlah Laman Kosong:
Setelah itu Anda akan melihat formulir halaman statis menyerupai ini. Klik mode HTML:
Salin isyarat di bawah ini kemudian letakkan di dalam formulirnya:
<link rel="stylesheet" href="//tovic.github.io/hompimpa/Blogger-Masonry-Widget/theme/light.min.css"/> <div id="dte-masonry-container"></div><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script src="//tovic.github.io/hompimpa/Blogger-Masonry-Widget/js/jquery.masonry.min.js"></script> <script src="//tovic.github.io/hompimpa/Blogger-Masonry-Widget/js/post.brick.min.js"></script> <script> //<![CDATA[ $('#dte-masonry-container').bloggerMasonry({ // JSON Configuration viewMode: "summary", // Widget mode? "summary" || "thumbnail" homePage: "http://nama_blog.blogspot.com", // Your blog homepage numPosts: 10, // Number of posts to display per request numChars: 270, // Length of summary post squareImage: false, // Set thumbnail mode to square newTabLink: false, // Auto open links in new window/tab? columnWidth: 200, // Width of the image (also will resize the brick item width) subHeaderText: ["Diposting oleh ", "<br>pada "], // `Diposkan oleh FOO pada BAR` monthNames: [ // Month array "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember" ], commentLabel: " ", // Label text after total comments navText: { prev: "Sebelumnya", // Previous navigation label next: "Berikutnya", // Next navigation label disabled: "×", // Disabled navigation label data: ["Halaman ", " dari "] // `Halaman # dari #` }, postCategory: null, // Change to a label name to sort posts by specific label fallbackThumb: "img/meee.png", // Fallback thumbnail for posts without images loadingText: "Loading...", // `Loading...` text for loading indicator loadedText: "Loaded.", // `Loaded.` text for loading indicator infiniteScroll: false, // Enable infinite scroll? bottomTolerance: 30, // Bottom tolerance for the end of page indicator in infinite scroll // Shortcuts for Masonry Plugin Configuration (And Some Local Configuration) masonryConfig: { itemSelector: '.json_post', fadeSpeed: 400, // Speed of thumbnail fading effect resizeSpeed: 1000, // Speed of thumbnail resizing effect isAnimated: false, animateWithTransition: true, // Animate each brick with CSS transition instead of jQuery `.animate()`? animationOptions: { queue: false, duration: 1000, easing: null }, isFitWidth: true, gutterWidth: 0, isRTL: false } }); //]]> </script>Ganti isyarat yang Saya beri tanda dengan URL blog Anda. Klik Simpan dan Terbitkan.
Kode yang Saya garis bawahi yaitu jQuery. Jika template Anda sudah dilengkapi dengan jQuery, singkirkan isyarat tersebut!
Pengaturan Lanjutan
Pengaturan widget ini dibagi menjadi dua, yaitu pengaturan JSON Blogger dan pengaturan Plugin Masonry:
Pengaturan JSON Blogger
| Opsi | Keterangan |
|---|---|
| viewMode | Digunakan untuk memilih tipe tampilan widget. Nilainya ada dua macam: "summary" untuk menampilkan galeri berupa daftar gambar beserta ringkasannya, "thumbnail" untuk menampilkan galeri berupa foto saja |
| homePage | Digunakan untuk memilih URL blog sumber feed |
| numPosts | Digunakan untuk memilih jumlah posting yang akan dipanggil setiap satu kali permintaan |
| numChars | Digunakan untuk memilih jumlah aksara ringkasan/paragraf kalau mode widget berupa "summary" |
| squareImage | Jika bernilai true semua gambar dalam widget akan dikonversi menjadi berbentuk kotak persegi. Ini yaitu versi kompresi Picasa versi path gambar s72-c, hanya saja di sini Saya buat lebih fleksibel (ukurannya bisa diperbesar/diperkecil) - Tentang metode kompresi gambar Picasa |
| newTabLink | Jika bernilai true, semua tautan dalam widget akan terbuka di tab/jendela baru |
| columnWidth | Digunakan untuk memilih lebar setiap kolom/item posting. Menentukan lebar pada opsi ini juga akan mengubah resolusi gambar |
| subHeaderText | Digunakan untuk mengatur teks deskripsi kecil di bawah header pada mode "summary" (Misal: Diposting oleh Taufik di 21 April 2012) |
| monthNames | Ini yaitu daftar variabel nama-nama bulan. Ganti namanya sesuka hati sesuai dengan sistem penanggalan di negara Anda |
| commentLabel | Abaikan saja. Jika nilainya diganti, maka label komentar di bawah item posting akan berubah. Misalnya: 10 Komentar dari Pembaca akan tampil kalau opsi commentLabel bernilai "Komentar dari Pembaca".Jika dikosongkan, label akan mengikuti keadaan menurut format bahasa dalam pengaturan blog Anda |
| navText | prev dipakai untuk memilih label navigasi mundur |
| next dipakai untuk memilih label navigasi maju | |
| disabled dipakai untuk memilih label navigasi tak aktif | |
| data dipakai untuk memilih label deskripsi posisi halaman dan jumlah total halaman | |
| postCategory | Secara normal bernilai null. Ganti nilainya dengan nama label yang spesifik untuk menyortir item feed menurut kategori khusus. Misal: postCategory: "jQuery" akan menciptakan widget ini menampilkan posting-posting yang mempunyai label jQuery |
| fallbackThumb | Gambar cadangan kalau posting yang tampil tidak mempunyai gambar |
| loadingText | Deskripsi indikator sedang memuat ketika sedang memuat |
| loadedText | Deskripsi indikator sedang memuat ketika semua item telah final dimuat |
| infiniteScroll | Jika bernilai true, navigasi halaman tidak berfungsi lagi. Widget akan secara otomatis memuat item-item posting gres di bawah item-item posting yang sudah ada setiap kali gulungan layar telah mencapai jarak yang diinginkan (dalam hal ini, mencapai posisi navigasi widget terdekat terhadap bab bawah layar) |
| bottomTolerance | Digunakan untuk memilih toleransi jarak bawah infinite scroll untuk mengurangi kalkulasi posisi navigasi widget terdekat terhadap bab bawah layar. |
Konfigurasi Plugin Masonry
| Opsi | Keterangan |
|---|---|
| fadeSpeed | Digunakan untuk memilih kecepatan fade pada gambar |
| resizeSpeed | Digunakan untuk memilih kecepatan perubahan ukuran kontainer gambar pada mode widget "thumbnail" |
| isAnimated | Jalan penghubung untuk opsi isAnimated pada plugin Masonry. Jika bernilai true dampak animasi akan diterapkan dengan santunan jQuery .animate(). Saat jendela peramban diperkecil/diperbesar, setiap item akan berubah posisi dengan dampak animasi |
| animateWithTransition | Alternatif lain untuk menganimasikan widget. Set opsi isAnimated menjadi false, kemudian set opsi animateWithTransition menjadi true untuk menganimasikan masonry brick dengan CSS Transisi. Ini berafiliasi dengan performa plugin. Menugaskan plugin untuk melaksanakan perhitungan posisi sekaligus menganimasikannya terkadang menjadi sesuatu yang berat bagi peramban. Kaprikornus kita bisa memanfaatkan CSS Transisi —yang merupakan fitur bawaan pada peramban-peramban moderen— untuk menganimasikannya biar kerja peramban tidak terlalu berat dalam menangani JavaScript. Tentang metode animasi dengan CSS Transisi pada plugin Masonry bisa dibaca di sini |
| animationOptions | Jalan penghubung untuk opsi animationOptions pada plugin Masonry. Digunakan untuk mengonfigurasikan dampak animasi JavaScript (isAnimated:true) |
| isFitWidth | Jalan penghubung untuk opsi isFitWidth pada plugin Masonry. Jika bernilai true, kontainer akan menyusut sesuai dengan kalkulasi jumlah semua item dalam satu baris, sehingga widget Masonry bisa berada sempurna di tengah-tengah halaman - Selengkapnya wacana isFitWidth |
| gutterWidth | Jalan penghubung untuk opsi gutterWidth pada plugin Masonry. Digunakan untuk memilih gutter/kerenggangan antaritem pada sisi dalam. Tidak terlalu penting - Selengkapnya wacana gutterWidth |
| isRTL | Jalan penghubung untuk opsi isRTL pada plugin Masonry. Jika bernilai true, plugin akan menganimasikan item dari kanan ke kiri (RTL = Right To Left) - Selengkapnya wacana isRTL |
Lebih Banyak Demo:
- Demo Galleria Mode Thumbnail
- Demo Galleria Mode Thumbnail Kotak
- Demo Galleria Sortir Posting Berdasarkan Label Spesifik
- Demo Galleria dengan Fitur Infinite Scroll
Pengembangan Widget
Proyek ini Saya hosting di GitHub: https://github.com/tovic/hompimpa/tree/master/Blogger-Masonry-Widget Jika Anda berminat untuk membuatkan widget ini, Saya sudah menyimpan semuanya di sana.
jQuery Masonry Widget for Blogger JSON by Taufik Nurrohman is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License