Slideshow Otomatis Blogger dengan TinyCarousel (Custom)
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 Comments:
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
@Ijal Fauzi Nggak apa-apa. Lagipula Saya menargetkan carousel ini untuk blog-blog bertema berita saja kok, bukan galeri, portfolio atau fotografi.
konfigurasinya caranya masang di atas /head mas??
masih bingung :(
@Alam Perwira ??? :\
@Taufik Nurrohmanudah tau dink mas :D tpi kok punya saya cuman muncul 1slide saja ya?? :\
coba dicek mas http://al4m-blog.blogspot.com/
@Alam Perwira Saya cek menggunakan firebug ada semua kok isinya:
http://1.bp.blogspot.com/-G4aRjLXyYwQ/T2rAo-4fhHI/AAAAAAAACXA/X1tqRjYUgVQ/s1600/underground-firebug.png
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>
@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..
Alhamdulillah akhirnya mas taufik memenuhi permintaan saya, langsung mau praktek dulu mas. Nanti kalo kesulitan mohon bantuannya... terimaksih sekali lagi
@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.
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 :)
@It's a Hardlife
Berhasil dengan sukses mas Taufik, tapi kalau mau menampilkan hanya judulnya saja tanpa summary bagaimana ya mas?
@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;
}
@Rohis Facebook Wkwkwk... kaget Aku, fotomu kembar ^_^
Ya, tapi bukan sekarang. Sedang ada satu hal lagi yang ingin Saya selesaikan mengenai eksperimen emoticon ini.
@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 :)
mas, bagaimana caranya supaya judul di slide nya kalau di sentuh dengan cursor warna judulnya berubah,,
tolong pencerahannya terimakasih mas :)
@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 */
}
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
@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:
http://1.bp.blogspot.com/-d49M2p1KA20/T2qdEKAjv0I/AAAAAAAACW4/zpHi_gsnyas/s1600/blogger-feed-configuration.png
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.
@Taufik Nurrohman
Wah iya gan bener, udah keluar sekarang gambarnya. Makasih banyak ya
mas bro kalo pengin tampil hanya gambar dan judulnya di atas gambar sebelah bawah gimana mas?
makasih sebelumnya'
@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>
KAng Taufik, saya sudah pake slideshow ini dan berfungsi di chrome. Namun ternyata di mozilla tidak berfungsi. Ada solusinya engga kang?
@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? :\
@Taufik Nurrohman KAng, sudah ditest di Mozilla ternyata berfungsi. Waduh harus ganti lagi jadinya :(
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
@zaldi heriwan Coba lepas kode yang Saya beri garis bawah lalu simpan lagi, sambil mempelajari komentar-komentar di atas.
waduh pak, tetap nga' bisa aku nicht, padahan semua instruksi udah di chek ulang. apakah yang salah dlm html blogku ini ya?
@zaldi heriwan Sepertinya iya. Saya lihat banyak sekali script loader sekelas dengan CDN Google di dalam :(
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
mas, gimana cara buat dua atau lebih slide ya?
mohon bimbingannya. masih nubi. :)
@Ibnu Hazar Nggak bisa, untuk dua slideshow dalam satu halaman yang sama nggak bisa 7:(
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.
@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.
Ok pak.
Ada tutorial hideline berita utama seperti detik com??
tadinya saya ingin mencari yg seperti itu pak.
Terima Kasih
di blog saya kok cuma muncul 1 ya mas , gambarnya??
http://rowniie.blogspot.com
Baca pertanyaan-pertanyaan dari Alam Perwira yang sudah Saya jawab di atas.
gk ada mas kode kyk gtu??mohon pencerahanya.
Keren Om...
Tp koq di blog saya thumbnail / gambar ga mau muncul ya?
ini blog saya>> http://digitaljogja.blogspot.com
Thanks
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
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/
Set opsi Umpan Blog menjadi Penuh...
Slideshow yang ada di halaman demo juga ditaruh di dalam posting :)
Just increase the intervaltime and/or the duration value:
$(document).ready(function(){
$('#tinycarousel').tinycarousel({
intervaltime: 10000,
animation : true,
duration : 4000
});
});
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.
Try to update the JQuery version from 1.7.1 to 1.7.2 or 1.8.2
Or... re-order your script position.
Buat gantiin homepage bagus ni.. :-bd
tapi bisa ga mas slide'a di bikin 2 baris.. itu kan pake 1 baris.. :yaya:
Mas, ini bisa di bikin jadi 2 baris nggak?
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.
Script di blogmu banyak yang error mas. Jadi mungkin masalahnya muncul dari script yang lain:
http://3.bp.blogspot.com/-VxsYIKedAv0/UQnXppdm1PI/AAAAAAAAGto/76bjjno1UWc/s1600/error-console.png
wiss`baru liat yg kaya gini unik..!!
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
Pelajari opsi slidebyLabels dan slideLabelName
mkasih bang..
tapi kok navigasi "next/prev" nya jadi hilang?? :(
Mantep banget nih slidshownya \o/
Tapi kok lebarnya enggak bisa di ubah y
Coba nih gan mampir di http://www.bloggerawn98.com gimana rekomendasinya
Hi Taufik NurrohmanSenin,
Very nice job!!
I love your work!
kok muncul gini kang??
[img]http://i.imgur.com/hStJcqi.png[/img]
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 ^_^
Kalau code itu dihapus JavaScriptnya ga jalan dong...
Sudah fix. Baca lagi tutorial di atas dari awal.
MasyaAllah..
Minta izin tuk memakainya. Jazaakallahu khair..
cocok untuk toko online juga nih
Berhasil makasih banyak mas
kang, mau tanya nih kalo di buat responsive css yg harus di ubah apa ? soalnya kn setting lebar nya otomatis lewat tinycarousel-container itemwidth ??
Thx kang..
Tidak bisa. Slideshow ini sejak awal memang tidak responsif.
okle, kang.. sampean ada referensi ga buat slideshow yg responsive
Sebenarnya kalau orang nggak pada “berat” buka situs www.google.com tidak akan susah.
assalamu alaikum .....
terima kasih dik dengan widgetnya ,
moga tetap sehat .
Waalaikumsalam. Terima kasih juga atas doanya.
kok yang tinycarouselnya yg kena cuman 1 ya??
var multiFeed = {
feedsUri: [
{
name: "Judul Widget 1",
url: "http://dte-feed.blogspot.com/",
tag: "Efek"
},
{
name: "Judul Widget 2",
url: "http://dte-feed.blogspot.com/",
tag: "Widget"
},
{
name: "Judul Widget 1",
url: "http://dte-feed.blogspot.com/",
tag: "Slideshow"
}
],
numPost: 7,
showThumbnail: true,
showSummary: true,
summaryLength: 80,
titleLength: "auto",
thumbSize: 72,
containerId: "tinycarousel-container",
readMore: {
text: "Selengkapnya",
endParam: "?max-results=20"
},
nav: {
prevText: '<',
nextText: '>',
},
carousel: {
axis: "x",
itemwidth: 100,
itemheight: 100,
itemmargin: 5,
itempadding:10,
visible: 2,
display: 1,
start: 1,
interval: true,
intervaltime: 3000,
animation: true,
duration: 1000,
easing: "swing",
callback: null
}
};
JS Lanjutannya :
http://pastebin.com/raw.php?i=ha4Ar4pL
maaf merepotkan
terima kasih
Kamu mikirnya widget ini bisa dipakai seperti widget ini ya? Tidak bisa mas :p
iya engga bisa ternyata wkwkwk...btw thx udah jawab
bagaimana jika saya ingin mengubahnya menjadi related posting mas,yang berada dibawah posting
Post a Comment
<< Home