Galleria V2 · Widget Masonry untuk Blogger

Tabel Konten
  1. Integrasi Widget ke Blogger 
  2. Pengaturan Lanjutan 
    1. Pengaturan JSON Blogger 
    2. Konfigurasi Plugin Masonry 
    3. Lebih Banyak Demo: 
  3. Pengembangan Widget 

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.

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:

Integrasi Widget ke Blogger 

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:

Blogger Post Editor
Pilih 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 

OpsiKeterangan
viewModeDigunakan 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
homePageDigunakan untuk menentukan URL blog sumber feed
numPostsDigunakan untuk menentukan jumlah posting yang akan dipanggil setiap satu kali permintaan
numCharsDigunakan untuk menentukan jumlah karakter ringkasan/paragraf jika mode widget berupa "summary"
squareImageJika 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
newTabLinkJika bernilai true, semua tautan dalam widget akan terbuka di tab/jendela baru
columnWidthDigunakan untuk menentukan lebar setiap kolom/item posting. Menentukan lebar pada opsi ini juga akan mengubah resolusi gambar
subHeaderTextDigunakan untuk mengatur teks deskripsi kecil di bawah header pada mode "summary" (Misal: Diposting olehTaufikdi21 April 2012)
monthNamesIni adalah daftar variabel nama-nama bulan. Ganti namanya sesuka hati sesuai dengan sistem penanggalan di negara Anda
commentLabelAbaikan 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
navTextprev 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
postCategorySecara 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
fallbackThumbGambar cadangan jika posting yang tampil tidak memiliki gambar
loadingTextDeskripsi indikator sedang memuat saat sedang memuat
loadedTextDeskripsi indikator sedang memuat saat semua item telah selesai dimuat
infiniteScrollJika 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)
bottomToleranceDigunakan untuk menentukan toleransi jarak bawah infinite scroll untuk mengurangi kalkulasi posisi navigasi widget terdekat terhadap bagian bawah layar.

Konfigurasi Plugin Masonry 

OpsiKeterangan
fadeSpeedDigunakan untuk menentukan kecepatan fade pada gambar
resizeSpeedDigunakan untuk menentukan kecepatan perubahan ukuran kontainer gambar pada mode widget "thumbnail"
isAnimatedJalan 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
animateWithTransitionAlternatif 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
animationOptionsJalan penghubung untuk opsi animationOptions pada plugin Masonry. Digunakan untuk mengonfigurasikan efek animasi JavaScript (isAnimated:true)
isFitWidthJalan 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
gutterWidthJalan penghubung untuk opsi gutterWidth pada plugin Masonry. Digunakan untuk menentukan gutter/kerenggangan antaritem pada sisi dalam. Tidak terlalu penting - Selengkapnya tentang gutterWidth
isRTLJalan 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: 

Pengembangan Widget 

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.

Creative Commons License 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

    imagenya apakah bisa diatur lagi ukurannya mas?

  • Taufik Nurrohman

    @Bayu Handono Mengganti ukuran kolom sekaligus mengubah resolusi gambar :)

    jm_columnWidth = 170 // Lebar kolom/lebar gambar
    • IRIL SAGITA

      Kak, kalau kepingin tingginya sejajar gimana kak ?

      • IRIL SAGITA

        Sudah bisa kak, maaf ternyata pertanyaan serupa sudah dijawab dibawah.

  • Bayu Handono

    @Bayu Handono ijin pake yah mas?? :D :D

  • Bayu Handono

    @Taufik Nurrohman oh sip sudah bisa. hampir 90% ilmunya mas Topik saya terapin di blog saya. gpp yah mas :D

  • abang ichal

    ehhh mas taufik.. biasa nda, tampilan postnya disamain tingginya? biar rapi gitu dehh.

  • Ijal Fauzi

    @Ahmad Rizal Samsi ya memang seperti ini yang dinamakan masonry, susunannya menumpuk seperti susunan batu bata.

  • Anonim

    MANTAB :-bd :-bd :-bd :-bd :-bd :-bd :-bd :-bd

  • Unknown

    keren mas.. tapi loadingnya itu.. =p* ,, perasaan saya pernah liat ini seperti halnya pada daftar isi gallery ya.. atau teknik dasarnya emang seperti itu,, ??

  • Beben Koben

    edan, walau tidak mengerti apa itu jQuery, apa itu masonry..
    tapi ini kreasi full stylish :-bd top markotop B)
    good good, jadi macam view blogspot versi tumbnail \o/

  • Unknown

    CANGGIHHHHH .... :-bd \o/

  • Taufik Nurrohman

    @Ahmad Rizal Samsi Tambahkan ini di bawah tag <link ... /> lalu set tingginya sesuka hati:

    <style type="text/css">
    #dte-masonry-container .json_post {
    height:200px; /* Set ukuran tinggi sesuka hati */
    overflow:hidden;
    }
    </style>
  • Taufik Nurrohman

    @Denddy Gustiana Yap. Sesuai judulnya, ini versi Galleria yang ke dua.

  • Taufik Nurrohman

    @Beben Koben Serasa seperti menggunakan Dynamic View. Sebenarnya Saya tertarik dengan Google API yang bisa me-load halaman menggunakan AJAX, tapi sampai sekarang belum menemukan sampel JavaScript yang mudah.

  • Unknown

    Wes
    akhirnya ketemu juga yang saya cari
    makasih banyak mas :D \o/

  • Rosyd Aqbar

    wow ........... **p
    Boleh juga nih Kang, boleh Terapin di blog saya gk nih ?
    boleh ya hihihih :D

  • abang ichal

    @Taufik Nurrohman Ok sudah jadi. thenks ya mas taufik

  • Unknown

    om mau tanya... seperti template latitude.. saat klik tombol next tanpa harus loading halaman lagi gimana..

  • Taufik Nurrohman

    @Denddy Gustiana Emang di blog Latitudu saat klik tombol next halaman tidak termuat lagi??? @@,

  • Unknown

    @Taufik Nurrohman kagak.. langsung kebuka ajj tuh artikel selanjutnya tanpa loading.. padahal kan saya baru buka tuh blog.. blum ada cache yang tersimpan..
    atau code ini berpengaruh ya..

    function validate() {
    if(window.location.href.split('.')[0] !== "http://latitudu") {
    window.location.href="http://latitudu.blogspot.com";
    }
    }

  • Taufik Nurrohman

    @Denddy Gustiana Hehe... nggak kok. Itu nggak ada hubungannya. Coba cek halaman demo yang mengarah ke Google Code. Menurutmu proses memuatnya seperti AJAX atau tidak? Seharusnya halaman demo yang Saya simpan di Google Code akan lebih cepat termuat dibandingkan blog Latitudu. Kalau sebaliknya, mungkin blog Latitudu Saya sudah kena ilmu sihir ajaib! (-.-,)
    Kesimpulannya: Akses internetmu yang luar binasa ajaib cepatnya.

  • Unknown

    @Taufik Nurrohman hehehe.. iya juga ya.. mungkin koneksi internet terlalu berlebihan.. ;)
    tapi saya coba praktekan code di atas.. ada pengaruhnya juga.. dengan kecepatan loading. justru loadingnya hanya pada bar browser aja seperti ini.

    Sedangkan halaman blognya akan memuat jika loading di atas selesai..

  • Surga Kenari

    ehhh gue mau juga dong tampilan homepagenya di jadiin Galleria V2

    gimana caranyakah??

  • Taufik Nurrohman

  • Sixrone 609 Community

    Salam...
    Kalo mau bikin laman khusus y tanpa widget laen n hanya galeri foto y menggunakan widget ini bagaimana ya mas taufik...?? heheh (Pura2 kenal)

  • Surga Kenari

    terimakasih banyak mas Taufik, berhasil :D

  • Unknown

    mas, kalau ini dibuat untuk label gimana?

    soalnya pas aku coba kasih url label, ga bekerja.

  • Taufik Nurrohman

    Belajar Blogazine dulu :)

    • dhanyn10

      hedehh, trnyata yg jadi pertanyaan saya selama ini itu adalah blogazine--weleh ada tutor yang bisa dicerna blogger amatir nggak mas?

  • Taufik Nurrohman

    Tidak perlu memakai URL label. Cukup ganti nilai null pada opsi jm_postCategory menjadi nama label:

    jm_postCategory = "HOT!"

    Selengkapnya baca pada tabel konfigurasi di atas.

  • Sixrone 609 Community

    Trima kasih...:)
    blajar lagi aaagh...

  • Anonim

    mas-mas kalo pengen ngedit CSS nya ga bisa yah, sepertinya panjang banget kode CSS nya? ^_^

  • Taufik Nurrohman

    Semuanya bisa diedit.

    • BrayenL

      Saya bisa nih ngedit CSSnya, tetapi agak ribet, karena CSSnya bersambung dan tidak terurai dengan baik.

  • Unknown

    Mas Taufik, saya banyak dapat pengetahuan tentang jQuery dan CSS dari Mas Taufik. Tapi yang 1 ini gag bekerja untuk blog saya. Ada saran mas?

    URL yang saya buat sudah tepat http://d-copy.blogspot.com. Mohon bantuannya Mas.

  • Surga Kenari

    apa yg sudah kamu terapkan?

    sepertinya blm ada yg kamu terapkan dengan kode di atas..

  • Unknown

    Bagaimana saya terapkan, berhasil untuk blog saya saja tidak...

  • Taufik Nurrohman

    Sudah Saya coba jadi kok. Ini salah satu postinganmu kan?

    Yang penting feed posting jangan dimatikan. Kalau widget tidak berhasil di terapkan di blog asli tapi berhasil diterapkan di blog lain (misalnya blog percobaan), berarti masalahnya muncul dari blog aslimu.

  • Unknown

    Memang tidak bekerja untuk blog saya Mas Taufik.

    Ada tidak TOC lain yang menggunakan thumbnail seperti yang mas taufik gunakan pada blog ini?

  • Taufik Nurrohman

  • Unknown

    kok punya q gx bisa ya mas

    www.maviasulap.blogspot.com

  • Unknown

    Post saya mengadungi Video youtube. sya pkai embed code. Bila saya pkai ni , youtube thumbnail xkuar. Default thumbnail kuar.

  • Anonim

    sepertinya lebih keren yang sebelumnya!. praktekin ah, moga aja bisa hehe.

  • Unknown

    Hi Mr. Taufik Nurrohman.. boleh minta di udate gak script ini soalnya saya suka banget.

    kenapa saya mnta seperti ini al hasil kemaren masih jalan normal sesuai dengan hasil yang di buat mas Taufik tp belakangan ini ga mau lagi bkerja di browser yang baru update (kalo pake browser lama mis: Firefox 3.0.19 dia bekerja baik (sudah saya test))

    NB:
    Tidak berkerja baik di Chrome ver. 22
    Tidak berkerja baik di Mozilla 17.0

    Utuk penampakan:

  • Surga Kenari

    chrome saya versi 23 fine aja blog anda terlihat ciamik.. :D

  • Taufik Nurrohman

    Masalahnya muncul dari link-link hijau itu. Bisa merusak markup widget. Paling tidak, widget yang membuat teks menjadi link otomatis di atas harus bekerja sebelum widget dimuat supaya tidak mengganggu. Atau disingkirkan saja.

  • Taufik Nurrohman

    Widget ini tidak mendukung thumbnail Video. Mungkin belum.

  • Unknown

    Oh , bleh tak kamu update code baru yang support YouTutube thumbnail?
    Mohon :)

  • Anonim

    besok praktekin ah 1 per satu di blog dumy :))

  • azewBz

    mas`klau mengatur tinggi dan lebar sejajar gimna?
    kaya ( Demo Galleria Mode Thumbnail Kotak )

    • Taufik Nurrohman

      #dte-masonry-container .json_post {
      width:Npx !important;
      height:Npx !important;
      }
      • azewBz

        mas`kalau di buat permanen pada formulir edit HTML gimna?
        mksudnya. thumbail postingan saya mau di rubh seprti ini jdi tidak mnerapkan pda formulir HTML/JavaScript atau di dlm postingan.

        Blog demo: azewbz.blogspot.com

        • Taufik Nurrohman

          Tidak mungkin bisa dijelaskan di area komentar mas... bahkan di suratpun tidak :'( :-a :-a :-a

          • azewBz

            hahha..!! rumit ya mas.
            BT aja mas' liat tampilan thumbail cuman judul sama gambar dong..!! :(

      • Unknown

        letak nya dimana yah tuh mas??

  • azewBz

    mas bikin thumbail khusus magazine dong..!!
    kaya mas urang-kurai sangat keren. :D thumbail post nya..

  • Unknown

    Hello ,
    How to make the post goes on grid style?

    Thanks alot

  • Unknown

    mau sedikit nanya om,...
    klo widget ini dipake untuk nampilin site di luar blogger bisa gak?
    misal wp atau cms lainnya?
    maaf ngotot nanya,...
    abis keren sih script nya,...
    :p

    thanks b4

Komentar telah ditutup.