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
, 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.
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
feedUmpan Blog begitu saja sehingga proses muat widget menjadi begitu lama. Kita tidak memiliki kemampuan untuk memotong proses pemuatan
feedUmpan Blog kecuali dengan cara menambahkan fitur
navigasi. Inilah kabar baiknya:
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:
Integrasi Widget ke Blogger
Pertama-tama klik menu
Laman pada sidebar. Kemudian, pada menu
Laman Baru pilihlah
Laman Kosong:
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" type="text/css" href="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/theme/light.min.css"/>
<div id="dte-masonry-container"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/js/jquery.masonry.min.js" type="text/javascript"></script>
<script src="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/js/post.brick.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#dte-masonry-container').bloggerMasonry({
viewMode: "summary",
homePage: "http://nama_blog.blogspot.com",
numPosts: 10,
numChars: 270,
squareImage: false,
newTabLink: false,
columnWidth: 200,
subHeaderText: ["Diposting oleh ", "<br>pada "],
monthNames: [
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
commentLabel: " ",
navText: {
prev: "Sebelumnya",
next: "Berikutnya",
disabled: "×",
data: ["Halaman ", " dari "]
},
postCategory: null,
fallbackThumb: "http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/img/meee.png",
loadingText: "Loading...",
loadedText: "Loaded.",
infiniteScroll: false,
bottomTolerance: 30,
masonryConfig: {
itemSelector: '.json_post',
fadeSpeed: 400,
resizeSpeed: 1000,
isAnimated: false,
animateWithTransition: true,
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 feedUmpan Blog |
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 oleh Taufik di 21 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 feedUmpan Posting berdasarkan kategori khusus. Misal: postCategory: "JQuery" akan membuat widget ini menampilkan posting-posting yang memiliki label JQueryNew wave JavaScript: Write less do more. |
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 brickSebutan untuk item-item di dalam Masonry 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: