Dummy Blog

Jumat, 16 November 2012

Kotak Penelusuran Blogger dengan Ajax JQuery

Ajax Search Form with JQuery — Kotak Penelusuran Blogger dengan Ajax JQuery

Beberapa waktu yang lalu Saya pernah menuliskan cara menampilkan hasil penelusuran dengan JSON Blogger tanpa harus berpindah dari halaman awal menuju halaman hasil penelusuran dengan JavaScript (Anda bisa membacanya di sini).

Melalui JQuery $.ajax() kita bisa meniadakan penyisipan script callback dan langsung memanggil JSON dengan cara seperti ini:

$('#search-form').on("submit", function() {
    $.ajax({
        url: '../feeds/posts/summary?alt=json-in-script&q=KATA_KUNCI',
        type: 'get',
        dataType: 'jsonp',
        success: function(json) {
            ...
        }
    });
});

Sehingga jika dijabarkan akan menjadi seperti ini:

HTML Formulir

<form action="/search" id="ajax-search-form">
    <input type="text" name="q">
    <input type="submit" value="Search">
</form>

JQuery

(function($) {
    var $form = $('#ajax-search-form'),
        $input = $form.find(':text');
    $form.append('<div id="search-result"></div>');
    var $result_container = $('#search-result');
    $form.on("submit", function() {
        var keyword = $input.val();
        $result_container.show().html('Loading...');
        $.ajax({
            url: 'http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
            type: 'get',
            dataType: 'jsonp',
            success: function(json) {
                var entry = json.feed.entry,
                    link, skeleton = "";
                if (entry !== undefined) {
                    skeleton = '<h4>Search results for keyword &quot;' + keyword + '&quot;</h4>';
                    skeleton += '<a class="close" href="/">&times;</a><ol>';
                    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") {
                                link = entry[i].link[j].href;
                            }
                        }
                        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
                    }
                    skeleton += '</ol>';
                    $result_container.html(skeleton);
                } else {
                    $result_container.html('<a class="close" href="/">&times;</a><strong>No result!</strong>');
                }
            },
            error: function() {
                $result_container.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>');
            }
        });
        return false;
    });
    $form.on("click", ".close", function() {
        $result_container.fadeOut();
        return false;
    });
})(jQuery);

Lihat Demo

Cara Kerja

Pertama-tama kita tangkap beberapa elemen penting yaitu formulir pencarian dan elemen input kata kunci pencarian:

var $form = $('#ajax-search-form'), // Mendapatkan elemen formulir
    $input = $form.find(':text'); // Mendapatkan elemen input bertipe teks (penampung kata kunci pencarian)

Sisipkan sebuah elemen HTML secara tidak langsung sebagai kontainer hasil pencaran:

$form.append('<div id="search-result"></div>');
var $result_container = $('#search-result');

Setelah itu kita berlakukan event .submit() atau .on("submit") pada formulir untuk kemudian kita bisa langsung memproses data JSON yang akan ditransfer pada saat yang bersamaan ketika kita menekan tombol Enter pada papan ketik atau mengeklik tombol penelusuran di dalam formulir:

$form.on("submit", function() {
    $.ajax(url, type, dataType, success, error); // Dapatkan data dan proses data di sini...
    return false; // <= Ini digunakan untuk mencegah formulir membawa kita menuju halaman hasil penelusuran saat kita men-submit kata kunci pencarian
});

Pengambilan data JSON dilakukan oleh JQuery $.ajax(), sehingga kita tidak perlu menyisipkan script callback ke dalam area <head> seperti dalam metode JavaScript mentah pada umumnya:

$.ajax({
    url: 'http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
    type: 'get',
    dataType: 'jsonp',
    success: function(json) {
        var entry = json.feed.entry,
            link, skeleton = "";
        if (entry !== undefined) {
            skeleton = '<h4>Search results for keyword &quot;' + keyword + '&quot;</h4>';
            skeleton += '<a class="close" href="/">&times;</a><ol>';
            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") {
                        link = entry[i].link[j].href;
                    }
                }
                skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
            }
            skeleton += '</ol>';
            $result_container.html(skeleton);
        } else {
            $result_container.html('<a class="close" href="/">&times;</a><strong>No result!</strong>');
        }
    },
    error: function() {
        $result_container.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>');
    }
});

keyword adalah variabel. Nilainya diambil dari elemen input teks:

var keyword = $input.val();
// `../feeds/posts/summary?alt=json-in-script&q=keyword&max-results=9999`

Integrasi Widget ke Blogger

Widget ini hanya akan bekerja jika blog Anda sudah dilengkapi dengan JQuery.

Pertama-tama masuk ke halaman Tata Letak, kemudian tambahkan sebuah elemen halaman HTML/JavaScript. Salin kode ini dan letakkan di dalam formulirnya:

<style type="text/css" scoped="scoped">
#ajax-search-form {
  position:relative;
  font:normal normal 13px/normal Arial,Sans-Serif;
}
#ajax-search-form a {
  color:#741F27;
  text-decoration:none;
}
#ajax-search-form input {
  border:1px solid #ccc;
  border-top-color:#999;
  background-color:white;
  font:inherit;
  color:black;
  margin:0 0;
  padding:5px 5px;
  width:180px;
}
#ajax-search-form input::-moz-focus-inner {
  margin:0;
  padding:0;
  border:none;
  outline:none;
}
#ajax-search-form input[type="submit"] {
  width:auto;
  background-color:#084670;
  border-color:transparent;
  color:#B4D8F0;
  font-weight:bold;
  cursor:pointer;
  padding-left:7px;
  padding-right:7px;
}
#ajax-search-form input[type="submit"]:hover,
#ajax-search-form input[type="submit"]:focus {background-color:#083E5F}
#search-result {
  border:1px solid #bbb;
  background-color:white;
  padding:10px 15px;
  margin:2px 0;
  width:auto;
  height:auto;
  position:absolute;
  top:100%;
  left:0;
  z-index:99;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  display:none;
}
#search-result ol,
#search-result li,
#search-result h4 {
  margin:0;
  padding:0;
}
#search-result h4,
#search-result strong {
  display:block;
  margin:0 30px 10px 0;
}
#search-result ol {margin:0 0 10px 28px}
#search-result ol a:hover {text-decoration:underline}
#search-result .close {
  display:block;
  position:absolute;
  top:6px;
  right:10px;
  line-height:normal;
  color:#17950F;
}
#search-result strong {color:#B75252}
</style>
<form action="/search" id="ajax-search-form">
    <input type="text" name="q" />
    <input type="submit" value="Search" />
</form>
<script type="text/javascript">
(function($) {

    var $form = $('#ajax-search-form'),
        $input = $form.find(':text');
    
    // Append a search result container to the search form
    $form.append('<div id="search-result"></div>');
    var $result_container = $('#search-result');
    
    // When the keyword is submitted...
    $form.on("submit", function() {

        // Get the input value
        var keyword = $input.val();

        // Show the search result container and insert a `Loading...` text
        $result_container.show().html('Loading...');

        // Get the blog JSON via $.ajax() to show the search result
        // The URL format: http://blog_name.blogspot.com/feeds/posts/summary?alt=json-in-script&q={THE_KEYWORD}&max-results=9999
        $.ajax({
            url: 'http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
            type: 'get',
            dataType: 'jsonp',

            // If success, grab the search result list...
            success: function(json) {
                var entry = json.feed.entry,
                    link, skeleton = "";
                if (entry !== undefined) {
                    skeleton = '<h4>Search results for keyword &quot;' + keyword + '&quot;</h4>';
                    skeleton += '<a class="close" href="/">&times;</a><ol>';
                    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") {
                                link = entry[i].link[j].href;
                            }
                        }
                        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
                    }
                    skeleton += '</ol>';
                    $result_container.html(skeleton);
                } else {
                    // If the JSON is empty ... (entry === undefined)
                    // Show the `not found` or `no result` message
                    $result_container.html('<a class="close" href="/">&times;</a><strong>No result!</strong>');
                }
            },
            error: function() {

                // If error, show an error message
                $result_container.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>');
            }
        });
        return false;
    });

    // Fade out the search result container if the close button is clicked
    $form.on("click", ".close", function() {
        $result_container.fadeOut();
        return false;
    });

})(jQuery);
</script>

Ganti kode yang Saya beri tanda dengan URL blog Anda kemudian klik Simpan Widget.

Lihat Demo

Label: JQuery, JSON, JSON Blogger, Sidebar, Tingkat Lanjut, Widget

# posted by Taufik Nurrohman @ November 16, 2012 1 comments

Minggu, 15 Juli 2012

Animasi Blog Roll

var $ul = $('#blog-roll'),
    roll = function() {
        $ul.find('li').first().slideUp('slow', function() {
            $(this).appendTo($(this).parent()).fadeIn();
        });
    },
    anim = setInterval(roll, 3000);

// Pause on hover...
$ul.hover(function() {
    clearInterval(anim);
}, function() {
    setInterval(roll, 3000);
});

Demo

Label: Code Snippet, Efek, JQuery, Slideshow, Tautan, Widget

# posted by Taufik Nurrohman @ Juli 15, 2012 0 comments

Selasa, 10 Juli 2012

Rilis: Galleria V2 - Widget Masonry untuk Blogger

Pembaharuan 26 Mei 2013: Terjadi perubahan besar pada penulisan variabel-variabel di dalam widget ini. Saya terpaksa melakukannya demi pengembangan dan perbaikan widget yang lebih leluasa ke depannya agar tidak mengganggu para pemakai widget ini. Bagi Anda yang sudah memakai widget ini sebelum tanggal 26 Mei 2013, Anda akan mendapatkan teks peringatan bahwa widget Anda harus segera diperbaharui.

Perubahan fitur: (1) Opsi showThumbnails ditiadakan (2) Menambahkan fitur Infinite Scroll (3) Mengganti parameter indeks feed dari window.location.search menjadi window.location.hash dengan bantuan event hashchange, sehingga pengguna tidak perlu memuat ulang halaman secara keseluruhan hanya untuk mengubah window.location.search pada address bar.

Rilis: Galleria V2 - Widget Masonry untuk Blogger

Sebelum ini Saya telah membuat widget Galleria versi pertama, kali ini Saya membuat versi yang ke dua dengan dua macam pilihan layout dan konfigurasi yang lebih lengkap.
Masalah besar yang terjadi pada versi pertama adalah dia menampilkan semua feed begitu saja sehingga proses muat widget menjadi begitu lama. Kita tidak memiliki kemampuan untuk memotong proses pemuatan feed kecuali dengan cara menambahkan fitur navigasi. Inilah kabar baiknya:

Lihat Demo

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

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:

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<link rel="stylesheet" type="text/css" href="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/theme/light.min.css"/>
<div id="dte-masonry-container"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/js/jquery.masonry.min.js" type="text/javascript"></script>
<script src="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/js/post.brick.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![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: "http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/img/meee.png", // Fallback thumbnail for posts without images
    loadingText: "Loading...", // `Loading...` text for loading indicator
    loadedText: "Loaded.", // `Loaded.` text for loading indicator
    infiniteScroll: false, // Enable infinite scroll?
    bottomTolerance: 30, // Bottom tolerance for the end of page indicator in infinite scroll

    // Shortcuts for Masonry Plugin Configuration (And Some Local Configuration)
    masonryConfig: {
        itemSelector: '.json_post',
        fadeSpeed: 400, // Speed of thumbnail fading effect
        resizeSpeed: 1000, // Speed of thumbnail resizing effect
        isAnimated: false,
        animateWithTransition: true, // Animate each brick with CSS transition instead of JQuery `.animate()`?
        animationOptions: {
            queue: false,
            duration: 1000,
            easing: null
        },
        isFitWidth: true,
        gutterWidth: 0,
        isRTL: false
    }

});
//]]>
</script>

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

Kode yang Saya garis bawahi adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut!

Pengaturan Lanjutan

Pengaturan widget ini dibagi menjadi dua, yaitu pengaturan JSON Blogger dan pengaturan Plugin Masonry:

Pengaturan JSON Blogger

Opsi	Keterangan
viewMode	Digunakan untuk menentukan tipe tampilan widget. Nilainya ada dua macam: `"summary"` untuk menampilkan galeri berupa daftar gambar beserta ringkasannya, `"thumbnail"` untuk menampilkan galeri berupa foto saja
homePage	Digunakan untuk menentukan URL blog sumber feed
numPosts	Digunakan untuk menentukan jumlah posting yang akan dipanggil setiap satu kali permintaan
numChars	Digunakan untuk menentukan jumlah karakter ringkasan/paragraf jika mode widget berupa `"summary"`
squareImage	Jika bernilai `true` semua gambar dalam widget akan dikonversi menjadi berbentuk kotak persegi. Ini adalah versi kompresi Picasa versi path gambar `s72-c`, hanya saja di sini Saya buat lebih fleksibel (ukurannya bisa diperbesar/diperkecil) - Tentang metode kompresi gambar Picasa
newTabLink	Jika bernilai `true`, semua tautan dalam widget akan terbuka di tab/jendela baru
columnWidth	Digunakan untuk menentukan lebar setiap kolom/item posting. Menentukan lebar pada opsi ini juga akan mengubah resolusi gambar
subHeaderText	Digunakan untuk mengatur teks deskripsi kecil di bawah header pada mode `"summary"` (Misal: Diposting oleh Taufik di 21 April 2012)
monthNames	Ini adalah daftar variabel nama-nama bulan. Ganti namanya sesuka hati sesuai dengan sistem penanggalan di negara Anda
commentLabel	Abaikan saja. Jika nilainya diganti, maka label komentar di bawah item posting akan berubah. Misalnya: 10 Komentar dari Pembaca akan tampil jika opsi `commentLabel` bernilai `"Komentar dari Pembaca"`. Jika dikosongkan, label akan menyesuaikan diri berdasarkan format bahasa dalam pengaturan blog Anda
navText	prev digunakan untuk menentukan label navigasi mundur
	next digunakan untuk menentukan label navigasi maju
	disabled digunakan untuk menentukan label navigasi tak aktif
	data digunakan untuk menentukan label deskripsi posisi halaman dan jumlah total halaman
postCategory	Secara normal bernilai `null`. Ganti nilainya dengan nama label yang spesifik untuk menyortir item feed berdasarkan kategori khusus. Misal: `postCategory: "JQuery"` akan membuat widget ini menampilkan posting-posting yang memiliki label JQuery
fallbackThumb	Gambar cadangan jika posting yang tampil tidak memiliki gambar
loadingText	Deskripsi indikator sedang memuat saat sedang memuat
loadedText	Deskripsi indikator sedang memuat saat semua item telah selesai dimuat
infiniteScroll	Jika bernilai `true`, navigasi halaman tidak berfungsi lagi. Widget akan secara otomatis memuat item-item posting baru di bawah item-item posting yang sudah ada setiap kali gulungan layar telah mencapai jarak yang diinginkan (dalam hal ini, mencapai posisi navigasi widget terdekat terhadap bagian bawah layar)
bottomTolerance	Digunakan untuk menentukan toleransi jarak bawah infinite scroll untuk mengurangi kalkulasi posisi navigasi widget terdekat terhadap bagian bawah layar.

Konfigurasi Plugin Masonry

Opsi	Keterangan
fadeSpeed	Digunakan untuk menentukan kecepatan fade pada gambar
resizeSpeed	Digunakan untuk menentukan kecepatan perubahan ukuran kontainer gambar pada mode widget `"thumbnail"`
isAnimated	Jalan penghubung untuk opsi `isAnimated` pada plugin Masonry. Jika bernilai `true` efek animasi akan diterapkan dengan bantuan JQuery `.animate()`. Saat jendela peramban diperkecil/diperbesar, setiap item akan berubah posisi dengan efek animasi
animateWithTransition	Alternatif lain untuk menganimasikan widget. Set opsi `isAnimated` menjadi `false`, kemudian set opsi `animateWithTransition` menjadi `true` untuk menganimasikan masonry brick dengan CSS Transisi. Ini berhubungan dengan performa plugin. Menugaskan plugin untuk melakukan perhitungan posisi sekaligus menganimasikannya terkadang menjadi sesuatu yang berat bagi peramban. Jadi kita bisa memanfaatkan CSS Transisi —yang merupakan fitur bawaan pada peramban-peramban moderen— untuk menganimasikannya agar kerja peramban tidak terlalu berat dalam menangani JavaScript. Tentang metode animasi dengan CSS Transisi pada plugin Masonry bisa dibaca di sini
animationOptions	Jalan penghubung untuk opsi `animationOptions` pada plugin Masonry. Digunakan untuk mengonfigurasikan efek animasi JavaScript (`isAnimated:true`)
isFitWidth	Jalan penghubung untuk opsi `isFitWidth` pada plugin Masonry. Jika bernilai `true`, kontainer akan menyusut sesuai dengan kalkulasi jumlah semua item dalam satu baris, sehingga widget Masonry bisa berada tepat di tengah-tengah halaman - Selengkapnya tentang `isFitWidth`
gutterWidth	Jalan penghubung untuk opsi `gutterWidth` pada plugin Masonry. Digunakan untuk menentukan gutter/kerenggangan antaritem pada sisi dalam. Tidak terlalu penting - Selengkapnya tentang `gutterWidth`
isRTL	Jalan penghubung untuk opsi `isRTL` pada plugin Masonry. Jika bernilai `true`, plugin akan menganimasikan item dari kanan ke kiri (RTL = Right To Left) - Selengkapnya tentang `isRTL`

Lebih Banyak Demo:

Pengembangan Widget

Proyek ini Saya hosting di Google Code: http://code.google.com/p/hompimpa/source/browse/trunk/Blogger-Masonry-Widget/ Jika Anda berminat untuk mengembangkan widget ini, Saya sudah menyimpan semuanya di sana.

JQuery Masonry Widget for Blogger JSON by Taufik Nurrohman is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License

Label: JavaScript, JQuery, Posting, Tingkat Lanjut, Widget

# posted by Taufik Nurrohman @ Juli 10, 2012 0 comments

Rabu, 21 Maret 2012

Slideshow Otomatis Blogger dengan TinyCarousel (Custom)

Menjawab permintaan dari It's a Hardlife, Saya mencoba untuk memodifikasi JQuery Carousel yang sederhana karena slideshow versi Agile Carousel itu terlalu rumit. Saya mengambil TinyCarousel sebagai bahan utama, yang pada awalnya hanya berupa slideshow gambar biasa untuk dimodifikasi lagi sesuai dengan tipografi slideshow Agile Carousel sehingga setiap slide menjadi lebih kaya akan konten:

Lihat Demo

Tahap 1: Mengedit Template

Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:

Temukan kode ini:

]]></b:skin>

Salin kode di bawah ini, kemudian letakkan di atasnya:

/**
 * Custom TinyCarousel by Taufik Nurrohman
 * Visit:http://hompimpaalaihumgambreng.blogspot.com
 */

#tinycarousel {
  width:532px; /* Lebar Slideshow */
  height:1%;
  overflow:hidden;
  font:normal 10px/12px Arial,Sans-Serif;
  color:#666;
  margin:30px auto;
}

#tinycarousel .viewport {
  height:336px;
  overflow:hidden;
  position:relative;
  background-color:#eee;
  border:1px solid #ccc;
}

#tinycarousel ul.overview {
  list-style:none !important;
  position:absolute;
  padding:0 0 !important;
  margin:0 0 !important;
  width:240px;
  left:0;
  top:0;
}

#tinycarousel ul.overview li {
  list-style:none !important;
  float:left;
  margin:5px 0 5px 5px !important;
  padding:0 0 !important;
  height:auto !important;
  width:168px; /* Lebar satu unit slide */
  background-color:white;
  color:#666;
  border:1px solid #ccc;
}

#tinycarousel .inner {
  margin:10px;
  height:260px;
  overflow:hidden;
}

#tinycarousel img {
  width:auto;
  height:170px;
  border:none;
  outline:none;
  padding:0 0;
  margin:0 0;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}

#tinycarousel h6 {
  border-top:1px solid #ddd;
  font:normal bold 11px/12px Verdana,Tahoma,Arial,Sans-Serif;
  color:#39f;
  margin:9px 0 5px;
  padding:10px 0 0;
  background:none;
  overflow:hidden;
}

#tinycarousel h6 a {
  color:inherit;
  text-decoration:none;
  border:none;
}

#tinycarousel p {
  margin:0 0;
  padding:0 0;
  overflow:hidden;
}

#tinycarousel em {
  font-style:normal;
  color:#aaa;
  background-color:#333;
  background-image:-webkit-linear-gradient(top,#555,#333);
  background-image:-moz-linear-gradient(top,#555,#333);
  background-image:-ms-linear-gradient(top,#555,#333);
  background-image:-o-linear-gradient(top,#555,#333);
  background-image:linear-gradient(top,#555,#333);
  display:block;
  padding:5px 10px;
  margin:0 0;
}

#tinyarrow {
  display:block;
  background-color:white;
  border:1px solid #ccc;
  padding:5px;
  margin:2px 0 0;
  overflow:hidden;
}

#tinyarrow .buttons {
  background-color:#666;
  border:none;
  outline:none;
  display:block;
  padding:2px 5px;
  overflow:hidden;
  position:relative;
  float:left;
  margin:0 1px;
  color:white;
  text-decoration:none;
  font-weight:bold;
}

#tinyarrow .disable {display:none}

#tinyarrow .buttons:active {
  background-color:#900;
  position:relative;
  top:1px;
}

#tinyarrow span {
  float:right;
  font:normal bold 11px/12px Tahoma,Verdana,Arial,Sans-Serif;
  margin:2px 5px 0 0;
}

/*
 * Orientasi Vertikal
 * CSS diatur secara manual pada versi aslinya
 * tapi di sini semuanya sudah cukup teratur
 */
#tinycarousel.vertical {width:242px}
#tinycarousel.vertical ul.overview li {
  float:none;
  display:block;
  width:228px;
  margin:5px auto 10px !important;
}

#tinycarousel.vertical img {
  width:100%;
  height:auto;
}

Kemudian temukan kode ini:

</head>

Salin kode di bawah ini kemudian letakkan di atasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
    $('#tinycarousel').tinycarousel({
        start       : 1,
        display     : 1,
        axis        : 'x',
        interval    : false,
        intervaltime: 3000,
        animation   : true,
        duration    : 1000,
        callback    : null
    }); 
});
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/jquery.tinycarousel-custom.js' type='text/javascript'></script>

Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut!

Tahap 2: Meletakkan Slideshow

Masuklah ke menu Tata Letak kemudian tambahkan sebuah elemen halaman HTML/JavaScript yang terletak di bagian atas posting:

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<script type="text/javascript">
var showPostDate_g  = true,
    showComm_g      = true,
    slideOpenNewTab = true,
    idMode          = true,
    slidebyLabels   = false,
    slideLabelName  = "Mengenai",
    pBlank          = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
    text            = "Komentar",
    numposts_g      = 7,
    numchars_g      = 100,
    showText        = "Menampilkan",
    postText        = "Posting",
    tinyprevNav     = "&lt;",
    tinynextNav     = "&gt;",
    home_page       = "http://nama_blog.blogspot.com";
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/autoContent4TinyCarousel.js" type="text/javascript"></script>

Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda lalu klik Simpan Template.

Konfigurasi Slideshow - JSON & Custom TinyCarousel

Pengaturan JSON - Auto Content Slider

Opsi	Keterangan
showPostDate_g	Jika bernilai `true`, bulan terbit artikel akan ditampilkan. Jika bernilai `false`, bulan terbit artikel akan disembunyikan.
slideOpenNewTab	Jika bernilai `true`, setiap tautan akan terbuka di tab/jendela baru. Jika bernilai `false`, setiap tautan akan terbuka di tab/jendela yang sama.
idMode	Jika bernilai `true`, sistem penanggalan akan berubah menjadi berbahasa Indonesia. Jika bernilai `false`, sistem penanggalan akan berubah menjadi berbahasa Inggris.
slidebyLabels	Ubah nilainya menjadi `true` jika ingin menampilkan daftar slide artikel dengan label yang spesifik. Setelah itu tentukan nama label pada variabel `slideLabelName`.
slideLabelName	Digunakan untuk menentukan nama label yang spesifik setelah mengubah nilai `slidebyLabels` menjadi `true`.
pBlank	Adalah gambar cadangan yang akan ditampilkan jika artikel tidak memiliki gambar.
text	Digunakan untuk menentukan label jumlah komentar (contoh: 7 Komentar).
numposts_g	Digunakan untuk menentukan jumlah slide.
numchars_g	Digunakan untuk menentukan jumlah karakter ringkasan artikel.
showText & postText	Digunakan untuk mengubah teks "Menampilkan" N "Posting".
tinyprevNav	Digunakan untuk menentukan simbol navigasi mundur pada slideshow.
tinynextNav	Digunakan untuk menentukan simbol navigasi maju pada slideshow.
home_page	URL blog Anda.

Konfigurasi Slideshow

Terdapat beberapa konfigurasi standar yang sangat umum dijumpai pada plugin animasi JQuery. Yaitu kecepatan, delay, opsi animasi otomatis dan hal-hal umum lainnya:

Opsi	Nilai	Keterangan
start	1, 2, 3, ... (urutan)	Digunakan untuk menentukan slide nomor ke berapa yang akan tampil terlebih dulu saat halaman dikunjungi.
display	1, 2, 3, ... (jumlah)	Digunakan untuk menentukan berapa banyak slide yang akan bergeser dalam sekali klik navigasi/sekali animasi.
axis	'x'	Nilai `'x'` akan membuat orientasi slideshow menjadi horizontal, nilai `'y'` akan membuat orientasi slideshow menjadi vertikal.
axis	'y'
interval	true	Nilai `true` akan membuat slideshow bergerak secara otomatis, nilai `false` akan membuat slideshow mati dan hanya bisa bergerak jika Anda mengeklik tombol navigasi.
interval	false
intervaltime	500, 3000, ... (kecepatan)	Digunakan untuk menentukan lama waktu slide berhenti diantara animasi (hanya berlaku untuk animasi otomatis).
animation	true	Nilai `true` akan membuat slideshow bergerak dengan efek animasi, nilai `false` akan membuat slideshow bergerak kaku dan tampak meloncat.
animation	false
duration	500, 3000, ... (kecepatan)	Digunakan untuk menentukan kecepatan animasi perpindahan slide.
callback	null	Digunakan untuk menerapkan fungsi tambahan yang akan dieksekusi setiap kali slide berpindah.
callback	function() { ... }

Contoh Konfigurasi Animasi Otomatis

$('#tinycarousel').tinycarousel({
    start       : 1,
    display     : 1,
    axis        : 'x',
    interval    : true,
    intervaltime: 3000,
    animation   : true,
    duration    : 1000,
    callback    : null
});

Lihat Demo

Contoh Konfigurasi Orientasi Vertikal

$('#tinycarousel').tinycarousel({
    start       : 1,
    display     : 1,
    axis        : 'y',
    interval    : true,
    intervaltime: 3000,
    animation   : true,
    duration    : 1000,
    callback    : null
});

Lihat Demo

Contoh Konfigurasi Menggeser Slide 3 Buah/Klik Navigasi

$('#tinycarousel').tinycarousel({
    start       : 1,
    display     : 3,
    axis        : 'x',
    interval    : false,
    intervaltime: 3000,
    animation   : true,
    duration    : 1000,
    callback    : null
});

Lihat Demo

Label: Gambar, JQuery, Menengah, Slideshow, Widget

# posted by Taufik Nurrohman @ Maret 21, 2012 0 comments

Kamis, 15 Maret 2012

Dua Versi Konverter HTML

HTML Convertion Tool — Membuat konverter HTML dengan JavaScript atau JQuery

Versi JavaScript Mentah

Konverter HTML dengan JavaScript mentah bisa dibuat dengan mudah. Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin kode ini dan letakkan di dalam formulirnya:

<style type="text/css">
#codes {
  border:1px solid #666;
  width:98%;
  height:200px;
  margin:5px auto 10px;
  display:block;
}

.button-group {
  margin:0 auto;
  text-align:center;
}
</style>
<textarea id="codes"placeholder="Tulis/paste kode di sini lalu klik 'Konversi'"></textarea>
<div class="button-group">
    <button onclick="cdConvert();">Konversi</button>
    <button onclick="cdClear();">Bersihkan</button>
</div>
<script type="text/javascript">
function cdClear() {
    var wtarea = document.getElementById('codes');
    wtarea.value = '';
}

function cdConvert() {
    var ctarea = document.getElementById('codes'),
        cv = ctarea.value;
    cv = cv.replace(/&/g, "&amp;");
    cv = cv.replace(/'/g, "&#039;");
    cv = cv.replace(/"/g, "&quot;");
    cv = cv.replace(/</g, "&lt;");
    cv = cv.replace(/>/g, "&gt;");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
};
</script>

Klik Simpan.

Lihat Demo

Versi JQuery

Terserah apakah kode ini akan Anda letakkan di dalam halaman statis atau widget, cukup pastikan bahwa template Anda sudah dilengkapi dengan JQuery, maka konverter HTML ini akan bekerja:

<style type="text/css">
#codes {
  border:1px solid #666;
  width:98%;
  height:200px;
  margin:5px auto 10px;
  display:block;
}

.button-group {
  margin:0 auto;
  text-align:center;
}
</style>
<textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'"></textarea>
<div class="button-group">
    <button id="convert">Konversi</button>
    <button id="clear">Bersihkan</button>
</div>
<script type="text/javascript">
$(function() {
    $('button#convert').click(function() {
        $('textarea#codes').val(
        $('textarea#codes').val()
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#39;")
        ).focus().select();
        return false;
    });
    $('button#clear').click(function() {
        $('textarea#codes').val('').focus().select();
        return false;
    });
});
</script>

Klik Simpan.

Lihat Demo

Label: Browser, Code Snippet, JQuery, Regular Expression, Widget

# posted by Taufik Nurrohman @ Maret 15, 2012 0 comments

Selasa, 28 Februari 2012

Automatic Slideshow for Blogger with 3D Gallery

A letter from Arhan Tubar:
Hello
I like very much the automatic slideshow tutorial and I was wondering if you can help me with something.
I would like to make the slideshow from this link:
http://tympanus.net/codrops/2012/02/06/3d-gallery-with-css3-and-jquery/
...to be automatic like in your tutorials.
Can you help me with this request?
Thank you in advance.

My answer is, “Yes, why not. This is just about inserting images into 3D Gallery markup. A special post for you. Sorry about my bad English” :p

View Demo

Step 1: Edit Your Template

First go to the Template menu and then click Edit HTML and click Continue/Proceed:

Find this code:

]]></b:skin>

Copy the code below and paste it above ]]></b:skin>:

/*
 * Auto Content 4 3D Gallery by Taufik Nurrohman
 * Visit: http://hompimpaalaihumgambreng.blogspot.com
 */

.dg-container {
  width:100%;
  height:450px;
  position:relative;
  margin:0 auto;
}

.dg-wrapper {
  width:370px;
  height:300px;
  margin:0 auto;
  position:relative;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  transform-style:preserve-3d;
  -webkit-perspective:1000px;
  -moz-perspective:1000px;
  -ms-perspective:1000px;
  -o-perspective:1000px;
  perspective:1000px;
}

.dg-wrapper a {
  width:370px;
  height:auto;
  display:block;
  position:absolute;
  left:0;
  bottom:0;
  text-decoration:none;
  -webkit-box-shadow:0 10px 20px rgba(0,0,0,.3);
  -moz-box-shadow:0 10px 20px rgba(0,0,0,.3);
  box-shadow:0 10px 20px rgba(0,0,0,.3);
}

.dg-wrapper a.dg-transition {
  -webkit-transition:all 1s ease-in-out;
  -moz-transition:all 1s ease-in-out;
  -ms-transition:all 1s ease-in-out;
  -o-transition:all 1s ease-in-out;
  transition:all 1s ease-in-out;
}

.dg-wrapper a img {
  width:100%;
  height:auto;
  border:none;
  outline:none;
  background-color:white;
  padding:0 0;
  margin:0 0;
  display:block;
}

.dg-wrapper a div {
  font-style:italic;
  text-align:center;
  line-height:50px;
  text-shadow:1px 1px 1px rgba(255,255,255,.5);
  color:#333;
  font-size:16px;
  width:100%;
  bottom:-55px;
  display:none;
  position:absolute;
}

.dg-wrapper a.dg-center div {
  display:block;
  font:normal normal 14px/1.4 "Times New Roman",Times,Serif;
  font-style:italic;
}

.dg-wrapper div a {text-decoration:none}

.dg-container nav {
  width:58px;
  position:absolute;
  z-index:1000;
  bottom:40px;
  left:50%;
  margin-left:-43px;
  padding:10px 15px;
}

.dg-container nav span {
  text-indent:-9000px;
  float:left;
  cursor:pointer;
  width:24px;
  height:25px;
  opacity:.8;
  background:transparent url('http://4.bp.blogspot.com/-qV9_Htfqexw/T02JMiWMUSI/AAAAAAAACQs/E5yAia_KzCo/s1600/arrows.png') no-repeat top left;
}

.dg-container nav span:hover {opacity:1}

.dg-container nav span.dg-next {
  background-position:top right;
  margin-left:10px;
}

/* End 3D Gallery */

Then find this code:

</head>

Copy the code below and paste it above:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript' src='http://reader-download.googlecode.com/svn/trunk/modernizr.custom.53451.js'></script>
<script type='text/javascript' src='http://reader-download.googlecode.com/svn/trunk/jquery.gallery.js'></script>
<script type='text/javascript'>
$(window).bind("load", function() {
    $('#dg-container').gallery({autoplay:false});
});
</script>

Save your template.

The underlined code is JQuery. If your template already have a JQuery, remove the underlined code! We just need one forever.

Step 2: Put the Slideshow

Go to the Layout menu, then add a new HTML/JavaScript page element that placed above the posts:

Copy the code below and paste it on the form:

<script type="text/javascript">
var showPostDate_g  = true,
    showComm_g      = true,
    slideOpenNewTab = true,
    idMode          = false,
    slidebyLabels   = false,
    slideLabelName  = "Your Specific Post Label",
    pBlank          = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
    text            = "Comments",
    numposts_g      = 4,
    home_page       = "http://your_blog.blogspot.com";
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/autoContent43DGallery.js"></script>

Replace the URL http://your_blog.blogspot.com with your blog URL.

Configuring the Slideshow

We have to set two opstions: JSON and JQuery .gallery()
JSON Configuration - Auto Content Slider
Option Keterangan
showPostDate_g If true, the post date will appear. If false, the post date will not appear.
slideOpenNewTab If true, every link will automatically open in new tab/new window.
idMode If true, the post date format will turn into Indonesian. If false, the post date format will turn into English.
slidebyLabels Change to true if you want to sort the posts by a specific label. Then, set the name of your specific label to the slideLabelName.
slideLabelName Used to determine the specific label names after changing the slidebyLabels value to true.
pBlank A "no image" image.
text Used to determine the comments label (e.g: 7 Comments).
numposts_g Used to set the number of slides.
home_page Your blog URL.

JSON Configuration - Auto Content Slider
Option	Keterangan
showPostDate_g	If `true`, the post date will appear. If `false`, the post date will not appear.
slideOpenNewTab	If `true`, every link will automatically open in new tab/new window.
idMode	If `true`, the post date format will turn into Indonesian. If `false`, the post date format will turn into English.
slidebyLabels	Change to `true` if you want to sort the posts by a specific label. Then, set the name of your specific label to the `slideLabelName`.
slideLabelName	Used to determine the specific label names after changing the `slidebyLabels` value to `true`.
pBlank	A "no image" image.
text	Used to determine the comments label (e.g: 7 Comments).
numposts_g	Used to set the number of slides.
home_page	Your blog URL.

3D Gallery Configuration

Just two options: true or false. If true, the slideshow will move automatically, if false, the slideshow will move by it's navigation:

$(window).bind("load", function() {
    $('#dg-container').gallery({
        autoplay:false // true or false
    });
});

Few suggestions: This slideshow is only use CSS3 Transition for the animation machine. This fact will be very closely related to the browser support (although we have used the Modernizr script so we will get a very nice fallback slideshow for the browser that does not support). If you are interested, I'll post back a better similar slideshow that support for all browsers. This is called ImageFlow 1.3.0.
Just wait :)

Edit: Here it is!

Label: Gambar, JQuery, Slideshow, Tingkat Lanjut, Widget

# posted by Taufik Nurrohman @ Februari 28, 2012 1 comments

Slideshow Otomatis Blogger dengan AnythingSlider

Saya sempat kesulitan saat mencoba mengintegrasikan template JSON Blogger dengan JQuery AnythingSlider. Pada dasarnya masalahnya bukan mengarah kepada kesulitan di dalam membangun slideshow, tetapi lebih kepada masalah opsi-opsi dalam plugin ini. Beberapa opsi Saya rasa tidak begitu penting jika kita berhubungan dengan Blogger yang sederhana namun sangat cepat. Jadi, Saya telah meringkas beberapa opsinya untuk mempermudah konfigurasi:

Lihat Demo

Tahap 1: Mengedit Template

Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:

Temukan kode ini:

]]></b:skin>

Salin kode di bawah ini, kemudian letakkan di atasnya:

/*
============================================================================
    AnythingSlider v1.7+ Default (base) theme
    By Chris Coyier: http://css-tricks.com
    with major improvements by Doug Neiner: http://pixelgraphics.us/
    based on work by Remy Sharp: http://jqueryfordesigners.com/
    With some awesome touches by Taufik Nurrohman
    to create a very very very very very cool shiny effect :)
============================================================================
*/

#any-slider {
  width:645px; /* Atau bisa juga ditentukan sendiri */
  height:390px;
  list-style:none;
  overflow-y:auto;
  overflow-x:hidden;
  font:normal 12px Georgia,Serif;
  color:#666;
  position:relative;
  text-align:left;
}

#any-slider ul,
#any-slider li {
  list-style:none !important;
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 0px;
  border:none;
  outline:none;
}

.anythingBase {max-width:32766px;}

div.anythingSlider .anythingWindow {
  border-top:3px solid #7C9127;
  border-bottom:3px solid #7C9127;
}

div.anythingSlider .anythingControls ul a.cur,
div.anythingSlider .anythingControls ul a {
  background:#777;
  color:#000;
}

div.anythingSlider.activeSlider .anythingControls ul a.cur,
div.anythingSlider.activeSlider .anythingControls ul a {
  background-color:#7C9127;
}

div.anythingSlider {
  display:block;
  margin:0 auto;
  overflow:visible !important;
  position:relative;
  padding:0 45px 7px 45px;
  background-color:white;
}

div.anythingSlider .anythingWindow {
  overflow:hidden;
  position:relative;
  width:100%;
  height:100%;
}

.anythingBase {
  background:transparent;
  list-style:none !important;
  position:absolute;
  overflow:visible !important;
  top:0;
  left:0;
  margin:0 0 0 0;
  padding:0 0 0 0;
}

.anythingBase .panel {
  background:transparent;
  display:block;
  overflow:hidden;
  float:left;
  padding:0;
  margin:0;
  position:relative;
}

.anythingBase .panel.vertical {
  float:none;
}

div.anythingSlider .arrow {
  top:48%;
  position:absolute;
  display:block;
}

div.anythingSlider .arrow a {
  display:block;
  height:140px;
  margin:-70px 0 0 0;
  width:45px;
  text-align:center;
  outline:0;
  background:transparent url('http://4.bp.blogspot.com/-EWKg7vqmSzo/T0xn-3WMxLI/AAAAAAAACOk/BwxTXwA53M8/s1600/default.png') no-repeat;
}

div.anythingSlider .arrow a span {display:block;text-indent:-9999px;}

div.anythingSlider .back             {left:0;}
div.anythingSlider .back a           {background-position:left top;}
div.anythingSlider .back a:hover,
div.anythingSlider .back a.hover     {background-position:left -140px;}
div.anythingSlider .back.disabled    {display:none;}

div.anythingSlider .forward          {right:0;}
div.anythingSlider .forward a        {background-position:right top;}
div.anythingSlider .forward a:hover,
div.anythingSlider .forward a.hover  {background-position:right -140px;}
div.anythingSlider .forward.disabled {display:none;}


div.anythingSlider .anythingControls {outline:0;display:none;}

div.anythingSlider .anythingControls ul {
  margin:-4px 0px 0px 0px;
  padding:0;
  position:absolute;
  top:100%;
  left:45px;
}

div.anythingSlider .anythingControls ul li {
  display:inline;
  list-style:none;
  margin:0 0 0 0;
  padding:0 0 0 0;
  border:none;
}

div.anythingSlider .anythingControls ul a {
  width:30px;
  font:normal 10px Georgia,Serif;
  display:inline-block;
  text-decoration:none;
  text-shadow:0px 1px 0px rgba(255,255,255,0.2);
  padding:3px 0px 4px;
  margin:0px 2px 0px 0px;
  text-align:center;
  color:#222;
  outline:0;
  background-image:url('http://4.bp.blogspot.com/-EWKg7vqmSzo/T0xn-3WMxLI/AAAAAAAACOk/BwxTXwA53M8/s1600/default.png');
  background-position:center -288px;
  background-color:#7C9127;
  -webkit-border-radius:0px 0px 5px 5px;
  -moz-border-radius:0px 0px 5px 5px;
  border-radius:0px 0px 5px 5px;
}

div.anythingSlider .anythingControls ul a:hover {
  background-color:#677621;
}

div.anythingSlider .anythingControls .anythingNavWindow {overflow:hidden;float:left;}

/* Orientasi Right to Left - Biasanya untuk tema Arab */
div.anythingSlider.rtl .anythingControls ul a {float:right;}
div.anythingSlider.rtl .anythingControls ul {float:left;}
div.anythingSlider.rtl .anythingWindow {
  direction:ltr;
  unicode-bidi:bidi-override;
}

div.anythingSlider .start-stop {
  font:normal 10px Georgia,Serif;
  background-color:#3B740F;
  background-image:url('http://4.bp.blogspot.com/-EWKg7vqmSzo/T0xn-3WMxLI/AAAAAAAACOk/BwxTXwA53M8/s1600/default.png');
  background-position:center -288px;
  padding:3px 5px;
  width:60px;
  text-align:center;
  text-decoration:none;
  text-shadow:0px 1px 0px rgba(0,0,0,0.2);
  color:white;
  float:right;
  z-index:100;
  outline:0;
  -webkit-border-radius:0 0 5px 5px;
  -moz-border-radius:0 0 5px 5px;
  border-radius:0 0 5px 5px;
}

div.anythingSlider .start-stop.playing {
  background-color:#800;
}

div.anythingSlider,
div.anythingSlider .anythingWindow,
div.anythingSlider .anythingControls ul a,
div.anythingSlider .arrow a,
div.anythingSlider .start-stop {
  -webkit-transition-duration:0;
  -moz-transition-duration:0;
  -ms-transition-duration:0;
  -o-transition-duration:0;
  transition-duration:0;
}

div.anythingSlider .container {
  font:normal 11px Arial,Sans-Serif;
  font-style:italic;
  color:#666;
  margin:10px 15px;
  padding:0 0;
  border:none;
}

div.anythingSlider h2, div.anythingSlider h2 a {
  margin:0px 0px;
  padding:0px 0px;
  font:bold italic 16px Georgia,Serif;
  color:#666;
  text-decoration:none;
}

div.anythingSlider h2 {margin-bottom:10px;}

div.anythingSlider .container img {
  display:block;
  width:47% !important;
  height:auto !important;
  float:right;
  margin:0px 0px 5px 10px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
  padding:4px;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}

div.anythingSlider .container span {
  display:block !important;
  margin-top:10px;
  border-top:1px dotted #ccc;
  padding:10px 0px 0px;
  font:bold 12px Georgia,Serif;
  color:green;
  overflow:hidden;
}

div.anythingSlider .container span a {
  float:right;
  background-color:#768927;
  font:bold italic 11px Arial,Sans-Serif;
  color:white;
  text-decoration:none;
  padding:2px 7px 3px;
  border:2px solid #eee;
  -webkit-box-shadow:inset 0px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 1px 2px rgba(0,0,0,0.4);
  box-shadow:inset 0px 1px 2px rgba(0,0,0,0.4);
  -webkit-border-radius:15px;
  -moz-border-radius:15px;
  border-radius:15px;
}

div.anythingSlider .container span a:hover {
  background-color:#626415;
}

.clear {clear:both;}

/*
=======================================================================
    End AnythingSlider Horray!
=======================================================================
*/

Kemudian temukan kode ini:

</head>

Salin kode di bawah ini kemudian letakkan di atasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript' src='http://reader-download.googlecode.com/svn/trunk/jquery.anythingslider.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
    $(function() {

        $('#any-slider').anythingSlider({
            resizeContents  : false,
            expand          : false,
            vertical        : false,
            easing          : "swing",

            buildArrows     : true,
            buildNavigation : true,
            buildStartStop  : true,

            toggleArrows    : false,
            toggleControls  : false,

            startText       : "Mulai",
            stopText        : "Berhenti",
            enableKeyboard  : true,

            startPanel      : 1,
            hashTags        : true,
            infiniteSlides  : true,

            autoPlay        : false,
            pauseOnHover    : true,
            stopAtEnd       : false,
            playRtl         : false,

            delay           : 3000,
            animationTime   : 600
        });

    });
//]]>
</script>

Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut!

Berikutnya cari baris kode yang tampak kurang lebih seperti ini:

<div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='2' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='Life is Be U to Full (Header)' type='Header'/>
    </b:section>
</div>

Salin kode ini kemudian letakkan di bawahnya:

<script type="text/javascript">
//<![CDATA[
var showPostDate_g  = true,
    showComm_g      = true,
    slideOpenNewTab = true,
    idMode          = true,
    slidebyLabels   = false,
    slideLabelName  = "Mengenai",
    pBlank          = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
    text            = "Komentar",
    numposts_g      = 12,
    numchars_g      = 600,
    rmore           = "Selengkapnya",
    home_page       = "http://latitudu.blogspot.com/";
//]]>
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/autoContent4anythingSlider.js"></script>

Ganti URL http://latitudu.blogspot.com/ dengan alamat blog Anda lalu klik Simpan Template.

Atau untuk versi template baru biasanya sedikit lebih rumit. Temukan saja kode yang tampak seperti ini:

    <div id='wrap-main'>
      <div class='helvetica' id='main'>
        <b:section class='left-09col' id='primary' role='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
<b:widget id='Feed1' locked='false' title='Blogger Templates' type='Feed'/>
</b:section>
...
...

Letakkan kode yang baru saja Anda salin tepat di atasnya.

Konfigurasi Slideshow - JSON & AnythingSlider

Pengaturan slideshow ini dibagi menjadi dua, yaitu pengaturan JSON Blogger dan pengaturan plugin Anythingslider itu sendiri.

Pengaturan JSON - Auto Content Slider

Kurang lebihnya sama seperti pengaturan slideshow yang lain:

Opsi	Keterangan
showPostDate_g	Jika bernilai `true`, bulan terbit artikel akan ditampilkan. Jika bernilai `false`, bulan terbit artikel akan disembunyikan.
slideOpenNewTab	Jika bernilai `true`, setiap link akan terbuka di tab/jendela baru. Jika bernilai `false`, setiap link akan terbuka di tab/jendela yang sama.
idMode	Jika bernilai `true`, sistem penanggalan akan berubah menjadi berbahasa Indonesia. Jika bernilai `false`, sistem penanggalan akan berubah menjadi berbahasa Inggris.
slidebyLabels	Ubah nilainya menjadi `true` jika ingin menampilkan daftar slide artikel dengan label yang spesifik. Setelah itu tentukan nama label pada variabel `slideLabelName`.
slideLabelName	Digunakan untuk menentukan nama label yang spesifik setelah mengubah nilai `slidebyLabels` menjadi `true`.
pBlank	Adalah gambar cadangan yang akan ditampilkan jika artikel tidak memiliki gambar.
text	Digunakan untuk menentukan label jumlah komentar (contoh: 7 Komentar).
numposts_g	Digunakan untuk menentukan jumlah slide.
numchars_g	Digunakan untuk menentukan jumlah karakter ringkasan artikel.
rmore	Digunakan untuk menentukan teks link menuju posting sesungguhnya (contoh: Baca Selengkapnya/Read More).
home_page	URL blog Anda.

Pengaturan Plugin

Saya telah menyederhanakan opsi-opsi pada plugin ini. Untuk mempelajari opsi selengkapnya bisa Anda baca di sini:

Opsi	Nilai	Keterangan
resizeContents	true	Sebenarnya opsi ini digunakan untuk dominasi konten berupa gambar. Saya sarankan Anda untuk tetap mempertahankan nilainya sebagai `false` agar tampilannya tidak berantakan.
resizeContents	false
expand	true	Jika bernilai `true`, lebar slideshow akan menyesuaikan diri berdasarkan lebar elemen induk sehingga opsi ini sangat cocok untuk blog bertema responsif.
expand	false
vertical	true	Secara normal slideshow ini akan bergerak secara horizontal. Tapi, dengan mengubah nilai opsi ini menjadi `true`, orientasi animasi slideshow akan berubah menjadi orientasi vertikal.
vertical	false
easing	'swing', 'easeInOutBack', ... (nama easing)	Digunakan untuk mengaktifkan easing pada animasi slideshow (pelajari di sini).
buildArrows	true	Jika bernilai `false` navigasi next/previous akan menghilang.
buildArrows	false
buildNavigation	true	Jika bernilai `false` navigasi 1, 2, 3, ... akan menghilang.
buildNavigation	false
buildStartStop	true	Jika bernilai `false` navigasi Mulai/Berhenti akan menghilang.
buildStartStop	false

toggleArrows	true	Jika bernilai `true` navigasi next/previous akan disembunyikan, hingga saat pointer mouse mendekati slideshow, navigasi tersebut akan ditampilkan dengan efek animasi.
	false
toggleControls	true	Jika bernilai `true` navigasi 1, 2, 3, ... dan Mulai/Berhenti akan disembunyikan, hingga saat pointer mouse mendekati slideshow, navigasi tersebut akan ditampilkan dengan efek animasi. Begitu pula saat animasi perpindahan setiap slide telah selesai.
	false
startText	"Start", "Mulai", ... (teks)	Digunakan untuk menentukan label navigasi Mulai (default:"Start").
stopText	"Stop", "Berhenti", ... (teks)	Digunakan untuk menentukan label navigasi Berhenti (default:"Stop").
enableKeyboard	true	Jika bernilai `false` fasilitas navigasi menggunakan tombol panah pada keyboard akan dinonaktifkan.
	false
startPanel	1, 2, 3, ... (nomor urut)	Digunakan untuk menentukan slide urutan ke berapa yang akan terlihat lebih dulu (default:1).
hashtag	true	Jika bernilai `true` saat Anda mengeklik navigasi jalan pintas, itu akan mengubah hash yang ada pada address bar. Kelihatannya memang sepele, tetapi ini bisa digunakan untuk berbagi URL halaman yang di dalamnya terdapat slideshow ini, dimana Anda ingin menampilkan slide pada urutan tertentu saat link berbagi tersebut diakses.
	false

infiniteSlides	true	Secara normal, slideshow ini akan bergerak dari kanan ke kiri secara terus-menerus meskipun slide telah mencapai akhir. Jika Anda mengubah nilai opsi ini menjadi `false`, maka saat animasi slideshow berakhir, slideshow akan bergerak menuju arah sebaliknya dengan cepat untuk menuju kepada slide pertama dan memulai animasi kembali.
	false
autoPlay	true	Jika bernilai `true` slideshow akan bergerak dengan sendirinya tanpa diperintah saat pertama kali halaman diakses. Untuk alasan kenyamanan, lebih baik set sebagai `false` sehingga pengunjung bisa mengaktifkan animasi otomatis dengan cara menekan tombol Mulai. Karena jika tidak, halaman blogmu bisa naik turun hehe...
	false
pauseOnHover	true	Jika bernilai `true` slideshow akan berhenti bergerak saat pointer mouse sedang berada di atasnya.
	false
stopAtEnd	true	Jika bernilai `true` slideshow akan berhenti saat telah mencapai slide terakhir.
	false
playRtl	true	Jika bernilai `true` slideshow akan bergerak secara terbalik, termasuk orientasi navigasi angkanya (dari kanan ke kiri). Biasanya ini untuk slideshow bertema/berbahasa Arab.
	false

delay	1000, 2000, ... (milidetik)	Digunakan untuk menentukan seberapa lama slide akan berhenti sebelum akhirnya berpindah menuju slide berikutnya.
animationTime	1000, 2000, ... (milidetik)	Digunakan untuk menentukan kecepatan transisi slide.

Contoh Penerapan Slideshow Orientasi Vertikal

//<![CDATA[
    $(function() {

        $('#any-slider').anythingSlider({
            resizeContents  : false,
            expand          : false,
            vertical        : true,
            startText       : "Mulai",
            stopText        : "Berhenti",
            enableKeyboard  : true,
            autoPlay        : false,
            pauseOnHover    : true,
            playRtl         : false,
            delay           : 3000,
            animationTime   : 600
        });

    });
//]]>

Lihat Demo :: Orientasi Vertikal

Contoh Penerapan Efek Animasi dengan Easing

Di sini Saya memakai tipe easing eseInOutBack:

//<![CDATA[
    $(function() {

        $('#any-slider').anythingSlider({
            resizeContents  : false,
            expand          : false,
            easing          : "easeInOutBack",
            startText       : "Mulai",
            stopText        : "Berhenti",
            delay           : 3000,
            animationTime   : 600
        });

    });
//]]>

Lihat Demo :: Modifikasi Easing

Autohide Navigasi

//<![CDATA[
    $(function() {

        $('#any-slider').anythingSlider({
            resizeContents  : false,
            expand          : false,
            vertical        : false,
            easing          : "easeInOutExpo",
            toggleArrows    : true,
            toggleControls  : false,
            startText       : "Mulai",
            stopText        : "Berhenti",
            enableKeyboard  : true
        });

    });
//]]>

Lihat Demo :: Toggle Arrows

Hal yang sama juga bisa dilakukan untuk navigasi 1, 2, 3, ...

toggleArrows : true,
toggleControls : true

Seringkali slideshow ini akan tampak berantakan pada template-template yang rumit. Jika ingin menghasilkan tampilan yang maksimal, lebih baik gunakan template dengan tampilan sesederhana mungkin dan kode CSS sesedikit mungkin.

Untuk Pengembang

var showPostDate_g  = true,
    showComm_g      = true,
    slideOpenNewTab = true,
    idMode          = false,
    slidebyLabels   = true,
    slideLabelName  = "Mengenai",
    pBlank          = "blank.jpg",
    text            = "Komentar",
    numposts_g      = 12,
    numchars_g      = 600,
    rmore           = "Selengkapnya",
    home_page       = "http://yourblog.blogspot.com/";

function showgal(z) {

    document.write('<ul id="any-slider">');

    var imgr = 0,
        j = 0,
        img = new Array();
    for (var o = 0; o < numposts_g; o++) {
        var w = z.feed.entry[o];
        var g = w.title.$t;
        var f;
        var p;
        if (o == z.feed.entry.length) {
            break
        }
        for (var l = 0; l < w.link.length; l++) {
            if (w.link[l].rel == "alternate") {
                p = w.link[l].href;
                break
            }
        }
        for (var l = 0; l < w.link.length; l++) {
            if (w.link[l].rel == "replies" && w.link[l].type == "text/html") {
                f = w.link[l].title.split(" ")[0];
                break
            }
        }
        if ("content" in w) {
            var r = w.content.$t
        } else {
            if ("summary" in w) {
                var r = w.summary.$t
            } else {
                var r = ""
            }
        }

        postdate = w.published.$t;
        if (j > imgr.length - 1) {
            j = 0
        }
        img[o] = imgr[j];
        s = r;
        a = s.indexOf('<img');
        b = s.indexOf('src="', a);
        c = s.indexOf('"', b + 5);
        d = s.substr(b + 5, c - b - 5);
        if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
            img[o] = d
        } else {
            img[o] = pBlank
        }

        var re = /<\S[^>]*>/g;
        r = r.replace(re, "");
        if (r.length > numchars_g) {
            r = r.substring(0, numchars_g) + '...';
        }

        var cmtext = (showComm_g) ? f + ' ' + text : '';
        var q = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        if (idMode) {
            var x = ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agt", "Sep", "Okt", "Nov", "Des"];
        } else {
            var x = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        }
        var u = postdate.split("-")[2].substring(0, 2);
        var h = postdate.split("-")[1];
        var t = postdate.split("-")[0];
        for (var e = 0; e < q.length; e++) {
            if (parseInt(h) == q[e]) {
                h = x[e];
                break
            }
        }
        var n = (showPostDate_g) ? u + ' ' + h + ' ' + t + ' - ' : '';
        if (slideOpenNewTab) {
            document.write('<li><div class="container"><a href="' + p + '" target="_blank"><img src="' + img[o] + '" alt="" class="recent-thumb"/></a><h2><a href="' + p + '" class="recent-link" target="_blank">' + g + '</a></h2>' + r + '<div class="clear"></div><span>' + n + cmtext + '<a href="' + p + '" target="_blank">' + rmore + '</a></span></div></li>');
        } else {
            document.write('<li><div class="container"><a href="' + p + '"><img src="' + img[o] + '" alt="" class="recent-thumb"/></a><h2><a href="' + p + '" class="recent-link">' + g + '</a></h2>' + r + '<div class="clear"></div><span>' + n + cmtext + '<a href="' + p + '">' + rmore + '</a></span></div></li>');
        }
        j++
    }

    document.write('</ul>');
}

if (slidebyLabels) {
    document.write('<script src="' + home_page + 'feeds/posts/default/-/' + slideLabelName + '?max-results=' + numposts_g + '&orderby=published&alt=json-in-script&callback=showgal"><\/script>');
} else {
    document.write('<script src="' + home_page + 'feeds/posts/default?max-results=' + numposts_g + '&orderby=published&alt=json-in-script&callback=showgal"><\/script>');
}

Label: Gambar, JQuery, Slideshow, Tingkat Lanjut, Widget

# posted by Taufik Nurrohman @ Februari 28, 2012 0 comments

Minggu, 26 Februari 2012

Slideshow Otomatis Blogger dengan SLIDES

Saya menggunakan versi terakhir dari SLIDES yaitu pada 5 September 2011. Meskipun sebenarnya bagi Saya masih ada satu bug kecil saat Saya mencoba untuk berpindah tab halaman kemudian kembali lagi, saat itu durasi animasi menjadi sedikit berantakan sampai beberapa saat kemudian kembali normal. Nivo telah berhasil mengatasi ini dengan rilis kecilnya untuk mengatasi masalah yang hampir sama.

Lihat Demo

Tahap 1: Mengedit Template

Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:

Temukan kode ini:

]]></b:skin>

Salin kode di bawah ini, kemudian letakkan di atasnya:

/*
 * Slides, A Slideshow Plugin for jQuery
 * Intructions: http://slidesjs.com
 * By: Nathan Searles, http://nathansearles.com
 * Version: 1.1.9
 * Updated: September 5th, 2011
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
*/

#slides-outer {
  width:570px;
  height:270px;
  position:relative;
  margin:30px auto 0px;
  background-color:#efefef;
}

/* Netralisasi gambar */
#slides-outer img {
  margin:0px 0px;
  padding:0px 0px !important;
  background:transparent !important;
  border:none !important;
  outline:none !important;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}
#ribbon,
#frame,
#slides .next,
#slides .prev {opacity:1 !important;}
/* Stop di sini */

#ribbon {
  position:absolute;
  top:-3px;
  left:-15px;
  z-index:500;
}

#frame {
  position:absolute;
  z-index:0;
  width:739px;
  height:341px;
  top:-3px;
  left:-80px;
}

#slides {
  position:absolute;
  top:15px;
  left:4px;
  z-index:100;
  font:normal 12px Arial,Sans-Serif;
}

.slides_container {
  width:570px;
  overflow:hidden;
  position:relative;
  display:none;
}

.slides_container div.slide, .slides_container div.slide img {
  width:570px;
  height:270px;
  display:block;
  overflow:hidden;
}

.slides_container div.slide img {height:auto !important;}

#slides .next,
#slides .prev {
  position:absolute;
  top:107px;
  left:-39px;
  width:24px;
  height:43px;
  display:block;
  z-index:101;
}

#slides .next {
  left:585px;
}

.pagination {
  margin:26px auto 0;
  padding:0px 0px;
  width:auto;
  text-align:center;
}

.pagination li {
  display:inline-block;
  *display:inline;
  margin:0px 1px;
  padding:0px 0px;
  list-style:none;
}

.pagination li a {
  display:block;
  width:12px;
  height:0px;
  padding-top:12px;
  background-image:url('http://1.bp.blogspot.com/-kBxWiSmnR0U/T0pmXN_FqHI/AAAAAAAACOE/HgB4YfcCvgE/s1600/pagination.png');
  background-position:0 0;
  overflow:hidden;
}

.pagination li.current a {
  background-position:0 -12px;
}

#slides .caption {
  z-index:500;
  position:absolute;
  bottom:-35px;
  left:0;
  height:30px;
  padding:5px 20px 0 20px;
  background-color:#000;
  background-color:rgba(0,0,0,0.5);
  width:540px;
  font:normal 13px Helvetica,Arial,sans-serif;
  color:white;
  border-top:1px solid #000;
  text-shadow:none;
}

#slides .caption a {
text-decoration:none;
color:white;
}
#slides .caption a:hover {
text-decoration:underline;
}

/* End SLIDES */

Kemudian temukan kode ini:

</head>

Salin kode di bawah ini kemudian letakkan di atasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='http://reader-download.googlecode.com/svn/trunk/slides.min.jquery.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
    $(function() {
        $('#slides').slides({
            generatePagination : true,
            preload            : true,
            preloadImage       : 'http://reader-download.googlecode.com/svn/trunk/images/slides-loader.gif',
            play               : 5000,
            pause              : 2500,
            hoverPause         : true,
            effect             : 'slide',
            fadeSpeed          : 350,
            fadeEasing         : '',
            crossfade          : true,
            slideSpeed         : 350,
            slideEasing        : '',
            // Kustomisasi fungsi untuk menyisipkan caption
            animationStart: function(current) {
                $('div.caption').animate({bottom:-35}, 100);
            },
            animationComplete: function(current) {
                $('div.caption').animate({bottom:0}, 200);
            },
            slidesLoaded: function() {
                $('div.caption').animate({bottom:0}, 200);
            }
        });
    });
//]]>
</script>

Klik Simpan Template.

Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut!

Tahap 2: Meletakkan Slideshow

Masuklah ke menu Tata Letak kemudian tambahkan sebuah elemen halaman HTML/JavaScript yang terletak di bagian atas posting:

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<script type="text/javascript">
var showPostDate_g  = false,
    showComm_g      = false,
    slideOpenNewTab = false,
    idMode          = true,
    slidebyLabels   = false,
    slideLabelName  = "Mengenai",
    pBlank          = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
    text            = "Komentar",
    numposts_g      = 4,
    home_page       = "http://latitudu.blogspot.com/";
</script>
<div id="slides-outer">
    <img src="http://4.bp.blogspot.com/-NYp6Cx-vy6A/T0plh0PkkdI/AAAAAAAACNs/NFkZdqeP8hY/s1600/example-frame.png" width="739" height="341" alt="Example Frame" id="frame" />
    <img src="http://4.bp.blogspot.com/-T1K0fQGXHn8/T0pmUCTEjEI/AAAAAAAACN8/zJ1CEvvEzLo/s1600/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon" />
    <div id="slides">
        <script src="http://reader-download.googlecode.com/svn/trunk/autoContent4SLIDES.js" type="text/javascript"></script>
        <a href="#" class="prev">
            <img src="http://4.bp.blogspot.com/-YBh6RVIP6rM/T0plXL_Z94I/AAAAAAAACNc/JYe-5VPD4Bs/s1600/arrow-prev.png" width="24" height="43" alt="Arrow Prev">
        </a>
        <a href="#" class="next">
            <img src="http://2.bp.blogspot.com/-bJqPep9dJZU/T0plVM2OuBI/AAAAAAAACNU/at-rT9KkcYw/s1600/arrow-next.png" width="24" height="43" alt="Arrow Next">
        </a>
    </div>
</div>

Ganti URL http://latitudu.blogspot.com/ dengan alamat blog Anda lalu simpan.

Konfigurasi Slideshow

Pengaturan slideshow ini dibagi menjadi dua, yaitu pengaturan JSON Blogger dan pengaturan plugin SLIDES itu sendiri.

Pengaturan JSON - Auto Content Slider

Opsi	Keterangan
showPostDate_g	Jika bernilai `true`, bulan terbit artikel akan ditampilkan. Jika bernilai `false`, bulan terbit artikel akan disembunyikan.
slideOpenNewTab	Jika bernilai `true`, setiap link akan terbuka di tab/jendela baru. Jika bernilai `false`, setiap link akan terbuka di tab/jendela yang sama.
idMode	Jika bernilai `true`, sistem penanggalan akan berubah menjadi berbahasa Indonesia. Jika bernilai `false`, sistem penanggalan akan berubah menjadi berbahasa Inggris.
slidebyLabels	Ubah nilainya menjadi `true` jika ingin menampilkan daftar slide artikel dengan label yang spesifik. Setelah itu tentukan nama label pada variabel `slideLabelName`.
slideLabelName	Digunakan untuk menentukan nama label yang spesifik setelah mengubah nilai `slidebyLabels` menjadi `true`.
pBlank	Adalah gambar cadangan yang akan ditampilkan jika artikel tidak memiliki gambar.
text	Digunakan untuk menentukan label jumlah komentar (contoh: 7 Komentar).
numposts_g	Digunakan untuk menentukan jumlah slide.
home_page	URL blog Anda.

Pengaturan Plugin

Ada cukup banyak pengaturan pada plugin ini, tetapi Saya hanya akan menyisipkan beberapa pengaturan yang penting saja. Mengingat slideshow ini merupakan slideshow dengan konten otomatis, beberapa pengaturan menjadi sulit/gagal diterapkan. Misalnya randomize dan bigTarget yang sebenarnya tidak perlu kita atur pada slideshow ini:

Opsi	Nilai	Keterangan
generatePagination	true	Ubah nilainya menjadi `false` jika ingin menghilangkan navigasi berbentuk bulatan-bulatan di bagian bawah slideshow
generatePagination	false
preload	true	Ubah nilainya menjadi `false` jika tidak menginginkan animasi loading pada awal akses halaman.
preload	false
preloadImage	URL Gambar	Tentukan URL gambar "loading" pada variabel ini.
play	3000, 5000, 6000, ... (numerik)	Digunakan untuk menentukan interval perpindahan slide.
pause	1000, 2000, ... (numerik)	Digunakan untuk menentukan lama berhentinya slide saat kita memutuskan untuk mengeklik navigasi next/prev atau navigasi bulat di bagian bawah (lama waktu berhenti slideshow setelah kita mengeklik navigasi jalan pintas sampai kemudian animasi berjalan lagi).
hoverPause	true	Digunakan untuk menentukan apakah slideshow akan berhenti berjalan saat pointer mouse berada di atasnya (`true`) atau tidak (`false`).
hoverPause	false
effect	'slide'	Digunakan untuk menentukan efek animasi slideshow. Umumnya `slide` atau `fade`, namun Anda juga bisa menerapkan keduanya sekaligus dengan memisahkannya menggunakan tanda koma. Dalam artian, efek pertama akan diterapkan pada navigasi next/prev sedangkan efek ke dua akan diterapkan pada navigasi bulatan.
	'fade'
	'slide, fade'
	'fade, slide'
fadeSpeed	200, 300, 'slow', ... (kecepatan valid JQuery)	Digunakan untuk menentukan kecepatan fade saat Anda telah memilih efek fade.
fadeEasing	'easeOutBounce', 'easeInBack' ... (nama Easing)	Digunakan untuk mengaktifkan easing pada animasi fade (pelajari di sini).
crossfade	true	Digunakan untuk menentukan apakah efek perpindahan slide (efek fade) akan dilakukan dengan cara memudarkan slide yang tampil, kemudian pada saat yang bersamaan menampilkan slide setelahnya (`true`) atau dengan cara memudarkan slide yang tampil, menunggu sampai efek pemudaran berakhir, barulah slide berikutnya ditampilkan (`false`).
crossfade	false
slideSpeed	200, 300, 'slow', ... (kecepatan valid JQuery)	Digunakan untuk menentukan kecepatan slide saat Anda telah memilih efek slide.
slideEasing	'easeOutBounce', 'easeInBack' ... (nama Easing)	Digunakan untuk mengaktifkan easing pada animasi slide (pelajari di sini).

Contoh Penerapan Efek Fade

//<![CDATA[
    $(function(){
        $('#slides').slides({
            generatePagination : true,
            preload            : true,
            preloadImage       : 'http://reader-download.googlecode.com/svn/trunk/images/slides-loader.gif',
            play               : 5000,
            pause              : 2500,
            hoverPause         : true,
            effect             : 'fade',
            fadeSpeed          : 350,
            fadeEasing         : '',
            crossfade          : true,
            // Kustomisasi fungsi untuk menyisipkan caption
            animationStart: function(current) {
                $('div.caption').animate({bottom:-35}, 100);
            },
            animationComplete: function(current) {
                $('div.caption').animate({bottom:0}, 200);
            },
            slidesLoaded: function() {
                $('div.caption').animate({bottom:0}, 200);
            }
        });
    });
//]]>

Lihat Demo :: Efek Fade

Contoh Penerapan Easing

//<![CDATA[
    $(function(){
        $('#slides').slides({
            generatePagination : true,
            preload            : true,
            preloadImage       : 'http://reader-download.googlecode.com/svn/trunk/images/slides-loader.gif',
            play               : 5000,
            pause              : 2500,
            hoverPause         : true,
            effect             : 'slide',
            slideSpeed         : 700,
            slideEasing        : 'easeInOutBack',
            // Kustomisasi fungsi untuk menyisipkan caption
            animationStart: function(current) {
                $('div.caption').animate({bottom:-35}, 100);
            },
            animationComplete: function(current) {
                $('div.caption').animate({bottom:0}, 200);
            },
            slidesLoaded: function() {
                $('div.caption').animate({bottom:0}, 200);
            }
        });
    });
//]]>

Lihat Demo :: Easing

Untuk Pengembang

var showPostDate_g = true,
    showComm_g = true,
    slideOpenNewTab = false,
    idMode = true,
    slidebyLabels = true,
    slideLabelName = "Mengenai",
    pBlank = "blank.jpg",
    text = "Komentar",
    numposts_g = 4,
    home_page = "http://yourblog.blogspot.com/";

function showgal(z) {
    var imgr = 0,
        j = 0,
        img = new Array();
    for (var o = 0; o < numposts_g; o++) {
        var w = z.feed.entry[o];
        var g = w.title.$t;
        var f;
        var p;
        if (o == z.feed.entry.length) {
            break
        }
        for (var l = 0; l < w.link.length; l++) {
            if (w.link[l].rel == "alternate") {
                p = w.link[l].href;
                break
            }
        }
        for (var l = 0; l < w.link.length; l++) {
            if (w.link[l].rel == "replies" && w.link[l].type == "text/html") {
                f = w.link[l].title.split(" ")[0];
                break
            }
        }
        if ("content" in w) {
            var r = w.content.$t
        } else {
            if ("summary" in w) {
                var r = w.summary.$t
            } else {
                var r = ""
            }
        }
        postdate = w.published.$t;
        if (j > imgr.length - 1) {
            j = 0
        }
        img[o] = imgr[j];
        s = r;
        a = s.indexOf('<img');
        b = s.indexOf('src="', a);
        c = s.indexOf('"', b + 5);
        d = s.substr(b + 5, c - b - 5);
        if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
            img[o] = d
        } else {
            img[o] = pBlank
        }
        var cmtext = (showComm_g) ? f + ' ' + text : '';
        var q = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        if (idMode) {
            var x = ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agt", "Sep", "Okt", "Nov", "Des"];
        } else {
            var x = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        }
        var u = postdate.split("-")[2].substring(0, 2);
        var h = postdate.split("-")[1];
        var t = postdate.split("-")[0];
        for (var e = 0; e < q.length; e++) {
            if (parseInt(h) == q[e]) {
                h = x[e];
                break
            }
        }
        var n = (showPostDate_g) ? ' - ' + u + ' ' + h + ' ' + t + ' - ' : '';
        if (slideOpenNewTab) {
            document.write('<div class="slides_container"><div class="slide"><a href="' + p + '" target="_blank"><img src="' + img[o] + '" alt="" class="recent-thumb"/></a><div class="caption" style="bottom:0px;"><a href="' + p + '" class="recent-link" target="_blank">' + g + '</a>' + n + cmtext + '</div></div></div>');
        } else {
            document.write('<div class="slides_container"><div class="slide"><a href="' + p + '"><img src="' + img[o] + '" alt="" class="recent-thumb"/></a><div class="caption" style="bottom:0px;"><a href="' + p + '" class="recent-link">' + g + '</a>' + n + cmtext + '</div></div></div>');
        }
        j++
    }
}

if (slidebyLabels) {
    document.write('<script src="' + home_page + 'feeds/posts/default/-/' + slideLabelName + '?max-results=' + numposts_g + '&orderby=published&alt=json-in-script&callback=showgal"><\/script>');
} else {
    document.write('<script src="' + home_page + 'feeds/posts/default?max-results=' + numposts_g + '&orderby=published&alt=json-in-script&callback=showgal"><\/script>');
}

Label: Gambar, JQuery, Slideshow, Tingkat Lanjut, Widget

# posted by Taufik Nurrohman @ Februari 26, 2012 0 comments

Dummy Blog

Jumat, 16 November 2012

Kotak Penelusuran Blogger dengan Ajax JQuery

HTML Formulir

JQuery

Cara Kerja

Integrasi Widget ke Blogger

Minggu, 15 Juli 2012

Animasi Blog Roll

Demo

Selasa, 10 Juli 2012

Rilis: Galleria V2 - Widget Masonry untuk Blogger

Integrasi Widget ke Blogger

Pengaturan Lanjutan

Pengaturan JSON Blogger

Konfigurasi Plugin Masonry

Lebih Banyak Demo:

Pengembangan Widget

Rabu, 21 Maret 2012

Slideshow Otomatis Blogger dengan TinyCarousel (Custom)

Tahap 1: Mengedit Template

Tahap 2: Meletakkan Slideshow

Konfigurasi Slideshow - JSON & Custom TinyCarousel

Pengaturan JSON - Auto Content Slider

Konfigurasi Slideshow

Contoh Konfigurasi Animasi Otomatis

Contoh Konfigurasi Orientasi Vertikal

Contoh Konfigurasi Menggeser Slide 3 Buah/Klik Navigasi

Kamis, 15 Maret 2012

Dua Versi Konverter HTML

Versi JavaScript Mentah

Versi JQuery

Selasa, 28 Februari 2012

Automatic Slideshow for Blogger with 3D Gallery

Step 1: Edit Your Template

Step 2: Put the Slideshow

Configuring the Slideshow

3D Gallery Configuration

Slideshow Otomatis Blogger dengan AnythingSlider

Tahap 1: Mengedit Template

Konfigurasi Slideshow - JSON & AnythingSlider

Pengaturan JSON - Auto Content Slider

Pengaturan Plugin

Contoh Penerapan Slideshow Orientasi Vertikal

Contoh Penerapan Efek Animasi dengan Easing

Autohide Navigasi

Untuk Pengembang

Minggu, 26 Februari 2012

Slideshow Otomatis Blogger dengan SLIDES

Tahap 1: Mengedit Template

Tahap 2: Meletakkan Slideshow

Konfigurasi Slideshow

Pengaturan JSON - Auto Content Slider

Pengaturan Plugin

Contoh Penerapan Efek Fade

Contoh Penerapan Easing

Untuk Pengembang

Mengenai Saya

Links

archives