Slideshow Otomatis Blogger dengan TinyCarousel (Custom)
Tabel Konten
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:
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: '<',
nextText: '>',
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!
Konfigurasi Widget
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: '▲',
nextText: '▼',
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() {}
}
};
72 Komentar
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
Taufik Nurrohman
@Ijal Fauzi Nggak apa-apa. Lagipula Saya menargetkan carousel ini untuk blog-blog bertema berita saja kok, bukan galeri, portfolio atau fotografi.
Putra
konfigurasinya caranya masang di atas /head mas??
masih bingung :(
Taufik Nurrohman
@Alam Perwira ??? :\
Putra
@Taufik Nurrohmanudah tau dink mas :D tpi kok punya saya cuman muncul 1slide saja ya?? :\
coba dicek mas http://al4m-blog.blogspot.com/
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):
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..
Games Lover
Alhamdulillah akhirnya mas taufik memenuhi permintaan saya, langsung mau praktek dulu mas. Nanti kalo kesulitan mohon bantuannya... terimaksih sekali lagi
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.
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 :)
Games Lover
@It's a Hardlife
Berhasil dengan sukses mas Taufik, tapi kalau mau menampilkan hanya judulnya saja tanpa summary bagaimana ya mas?
Taufik Nurrohman
@It's a Hardlife Pertama set nilai dua variabel ini menjadi
false
:lalu set elemen paragraf menjadi
display:none
: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.
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 :)
admin
mas, bagaimana caranya supaya judul di slide nya kalau di sentuh dengan cursor warna judulnya berubah,,
tolong pencerahannya terimakasih mas :)
Taufik Nurrohman
@mr, copas Tepat di bawah kode ini:
tambahkan kode ini:
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
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.
Setio Aji
@Taufik Nurrohman
Wah iya gan bener, udah keluar sekarang gambarnya. Makasih banyak ya
Baharudin Nofiandi
mas bro kalo pengin tampil hanya gambar dan judulnya di atas gambar sebelah bawah gimana mas?
makasih sebelumnya'
Taufik Nurrohman
@bahar Waduh, nggak bisa tuh mas, kalau mau begitu harus memodifikasi markupnya sendiri. Coba dicek di bagian ini:
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?
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? :\
Muhammad Zaki Al Aziz
@Taufik Nurrohman KAng, sudah ditest di Mozilla ternyata berfungsi. Waduh harus ganti lagi jadinya :(
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
Taufik Nurrohman
@zaldi heriwan Coba lepas kode yang Saya beri garis bawah lalu simpan lagi, sambil mempelajari komentar-komentar di atas.
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?
Taufik Nurrohman
@zaldi heriwan Sepertinya iya. Saya lihat banyak sekali script loader sekelas dengan CDN Google di dalam :(
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
Unknown
mas, gimana cara buat dua atau lebih slide ya?
mohon bimbingannya. masih nubi. :)
Taufik Nurrohman
@Ibnu Hazar Nggak bisa, untuk dua slideshow dalam satu halaman yang sama nggak bisa 7:(
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.
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.
Doddy Sugianto
Ok pak.
Ada tutorial hideline berita utama seperti detik com??
tadinya saya ingin mencari yg seperti itu pak.
Terima Kasih
Admin SS
di blog saya kok cuma muncul 1 ya mas , gambarnya??
http://rowniie.blogspot.com
Taufik Nurrohman
Baca pertanyaan-pertanyaan dari Alam Perwira yang sudah Saya jawab di atas.
Admin SS
gk ada mas kode kyk gtu??mohon pencerahanya.
RCW
Keren Om...
Tp koq di blog saya thumbnail / gambar ga mau muncul ya?
ini blog saya>> http://digitaljogja.blogspot.com
Thanks
Taufik Nurrohman
Set opsi Umpan Blog menjadi Penuh...
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
Taufik Nurrohman
Slideshow yang ada di halaman demo juga ditaruh di dalam posting :)
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/
Taufik Nurrohman
Just increase the
intervaltime
and/or theduration
value: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.
Taufik Nurrohman
Try to update the JQuery version from
1.7.1
to1.7.2
or1.8.2
Or... re-order your script position.
Unknown
Buat gantiin homepage bagus ni.. :-bd
tapi bisa ga mas slide'a di bikin 2 baris.. itu kan pake 1 baris.. :yaya:
Anonim
Mas, ini bisa di bikin jadi 2 baris nggak?
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.
Taufik Nurrohman
Script di blogmu banyak yang error mas. Jadi mungkin masalahnya muncul dari script yang lain:
azewdsignet
wiss`baru liat yg kaya gini unik..!!
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
Taufik Nurrohman
Pelajari opsi
slidebyLabels
danslideLabelName
V
mkasih bang..
tapi kok navigasi "next/prev" nya jadi hilang?? :(
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
Karla Castañeda
Hi Taufik NurrohmanSenin,
Very nice job!!
I love your work!
V
kok muncul gini kang??

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 ^_^
Unknown
Kalau code itu dihapus JavaScriptnya ga jalan dong...
Taufik Nurrohman
Sudah fix. Baca lagi tutorial di atas dari awal.
Asdhar
MasyaAllah..
Minta izin tuk memakainya. Jazaakallahu khair..
Ahwas
cocok untuk toko online juga nih
Unknown
Berhasil makasih banyak mas