Menambahkan Fitur Komik di Blog dengan JavaScript

Fitur komik di blog.

Artikel ini merupakan tindak lanjut dari berbagai permintaan pengguna yang mereka tambahkan pada artikel ini yang membahas tentang bagaimana caranya agar gambar-gambar di dalam komik web dapat dimuat secara bergantian untuk mengurangi beban muat halaman. Setelah sekian lama akhirnya Saya punya waktu juga untuk membuat widget yang lebih baik dengan beberapa fitur tambahan, dan yang paling penting adalah widget ini tidak lagi tergantung pada jQuery.

Lihat Demo

---

Integrasi Widget ke Blogger

Untuk menambahkan fitur komik di blog, pertama-tama buka editor HTML tema Anda kemudian temukan kode yang tampak kurang lebih seperti ini:

<b:widget id='Blog1' type='Blog'>

Pada bagian bawah kode tersebut, sisipkan kode ini:

<b:includable id='postTypeComic' var='post'>
  <b:if cond='data:view.isSingleItem and data:post.labels any (i => i.name in ["Comic", "Komik", "type:comic"])'>
    <b:class name='type:comic'/>
    <script src='//dte-project.github.io/blogger/comic.min.js?save=false'></script>
  </b:if>
</b:includable>

Kemudian cari kode ini:

<data:post.body/>

Pada setiap kode yang Anda temukan, sisipkan kode ini di bawahnya:

<b:include data='post' name='postTypeComic'/>

Klik Simpan Tema. Fitur komik sekarang sudah siap untuk digunakan! Yang perlu Anda lakukan berikutnya adalah membuat artikel-artikel baru berisi gambar-gambar, setelah itu cukup tambahkan label Komik atau Comic untuk mengaktifkan tampilan komik.

Widget ini akan mencari semua elemen <a> dan <img> di dalam artikel yang memiliki label Komik atau Comic dan akan mengambil nilai atribut href dan src pada elemen tersebut untuk dijadikan sebagai daftar antrean gambar. Khusus pada nilai atribut href pada elemen <a>, widget ini hanya akan mengambil tautan yang tampak sebagai tautan gambar, yaitu yang memiliki akhiran berupa ekstensi GIF, JPEG, JPG dan PNG.

Selain dari itu akan dianggap sebagai sinopsis atau ringkasan mengenai isi komik.

Saya perlu menambahkan alternatif berupa elemen <a> sebagai penyimpan tautan gambar karena dengan hanya mengandalkan elemen <img>, sama saja dengan meminta peramban untuk memuat semua gambar yang ada saat artikel sedang memuat. Meskipun nantinya ketika komik ditampilkan, gambar-gambar yang ada akan muncul secara bergantian, namun di balik layar sebenarnya peramban akan memuat semua gambar yang ada.

Oleh karena itu Saya sarankan untuk membuat artikel bertipe komik yang terdiri dari satu gambar saja yaitu gambar sampul komik. Sedangkan gambar-gambar yang lainnya dapat Anda tampilkan sebagai tautan biasa seperti ini:

<p>In every class, it’s not usual for there to be one or two people who seem a little strange. In Oda’s class, there is Hototogi.</p>
<p><img alt="Cover" title="Page 1" src="/path/to/image/1.png"></p>
<p><a href="/path/to/image/2.png">Page 2</a></p>
<p><a href="/path/to/image/3.png">Page 3</a></p>
<p><a href="/path/to/image/4.png">Page 4</a></p>
<p><a href="/path/to/image/5.png">Page 5</a></p>
<p><a href="/path/to/image/6.png">Page 6</a></p>
<p><a href="/path/to/image/7.png">Page 7</a></p>

Untuk memperoleh waktu muat komik yang paling cepat, Anda bisa menghapus semua gambar yang ada dan menggantinya dengan elemen <a>, namun kekurangannya adalah nanti Anda tidak akan memiliki elemen <data:post.thumbnailUrl/> untuk ditampilkan sebagai keluku artikel.

Pengaturan

Opsi	Keterangan
hash	Merupakan format fragmen URL untuk menandai pergantian halaman. Pola %i% pada !page=%i% akan diubah menjadi nomor halaman. [demo]
save	Pilihan untuk memungkinkan para pembaca menyimpan gambar komik Anda dengan cara klik kanan pada gambar. Ganti nilainya menjadi false untuk melarang pembaca menyimpan gambar-gambar komik Anda.
image	Resolusi maksimal gambar komik yang Anda simpan di Google berupa angka. [demo]
chunk	Pilihan untuk menampilkan beberapa gambar sekaligus dalam satu lompatan halaman. Nilai bawaan adalah 1. Jika Anda mengubah nilainya menjadi 2, maka setiap halaman komik akan menampilkan dua gambar. [demo]
kin	Digunakan untuk menentukan banyaknya kerabat tombol angka halaman yang akan ditampilkan sebelum dan setelah tombol angka halaman yang aktif.
top	Jarak perhentian tambahan antara bagian atas layar halaman dengan bagian atas area komik setiap kali halaman berganti. [demo]
text	Label-label yang diperlukan pada komik. text[first] untuk menampilkan teks First, text[previous] untuk menampilkan teks Previous, text[next] untuk menampilkan teks Next, text[last] untuk menampilkan teks Last, text[current] untuk menampilkan teks Page 1 of 20, dan text[enter] untuk menampilkan teks Read on….

Parameter-parameter di atas dapat Anda tambahkan sebagai parameter URL setelah nama berkas comic.min.js:

<script src="comic.min.js?save=false&amp;chunk=2&amp;text[enter]=Read%20More"></script>

Beberapa tema seperti 000000.min.css dan ffffff.min.css dapat Anda tambahkan seperti ini:

  …
  …
  <link href='//dte-project.github.io/blogger/comic/000000.min.css' rel='stylesheet'/>
</head>

Mengambil URL Gambar Pertama dari Posting

Versi PHP

function get_first_image_url($data, $default_url = null) {

    /**
     * Matched with ...
     * ----------------
     *
     * [1]. `![alt text](IMAGE URL)`
     * [2]. `![alt text](IMAGE URL "optional title")`
     *
     * ... and the single-quoted version of them
     *
     */
    if(preg_match_all('#\!\[.*?\]\(([^\s]+?)( +([\'"]).*?\3)?\)#', $data, $matches)) {
        return $matches[1][0];
    }

    /**
     * Matched with ...
     * ----------------
     *
     * [1]. `<img src="IMAGE URL">`
     * [2]. `<img foo="bar" src="IMAGE URL">`
     * [3]. `<img src="IMAGE URL" foo="bar">`
     * [4]. `<img src="IMAGE URL"/>`
     * [5]. `<img foo="bar" src="IMAGE URL"/>`
     * [6]. `<img src="IMAGE URL" foo="bar"/>`
     * [7]. `<img src="IMAGE URL" />`
     * [8]. `<img foo="bar" src="IMAGE URL" />`
     * [9]. `<img src="IMAGE URL" foo="bar" />`
     *
     * ... and the uppercased version of them, and the single-quoted version of them
     *
     */
    if(preg_match_all('#<img .*?src=([\'"])([^\'"]+?)\1.*? *\/?>#i', $data, $matches)) {
        return $matches[2][0];
    }

    return $default_url; // Default image URL if nothing matched
}

Penggunaan

<img src="<?php echo get_first_image_url($page['content'], 'img/no-image.png'); ?>">

$page['content'] cuma contoh. Anda harus mengambilnya dari konten posting Anda sesuai dengan API pada CMS yang Anda pakai.

Versi JavaScript

function getFirstImageURL(data, noImage) {

    /**
     * Matched with ...
     * ----------------
     *
     * [1]. `![alt text](IMAGE URL)`
     * [2]. `![alt text](IMAGE URL "optional title")`
     *
     * ... and the single-quoted version of them
     *
     */
    var matches = /\!\[.*?\]\(([^\s]+?)( +[\'"].*?[\'"])?\)/.exec(data);
    return matches ? matches[1] : noImage;

    /**
     * Matched with ...
     * ----------------
     *
     * [1]. `<img src="IMAGE URL">`
     * [2]. `<img foo="bar" src="IMAGE URL">`
     * [3]. `<img src="IMAGE URL" foo="bar">`
     * [4]. `<img src="IMAGE URL"/>`
     * [5]. `<img foo="bar" src="IMAGE URL"/>`
     * [6]. `<img src="IMAGE URL" foo="bar"/>`
     * [7]. `<img src="IMAGE URL" />`
     * [8]. `<img foo="bar" src="IMAGE URL" />`
     * [9]. `<img src="IMAGE URL" foo="bar" />`
     *
     * ... and the uppercased version of them, and the single-quoted version of them
     *
     */
    matches = /<img .*?src=[\'"]([^\'"]+?)[\'"].*? *\/?>/i.exec(data);
    return matches ? matches[1] : noImage;

}

Penggunaan

var img = '<img src="' + getFirstImageURL(sourceText, 'img/no-image.png') + '">';
document.write(img);

sourceText cuma contoh. Anda harus mengambilnya dari konten posting Anda, misalnya dengan cara ini:

var sourceText = document.querySelector('.post-body').innerHTML;

Efek Masonry Hanya dengan CSS

Teknik ini sudah pernah dibahas dengan cukup detail di CSS-Tricks. Hanya saja Saya tidak habis pikir mengapa beliau tetap mempertahankan deklarasi column-count untuk memecah area menjadi beberapa kolom dan menggunakan media queries untuk mengurangi jumlah kolom pada saat ukuran layar peramban menyempit. Padahal jika kita sudah menentukan lebar masing-masing item dengan ukuran yang sama, kita bisa menggunakan column-width untuk menentukan lebar kolom tetap tanpa harus melibatkan media queries untuk mengurangi jumlah kolom pada saat ukuran layar semakin sempit. column-width akan menciptakan kolom-kolom dengan jumlah yang bisa menyesuaikan diri berdasarkan ruang yang tersisa. Sudah tertulis dengan jelas dalam spesifikasi:

.container {
  column-width:150px;
  column-gap:5px; /* Margin kanan/kiri antarkolom */
}

img {
  display:block;
  width:100%;
  height:auto;
  margin:0 0 5px 0; /* Margin bawah antargambar */
}

Lihat Demo

Item Bukan Gambar

Ada satu hal yang harus diperhatikan jika Anda ingin menciptakan efek/tata letak seperti ini pada elemen yang bukan merupakan gambar, yaitu deklarasi display berupa inline-block. Mendeklarasikan perintah ini akan mencegah perpotongan yang tak terduga pada masing-masing item karena CSS3 Kolom secara normal akan berusaha untuk membuat masing-masing kolom menjadi sama tinggi. Beberapa harus terpaksa dipotong di bagian bawah mengingat properti CSS ini memang sebenarnya berbasis teks:

.container {
  column-width:150px;
  column-gap:5px; /* Margin kanan/kiri antarkolom */
}

.item {
  display:inline-block; /* Mencegah pemotongan item yang tak terduga */
  margin:0 0 5px 0; /* Margin bawah antaritem */
  padding:10px;
  background-color:black;
  color:white;
}

Lihat Demo

---

Ini yang Saya maksud sebagai perpotongan yang tidak diduga dan tidak dikehendaki:

Teks terpotong pada bagian bawah untuk memastikan agar masing-masing kolom memiliki tinggi yang sama.

Tidak tahu apa itu Masonry?

JavaScript Image Trail Tooltip

Halaman browse foto di SXC.

Pertama kali Saya melihat tooltip semacam ini di situs SXC. Saya mencoba untuk membuat replikanya dengan tanpa menyertakan dukungan untuk peramban-peramban lawas. document.all itu sudah sangat ketinggalan zaman!

Keistimewaan dari tooltip ini adalah dia bisa bergerak mengikuti gerakan pointer serta bisa mempertahankan posisinya agar tetap berada pada area yang terlihat di halaman agar Anda tidak mengalami masalah-masalah seperti: tooltip keluar terlalu jauh ke sebelah kanan atau ke sebelah bawah dari area terlihat pada halaman. JavaScript ini juga bisa digunakan untuk menggantikan salah satu plugin jQuery Saya yang tidak begitu terkenal dan tidak sering diperbaharui lagi:

JavaScript

/*! JavaScript Image Trail Tooltip by Taufik Nurrohman <http://gplus.to/tovic> */
(function(w, d) {

    var tooltip = d.createElement('div'),
        noImage = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", // 1 x 1 pixel transparent GIF
        top = 0,
        left = 0,
        docWidth = 0,
        docHeight = 0,
        offsetTop = 20, // Default top distance of the tooltip to the mouse pointer
        offsetLeft = 20, // Default left distance of the tooltip to the mouse pointer
        wait = null;

    // Get the correct width of the document without scrollbars
    function getDocWidth() {
        return d.documentElement.clientWidth;
    }

    // Get the correct height of the document
    function getDocHeight() {
        return Math.max(
            d.body.scrollHeight, d.documentElement.scrollHeight,
            d.body.offsetHeight, d.documentElement.offsetHeight,
            d.body.clientHeight, d.documentElement.clientHeight
        );
    }

    tooltip.id = "trail-image";
    tooltip.className = "trail-image";
    tooltip.innerHTML = '<img src="' + noImage + '" alt="Loading..." style="float:none;display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;border:none;outline:none;background:none;margin:0;padding:0;">';

    // Just like `DOMContentLoaded` event, but only to
    // wait for the existence of the `<body>` element
    // to insert the tooltip markup in the proper area
    function waitForBodyExist() {
        if (!d.body) {
            wait = setTimeout(waitForBodyExist, 100);
        } else {
            clearTimeout(wait);
            d.body.appendChild(tooltip);
            docWidth = getDocWidth();
            docHeight = getDocHeight();
            w.onresize = function() {
                docWidth = getDocWidth();
                docHeight = getDocHeight();
            };
            w.onscroll = hideTrail;
        }
        // console.log('Still waiting...');
    } waitForBodyExist();

    // Function to show the tooltip
    // `width`  => the tooltip width
    // `height` => the tooltip height
    // `file`   => the URL of the image to show
    function showTrail(width, height, file) {
        tooltip.style.visibility = "visible";
        tooltip.children[0].src = file;
        tooltip.style.width = parseInt(width, 10) + "px";
        tooltip.style.height = parseInt(height, 10) + "px";
        d.onmousemove = function(e) {
            if (!e) e = w.event;
            if (e.pageX || e.pageY) {
                left = e.pageX;
                top = e.pageY;
            } else if (e.clientX || e.clientY) {
                left = e.clientX + d.body.scrollLeft + d.documentElement.scrollLeft;
                top = e.clientY + d.body.scrollTop + d.documentElement.scrollTop;
            }
            tooltip.style.top = parseInt(((top >= docHeight - (height + offsetTop + 10)) ? top - (height + offsetTop) : top + offsetTop), 10) + "px";
            tooltip.style.left = parseInt(((left >= docWidth - (width + offsetLeft + 10)) ? left - (width + offsetLeft) : left + offsetLeft), 10) + "px";
        };
    }

    // Function to hide the tooltip
    function hideTrail() {
        d.onmousemove = "";
        tooltip.style.top = "-9999px";
        tooltip.style.left = "-9999px";
        tooltip.style.visibility = "hidden";
        tooltip.children[0].src = noImage;
        docWidth = getDocWidth();
        docHeight = getDocHeight();
    }

    // Add to the window object as an external/global function
    w.showTrail = showTrail;
    w.hideTrail = hideTrail;

})(window, document);

CSS

/* Image Trail Tooltip CSS */
.trail-image {
  width:0;
  height:0;
  background-color:#ddd;
  border:1px solid #888;
  position:absolute;
  top:-9999px;
  left:-9999px;
  z-index:9999;
  visibility:hidden;
  -webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 1px rgba(0,0,0,.2);
  box-shadow:0 1px 1px rgba(0,0,0,.2);
}

Penggunaan

Dasar Penggunaan

Ada dua fungsi utama dalam skrip di atas, yaitu showTrail dan hideTrail. showTrail digunakan untuk menampilkan tooltip sedangkan hideTrail digunakan untuk menyembunyikannya. Anda bisa menerapkannya pada atribut onmouseover dan onmouseout seperti ini:

<a href="img/large.jpg">
  <img onmouseover="showTrail(250, 100, &#39;img/medium.jpg&#39;);" onmouseout="hideTrail();" src="img/small.jpg" alt="">
</a>

Tentukan lebar dan tinggi gambar baru pada parameter width dan height serta URL gambar baru yang ingin ditampilkan pada parameter file:

Lihat Demo

Menyimpan Data di dalam Atribut HTML

Menuliskan fungsi berkali-kali secara inline mungkin akan melelahkan. Untuk itu Anda bisa memodifikasinya dengan cara memasukkan setiap URL gambar yang lebih besar di dalam atribut HTML5 data-*:

<img alt="" src="img/small.jpg" data-image-preview="img/medium.jpg">

Kemudian untuk penerapan fungsinya:

(function() {
    var img = document.getElementsByTagName('img');
    for (var i = 0, len = img.length; i < len; ++i) {
        if (img[i].getAttribute('data-image-preview')) {
            img[i].onmouseover = function() {
                showTrail(this.offsetWidth * 3, this.offsetHeight * 3, this.getAttribute('data-image-preview'));
            };
            img[i].onmouseout = hideTrail;
        }
    }
})();

Pada kode di atas Saya menerapkan this.offsetWidth * 3 dan this.offsetHeight * 3 untuk menciptakan skala tooltip menjadi tiga kali lipat dari gambar thumbnail yang didekati pointer. Jadi anggap saja URL yang berada di dalam atribut data-image-preview memiliki ukuran sebesar tiga kali lipat dari thumbnail.

Pastikan DOM sudah berada dalam keadaan siap:

Lihat Demo

Tip untuk Gambar-Gambar dari Picasa

Kita tahu bahwa kita bisa mengubah resolusi gambar yang disimpan di Picasa dengan cara mengubah path /sN pada setiap gambar. Berikut ini adalah contoh penerapan fungsi showTrail dan hideTrail tanpa memerlukan adanya atribut data-image-preview. Sekali Anda menerapkan fungsi ini, maka semua gambar yang berasal dari Picasa dengan ukuran lebar tidak lebih dari 100 piksel akan bisa menampilkan tooltip dengan lebar gambar 400 piksel:

(function() {
    var img = document.getElementsByTagName('img');
    for (var i = 0, len = img.length; i < len; ++i) {
        var valid = (img[i].src && /\/s[0-9]+(\-c)?\/.*?\.(bmp|gif|jpg|jpeg|png)/i.test(img[i].src) && img[i].offsetWidth <= 100);
        if (valid) {
            img[i].onmouseover = function() {
                showTrail(this.offsetWidth * 4, this.offsetHeight * 4, this.src.replace(/\/s[0-9]+(\-c)?/, "/s400$1"));
            };
            img[i].onmouseout = hideTrail;
        }
    }
})();

Lihat Demo

Pembaharuan: Pengecekan lebar gambar yang Saya terapkan di atas terkadang tidak bekerja karena mungkin fungsi telah tereksekusi sebelum dimensi gambar terbentuk, sehingga lebar gambar akan sama dengan 0 dan itu membuatnya bisa lolos dari pengecekan. Anda bisa mengeluarkan logika img[i].offsetWidth <= 100 dan memasukkannya ke dalam event onmouseover seperti ini untuk memastikan agar pengecekan lebar gambar bisa dilakukan setelah dimensi gambar terbentuk setiap kali Anda mendekatkan pointer ke atas gambar:

var valid = (img[i].src && /\/s[0-9]+(\-c)?\/.*?\.(bmp|gif|jpg|jpeg|png)/i.test(img[i].src));
if (valid) {
    img[i].onmouseover = function() {
        if (this.offsetWidth <= 100) {
            showTrail(this.offsetWidth * 4, this.offsetHeight * 4, this.src.replace(/\/s[0-9]+(\-c)?/, "/s400$1"));
        }
    };
    img[i].onmouseout = hideTrail;
}

Lihat Demo

Catatan Tambahan untuk Internet Explorer

Pastikan deklarasi <!DOCTYPE html> dinyatakan pada dokumen HTML Anda agar skrip ini bisa bekerja dengan baik. Selain itu, menambahkan tag meta ini sedekat mungkin dengan <head> juga bisa mencegah Internet Explorer untuk berubah ke mode compatibility view tanpa kita kehendaki:

<meta http-equiv='X-UA-Compatible' content='IE=Edge'>

JavaScript/jQuery · Cek Jika Latar Gambar Telah Termuat

Lakukan sesuatu jika latar gambar pada elemen #test-bg telah termuat.

Tidak ada fungsi bawaan khusus yang bisa digunakan untuk mengecek bahwa sebuah latar gambar telah termuat. Tetapi Anda bisa melakukan itu dengan cara mengambil URL latar gambar pada elemen yang Anda inginkan untuk Anda sisipkan ke dalam atribut src gambar palsu yang Anda buat melalui JavaScript. Mengapa gambar? Karena kita bisa mendeteksi event onload pada gambar:

JavaScript Mentah

function getBgUrl(el) {
    var bg = "";
    if (el.currentStyle) { // IE
        bg = el.currentStyle.backgroundImage;
    } else if (document.defaultView && document.defaultView.getComputedStyle) { // Firefox
        bg = document.defaultView.getComputedStyle(el, "").backgroundImage;
    } else { // try and get inline style
        bg = el.style.backgroundImage;
    }
    return bg.replace(/url\(['"]?(.*?)['"]?\)/i, "$1");
}

var image = document.createElement('img');
image.src = getBgUrl(document.getElementById('test-bg'));
image.onload = function() {
    alert('Loaded!'); // Test!
};

jQuery

var bg = $('#test-bg').css('background-image').replace(/url\(['"]?(.*?)['"]?\)/i, "$1");
$('<img />').attr('src', bg).on("load", function() {
    alert('Loaded!'); // Test!
});

Lihat Demo

---

Referensi: SO - How Can I Check if a Background Image is Loaded?

Plugin Feed Rotator untuk Blogger

Plugin ini pada dasarnya merupakan perpaduan antara Basic jQuery Image Rotator dengan JSON Blogger yang kemudian Saya jadikan sebagai semacam slideshow dengan konten yang akan diperbaharui secara otomatis berdasarkan posting yang sudah terbit. Saya memutuskan untuk membuat ini karena ada beberapa orang yang menanyakan melalui email mengenai bagaimana cara memadukan plugin Image Rotator dengan JSON Blogger.

Plugin jQuery Image Rotator ini juga sudah dimodifikasi hampir secara keseluruhan, khusus untuk diaplikasikan pada widget ini. Beberapa hal yang Saya tambahkan diantaranya adalah navigasi, efek animasi kontainer dan dukungan fungsi callback yang dapat dijalankan pada sesi-sesi tertentu.

Lihat Demo

Implementasi Dasar

Berikut ini adalah contoh implementasi paling mendasar yang bisa Anda lakukan untuk mengaktifkan plugin:

<link rel="stylesheet" href="//blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<div id="slider-rotator" class="slider-rotator loading"></div><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="//blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script>
makeSlider({
    url: "//nama_blog.blogspot.com" // URL blog Anda
});
</script>

Susun file CSS dan plugin Blogger Feed Rotator sesuai dengan urutan yang Saya perlihatkan di atas. Tambahkan juga elemen HTML yang berfungsi untuk menampilkan slideshow sebelum plugin. Setelah itu aktifkan fungsi makeSlider() dengan parameter berupa objek tunggal url yang diisi dengan URL blog Anda. Salin dan tempelkan di dalam formulir elemen halaman HTML/JavaScript. Dengan ini maka Anda sudah bisa menampilkan sebuah slideshow sederhana seperti yang terlihat pada halaman demo di atas.

Daftar Opsi Konfigurasi Dasar

Konfigurasi dasar Saya batasi pada opsi-opsi yang berhubungan dengan pengaturan posting:

{
    url: "//www.dte.web.id", // Your blog URL
    numPost: 5, // Number of posts to display
    newTabLink: false, // `true` to automatically open link in new window tab
    labelName: null, // Show posts in specific label. Specify name of the post label, or `null` to show all posts
    showDetail: true, // `false` to hide the blog post title & description
    summaryLength: 60, // Length of post summary
    titleLength: "auto", // Length of the post title. "auto" by default, or specify number to crop the post title characters and truncate it with `...`
    showThumb: true, // `false` to hide the post thumbnails
    thumbWidth: 250, // Width of post thumbnail in pixels
    squareThumb: true, // Thumbnail mode: Square mode or use the scaled thumbnail with original width and height ratio
    noThumb: "images/grey.png", // Fallback thumbnail for no picture posts
    showNav: true, // `true` to show both next/prev navigation and navigation number, "next/prev" to show next/prev navigation only, "number" to show navigation number only, `false` to hide the navigation
    navText: {
        prev: "<", // Label of the previous navigation
        next: ">" // Label of the next navigation
    },
    containerId: "slider-rotator" // HTML element ID that is used to display the slideshow/rotator
}

Opsi	Keterangan
url	Isi dengan URL halaman muka blog Anda
numPost	Digunakan untuk menentukan jumlah posting yang akan ditampilkan
newTabLink	Ubah nilainya menjadi true untuk membuat tautan-tautan di dalam widget ini terbuka di jendela/tab baru saat diklik
labelName	Digunakan untuk menampilkan daftar posting dengan label/kategori tertentu. Nilai null berarti menampilkan semua posting terbaru. Ganti nilainya menjadi nama label untuk menampilkan posting dengan label tertentu. Misalnya labelName:"Foto" untuk menampilkan semua posting yang memiliki label Foto - Contoh
showDetail	Ubah nilainya menjadi false untuk menyembunyikan judul dan ringkasan posting. Berguna untuk membuat slideshow foto/gambar tanpa tulisan - Contoh
summaryLength	Digunakan untuk membatasi panjang ringkasan posting. Akhir pemotongan ringkasan posting akan digantikan dengan simbol “…”
titleLength	Digunakan untuk membatasi panjang judul posting. Secara normal bernilai "auto". Ubah nilainya dengan angka tertentu untuk memotong panjang judul jika Anda merasa judul posting yang tampil terlalu panjang. Akhir pemotongan judul posting akan digantikan dengan simbol “…”
showThumb	Ubah nilainya menjadi false untuk menyembunyikan gambar posting. Berguna untuk membuat slideshow teks - Contoh
thumbWidth	Digunakan untuk menentukan lebar thumbnail posting dan juga sekaligus menentukan lebar slideshow
squareThumb	Opsi untuk memilih mode thumbnail. true untuk menampilkan gambar dengan resolusi /sN-c, false untuk menampilkan gambar dengan resolusi /sN
noThumb	Isi dengan URL gambar. Gambar ini akan digunakan sebagai cadangan jika posting yang tampil tidak memiliki gambar
showNav	Opsi untuk menampilkan atau menyembunyikan navigasi slideshow. Ubah nilainya menjadi false untuk menyembunyikan navigasi. "number" untuk menampilkan navigasi angka saja. "next/prev" untuk menampilkan navigasi next/prev saja. true untuk menampilkan keduanya
navText	Opsi untuk menentukan label navigasi Next dan Previous
containerId	Digunakan untuk menentukan di mana slideshow akan ditampilkan. Isi dengan ID elemen HTML. Dan jangan lupa untuk menyertakan elemen HTML tersebut sebelum eksekusi plugin.

Pengaturan Animasi

Pengaturan animasi Saya batasi pada opsi-opsi yang berhubungan dengan animasi plugin:

{
    interval: 6000, // Slideshow interval
    speed: 1000, // Slideshow animation speed
    hoverPause: true, // `false` to make the slideshow/rotator keep running on mouse-over
    crossFade: false, // `true` if you want to make the slide change effect occurs simultaneously between disappearance and appearance
    autoHeight: false, // Animate the rotator to adjust the height of the displayed item
    autoSlide: true // `false` to run the slideshow manually (with navigation)
}

Opsi	Keterangan
interval	Digunakan untuk menentukan rentang waktu perpindahan setiap item slide dalam satuan milidetik
speed	Digunakan untuk menentukan kecepatan animasi dalam satuan milidetik
hoverPause	Jika bernilai true maka slideshow akan berhenti bergerak saat pointer mouse berada di atasnya
crossFade	Digunakan untuk menentukan apakah efek penghilangan dan pemunculan slide dilakukan secara bergantian atau bersamaan dalam waktu yang sama tanpa ada jeda
autoHeight	Jika bernilai true, maka tinggi slideshow akan menyesuaikan diri berdasarkan tinggi item slide yang tampil dengan efek animasi - Contoh
autoSlide	Ubah nilainya menjadi false untuk membuat slideshow berjalan secara manual melalui aksi klik navigasi

Konfigurasi Lanjutan

Bagian ini Saya khususkan untuk menjelaskan fungsi-fungsi callback dan implementasi lanjutan, khususnya dalam hal modifikasi:

{
    onInit: function() {}, // Callback function that will be executed when slideshow is starting
    onHide: function(index) {}, // Callback function that will be executed when slideshow is start hiding the slide item
    onShow: function(index) {} // Callback function that will be executed after the slideshow showing the slide item
}

onInit

Fungsi ini akan dijalankan pada saat pertama kali slideshow terbentuk. Saat slideshow tampil, maka fungsi ini akan langsung dieksekusi. Contoh penerapan:

makeSlider({
    url: "//nama_blog.blogspot.com",
    onInit: function() {
        alert('Slideshow ready!'); 
    }
});

Kode di atas akan menampilkan pesan “Slideshow ready!” segera setelah slideshow tampil.

onHide

Fungsi ini akan dijalankan setiap kali item slide mulai menghilang. Saat item slide menghilang, maka fungsi ini akan tereksekusi. Contoh penerapan:

makeSlider({
    url: "//nama_blog.blogspot.com",
    onHide: function() {
        alert('Mengganti slide...'); 
    }
});

Kode di atas akan menampilkan pesan “Mengganti slide...” setiap kali slide mulai berganti.

onShow

Fungsi ini akan dijalankan setiap kali item slide tampil. Saat item slide tampil, maka fungsi ini akan tereksekusi. Contoh penerapan:

makeSlider({
    url: "//nama_blog.blogspot.com",
    onShow: function(index) {
        alert('Slide ke ' + index + ' berhasil tampil.'); 
    }
});

Kode di atas akan menampilkan pesan “Slide ke {nomor urut slide yang tampil} berhasil tampil.” setiap kali slide ditampilkan.

Parameter `index`

Parameter index hanya berlaku untuk onHide dan onShow. Parameter ini akan menampilkan indeks slide yang aktif:

makeSlider({
    url: "//nama_blog.blogspot.com",
    onInit: function() {
        console.log('Slideshow dimulai...');
    },
    onHide: function(index) {
        console.log('Menyembunyikan slide ke ' + index); 
    },
    onShow: function(index) {
        console.log('Menampilkan slide ke ' + index);
    }
});

Beberapa Contoh Modifikasi Dasar

Mengubah Tampilan

Dengan mengubah ukuran lebar pada gambar dan slideshow, ukuran tinggi pada slideshow dan mengubah tampilan deskripsi/detail posting sebagai caption, maka Anda bisa semakin memperkuat status plugin ini sebagai “slideshow”:

CSS

<link rel="stylesheet" href="//blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<style>

/* Custom CSS... */

.slider-rotator {
  width:600px;
  height:240px;
  padding:0 0;
  background-color:white;
  font:italic normal 12px/1.4 Georgia,Serif;
  color:white;
  border:1px solid black;
}

.slider-rotator .slider-item {
  background-color:white;
  height:240px; /* Same with `.slider-rotator` height */
  padding:0 0;
}

.slider-rotator h4 {margin-top:0}
.slider-rotator p {margin:2px 0 0}

/* Slider details as caption */
.slider-rotator .detail-wrapper {
  position:absolute;
  top:auto;
  right:0;
  bottom:0;
  left:0;
  background-color:black;
  background-color:rgba(0,0,0,.9);
  padding:.5em 1em;
  z-index:4;
}

</style>

JavaScript

makeSlider({
    url: "//nama_blog.blogspot.com", // Your blog URL
    thumbWidth: 600 // Thumbnail width in pixels (same with slideshow width)
});

Lihat Demo

Memanfaatkan Fungsi Callback untuk Menganimasikan Caption

Dengan memanfaatkan parameter index pada onHide dan onShow, Anda bisa memberikan efek animasi pada caption slide yang aktif setiap kali slide berganti:

makeSlider({
    url: "//nama_blog.blogspot.com", // Your blog URL
    thumbWidth: 600, // Thumbnail width in pixels (same with slideshow width)
    containerId: "slider-rotator",
    // Hide all captions on initiation...
    onInit: function() {
        $('#' + this.containerId).find('.detail-wrapper').hide();
    },
    // Hide the caption with `.slideUp()` effect when the slide item hides
    onHide: function() {
        $('#' + this.containerId).find('.detail-wrapper').slideUp();
    },
    // Show the caption with `.slideDown()` effect when the slide item appears
    onShow: function(index) {
        $('#' + this.containerId).children().eq(index).find('.detail-wrapper').slideDown();
    }
});

Lihat Demo

Menampilkan Beberapa Slideshow Sekaligus

Karena eksekusi plugin ini dilakukan di luar, maka ini memungkinkan Anda untuk menampilkan beberapa slideshow sekaligus dalam satu halaman. Pertama-tama buatlah beberapa elemen HTML yang dibutuhkan untuk memuat slideshow:

<div id="container-1" class="slider-rotator loading"></div>
<div id="container-2" class="slider-rotator loading"></div>
<div id="container-3" class="slider-rotator loading"></div>

Kemudian jalankan fungsi makeSlider() sebanyak jumlah kontainer yang dibuat. Tentukan juga konfigurasi containerId yang berbeda-beda berdasarkan ID kontainer:

makeSlider({
    url: "//nama_blog-1.blogspot.com",
    containerId: "container-1"
});
makeSlider({
    url: "//nama_blog-2.blogspot.com",
    containerId: "container-2"
});
makeSlider({
    url: "//nama_blog-3.blogspot.com",
    containerId: "container-3"
});

Lihat Demo

Mengatur Plugin dan Melihat Demo Secara Langsung

Saya sudah menyertakan halaman konfigurasi plugin yang bisa Anda gunakan untuk melakukan pengaturan dan melihat hasilnya secara langsung di sini:

Kunjungi Halaman

Daftar Contoh

1. Demo 1: Basic
2. Demo 2: Show Posts under Category “Widget”
3. Demo 3: About Thumbnails
4. Demo 4: Thumbnail Only
5. Demo 5: Text Only
6. Demo 6: Multiple Feed Loading
7. Demo 7: Casual Slideshow
8. Demo 8: Example Callback Function to Animate the Slideshow Caption (1)
9. Demo 9: Example Callback Function to Animate the Slideshow Caption (2)

Sliding Up Image Description

Terinspirasi dari Google Web Store

HTML

<div class="image-box-wrapper" id="image-box-wrapper">

    <!-- `.image-box` start -->
    <div class="image-box">
        <div class="image-container">
            <img src="img/image-1.jpg" alt="" width="200" height="150">
        </div>
        <div class="image-details">
            <div class="details">
                <h4>Description Title</h4>
                <p>Description text...</p>
                <p><a class="more" href="#">More</a></p>
            </div>
        </div>
    </div>
    <!-- `.image-box` end -->
    
    ...
    ...
    ...

    <div class="clear"></div>

</div>

CSS

.image-box-wrapper {
  width:642px;
  margin:50px auto;
}

.image-box {
  width:210px;
  height:160px;
  overflow:hidden;
  background-color:white;
  border:1px solid #ccc;
  float:left;
  margin:1px 1px;
  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#333;
}

.image-container,
.image-details {
  height:150px;
  border:5px solid white;
  background-color:#ffc;
  -webkit-transition:margin-top .4s ease-out .4s;
  -moz-transition:margin-top .4s ease-out .4s;
  -ms-transition:margin-top .4s ease-out .4s;
  -o-transition:margin-top .4s ease-out .4s;
  transition:margin-top .4s ease-out .4s;
}

.image-container img {
  width:200px;
  height:150px;
  padding:0 0;
  margin:0 0;
  border:none;
  outline:none;
  max-width:none;
  max-height:none;
  background-color:black;
}

.image-details h4,
.image-details p {
  margin:0 0 .2em;
  padding:0 0;
  height:70px;
}

.image-details h4 {
  font-size:120%;
  height:auto;
}

.image-details .details {
  padding:10px 12px;
  overflow:hidden;
}

.image-details .more {
  color:white;
  text-decoration:none;
  display:block;
  text-align:center;
  font-weight:bold;
  background-color:#f9a;
  height:26px;
  line-height:26px;
  margin:10px 0 0;
}

.image-box:hover {border-color:#bbb}
.image-box:hover .image-container {margin-top:-160px}
.image-details .more:hover {background-color:black}

Lihat Demo

Generator HTML Peta Gambar Palsu

Alat ini digunakan untuk membuat image map palsu menggunakan elemen HTML. Beberapa orang lebih memilih menggunakan yang palsu karena lebih fleksibel. Pada intinya alat ini digunakan untuk mempermudah di dalam merancang ukuran dan posisi lokasi pada tiap bagian di dalam gambar. Mengenai elemen apa yang akan Anda gunakan dan bagaimana Anda memodifikasi tampilannya, itu terserah Anda:

Coba Alat

Bagi para pembaca yang belum mengerti apa itu image map, kalian bisa memulai mempelajarinya di sini. Dan berikut ini adalah contoh gambar yang dihasilkan dari alat yang Saya buat di atas. Coba letakkan pointer mouse Anda di atas wajah-wajah atau badan tokoh kartun di bawah ini untuk mengetahui nama mereka:

Cara Menggunakan

Ambillah sebuah foto atau gambar dimana di dalamnya terdapat beberapa bagian yang memerlukan detail khusus. Misalnya foto keluarga atau peta negara, lalu unggah foto atau gambar tersebut pada blog Anda. Ambil URL gambarnya, kemudian letakkan di dalam input URL yang tersedia. Setelah itu klik tombol Create. Klik tombol Add Location untuk menambahkan lokasi/koordinat baru pada gambar. Geser dan ubah ukurannya sesuai keinginan. Kode HTML akan tampil di bagian area teks sebelah kanan.

jQuery Carousel

HTML

<div class="carousel" id="carousel">
    <div class="carousel-inner">
        <img src="img/1.jjpg" alt="">
        <img src="img/2.jjpg" alt="">
        <img src="img/3.jjpg" alt="">
        <img src="img/4.jjpg" alt="">
    </div>
</div>
<nav class="carousel-nav" id="carousel-nav">
    <button data-direction="prev">Prev</button>
    <button data-direction="next">Next</button>
</nav>

CSS

.carousel {
  width:400px;
  overflow:auto;
  margin:0 auto .7em;
}

.carousel,
.carousel-inner {
  height:100px;
}

.carousel img {
  width:100px;
  height:100px;
  background-color:#ccc;
  display:block;
  float:left;
  margin:0 5px;
}

.carousel-nav {
  text-align:center;
}

.carousel-nav button {
  cursor:pointer;
}

jQuery

(function($) {
    var $carousel = $('#carousel'),
        $container = $carousel.find('.carousel-inner'),
        $nav = $('#carousel-nav'),
        $img = $container.find('img'),
        totalWidth = ($img.outerWidth()+parseInt($img.css('margin-left'),10)+parseInt($img.css('margin-right'),10))*$img.length;
    $carousel.css('overflow', 'hidden'); // Singkirkan scroll bar jika JavaScript aktif
    $container.css('width', totalWidth); // Set lebar `.carousel-inner` selebar => [jumlah gambar + lebar gambar + margin kiri dan kanan gambar]
    $nav.find('button').on("click", function() {
        // Animasikan properti `scrollLeft` ke kiri/ke kanan,
        // berdasarkan nilai atribut `data-direction` pada tombol yang diklik
        var dir = $(this).data('direction');
        $carousel.stop().animate({
            scrollLeft: (dir == "next") ? "+=100px" : "-=100px"
        }, 200);
    });
})(jQuery);

Demo

Thumbnail Scroller

Pembaharuan: 25 September 2013

Thumbnail scroller.

HTML

<div id="thumbnail-scroller">
    <div class="container">
        <figure>
            <a href="#" title="Title for Caption 1">
                <img alt="" src="img/thumbnail-1.jpg">
            </a>
        </figure>
        <figure>
            <a href="#" title="Title for Caption 2">
                <img alt="" src="img/thumbnail-2.jpg">
            </a>
        </figure>
        <figure>
            <a href="#" title="Title for Caption 3">
                <img alt="" src="img/thumbnail-3.jpg">
            </a>
        </figure>
    </div>
</div>

CSS

#thumbnail-scroller {
  height:130px;
  background-color:#810A0A;
  border:10px solid #12559D;
  position:relative;
  margin:50px;
  overflow:auto;
}

/* Create shadow effect on the left and right of container */
#thumbnail-scroller:before,
#thumbnail-scroller:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:-4px;
  width:4px;
  height:100%;
  box-shadow:0 0 4px black;
  z-index:10;
}

#thumbnail-scroller:after {
  left:auto;
  right:-4px;
}

#thumbnail-scroller .container {
  position:absolute;
  top:0;
  left:0;
  margin:5px 0 0 5px;
  width:300%;
  height:120px;
}

#thumbnail-scroller figure {
  display:block;
  background-color:white;
  float:left;
  width:100px;
  height:120px;
  margin:0 5px 0 0;
  position:relative;
  overflow:hidden;
}

#thumbnail-scroller figcaption {
  display:block;
  position:absolute;
  right:0;
  bottom:-50px;
  left:0;
  background-color:black;
  font:italic normal 11px/normal Arial,Sans-Serif;
  color:white;
  padding:4px 10px;
  text-align:left;
  opacity:.8;
}

#thumbnail-scroller figure img {
  display:block;
  border:none;
  margin:0;
}

jQuery

(function($) {

    var $thumbnailScroller = $('#thumbnail-scroller'),
        $container = $thumbnailScroller.find('.container'),
        $item = $container.find('figure'),
        item_length = $item.length,
        item_width = $item.outerWidth(true),
        total_width = item_width * item_length,
        $window = $(window);

    $thumbnailScroller.css('overflow', 'hidden');
    $container.css('width', total_width);

    // Auto caption builder & hover effect
    $item.each(function() {
        if ($(this).children().attr('title')) {
            var cap = $(this).children().attr('title');
            $(this).append('<figcaption>' + cap + '</figcaption>').children().removeAttr('title');
        }
    }).on("mouseenter mouseleave", function(e) {
        $('figcaption', this).stop().animate({
            bottom: e.type == "mouseenter" ? 0 : -50
        }, 200);
    });

    $window.on("resize", function() {
        var o_l = $thumbnailScroller.offset().left,
            t_w = $thumbnailScroller.width(),
            c_w = total_width;
        $thumbnailScroller.off().on("mousemove", function(e) {
            if ($(this).width() < $container.width()) {
                $container.css('left', -((e.pageX - o_l) * ((c_w - t_w) / t_w)));
            }
        });
    }).trigger("resize");

})(jQuery);

Lihat Demo

---

Template JSON - #c4612763938057608800

<div id="thumbnail-scroller"></div>
<script>
//<![CDATA[
var noimg = "img/no-image.png";
function showThumbs(json) {
    var entry = json.feed.entry,
        title, url, skeleton = '<div class="container">';
    for (var i = 0; i < entry.length; i++) {
        for (var j = 0; j < entry[i].link.length; j++) {
            if (entry[i].link[j].rel == 'alternate') {
                url = entry[i].link[j].href;
                break;
            }
        }
        title = entry[i].title.$t;
        img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s72\-c/, "/s120-c") : noimg;
        skeleton += '<figure><a href="' + url + '" title="' + title + '"><img src="' + img + '" alt="" /></a></figure>';
    }
    skeleton += '</div>';
    document.getElementById('thumbnail-scroller').innerHTML = skeleton;
}
//]]>
</script>
<script src='http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;max-results=30&amp;callback=showThumbs'></script>

Lihat Demo

Tip untuk Thumbnail Scroller Berjamak

Gunakan jQuery .each() untuk menerapkan fungsi kepada setiap target yang diinginkan, sehingga penargetan variabel $thumbnailScroller menjadi seperti ini:

$('.t-s').each(function() {
    var $thumbnailScroller = $(this);
});

Lihat Demo

jQuery Efek Nivo Slider Tanpa Plugin

Eksperimen membuat slideshow berdasarkan framework yang Saya buat di sini, untuk menciptakan slideshow dengan efek seperti Nivo Slider. Slideshow ini menggunakan konsep yang mirip dengan Nivo Slider, yaitu mengambil URL gambar untuk dijadikan sebagai latar slice. Efek bergelombang timbul dari .delay() animasi yang Saya set dengan nilai berurutan pada setiap slice:

HTML

<figure id="slider">
    <div class="container">
        <img src="image/slide-1.jpg" alt="Deskripsi slide 1">
        <img src="image/slide-2.jpg" alt="Deskripsi slide 2">
        <img src="image/slide-3.jpg" alt="Deskripsi slide 3">
        <img src="image/slide-4.jpg" alt="Deskripsi slide 4">
    </div>
    <figcaption></figcaption>
    <nav id="slider-nav"></nav>
</figure>

CSS

/* Slider */
#slider {
  display:block;
  border:4px solid #000;
  width:400px; /* slider width */
  height:250px; /* slider height */
  margin:0 auto;
  background:white url('img/loading.gif') no-repeat 50% 50%;
  overflow:hidden;
  position:relative;
}

/* For caption */
#slider figcaption {
  display:block;
  background-color:black;
  font:normal normal 11px Arial,Sans-Serif;
  color:white;
  opacity:.8;
  padding:10px 15px;
  position:absolute;
  right:0;
  bottom:-100px; /* hide the caption with this way :) */
  left:0;
  z-index:99;
}

#slider img {
  display:block;
  margin:0 0;
  width:400px; /* slide width */
  height:250px; /* slide height */
  position:absolute;
  top:0;
  left:0;
}

/* Navigation */
#slider-nav {
  display:block;
  position:absolute;
  top:10px;
  right:10px;
  margin:0 0;
  padding:0 0;
  z-index:99;
}

#slider-nav a {
  display:block;
  float:left;
  width:10px;
  height:10px;
  background-color:#111;
  font-size:0;
  color:transparent;
  overflow:hidden;
  text-indent:-99px;
  margin:0 2px 0 0;
  border:2px solid white;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}

#slider-nav .active {
  background-color:#2589B4;
}

/* Hide all element inside the '#slider' until the page has been loaded! */
#slider .container, #slider figcaption {display:none}
#slider-nav {opacity:0}

jQuery

/**
 * NIVO SLIDER LIKE EFFECT SLIDESHOW BY TAUFIK NURROHMAN
 * URL: https://plus.google.com/108949996304093815163/about
 * Based on this slideshow framework: http://www.dte.web.id/2012/09/simple-useful-jquery-slideshow.html
 */

(function($) {

// ==================================================================================
// Configuration here:
// ----------------------------------------------------------------------------------
    var config = {
        slices: 10, // number of slices
        speed: 600, // slideshow speed
        easing: null, // easing type
        interval: 3000 // slideshow interval
    };
// ==================================================================================

    // Some variables...
    var $slider = $('#slider'),
        $caption = $slider.find('figcaption'),
        $container = $slider.find('.container'),
        $nav = $('#slider-nav'),
        $slide = $container.children(),
        autoSlide = null,
        $first = $slide.first();

    // Auto append navigation item based on the slides length
    $slide.each(function(index) {
        var i = index + 1;
        $nav.append('<a href="#slide-'+i+'">'+i+'</a>');
        $(this).attr('id', 'slide-'+i);
    });

    // Set the slices size
    var slice_w = $slider.width() / config.slices,
        slice_h = $slider.height();

    // Build the slices
    for (var i = 0; i < config.slices; i++) {
        $('<div class="slice" />').css({
            'position':'absolute',
            'width':slice_w,
            'height':slice_h,
            'left':slice_w*i,
            'z-index':4,
            'background-color':'transparent',
            'background-repeat':'no-repeat',
            'background-position':'-' + slice_w*i + 'px 0'
        }).appendTo($slider);
    }

    // Catch the slices, and also set the different position between odd and even slices
    var $sliceOdd = $slider.find('.slice:odd').css('bottom',0),
        $sliceEven = $slider.find('.slice:even').css('top',0);

    // Click to switch!
    $nav.find('a').on("click", function() {

        $nav.find('.active').removeClass('active');
        $(this).addClass('active');

        var pos = $(this).index(),
            text = $slide.eq(pos).attr('alt'),
            bg = $slide.eq(pos).attr('src');

        $slide.hide().eq(pos).trigger("load").show();

        // Do the caption and slices animation here!
        $caption.stop().animate({bottom:'-100px'}, config.speed/2);

        $sliceOdd.each(function(i) {
            $(this).stop().delay(i*100).animate({bottom:'-'+slice_h+'px',opacity:0}, config.speed, config.easing, function() {
                $(this).css({
                    'background-image':'url('+bg+')',
                    'bottom':0,
                    'opacity':1
                });
            });
        });
        $sliceEven.each(function(i) {
            $(this).stop().delay(i*100).animate({top:'-'+slice_h+'px',opacity:0}, config.speed, config.easing, function() {
                $(this).css({
                    'background-image':'url('+bg+')',
                    'top':0,
                    'opacity':1
                });
            });
        }).promise().done(function() {
            $caption.html(text).stop().animate({bottom:'0'}, config.speed/2);
        });

        clearInterval(autoSlide);
        autoSlide = setInterval(slideShow, config.interval);

        return false;

    }).first().addClass('active');

    // Init slideshow
    $caption.html($slide.first().attr('alt')).stop().animate({bottom:'0'}, config.speed);

    // Navigation clicker
    function slideShow() {
        if ($nav.find('.active').next().length) {
            $nav.find('.active').next().trigger("click");
        } else {
            $nav.find('a').first().trigger("click");
        }
    }

    // Run the slideshow on page load...
    $(window).on("load", function() {

        // remove the 'loading background-image' of '#slider'
        $slider.css('background-image','none');

        // Show the '.container', 'figcaption' and '#slide-nav' when the page has been loaded!
        $container.show();
        $caption.show();
        $nav.css('opacity',1);

        // Another init slideshow
        $slider.find('.slice').css('background-image', 'url('+$first.attr("src")+')');

        // Then, start the interval...
        autoSlide = setInterval(slideShow, config.interval);

    });

})(jQuery);

Lihat Demo Salinan di CSSDeck

Konfigurasi

Opsi	Keterangan
slices	Jumlah potingan slide.
speed	Kecepatan slideshow.
easing	Tipe easing animasi.
interval	Interval slideshow.

Beberapa Contoh Modifikasi Slideshow jQuery

Artikel ini merupakan kelanjutan dari artikel jQuery Slideshow Otomatis dengan Navigasi Angka

1. Slideshow dengan Caption

HTML

Untuk membuat slideshow dengan caption, kita memerlukan beberapa langkah perubahan. Pertama-tama, kita ganti elemen <div class="slide"> dengan <img>. Kemudian sisipkan elemen <figcaption> ke dalam #slider. Bagian inilah yang nantinya akan diisi oleh teks dari setiap item slider:

<figure id="slider">
    <div class="container">
        <img src="img/slide-1.jpg" alt="Deskripsi gambar 1">
        <img src="img/slide-2.jpg" alt="Deskripsi gambar 2">
        <img src="img/slide-3.jpg" alt="Deskripsi gambar 3">
        <img src="img/slide-4.jpg" alt="Deskripsi gambar 4">
    </div><figcaption></figcaption>  </figure>
<nav id="slider-nav"></nav>

Supaya lebih semantik, Saya juga telah mengganti elemen #slider yang tadinya adalah elemen divisi menjadi elemen figur. Lihat kode di atas!

CSS

Setelah itu kita set beberapa perubahan pada kode CSS:

/* Slider */
#slider {
  display:block;
  position:relative;
}

/* Untuk caption */
#slider figcaption {
  display:block;
  background-color:black;
  font:normal normal 11px/normal Arial,Sans-Serif;
  color:white;
  opacity:.8;
  padding:10px 15px;
  position:absolute;
  right:0;
  bottom:-100px; /* sembunyikan dengan cara ini :) */
  left:0;
  z-index:4;
}

#slider img {
  display:block;
  margin:0;
  width:300px; /* dimensi lebar */
  height:200px; /* dimensi tinggi */
  float:left;
}

jQuery

Tangkap satu objek lagi dan simpan ke dalam variabel $caption, yaitu elemen <figcaption>:

$caption = $slider.find('figcaption');

Setelah itu, kita harus mengubah logika animasi slideshow, karena di sini kita baru saja menambahkan elemen caption. Langkah animasinya seperti ini:

Pertama-tama, tampilkan teks slide awal ke dalam elemen <figcaption> sebagai awalan (dalam kasus ini Saya mengambil teks tersebut dari atribut alt pada masing-masing gambar). Ke dua adalah langkah animasi. Urutannya:

1. Sembunyikan caption
2. Geser slider
3. Ganti teks caption dengan deskripsi yang baru, kemudian tampilkan caption.

Semuanya akan menjadi seperti ini:

$nav.find('a').on("click", function() {
    $nav.find('.active').removeClass('active');
    $(this).addClass('active');
    var pos = $(this).index() * $slider.width(),

        text = $slide.eq($(this).index()).attr('alt'); // Mengambil teks dari atribut alt pada gambar ke-`$(this).index()`

    // (1) Menyembunyikan caption...
    $caption.stop().animate({bottom:'-100px'}, 400);

    // (2) Menggeser slider...
    $container.stop().animate({left:'-'+pos+'px'}, 600, function() {

        // (3) Mengganti teks caption dengan deskripsi yang baru...
        // kemudian tampilkan caption dengan efek animasi properti 'bottom'
        $caption.html(text).stop().animate({bottom:'0'}, 400);

    });
    clearInterval(autoSlide);
    autoSlide = setInterval(slideShow, 3000);
    return false;
}).first().addClass('active');

// Sebagai awalan => tampilkan caption dengan deskripsi atribut alt dari slide pertama
$caption.html($slide.first().attr('alt')).stop().animate({bottom:'0'}, 600);

Lainnya

Slideshow berupa gambar membutuhkan waktu lebih lama untuk memuat. Dan saat proses pemuatan terjadi, biasanya kita akan melihat efek yang tidak bagus dari gambar yang terpotong-potong. Cara termudah untuk mengatasi itu adalah dengan menyembunyikan semua gambar terlebih dahulu sebelum termuat. Hingga saat gambar sudah termuat, kita bisa menampilkannya:

/**
 * Tip yang baik untuk slideshow berupa gambar:
 * Sembunyikan tampilan sampai semua gambar benar-benar termuat...
 * ... agar saat gambar sedang dimuat, dia tidak merusak pemandangan kita :)
 */

#slider .container, #slider figcaption {display:none}
#slider-nav {opacity:0}

$(window).on("load", function() {

    // Tampilkan '.container', 'figcaption' dan '#slide-nav' saat halaman (semua gambar) telah termuat!
    $container.show();
    $caption.show();
    $nav.css('opacity',1);

    // Kemudian jalankan interval slideshow...
    autoSlide = setInterval(slideShow, 3000);

});

Sementara gambar sedang memuat, kita tampilkan efek animasi loading dengan menambahkan latar berupa loading.gif agar slideshow menjadi lebih menarik dan komunikatif:

#slider {
  background:white url('img/loading.gif') no-repeat 50% 50%;
}

Lihat Demo

2. Efek Fade

CSS

Pembuatan efek fade bisa dilakukan dengan perhitungan yang lebih sederhana:

Konsep dasar slideshow dengan efek fade adalah: Semua gambar bertumpuk, dan masing-masing gambar bergantian menampilkan diri dengan efek peningkatan/penurunan pemudaran.

Sehingga, kode CSS yang perlu kita ubah hanya ada pada bagian ini:

#slider img {
  display:block;
  margin:0;
  width:300px;
  height:200px;
  /* Gunakan posisi absolut untuk menumpuk masing-masing slide satu sama lain */
  position:absolute;
  top:0;
  left:0;
}

jQuery

Setelah itu, ada beberapa bagian variabel yang bisa kita buang. Kita sudah tidak perlu lagi menggunakan variabel-variabel ini, karena semua slide kini berada dalam satu tumpukan!

var $slider = $('#slider'),
    $caption = $slider.find('figcaption'),
    $container = $slider.find('.container'),
    $nav = $('#slider-nav'),
    $slide = $container.children(),
    s_length = $slide.length,s_wide = $slider.width() * s_length,s_height = $slider.height(),
    autoSlide = null;

Efek animasi bisa dibuat dengan jQuery .fadeIn() dan .fadeOut(). Seperti ini:

$nav.find('a').on("click", function() {

    $nav.find('.active').removeClass('active');
    $(this).addClass('active');

    var pos = $(this).index() * $slider.width(),
        text = $slide.eq($(this).index()).attr('alt');
    $caption.stop().animate({bottom:'-100px'}, 400);

    // Sembunyikan semua slide dengan efek .fadeOut() ...
    // ... kemudian tampilkan slide ke-`$(this).index()` dengan efek .fadeIn()
    $slide.fadeOut(600).eq($(this).index()).fadeIn(600, function() {
        $caption.html(text).stop().animate({bottom:'0'}, 400);
    });

    clearInterval(autoSlide);
    autoSlide = setInterval(slideShow, 3000);

    return false;

}).first().addClass('active');

Lainnya

Jangan lupa untuk menghilangkan latar animasi loading saat semua gambar sudah termuat:

$(window).on("load", function() {
    $slider.css('background-image','none');
});

Lihat Demo

Framework jQuery Slideshow Otomatis dengan Item Navigasi Angka

HTML

<div id="slider">
    <div class="container">
        <div class="slide"> ... </div>
        <div class="slide"> ... </div>
        <div class="slide"> ... </div>
        <div class="slide"> ... </div>
        <div class="slide"> ... </div>
    </div>
</div>
<nav id="slider-nav"></nav>

CSS

/* Slider */
#slider {
  width:300px; /* dimensi lebar */
  height:200px;; /* dimensi tinggi */
  margin:0 auto;
  background-color:black;
  overflow:hidden; /* Sembunyikan muatan elemen '.container' yang berlebih dari '#slider' */
}

#slider .slide {
  width:300px; /* dimensi lebar */
  height:200px; /* dimensi tinggi */
  float:left;
}

#slide-1 {background-color:darkred}
#slide-2 {background-color:darkgreen}
#slide-3 {background-color:darkblue}
#slide-4 {background-color:gold}
#slide-5 {background-color:darkviolet}

/* Navigasi */
#slider-nav {
  display:block;
  width:300px;
  margin:10px auto;
  text-align:center;
}

#slider-nav a {
  display:inline-block;
  width:15px;
  height:15px;
  background-color:#bbb;
  font-size:0;
  color:transparent;
  overflow:hidden;
  text-indent:-99px;
  margin:0 2px 0 0;
  border:2px solid white;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
}

#slider-nav .active {
  background-color:green;
}

jQuery

(function($) {

    // Tangkap semua objek yang dibutuhkan
    var $slider = $('#slider'),
        $container = $slider.find('.container'),
        $nav = $('#slider-nav'),
        $slide = $container.children(),
        s_length = $slide.length,
        s_wide = $slider.width() * s_length,
        s_height = $slider.height(),
        autoSlide = null;

    // Set posisi '.container' sebagai 'relative' (untuk kebutuhan animasi properti 'left')
    // Set lebar '.container' dengan ukuran = (lebar slideshow * jumlah slide)
    // Set tinggi '.container' dengan ukuran = tinggi slideshow
    $container.css({
        'position':'relative',
        'width':s_wide,
        'height':s_height
    });

    // Otomatis menyisipkan item navigasi berdasarkan jumlah slide
    $slide.each(function(index) {
        var i = index + 1;
        $nav.append('<a href="#slide-'+i+'">'+i+'</a>');
        $(this).attr('id', 'slide-'+i);
    });

    // Klik untuk mengganti slide
    $nav.find('a').on("click", function(pos) {
        // Tambah/lepas kelas 'active' dari item navigasi (untuk pewarnaan item navigasi yang aktif)
        $nav.find('.active').removeClass('active');
        $(this).addClass('active');
        pos = $(this).index() * $slider.width(); // Jarak animasi dihitung berdasarkan indeks navigasi yang diklik * lebar slider
        $container.animate({left:'-'+pos+'px'}, 600);
        clearInterval(autoSlide); // Bersihkan interval slideshow otomatis...
        autoSlide = setInterval(slideShow, 3000); // Kemudian set kembali interval seperti semula.
        return false;
    }).first().addClass('active');

    // Untuk keperluan event klik otomatis pada navigasi
    function slideShow() {
        if ($nav.find('.active').next().length) {
            $nav.find('.active').next().trigger("click");
        } else {
            $nav.find('a').first().trigger("click");
        }
    } autoSlide = setInterval(slideShow, 3000); // Jalankan fungsi slideShow() dengan interval 3 detik!

})(jQuery);

Lihat Demo Salinan di JSFiddle

---

Penjelasan Singkat

Kotak Slider

Mendefinisikan ukuran tinggi dan lebar adalah bagian terpenting, karena slideshow ini menggunakan animasi slide (bergerak menyamping dengan jarak tertentu) yang jaraknya ditentukan oleh lebar slideshow:

#slider {
  width:300px; /* lebar slider */
  height:200px;; /* tinggi slider */
  overflow:hidden;
}

#slider .slide {
  width:300px; /* lebar item sama dengan lebar kontainer */
  height:200px; /* tinggi item sama dengan lebar kontainer */
  float:left;
}

Setelah dimensi ditentukan, selanjutnya adalah menyimpan semua data objek dan ukuran yang diperlukan. Diantaranya:

var $slider = $('#slider'), // Slideshow => '#slider'
    $container = $slider.find('.container'), // Kontainer item slider => '.container'
    $nav = $('#slider-nav'), // Navigasi slider => '#slider-nav'
    $slide = $container.children(), // Item slider => '.slide'
    s_length = $slide.length, // Jumlah item slider
    s_wide = $slider.width() * s_length, // (lebar slider * jumlah slide) => digunakan untuk menentukan total ukuran lebar kontainer item slider
    s_height = $slider.height(), // Tinggi slider
    autoSlide = null; // Variabel kosong

Set ukuran kontainer item slider sesuai ukuran yang telah diperhitungkan di atas:

// Set posisi '.container' sebagai 'relative' (untuk kebutuhan animasi properti 'left')
// Set lebar '.container' dengan ukuran s_wide
// Set tinggi '.container' dengan ukuran s_height
$container.css({
    'position':'relative',
    'width':s_wide,
    'height':s_height
});

Navigasi

Anda bisa saja menyisipkan setiap item navigasi secara manual dengan jumlah yang sama berdasarkan jumlah item slider. Tapi Saya lebih menyarankan untuk menggunakan cara otomatis, dengan jQuery .each()

$slide.each(function(index) {
    var i = index + 1;
    $nav.append('<a href="#slide-'+i+'">'+i+'</a>');
    $(this).attr('id', 'slide-'+i);
});

Eksekutor

Fungsi tugas dibuat setelah navigasi terbentuk, yaitu fungsi yang akan menganimasikan elemen .container ke arah kiri dengan jarak tertentu saat sebuah item navigasi diklik:

$nav.find('a').on("click", function(pos) {

    // Tambah/lepas kelas 'active' dari item navigasi (untuk pewarnaan item navigasi yang aktif)
    $nav.find('.active').removeClass('active');
    $(this).addClass('active');

    pos = $(this).index() * $slider.width(); // Jarak animasi => Dihitung berdasarkan indeks navigasi yang diklik * lebar slider

    $container.animate({left:'-'+pos+'px'}, 600); // Animasikan '.container'

    clearInterval(autoSlide); // Bersihkan interval slideshow otomatis...

    autoSlide = setInterval(slideShow, 3000); // Kemudian set kembali interval seperti semula.

    return false;

}).first().addClass('active'); // Tambahkan kelas 'active' pada item navigasi pertama sebagai awalan

Ada dua hal yang belum dijelaskan pada kode di atas, yaitu clearInterval(slideShow) dan setInterval(slideShow, 3000). Bagian itu akan dibuat di bawah:

Utilitas Animasi Otomatis

Pertama, yang dibutuhkan adalah sebuah fungsi seperti ini:

function slideShow() {
    if ($nav.find('.active').next().length) {
       // Saat item navigasi '.active' ditemukan, dan terdapat item navigasi lain disampingnya...
       // seleksi item navigasi di sampingnya kemudian picu event .click() padanya!
        $nav.find('.active').next().trigger("click");
    } else {
        // Jika tidak ditemukan, seleksi item navigasi yang pertama kemudian picu event .click() padanya!
        $nav.find('a').first().trigger("click");
    }
}

Tugasnya adalah untuk mengecek keberadaan item navigasi yang aktif (yang memiliki kelas active). Saat item tersebut ditemukan, maka jQuery akan melihat kepada item di sampingnya kemudian akan memicu event .click(), sehingga fungsi $nav.find('a').on("click", doSomething) yang kita buat sebelumnya bisa bekerja melalui perantara ini. Tambahan lainnya, jika elemen setelah item navigasi tidak ditemukan, maka pindahkan selektor .next() menjadi .first() untuk kembali ke bagian awal, menyeleksi item navigasi pertama.

Terakhir, gunakan JavaScript setInterval() untuk menjalankan slideShow() secara otomatis berdasarkan interval tertentu. Di sini, Saya menggunakan interval selama 3 detik:

// Variabel autoSlide bisa kita gunakan mulai sekarang :)
autoSlide = setInterval(slideShow, 3000);

Selanjutnya: Tip-Tip Modifikasi

Lakukan Sesuatu Jika Elemen Mencapai Area Terlihat

Kode ini digunakan untuk mengeksekusi suatu perintah jika elemen telah mencapai area terlihat pada layar. Semacam prinsip yang biasanya digunakan pada plugin-plugin lazyLoader gambar dan infiniteScroll:

function isScrolledIntoView(elem) {
    var $window = $(window),
        docViewTop = $window.scrollTop(),
        docViewBottom = docViewTop + $window.height(),
        elemTop = $(elem).offset().top,
        elemBottom = elemTop + $(elem).outerHeight();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

Sampel Penggunaan

Umumnya digunakan dalam peraturan kondisi seperti ini:

if (isScrolledIntoView('#element')) {
    $('#element').addClass('here-it-is');
}

Penggunaan pada Elemen Banyak

$('div').each(function() {
    if (isScrolledIntoView(this)) {
        $(this).addClass('here-it-is');
    } else {
        $(this).removeClass('here-it-is');
    }
});

Lihat Demo

---

Contoh Lain: Image Lazy Loader

HTML

<img src="" alt="Loading..." data-src="images/image-1.jpg">
<img src="" alt="Loading..." data-src="images/image-2.jpg">
<img src="" alt="Loading..." data-src="images/image-3.jpg">
<img src="" alt="Loading..." data-src="images/image-4.jpg">

jQuery

$(window).on("scroll", function() {
    $('img').each(function() {
        if (isScrolledIntoView(this)) {
            $(this).attr('src', $(this).data('src')).removeAttr('data-src');
        }
    });
});

Lihat Demo

---

Sumber: Lupa! :p

Auto Rotating Slideshow

<style>
#slideshow {
  width:200px;
  height:100px;
  background-color:#222;
  margin:0 auto;
}

#slideshow img {display:block;}
</style>
<div id="slideshow"></div>
<script>
//<![CDATA[
(function() {
    var container = document.getElementById('slideshow');
    var slide = [
        "images/slide-1.jpg",
        "images/slide-2.jpg",
        "images/slide-3.jpg",
        "images/slide-4.jpg"
		// dst...
        ];
    var count = 0;
    setInterval(function() {
        container.innerHTML = "<img src='"+slide[count]+"' alt='Slide "+(count+1)+"'>";
        count++;
        if (count == slide.length) {
            count = 0;
        }
    }, 3000); // Tiga detik sekali...
})();
//]]>
</script>

Demo

Memperbesar/Mengubah Ukuran Thumbnail Posting

Pertanyaan Al-Firouz: Tentang bagaimana cara memperbesar thumbnail pada posting auto read-more tanpa JavaScript dengan jQuery:

Dalam pesan Facebook

Pertama-tama, Saya tidak akan memberikan metode mengubah ukuran thumbnail Picasa dengan jQuery terlebih dahulu karena ada cara sederhana yang bisa dilakukan dengan mudah menggunakan JavaScript mentah. Pada intinya, kita hanya mencoba mengubah ukuran thumbnail kecil dari path-nya seperti yang pernah Saya ulas dengan cukup jelas di artikel Optimasi Thumbnail pada Posting Auto Read-More dan Widget Blogger, yaitu dengan cara mengubah ukuran standar thumbnail 72 × 72 piksel s72-c menjadi ukuran yang lain, misalnya s200-c.

Metode 1: Menggunakan JavaScript Murni

Salin kode ini dan letakkan di atas tag </body>:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script>
//<![CDATA[
function resizeThumb(parentID, size) {
    var parent = document.getElementById(parentID),
        image = parent.getElementsByTagName('img');
    for (var i = 0; i < image.length; i++) {
        image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");
        image[i].width = size;
        image[i].height = size;
    }
}
resizeThumb('main-wrapper', 200);
//]]>
</script>
</b:if>
</b:if>

Fungsi dieksekusi pada bagian ini:

resizeThumb('main-wrapper', 200);

main-wrapper adalah ID kolom posting, dan 200 adalah ukuran thumbnail baru. Kode di atas akan mengubah ukuran thumbnail dari 72 × 72 piksel menjadi 200 × 200 piksel.

Ganti juga ukuran width dan height thumbnail posting dalam kode CSS ini:

.post-thumbnail {
  width:72px;
  height:72px;
  float:left;
  margin:0 10px 0 0;
}

… menjadi berukuran sama dengan ukuran pembesaran thumbnail. Menyesuaikan contoh di atas, maka ukuran lebar dan tinggi thumbnail harus diubah menjadi 200px.

Simpan semua perubahan dan lihat hasilnya.

Lihat Sampel

Metode 2: Menggunakan jQuery

Pada intinya cara kerjanya sama, hanya metodenya saja yang berbeda. Salin kode ini dan letakkan di atas kode </head> atau </body>:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script>
//<![CDATA[
function resizeThumb(el, from, to) {
    $(el).each(function() {
        $(this).attr({
            'src': $(this).attr('src').replace('/s'+from+'-c/', '/s'+to+'-c/'),
            'width': to, 'height': to
        });
    });
}
$(function() {
    resizeThumb('.post-thumbnail', '72', '200'); // Ubah ukuran thumbnail dari 72 menjadi 200
});
//]]>
</script>
</b:if>
</b:if>

Di sini Saya menggunakan selektor $('.post-thumbnail') untuk menargetkan thumbnail posting secara langsung. Anda bisa saja mengubah selektornya menjadi $('#main-wrapper img') atau $('.post img:first') atau bahkan yang lainnya jika template Anda memiliki struktur elemen yang unik. Pada intinya, targetkan gambarnya! Alasan Saya tidak menggunakan nama kelas thumbnail pada versi manipulasi JavaScript adalah karena Saya tidak ingin mengambil resiko mengingat document.getElementsByClassName tidak didukung oleh beberapa peramban tua - When can I use getElementsByClassName?

Lihat Sampel

Thumbnail Lain?

Bukan hanya thumbnail pada posting saja yang bisa diubah ukurannya, tapi juga thumbnail-thumbnail pada widget lain, misalnya pada widget Posting Populer yang caranya juga pernah dituliskan oleh MS-Potilas di artikelnya (Kebetulan Saya mendapatkan ide JavaScript mentahnya dari sana). Di sini Saya hanya mengonversi kodenya menjadi plugin. Asalkan thumbnail tersebut diunggah pada direktori Picasa, maka kita bisa menemukan ciri khususnya dalam path lokasi gambar seperti s72-c, s200, s1600 dan lain sebagainya. Dari kunci itulah kita bisa mengubah ukuran-ukuran gambar menggunakan JavaScript dengan cara mengganti besarannya. berikut ini adalah contoh sederhana bagaimana cara memperbesar thumbnail pada widget Posting Populer:

Versi JavaScript

<script>
//<![CDATA[
function resizeThumb(parentID, size) {
    var parent = document.getElementById(parentID),
        image = parent.getElementsByTagName('img');
    for (var i = 0; i < image.length; i++) {
        image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");
        image[i].width = size;
        image[i].height = size;
    }
}
// Mengubah ukuran thumbnail widget Posting Populer
resizeThumb('PopularPosts1', 200);
//]]>
</script>

Versi jQuery

<script>
//<![CDATA[
function resizeThumb(el, from, to) {
    $(el).each(function() {
        $(this).attr({
            'src': $(this).attr('src').replace('/s'+from+'-c/', '/s'+to+'-c/'),
            'width': to, 'height': to
        });
    });
}
// Mengubah ukuran thumbnail widget Posting Populer
$(function() {
    resizeThumb('#PopularPosts1 img', '72', '200');
});
//]]>
</script>

Tag kondisional bisa dilepaskan jika tujuan kita adalah untuk mengubah ukuran thumbnail widget, karena umumnya widget muncul pada semua tipe halaman.

Catatan Tambahan: Saya melihat beberapa pembaca yang mendeklarasikan fungsi resizeThumb() berkali-kali pada tempat yang berbeda. Padahal fungsi ini cukup dinyatakan satu kali saja (Saya sarankan untuk meletakkannya di area <head>):

function resizeThumb(parentID, size) { ... }

Setelah itu Anda bisa menggunakan fungsi tersebut sebanyak yang Anda mau pada elemen mana saja:

resizeThumb('Blog1', 300);
resizeThumb('PopularPosts1', 200);
resizeThumb('Widget1', 50);
...