Slideshow Otomatis Blogger dengan TinyCarousel (Custom)

Rabu, 21 Maret 2012

Tabel Konten

Tahap 1: Mengedit Tema
Tahap 2: Meletakkan Slideshow

Contoh Pengaturan Carousel Vertikal

Pembaharuan: 25 November 2013

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 tata letak slideshow Agile Carousel sehingga setiap slide menjadi lebih kaya akan konten:

Lihat Demo

Tahap 1: Mengedit Tema

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

Temukan kode ini:

]]></b:skin>

Salin kode di bawah ini, kemudian letakkan di atasnya:

/*!
 * Custom TinyCarousel for Blogger by Taufik Nurrohman
 * Visit: http://www.dte.web.id
 */

.tinycarousel {
  overflow:hidden;
  font:normal normal 10px/12px Arial,Sans-Serif;
  color:#666;
  margin:0 auto;
}
.tinycarousel-viewport {
  overflow:hidden;
  position:relative;
  background-color:#eee;
  border:1px solid #ccc;
  margin:0 auto;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
.tinycarousel-overview {
  list-style:none;
  margin:0;
  padding:0;
  position:absolute;
  left:0;
  top:0;
}
.tinycarousel-overview li {
  list-style:none;
  float:left;
  padding:0;
  height:auto;
  background-color:white;
  color:#666;
}
.tinycarousel-inner {
  padding:10px;
  border:1px solid #ccc;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  overflow:hidden;
  position:relative;
}
li .tinycarousel-inner {padding-bottom:48px}
.tinycarousel-image {
  display:block;
  width:100%;
  height:auto;
  border:none;
  outline:none;
  margin:0;
  padding:0;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}
.tinycarousel-title {
  font:normal bold 11px/100% Verdana,Tahoma,Arial,Sans-Serif;
  color:#39f;
  margin:0 0 6px;
  padding:10px 0 0;
  background:none;
}
.tinycarousel-title a {
  color:inherit;
  text-decoration:none;
  border:none;
}
.tinycarousel-summary {
  margin:0;
  padding:0;
  overflow:hidden;
}
.tinycarousel-footer {
  color:#aaa;
  background-color:#333;
  background-image:-webkit-linear-gradient(#555,#333);
  background-image:-moz-linear-gradient(#555,#333);
  background-image:-ms-linear-gradient(#555,#333);
  background-image:-o-linear-gradient(#555,#333);
  background-image:linear-gradient(#555,#333);
  padding:0 10px;
  height:24px;
  line-height:24px;
  overflow:hidden;
  position:absolute;
  right:0;
  bottom:0;
  left:0;
}
.tinycarousel-footer-date {bottom:24px}
.tinycarousel-navigation {
  display:block;
  background-color:white;
  border:1px solid #ccc;
  margin:2px auto 0;
  overflow:hidden;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
.tinycarousel-navigation .tinycarousel-inner {border:none}
.tinycarousel-button {
  background-color:#666;
  padding:2px 5px;
  overflow:hidden;
  position:relative;
  float:left;
  margin:0 2px 0 0;
  color:white;
  text-decoration:none;
  font-weight:bold;
  text-align:center;
}
.tinycarousel-navigation .disable {display:none}
.tinycarousel-button:active {background-color:#900}
.tinycarousel-total-posts {
  float:right;
  margin:2px 5px 0 0;
  font-weight:bold;
  font-size:120%;
}

/* Orientasi Vertikal */
.tinycarousel.vertical .tinycarousel-overview li {
  float:none;
  display:block;
}
.tinycarousel.vertical .tinycarousel-button,
.tinycarousel.vertical .tinycarousel-total-posts {
  float:none;
  display:block;
  margin:0 0 2px;
}
.tinycarousel.vertical .tinycarousel-button.disable {display:none}
.tinycarousel.vertical .tinycarousel-total-posts {
  text-align:center;
  margin-top:10px;
  margin-bottom:0;
}

Klik Simpan Tema.

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:

<div id="tinycarousel-container" class="tinycarousel"></div><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script>
var tinycarousel_config = {
    url: 'http://nama_blog.blogspot.com',
    numPosts: 12,
    labelName: null,
    containerId: 'tinycarousel-container',
    newTabLink: false,
    summaryLength: 100,
    monthArray: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC',
    nav: {
        prevText: '&lt;',
        nextText: '&gt;',
        showText: 'Menampilkan {num} Posting'
    },
    carousel: {
        axis: "x",
        itemwidth: 200,
        itemheight: 370,
        itemmargin: 5,
        itempadding:10,
        visible: 4,
        display: 1,
        start: 1,
        interval: true,
        intervaltime: 3000,
        animation: true,
        duration: 1000,
        easing: "swing",
        callback: function() {}
    }
};
</script>
<script src="//dte-project.googlecode.com/svn/trunk/blogger-tinycarousel.js"></script>

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

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

Opsi	Keterangan
url	Ganti nilainya dengan URL blog Anda.
numPosts	Digunakan untuk menentukan jumlah posting yang ingin ditampilkan.
labelName	Ganti nilainya menjadi nama label untuk menampilkan posting dengan label yang spesifik. Misalnya, menentukan nilai `labelName: "Widget"` akan membuat widget ini menampilkan posting berlabel Widget saja.
containerId	ID kontainer penampung widget.
newTabLink	Ganti nilainya menjadi `true` untuk membuat semua tautan terbuka di tab/jendela baru secara otomatis.
summaryLength	Digunakan untuk menentukan panjang ringkasan posting.
monthArray	Daftar nama-nama bulan sesuai dengan sistem penanggalan di negaramu.
noImage	URL gambar thumbnail pengganti untuk posting yang tidak memiliki gambar.
nav => prevText	Teks navigasi mundur.
nav => nextText	Teks navigasi maju.
nav => showText	Teks indikator jumlah posting.
carousel => axis	Ganti nilainya menjadi `"y"` untuk menampilkan carousel vertikal.
carousel => itemwidth	Digunakan untuk menentukan lebar masing-masing item carousel.
carousel => itemheight	Digunakan untuk menentukan tinggi masing-masing item carousel.
carousel => itemmargin	Digunakan untuk menentukan `margin` masing-masing item carousel.
carousel => itempadding	Digunakan untuk menentukan `padding` masing-masing item carousel.
carousel => visible	Digunakan untuk menentukan jumlah item yang ingin ditampilkan dalam satu baris.
carousel => display	Digunakan untuk menentukan jumlah item yang akan tergeser dalam satu kali gerakan.
carousel => start	Digunakan untuk menentukan indeks permulaan item (normalnya dimulai dari indeks pertama).
carousel => interval	Ganti nilainya menjadi `false` untuk membuat animasi berjalan secara manual (dengan cara mengeklik tombol navigasi).
carousel => intervaltime	Digunakan untuk menentukan waktu interval animasi (hanya berlaku jika opsi `interval` bernilai `true`).
carousel => animation	Ganti nilainya menjadi `false` untuk mematikan efek animasi.
carousel => duration	Digunakan untuk menentukan kecepatan animasi.
carousel => easing	Digunakan untuk menentukan tipe easing animasi.
carousel => callback	Fungsi bebas yang bisa Anda terapkan pada widget ini yang akan bekerja setiap kali slide berganti.

Contoh Pengaturan Carousel Vertikal

Perhatikan pada bagian-bagian yang Saya tandai:

var tinycarousel_config = {
    ...
    nav: {
        prevText: '&#9650;',
        nextText: '&#9660;',
        showText: 'Menampilkan {num} Posting'
    },
    carousel: {
        axis: "y",
        itemwidth: 200,
        itemheight: 370,
        itemmargin: 5,
        itempadding:10,
        visible: 1,
        display: 1,
        start: 1,
        interval: true,
        intervaltime: 3000,
        animation: true,
        duration: 1000,
        easing: "swing",
        callback: function() {}
    }
};

Lihat Demo

72 Komentar

Kamis, 22 Maret 2012 12:06 AM
Ijal Fauzi
Keren mas, tapi carousel kayaknya lebih cocok untuk menampilkan gambar saja deh, ngga pake summary postnya. Overall sip :D Saya baru nyoba pelajarin carousel dari anshlul dudeja di template portofolio nya aja. wkwk
- Balas
Kamis, 22 Maret 2012 12:27 AM
Taufik Nurrohman
@Ijal Fauzi Nggak apa-apa. Lagipula Saya menargetkan carousel ini untuk blog-blog bertema berita saja kok, bukan galeri, portfolio atau fotografi.
- Balas
Kamis, 22 Maret 2012 10:02 AM
Putra
konfigurasinya caranya masang di atas /head mas??
masih bingung :(
- Balas
Kamis, 22 Maret 2012 10:56 AM
Taufik Nurrohman
@Alam Perwira ??? :\
- Balas
Kamis, 22 Maret 2012 11:58 AM
Putra
@Taufik Nurrohmanudah tau dink mas :D tpi kok punya saya cuman muncul 1slide saja ya?? :\
coba dicek mas http://al4m-blog.blogspot.com/
- Balas
Kamis, 22 Maret 2012 02:12 PM
Taufik Nurrohman
@Alam Perwira Saya cek menggunakan firebug ada semua kok isinya:
Coba hapus kode ini. Ini khan JQuery juga, URLnya memang berbeda, tapi isinya sama (uncompressed):
```
<script src='http://code.jquery.com/jquery-latest.js'></script>
```
- Balas
Kamis, 22 Maret 2012 02:55 PM
Putra
@Taufik Nurrohmanoaaalah, tenan to?? aku udah nebak loadernya. tp gak berani hapus, kirain beda mas :D
wokeee, mancep mas.. :D
biar blognya rame pakai ini aja didepan header.. awakwkawk, thanks berat ilmunya mas :)
Sukses selalu..
- Balas
Kamis, 22 Maret 2012 03:36 PM
Games Lover
Alhamdulillah akhirnya mas taufik memenuhi permintaan saya, langsung mau praktek dulu mas. Nanti kalo kesulitan mohon bantuannya... terimaksih sekali lagi
- Balas
Kamis, 22 Maret 2012 04:08 PM
Taufik Nurrohman
@Alam Perwira Amiin...
Itulah sebabnya kenapa di sini Saya tidak capek-capeknya memperingatkan bahwa saat memasang widget sejenis seperti ini, selalu pastikan bahwa JQuery tidak lebih dari satu. Cukup satu saja untuk selamanya, meskipun versinya berbeda, ambil satu saja yang paling baru dan buang yang lainnya.
- Balas
Kamis, 22 Maret 2012 04:33 PM
Unknown
mantap sob...!
aq jg mau dunk dipenuhi permintaan sy.., permintaan sy simple aja bro, gmn carax menempatkan form untuk komentar diatas para komentator (apalah namax itu).., tlg ya bro.., terima kasih banyak :)
- Balas
Kamis, 22 Maret 2012 05:25 PM
Games Lover
@It's a Hardlife
Berhasil dengan sukses mas Taufik, tapi kalau mau menampilkan hanya judulnya saja tanpa summary bagaimana ya mas?
- Balas
Kamis, 22 Maret 2012 10:13 PM
Taufik Nurrohman
@It's a Hardlife Pertama set nilai dua variabel ini menjadi false:
```
showPostDate_g  = false;
showComm_g      = false;
```
lalu set elemen paragraf menjadi display:none:
```
#tinycarousel p {
display:none;
}
```
- Balas
Kamis, 22 Maret 2012 10:20 PM
Taufik Nurrohman
@Rohis Facebook Wkwkwk... kaget Aku, fotomu kembar ^_^
Ya, tapi bukan sekarang. Sedang ada satu hal lagi yang ingin Saya selesaikan mengenai eksperimen emoticon ini.
- Balas
Jum’at, 23 Maret 2012 02:19 PM
Taufik Nurrohman
@Rohis Facebook Ini dia hasil akhir dari eksperimen emoticon Saya: http://hompimpaalaihumgambreng.blogspot.com/2012/03/jquery-auto-emoticons-for-blogger.html
Dan ini adalah posting tentang bagaimana cara meletakkan formulir komentar di bagian atas daftar komentar: http://hompimpaalaihumgambreng.blogspot.com/2012/03/format-formulir-komentar-di-atas-daftar.html
Semoga bisa membantu :)
- Balas
Rabu, 28 Maret 2012 12:51 AM
admin
mas, bagaimana caranya supaya judul di slide nya kalau di sentuh dengan cursor warna judulnya berubah,,
tolong pencerahannya terimakasih mas :)
- Balas

Rabu, 28 Maret 2012 01:23 AM

Taufik Nurrohman

@mr, copas Tepat di bawah kode ini:

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

tambahkan kode ini:

#tinycarousel h6 a:hover {
color:yellow; /* Warna saat pointer berada di atas judul */
}

Senin, 09 April 2012 07:50 PM
Setio Aji
Udah saya prakttekan di blog tapi kenapa yang keluar cuma gambar warna pelangi, seperti profil Rohis Facebook diatas ya gan? Padahal gambar udah diupload lewat blogger langsung... mohon bantuannya
- Balas
Senin, 09 April 2012 10:00 PM
Taufik Nurrohman
@Unknown Itu karena pengaturan feed blog yang dibatasi. Coba masuk ke dasbor Blogger, klik Pengaturan/Setelan ⇒ Lainnya
Lihat pada bagian umpan situs. Coba ubah nilainya menjadi "penuh" atau "sampai lompat baris" lalu simpan:
Widget tidak akan bekerja kalau kita menonaktifkan feed blog, karena sebagian besar widget Blogger mengunakan feed sebagai produsen untuk memuat posting-posting pada widget tersebut.
- Balas
Senin, 09 April 2012 11:57 PM
Setio Aji
@Taufik Nurrohman
Wah iya gan bener, udah keluar sekarang gambarnya. Makasih banyak ya
- Balas
Minggu, 29 April 2012 02:44 PM
Baharudin Nofiandi
mas bro kalo pengin tampil hanya gambar dan judulnya di atas gambar sebelah bawah gimana mas?
makasih sebelumnya'
- Balas

Minggu, 29 April 2012 03:51 PM

Taufik Nurrohman

@bahar Waduh, nggak bisa tuh mas, kalau mau begitu harus memodifikasi markupnya sendiri. Coba dicek di bagian ini:

if (slideOpenNewTab) {
document.write('<li><div class="inner"><a href="' + p + '" target="_blank"><img src="' + img[o] + '" alt="" class="recent-thumb"/></a><h6><a href="' + p + '" target="_blank">' + g + '</a></h6><p>' + r + '</p></div>' + n + cmtext + '</li>')
} else {
document.write('<li><div class="inner"><a href="' + p + '"><img src="' + img[o] + '" alt="" class="recent-thumb"/></a><h6><a href="' + p + '">' + g + '</a></h6><p>' + r + '</p></div>' + n + cmtext + '</li>')
}

Tag <h6> terletak setelah tag <img>

Kamis, 07 Juni 2012 02:41 PM
Muhammad Zaki Al Aziz
KAng Taufik, saya sudah pake slideshow ini dan berfungsi di chrome. Namun ternyata di mozilla tidak berfungsi. Ada solusinya engga kang?
- Balas
Kamis, 07 Juni 2012 03:24 PM
Taufik Nurrohman
@Muhammad Zaki Al-Aziz Aneh. Padahal Saya membuat slideshow ini menggunakan Firefox. Dan setalah jadi Saya juga mengetesnya di peramban lain dan lulus. Kalau halaman demo di atas dibuka menggunakan Firefox jalan nggak? :\
- Balas
Kamis, 07 Juni 2012 09:45 PM
Muhammad Zaki Al Aziz
@Taufik Nurrohman KAng, sudah ditest di Mozilla ternyata berfungsi. Waduh harus ganti lagi jadinya :(
- Balas
Kamis, 14 Juni 2012 09:21 PM
zalfiheriwan@gmail.com
Pak taufiq, tolongin aku ya?
1. aku sudah pasang tamplet ini, tapi tampilnya cuma 1 tolong lihat http://zaldiheriwan.blogspot.com
2. aku ambil tamplate gempa terkini di http://www.padang-today.com/ dan aku pasang di blog aku itu tapi kok statis jadinya?
trims sebelumnya pak
- Balas
Jum’at, 15 Juni 2012 12:54 AM
Taufik Nurrohman
@zaldi heriwan Coba lepas kode yang Saya beri garis bawah lalu simpan lagi, sambil mempelajari komentar-komentar di atas.
- Balas
Jum’at, 15 Juni 2012 08:15 PM
zalfiheriwan@gmail.com
waduh pak, tetap nga' bisa aku nicht, padahan semua instruksi udah di chek ulang. apakah yang salah dlm html blogku ini ya?
- Balas
Jum’at, 15 Juni 2012 10:59 PM
Taufik Nurrohman
@zaldi heriwan Sepertinya iya. Saya lihat banyak sekali script loader sekelas dengan CDN Google di dalam :(
- Balas
Sabtu, 16 Juni 2012 08:24 PM
zalfiheriwan@gmail.com
hehe iya pak aku hapus blog itu trus aku bikin yang baru (http://karimangkutokamang.blogspot.com/) sekarang udah muncul slidenya tapi justru gudget slide foto yang punya blogspotnya yang gak muncul lagi...yang ku ambil di album picasa ku (https://picasaweb.google.com/116187375040661885064/KumpulanNanTaserak)..maaf sebelumnya amat ngerepotin..hehe
- Balas
Rabu, 04 Juli 2012 05:33 PM
Unknown
mas, gimana cara buat dua atau lebih slide ya?
mohon bimbingannya. masih nubi. :)
- Balas
Minggu, 08 Juli 2012 01:49 PM
Taufik Nurrohman
@Ibnu Hazar Nggak bisa, untuk dua slideshow dalam satu halaman yang sama nggak bisa 7:(
- Balas
Rabu, 11 Juli 2012 11:11 AM
Doddy Sugianto
Terima kasih pak, sangat bermanfaat!
Saya ingin menanyakan pada "Contoh Konfigurasi Animasi Otomatis", bisa gak tampilan sildeshow nya hanya bergeser kekiri saja? jadi, pada postingan terakhir kembali lg ke postingan pertama dan tetap bergeser kekiri tidak kekanan.
- Balas
Rabu, 11 Juli 2012 12:12 PM
Taufik Nurrohman
@Dody Sugianto Nggak bisa. Tinycarousel tidak dilengkapi dengan fitur itu. Kalau untuk tipe-tipe slideshow yang lebih besar seperti AnythingSider ada opsi seperti itu, opsi untuk kembali ke awal saat slideshow berakhir atau tetap bergerak rotasi searah. Kalau yang ini tidak ada.
- Balas
Rabu, 11 Juli 2012 02:42 PM
Doddy Sugianto
Ok pak.
Ada tutorial hideline berita utama seperti detik com??
tadinya saya ingin mencari yg seperti itu pak.
Terima Kasih
- Balas
Selasa, 28 Agustus 2012 03:05 PM
Admin SS
di blog saya kok cuma muncul 1 ya mas , gambarnya??
http://rowniie.blogspot.com
- Balas
- Selasa, 28 Agustus 2012 05:25 PM
  Taufik Nurrohman
  Baca pertanyaan-pertanyaan dari Alam Perwira yang sudah Saya jawab di atas.
  - Balas
  - Selasa, 28 Agustus 2012 08:20 PM
    Admin SS
    gk ada mas kode kyk gtu??mohon pencerahanya.
    - Balas
Jum’at, 28 September 2012 11:23 PM
RCW
Keren Om...
Tp koq di blog saya thumbnail / gambar ga mau muncul ya?
ini blog saya>> http://digitaljogja.blogspot.com
Thanks
- Balas
- Senin, 22 Oktober 2012 08:21 PM
  Taufik Nurrohman
  Set opsi Umpan Blog menjadi Penuh...
  - Balas
Jum’at, 05 Oktober 2012 03:23 PM
Kida
Blog ini wajib di bookmark bagi blogger pemula seperti saya...
Oh iya mas, kalau boleh saya tanya, apakah bisa untuk meletakkan slideshow di dalam postingan blog ? karena saya sudah muter2 google yg ada cuma slideshow sebagai widget header, dll. jika bisa bagaimana caranya ?
Terima kasih atas jawabannya n___n
- Balas
- Senin, 22 Oktober 2012 08:23 PM
  Taufik Nurrohman
  Slideshow yang ada di halaman demo juga ditaruh di dalam posting :)
  - Balas
Jum’at, 12 Oktober 2012 02:31 AM
Unknown
i want to slow move slide bar.my site slide bar move is very fast.please help me how can i solve this problem.
see this site:-
http://downloadplusbd.blogspot.com/
- Balas
- Senin, 22 Oktober 2012 08:28 PM
  Taufik Nurrohman
  Just increase the intervaltime and/or the duration value:
```
$(document).ready(function(){
$('#tinycarousel').tinycarousel({
intervaltime: 10000,
animation   : true,
duration    : 4000
});
});
```
  - Balas
Selasa, 06 November 2012 08:26 AM
Unknown
http://dhobrotara.blogspot.com/
this side slid show only one. how can i many slid show.please help me how can i solve this problem.
- Balas
- Selasa, 06 November 2012 08:52 AM
  Taufik Nurrohman
  Try to update the JQuery version from 1.7.1 to 1.7.2 or 1.8.2
  Or... re-order your script position.
  - Balas
Kamis, 13 Desember 2012 06:50 PM
Unknown
Buat gantiin homepage bagus ni.. :-bd
tapi bisa ga mas slide'a di bikin 2 baris.. itu kan pake 1 baris.. :yaya:
- Balas
Senin, 21 Januari 2013 06:58 PM
Anonim
Mas, ini bisa di bikin jadi 2 baris nggak?
- Balas
Kamis, 31 Januari 2013 12:07 AM
Unknown
gab coba liat blogku http://zaoo.blogspot.com
setelah ane pasang slidenya itu cuman satu yang keliatan, aneh kecilin ukurannya eh ternyata posts berbaris kebawah bukan ke samping? jadi ,solusinya gmn bang?? udah aneh hapus JQuery. tetep aja gak bisa.
- Balas
- Kamis, 31 Januari 2013 09:33 AM
  Taufik Nurrohman
  Script di blogmu banyak yang error mas. Jadi mungkin masalahnya muncul dari script yang lain:
  - Balas
Jum’at, 01 Februari 2013 01:38 AM
azewdsignet
wiss`baru liat yg kaya gini unik..!!
- Balas
Senin, 11 Maret 2013 03:21 PM
V
bang taufik, Slidshow ini bisa gak menampilkan postingan per kategori saja??
saya ingin menmpilkan post dengan kategori "Berita" saja dengan slidshow ini.
#rencananya mau dipakai buat web sekolah bang. hee
- Balas
- Senin, 11 Maret 2013 06:13 PM
  Taufik Nurrohman
  Pelajari opsi slidebyLabels dan slideLabelName
  - Balas
  - Selasa, 12 Maret 2013 05:54 AM
    V
    mkasih bang..
    tapi kok navigasi "next/prev" nya jadi hilang?? :(
    - Balas
Sabtu, 16 Maret 2013 08:14 PM
Jone
Mantep banget nih slidshownya \o/
Tapi kok lebarnya enggak bisa di ubah y
Coba nih gan mampir di http://www.bloggerawn98.com gimana rekomendasinya
- Balas
Jum’at, 12 April 2013 11:55 PM
Karla Castañeda
Hi Taufik NurrohmanSenin,
Very nice job!!
I love your work!
- Balas
Jum’at, 08 November 2013 11:11 PM
V
kok muncul gini kang??
- Balas
- Jum’at, 08 November 2013 11:24 PM
  Kang Rian
  Cari di Edit Html , http://reader-download.googlecode.com nya hapus gan , kasus nya sama kaya di blog ane tuh! :( , nempel di plugin JSON QUICK SEARCH blogger. :D , semoga membantu gan ^_^
  - Balas
  - Sabtu, 09 November 2013 05:09 AM
    Unknown
    Kalau code itu dihapus JavaScriptnya ga jalan dong...
    - Balas
- Senin, 25 November 2013 01:41 PM
  Taufik Nurrohman
  Sudah fix. Baca lagi tutorial di atas dari awal.
  - Balas
Selasa, 26 November 2013 11:31 PM
Asdhar
MasyaAllah..
Minta izin tuk memakainya. Jazaakallahu khair..
- Balas
Sabtu, 03 Mei 2014 12:49 PM
Ahwas
cocok untuk toko online juga nih
- Balas
Jum’at, 06 Juni 2014 10:04 PM
Unknown
Berhasil makasih banyak mas
- Balas

Tahap 1: Mengedit Tema

Tahap 2: Meletakkan Slideshow

Konfigurasi Widget

Contoh Pengaturan Carousel Vertikal