Rilis: Galleria V2 - Widget Masonry untuk Blogger

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

Window Location Search

start-index = (2-1) * numposts
Jadi ⇒ ../feeds/posts/default/?alt=json-in-script&start-index=20&callback=postBrick

Integrasi Widget ke Blogger

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

Menambahkan halaman statis baru

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

Pilih mode HTML

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<link href="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/theme/light.css" rel="stylesheet" type="text/css" media="screen" />
<div id="dte-masonry-container"><span id="json_loading">Loading...</span></div>
<div id="dte-masonry-nav"><a id="json_prev-nav">Sebelumnya</a><span id="json_total-posts">Halaman # dari #</span><a id="json_next-nav">Berikutnya</a></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/js/jquery.masonry.min.js"></script>
<script type="text/javascript">
//<![CDATA[
// JSON...
var viewMode         = "summary", // Widget mode ? "summary" : "thumbnail"
    jm_homePage      = "http://latitudu.blogspot.com",
    numposts         = 20,
    numchars         = 270,
    showThumbnails   = true,
    squareImage      = false,
    newTabLink       = false,
    jm_columnWidth   = 200,
    jm_subHeaderText = ["Diposting oleh", "pada"],
    jm_monthNames    = [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    jm_commentLabel  = "",
    jm_postCategory  = null,
    jm_fallbackThumb = "http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/img/meee.png",
    jm_loadedText    = "Loaded.";

// MASONRY...
var $jm_container    = $('#dte-masonry-container'),
    $jm_itemSelector = '.json_post',
    $jm_nav          = $('#dte-masonry-nav'),
    $jm_prev         = $('#json_prev-nav'),
    $jm_next         = $('#json_next-nav'),
    $jm_totalPosts   = $('#json_total-posts'),

    jm_fadeSpeed   = 400,
    jm_resizeSpeed = 1000,
    jm_isAnimated  = true,
    jm_animateWithTransition = false,
    jm_animationOptions = {
        queue: false,
        duration: 600,
        easing: null
    }
    jm_isFitWidth  = true,
    jm_gutterWidth = 0,
    jm_isRTL       = false;
//]]>
</script>
<script type="text/javascript" src="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/js/post.brick.js"></script>

Ganti kode yang Saya beri tanda dengan URL blog Anda. Klik Simpan dan Terbitkan.

Sumber: http://www.dte.web.id/2012/07/rilis-galleria-v2-widget-masonry-untuk.html#.UR4qjx2ouSo