Galleria V2 · Widget Masonry untuk Blogger

Rabu, 11 Juli 2012

Tabel Konten

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 agar tidak mengganggu para pemakai widget ini. Bagi Anda yang sudah memakai widget ini sebelum tanggal 26 Mei 2013, Anda akan mendapatkan 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 bantuan event hashchange, sehingga pengguna tidak perlu memuat ulang halaman secara keseluruhan hanya untuk mengubah window.location.search pada address bar.

Rilis: Galleria V2 - Widget Masonry untuk Blogger

Sebelum ini Saya telah membuat widget Galleria versi pertama, kali ini Saya membuat versi yang ke dua dengan dua macam pilihan layout dan konfigurasi yang lebih lengkap.

Masalah besar yang terjadi pada versi pertama adalah dia menampilkan semua feed begitu saja sehingga proses muat widget menjadi begitu lama. Kita tidak memiliki kemampuan untuk memotong proses pemuatan feed kecuali dengan cara menambahkan fitur navigasi. Inilah kabar baiknya:

Lihat Demo

Widget ini dilengkapi dengan navigasi halaman. Setiap kali halaman berganti, itu akan mengubah nilai window.location.search pada address bar. Saya menggunakan angka-angka itu sebagai parameter untuk menentukan nilai start-index pada widget ini Widget ini dilengkapi dengan navigasi halaman. Setiap kali tombol navigasi diklik, itu akan mengubah nilai window.location.hash pada address bar. Saya menggunakan angka-angka itu sebagai parameter untuk menentukan nilai start-index pada widget ini:

Pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:

Blogger Post Editor — Menambahkan halaman statis baru

Setelah itu Anda akan melihat formulir halaman statis seperti ini. Klik mode HTML:

Salin kode 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: "&nbsp;", // Label text after total comments
    navText: {
        prev: "Sebelumnya", // Previous navigation label
        next: "Berikutnya", // Next navigation label
        disabled: "&times;", // 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 kode yang Saya beri tanda dengan URL blog Anda. Klik Simpan dan Terbitkan.

Kode yang Saya garis bawahi adalah jQuery. Jika template Anda sudah dilengkapi dengan jQuery, singkirkan kode 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 menentukan 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 menentukan URL blog sumber feed
numPosts	Digunakan untuk menentukan jumlah posting yang akan dipanggil setiap satu kali permintaan
numChars	Digunakan untuk menentukan jumlah karakter ringkasan/paragraf jika mode widget berupa `"summary"`
squareImage	Jika bernilai `true` semua gambar dalam widget akan dikonversi menjadi berbentuk kotak persegi. Ini adalah 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 menentukan 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 olehTaufikdi21 April 2012)
monthNames	Ini adalah 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 jika opsi `commentLabel` bernilai `"Komentar dari Pembaca"`. Jika dikosongkan, label akan menyesuaikan diri berdasarkan format bahasa dalam pengaturan blog Anda
navText	prev digunakan untuk menentukan label navigasi mundur
	next digunakan untuk menentukan label navigasi maju
	disabled digunakan untuk menentukan label navigasi tak aktif
	data digunakan untuk menentukan label deskripsi posisi halaman dan jumlah total halaman
postCategory	Secara normal bernilai `null`. Ganti nilainya dengan nama label yang spesifik untuk menyortir item feed berdasarkan kategori khusus. Misal: `postCategory: "jQuery"` akan membuat widget ini menampilkan posting-posting yang memiliki label jQuery
fallbackThumb	Gambar cadangan jika posting yang tampil tidak memiliki gambar
loadingText	Deskripsi indikator sedang memuat saat sedang memuat
loadedText	Deskripsi indikator sedang memuat saat semua item telah selesai dimuat
infiniteScroll	Jika bernilai `true`, navigasi halaman tidak berfungsi lagi. Widget akan secara otomatis memuat item-item posting baru 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 bagian bawah layar)
bottomTolerance	Digunakan untuk menentukan toleransi jarak bawah infinite scroll untuk mengurangi kalkulasi posisi navigasi widget terdekat terhadap bagian bawah layar.

Konfigurasi Plugin Masonry

Opsi	Keterangan
fadeSpeed	Digunakan untuk menentukan kecepatan fade pada gambar
resizeSpeed	Digunakan untuk menentukan kecepatan perubahan ukuran kontainer gambar pada mode widget `"thumbnail"`
isAnimated	Jalan penghubung untuk opsi `isAnimated` pada plugin Masonry. Jika bernilai `true` efek animasi akan diterapkan dengan bantuan jQuery `.animate()`. Saat jendela peramban diperkecil/diperbesar, setiap item akan berubah posisi dengan efek 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 berhubungan dengan performa plugin. Menugaskan plugin untuk melakukan perhitungan posisi sekaligus menganimasikannya terkadang menjadi sesuatu yang berat bagi peramban. Jadi kita bisa memanfaatkan CSS Transisi —yang merupakan fitur bawaan pada peramban-peramban moderen— untuk menganimasikannya agar 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 efek 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 tepat di tengah-tengah halaman - Selengkapnya tentang `isFitWidth`
gutterWidth	Jalan penghubung untuk opsi `gutterWidth` pada plugin Masonry. Digunakan untuk menentukan gutter/kerenggangan antaritem pada sisi dalam. Tidak terlalu penting - Selengkapnya tentang `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 tentang `isRTL`

Lebih Banyak Demo:

Proyek ini Saya hosting di GitHub: https://github.com/tovic/hompimpa/tree/master/Blogger-Masonry-Widget Jika Anda berminat untuk mengembangkan 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

96 Komentar

Bayu Handono

Rabu, 11 Juli 2012 10:43 AM

imagenya apakah bisa diatur lagi ukurannya mas?

Integrasi Widget ke Blogger

Pengaturan Lanjutan

Pengaturan JSON Blogger

Konfigurasi Plugin Masonry

Lebih Banyak Demo:

Pengembangan Widget