Dummy Blog

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.

Implementasi Dasar

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

<link rel="stylesheet" type="text/css" href="http://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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
    url: "http://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: "http://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
}

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)
}

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: "http://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: "http://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: "http://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: "http://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" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<style type="text/css">

/* 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: "http://nama_blog.blogspot.com", // Your blog URL
    thumbWidth: 600 // Thumbnail width in pixels (same with slideshow width)
});

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: "http://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();
    }
});

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: "http://nama_blog-1.blogspot.com",
    containerId: "container-1"
});
makeSlider({
    url: "http://nama_blog-2.blogspot.com",
    containerId: "container-2"
});
makeSlider({
    url: "http://nama_blog-3.blogspot.com",
    containerId: "container-3"
});

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:

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)

Label: Gambar, JSON Blogger, Slideshow, Tingkat Lanjut, Widget

# posted by Taufik Nurrohman @ Maret 18, 2013 1 comments

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

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:

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>

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

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:

Contoh Konfigurasi Animasi Otomatis

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

Contoh Konfigurasi Orientasi Vertikal

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

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
}); 

Label: Gambar, JQuery, Menengah, Slideshow, Widget

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

Hal yang paling sulit adalah tentang bagaimana caranya menyisipkan URL posting ke dalam Imageflow, karena saat gambar diklik, yang terakses bukannya URL halaman, melainkan URL gambar itu sendiri. Meskipun Saya telah berhasil memanipulasinya menggunakan JQuery, yaitu dengan cara menyimpan URL posting ke dalam atribut rel pada gambar, sehingga Saya bisa mengakses URL tersebut dan menyisipkannya ke dalam perintah window.open() seperti ini:

onclick = function() {
    window.open($(this).attr('rel'));
}

document.write('<img src="' + img[o] + '" alt="&lt;a href=&#39;' + posturl + '&#39;&gt;' + postitle + '&lt;/a&gt;">');

Dan berhasil!

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:

@charset "utf-8";

/*
Auto Content 4 Imageflow 1.3.0 by Taufik Nurrohman
URL: https://plus.google.com/108949996304093815163/about
*/

@media screen, projection {
  .imageflow {
    width:100%;
    overflow:hidden;
    position:relative;
    text-align:left;
    visibility:hidden;
    margin:0 auto;
    font:normal normal 12px/1.4 Verdana,Tahoma,Arial,Sans-Serif;
  }
  .imageflow img {
    border:none;
    padding:0;
    margin:0;
    background:transparent;
    position:absolute;
    top:0;
    visibility:hidden;
    /* Enables bicubic image resampling for the IE7 */
    -ms-interpolation-mode:bicubic;
    /* Uncomment this declaration to enable shadow around images
    -webkit-box-shadow:0 1px 10px black;
    -moz-box-shadow:0 1px 10px black;
    box-shadow:0 1px 10px black;
    */
  }
  .imageflow p {
    margin:0 auto;
    text-align:center;
  }
  .imageflow .loading {
    border:1px solid white;
    height:15px;
    left:50%;
	margin-top:4px;
    margin-left:-106px;
    padding:5px;
    position:relative;
    visibility:visible;
    width:200px;
  }
  .imageflow .loading_bar {
    background:#fff;
    height:15px;
    visibility:visible;
    width:1%;
  }
  .imageflow .navigation {
    z-index:10000;
    margin-top:160px;
  }
  .imageflow .caption {
    font-weight:bold;
    position:relative;
    text-align:center;
    z-index:10001;
    text-shadow:0 1px 3px black;
  }
  .imageflow .caption a {
    text-decoration:none;
    color:white;
  }
  .imageflow .caption a:hover {
    text-decoration:underline;
    color:#8CD0D3;
  }
  .imageflow .scrollbar {
    border-bottom:1px solid #b3b3b3;
    position:relative;
    visibility:hidden;
    z-index:10002;
    height:1px;
  }
  .imageflow .slider {
    background:transparent url('http://1.bp.blogspot.com/-4lzSM34zaOA/T01-W0Mb1kI/AAAAAAAACQU/5w3WsezYvRY/s1600/slider.png') no-repeat 50% 50%;
    height:14px;
    margin:-6px 0 0 -7px;
    position:absolute;
    width:14px;
    z-index:10003;
  }
  .imageflow .slideshow {
    cursor:pointer;
    height:14px;
    margin:20px 0 0 20px;
    position:absolute;
    width:14px;
    z-index:10003;
  }
  .imageflow .slideshow.pause {background:transparent url('http://2.bp.blogspot.com/-yt4eRgtDd6I/T01wsFn-e4I/AAAAAAAACPM/pdr8ljnrM9o/s1600/button_pause.png') no-repeat 50% 50%}
  .imageflow .slideshow.play {background:transparent url('http://3.bp.blogspot.com/-H5F2nAmaVBA/T01wx0hM8oI/AAAAAAAACPc/OpMSLH-WaO8/s1600/button_play.png') no-repeat 50% 50%}
  .imageflow .images {
    overflow:hidden;
    white-space:nowrap;
  }
  .imageflow .button {
    cursor:pointer;
    height:17px;
    position:relative;
    width:17px;
  }
  .imageflow .previous {
    background:transparent url('http://4.bp.blogspot.com/-Eq4y210bsdE/T01wpORgybI/AAAAAAAACPE/AwOmlS5OrpU/s1600/button_left.png') no-repeat 0 0;
    float:left;
    margin:-7px 0 0 -30px;
  }
  .imageflow .next {
    background:transparent url('http://2.bp.blogspot.com/-VwvDUzRpSOo/T01wuzhWf-I/AAAAAAAACPU/K4NQIxxIm7U/s1600/button_right.png') no-repeat 0 0;
    float:right;
    margin:-7px -30px 0 30px;
  }
}

Kemudian temukan kode ini:

</head>

Salin kode di bawah ini kemudian letakkan di atasnya:

<script type='text/javascript'>
//<![CDATA[
var loadingText       = "Memuat gambar",
    animationSpeed    = 50,
    aspectRatio       = 1.964,
    circular          = true,
    imageCursor       = 'default',
    opacity           = false,
    opacityArray      = [10,8,5,3],
    imagesHeight      = 0.5,
    imageScaling      = true,
    percentLandscape  = 200,
    percentOther      = 100,
    preloadImages     = true,
    slider            = true,
    sliderCursor      = 'e-resize',
    sliderWidth       = 14,
    scrollbarP        = 0.7,
    onClick           = function() {},
    startID           = 1,
    slideshow         = true,
    slideshowSpeed    = 1500,
    slideshowAutoplay = false,
    startAnimation    = false,
    xStep             = 200;
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/imageflow-custom.js' type='text/javascript'></script>

Klik Simpan Template.

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 = true,
    idMode          = true,
    slidebyLabels   = false,
    slideLabelName  = "Mengenai",
    pBlank          = "http://2.bp.blogspot.com/-RdWht36FTLI/TrsqFbSraFI/AAAAAAAABO4/rTjPm97uO34/s1600/dte-darkblue.png",
    text            = "Komentar",
    numposts_g      = 10,
    home_page       = "http://nama_blog.blogspot.com";
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/autoContent4Imageflow.1.3.js" type="text/javascript"></script>

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

Konfigurasi JSON & Imageflow 1.3.0

Pengaturan slideshow ini dibagi menjadi dua, yaitu pengaturan JSON Blogger dan pengaturan opsi dalam Imageflow itu sendiri.

Contoh Penerapan: circular:false, opacity:true

//<![CDATA[
    ...
    ...
    circular          = false,
    opacity           = true,
    opacityArray      = [10,8,5,3],
    ...
    ...
//]]>

button_right_dark.png
button_play_dark.png
button_pause_dark.png
button_left_dark.png
slider_dark.png

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

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

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

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.

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.

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
    });
});

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

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

Tahap 1: Mengedit Template

/*
============================================================================
    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!
=======================================================================
*/

<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>

<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>

<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>

    <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>
...
...

Konfigurasi Slideshow - JSON & AnythingSlider

Pengaturan JSON - Auto Content Slider

Pengaturan Plugin

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
        });

    });
//]]>

Contoh Penerapan Efek Animasi dengan Easing

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

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

    });
//]]>

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
        });

    });
//]]>

toggleArrows : true,
toggleControls : true

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

Tahap 1: Mengedit Template

/*
 * 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 */

<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>

Tahap 2: Meletakkan Slideshow

<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>

Konfigurasi Slideshow

Pengaturan JSON - Auto Content Slider

Pengaturan Plugin

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);
            }
        });
    });
//]]>

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);
            }
        });
    });
//]]>

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