Cara Membuat Slide Show Foto Di Blogger /Blogspot

Cara Membuat Slide Show Foto Di Blogger /Blogspot
Singkat padat stelah share Cara Membuat Preview Gambar Di Blog langsung aja kangroni menanggapi permintaan sobat fb kangroni yang ingin tahu bagaimana caranya membuat slide show foto di blog.
Sekedar pengetahuan mengenai slide show foto yaitu gambar atau foto yang tampak berubah-ubah secara berurutan dan otomatis pada halaman blog.

Langkah-langkah Membuat Slide Show Foto Di Blogger /Blogspot

1.Login Blogger.com
2.Masuk halaman Rancangan lalu pilih Edit HTML
3.Cari kode </head>
4.Selanjutnya taruh kode dibawah ini sebelum kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(3000);

});

function slideShow(speed) {


//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);

}

function gallery() {


//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
//Display the content
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

<style type="text/css">
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

5.Save/simpan.Selanjutnya sobat kembali kehalaman Rancangan lalu klik Tambah Gadget kemudian pilih HTML/JavaScript dan masukkan kode dibawah ini:

<ul class="slideshow">

<li><a href="#"><img src="http://3.bp.blogspot.com/_4HKUHirY_2U/TEVd7gbRVeI/AAAAAAAABGc/J-aSBfN0rhw/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>

<li><a href="#"><img src="http://2.bp.blogspot.com/_4HKUHirY_2U/TEVd7zgT63I/AAAAAAAABGk/9vJ6VYTYGWM/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>

<li><a href="#"><img src="http://4.bp.blogspot.com/_4HKUHirY_2U/TEVd8JKsDaI/AAAAAAAABGs/vzECCT1mDws/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>

<li><a href="#"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/TEVd8VPgRRI/AAAAAAAABG0/O4yhLEWG5UU/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>

</ul>

6.Simpan dan lihat hasilnya Slide Show Foto Di Blogger /Blogspot.
Ket:Untuk kode yang diberi warna merah ganti dengan URL/link gambar sobat dan warna biru untuk judul dan deskripsi gambar agar bisa di indeks oleh mesin pencari Google dll.

Related Post:

79 comments:

reksajaya said...

makasih nih dah mau share ,,, gimana kalo nanti diplikasikan ke wordpress .... mudah2an aja bisa ... :D

berkelana said...

he he he

Komu School Contest VI said...

Wah gan bagus Juga Nih carannya...!

Betwin188.com Agen Bola Terbaik Dukung Anti Rasisme EURO 2012 said...

thx sob atas infonya,,,,,
mampir dan dukung anti rasisme gan di Betwin188.com Agen Bola Terbaik Dukung Anti Rasisme EURO 2012

Betwin188.com Agen Bola Terbaik Dukung Anti Rasisme EURO 2012 said...

mantab kang infonya,,,,,
dukung sy ya kang di Betwin188.com Agen Bola Terbaik Dukung Anti Rasisme EURO 2012

PAKENJENG CHILD'S said...

salam kenal sob...
ane sulton, mo nanya nie.. kalo ganti foto slidernya gmna ya??? ane kan udah upload tuh foto di picasa.. tp pas di gnti link nya kagak jalan ya????

roni said...

coba sobat upload foto di blog percobaan lalu ambil tu link fotonya

Roni Saprijal said...

blog yang membantu

Imelda Music said...

wah, terima kasih banyak ya gan, sungguh sangat membantu gua... thanks so much deh.. sukses selalu.

Anonymous said...

kang, saya mau tanya, jika slide show merupakan rangkuman dari gambar yang ada di blog sendiri (link gambar dari blog sendiri) apakah bisa? maaf sebelumnya saya takut kalau dicoba nanti error saya malah pusing, jadi mending ditanya dulu..hehehe nuhun pisan kang

roni said...

bisa,silahkan dicoba and kalo takut terjadi kesalahan edit sobat download template lengkap dulu untuk keamanan

Anonymous said...

makasih kang balasannya..ane mau tanya lagi nih kang, kalo bikin gadget tombol yg ngelink gitu kayak facebook misalnya tapi desain gambar facebooknya punya sendiri itu gimana caranya kang? yg saya tau biasanya masukin url (kita pake gambar orang lain), sementara untuk gambar sendiri kan kita harus upload, nah itu gmn kang? maklum msh nubie bgt kang, nuhun pisan :) - Ahmad

roni said...

kalo yang sobat maksud hanya mengganti gambar,sobat tinggal upload aja keblog percobaan sobat atau bisa juga upload di panoramio/flickr atau bahkan upload di fb insya alloh juga bisa dll.setelah selesai upload tinggal buka tu gambar dengan cara klik kanan lalu pilih view image,terus copy aja url-nya.
kalo maksud jawaban dari kang roni ini salah, mohon pertanyaan diulang kembali

keterangan lain sobat kunjungi halaman ini http://roningasinanblog.blogspot.com/2011/07/cara-mudah-membuat-link-pada-gambar.html?utm_source=BP_recent

Anonymous said...

nuhun kang, sangat membantu :)

sukses terus kang!!

roni said...

AMIN,BEGITU JUGA SEBALIKNYA SMOGA SOBAT JUGA TAMBAH SUKSES

Firmansyah said...

bos kalo saya mua bikin dua slide gimana dengan pot yang berbega tapi gabisa

roni said...

MAAF, KANGRONI BELUM BISA MENEMUKAN SOLUSINYA

budi os 19 said...

mantabb....Sob

Arifin Yus said...

Mas..makasih,belum jadi juga slide slidenya nih

MangOzie said...

thank broo..

Yogz Blogspot said...

wah thx nih infonya gan slidenya udh jadi nih

roni said...

terimakasih sobat semua dah mau berkunjung....

success said...

thanks gan atas artikelnya, ini membantu bgt..

Click Back y bos

A10math said...

htrnuhun kang ats artikel2nya, mohon keikhlasanya mau saya manfaatkan...

roni said...

Silahkan sobat, kang roni senang klo memang coretan yang apa adanya ini bisa bermanfaat

Hotel said...

makasi gan atas ilmu sharingnya...hasilnya tidak mengecewakan

roni said...

Thanks gan atas kunjungannya

Ahmad Faisol Munir said...

klo memperlambat slide nya gmna tu gan?

roni said...

Cari tulisan seperti dibawah pada kode langkah ke 4 di atas.
set 6 seconds for each images
slideShow(3000)

setelah ketemu ganti angka 3000 menjadi 9000 atau lebih.

Brandon Kristiano said...

Makasih gan, ini yg dicari-cari!

Hack v 1.5 said...

mksih min.!

Anonymous said...

Gan mau nanya nih,saya baru coba2 bikin blog.baru beberapa posting.nah disetiap posting ini dilengkapi dengan beberapa foto yg saya upload dr picasa.

masalahnya di beberapa posting foto2 tsb dilengkapi dg slide,tp di posting yg lain fotonya ga ada slidenya.padahal saya pakai cara yg sama :D

ane terlanjur cinta sama tampilan foto yg pake slide,karena foto bisa tampil tanpa harus meninggalkan blog ;)

maaf ya kalau pertanyaannya kepanjangan,mohon bantuannya ya gan,makasih :)

roni said...

Kangroni minta link blog sobat supaya bisa ngecek dulu,,,

watashigame said...

good boy, jangan lupa kunjungi ane di uchusutarya94.blogspot.com

angkasa5 said...

Makasih sob buat tutorialnya,, mau di coba dulu nihh

roni said...

Thanks gan atas kunjungannya

m.herry hidayat said...

mantabb
sob...

Dixin antheM said...

Kang cara ganti fotonya gmna? kok saya dah masukin link fotonya di album gmail saya tapi g bisa" juga.
Solusinya dong kang?

roni said...

Sob sebaiknya jangan upload di gmail, upload saja di blog percobaan/blog kedua sobat atau bisa juga di picasa.kalau di gmail itu berarti harus melewati password sobat dan gmail itu merupakan email yang bersifat penyimpanan jadi wajar kalau tidak bisa . coba sobat pikirkan kalau dari gmail bisa itu berarti setiap foto yg disimpan di email google bisa di lacak semua dan itu akan membocorkan semua data/file penting yg ada di gmail.

Hari Agustian said...

mantab Min... Thx, slide show nya membantu

RONI-BLOGQ said...

Terima kasih atas blognya, mas..

dutapraja.blogspot.com said...

thanks tutorialnya..

Jefry said...

bagus sekali, slider semacam ini bisa makin memperindah tampilan blog selain itu bisa membantu mendapatkan banyak pageview
nice share

ddy haris said...

thx gan informasinya sngt bermanfaat

Financial Advertising said...

Kalau slide buat postingan bisa gak gan cara ini

roni said...

bisa sob tinggal kode pada langkah ke5 ditaruh pada kolom posting/entri,dan pastikan saat penaruhan kode dalam mode HTML BUKAN COMPOSE.

era fone said...

brow mau tanya klau pasan gambarx ambil linknya dimana klau diblog

roni said...

Kalau menggunakan firefox Klik kanan pada gambar lalu pilih copy image location

Mitra Ticketing said...

Terima kasih. Infonya langsung di coba dan hasilnya tidak mengecewakan. Mau lihat buktinya, langsung saja cek di www.tiketbatam.com.

Makasih ya Kang...

roni said...

trimakasih kembali atas kunjungannya.and oke kang roni siap berkunjung...

Cari Uang di Internet said...

Terima Kasih Infonya...

safitrie mustika sarie said...

kok gak bisa itu nyari tulisan rancangannya teh dimana?? kok aku bingung

roni said...

Setelah sobat login Blogger.com perhatikan icon berbentuk segi tiga disamping tulisan Lihat blog / view blog yg terletak dibagian atas kanan,kemudian klik icon tadi yg nantinya akan ditampilkan menu dropdown kebawah dengan berbagai pilihan fitur blogspot,untuk masuk Rancangan sobat pilih dan klik saja fitur Template,kemudian perhatikan tulisan Edit HTML tepat dibawah sebelah kanan screen view blog anda,tinggal klik dan keluarlah halaman Rancangan yg bisa anda otak atik.

MyBrain HasSkip said...

Gan Klo Memperkecil ukuran fotonya byar ga terlalu lebar ke pinggir gimana rubah code,y

roni said...

Coba cari angka 600 dan 240 di atas kemudian perkecil nominalnya selain itu position juga harus di ganti misalnya dengan center.

Herlina Han said...

position kan ada 3, position yang mana yg di ganti?

roni said...

Coba yg atas sob...

Admin said...

Sip, sudah saya praktekkan dan memodifikasi dalam bentuk banner iklan.
Mohon ijin share
http://pantespromosi.blogspot.com/2013/04/penampilan-banner-iklan-menggunakan.html

roni said...

Silahkan sob...

farhan muzakki said...

siapa yang mau cheat ke sini:

farhanmastercheat.blogspot.com

desainer asri said...

thank you ini blog ku desainerasri.blogspot.com

Anonymous said...

I blog often and I really thank you for your information.
This great article has really peaked my interest. I'm going to bookmark your blog and keep checking for new information about once a week. I opted in for your RSS feed too.

Have a look at my website; photography websites

keringat dekgam said...

terima kasih banyak mas, artikelnya sangat berguna untuk blog saya

Baiturrahman said...

Alhamdulillah ...... :)
makasih

Ardian Ardiansyah said...

Infonya sangat bermanfaat, setelah sekian lama muter-muter cari tutorial buat bikin slide show akhirnya terdampar disini dan berhasil membuat slide show picture. Thanks for the tutorial.

www.ardheyboyzz.blogspot.com

Abiyyu Aulia said...

Makasih gan Infonya..

TOHA SAPUTRA said...

kok belu bisa gambar yang lain kok muncul...bisa cek http://usahakami29.blogspot.com/

Kangroniblog said...

ane dah melncur kesasaran.....dan ane cek ternyata dah sukses gitu kok sob..thank atas kunjungannya and silahkan mampir lagi.

Danang Setyawan said...

kalo cara buat agar muncul di laman blog gmana gan?
bukan di antar muka blog,jadi saya mau buat halaman kusus galery,
cek di sini http://danangfebri.blogspot.com/

Kangroniblog said...

coba taruh kode kelima pada laman dlm mode edit html

Ibrahim M.Pd.I said...

Kalau boleh tanya, slide yang sobat paparkan berat ngak ya loadingnya, sebab jika berat tentu akan menggangu kinerja blog secara keseluruhan. Terima kasih sebelumnya dan salam kenal

Kangroniblog said...

tidak terlalu berat sob karena dengan speed 100 kb/sc saja di tempat ane tdk memerlukan loadpage lama

SMKN 1 KEHUTANAN TUBAN DI PP WALI SEMBILAN said...

trims gan tutornya sangat membantu ane

Kangroniblog said...

sama2 sob,thanks juga ats kunjungannya

Ade Putra said...

wah keren artikelnya gan.... mantap dah...

Toni said...

terima kasih atas tutorial memasang slideshow ini, nanti akan saya pasang di blogspot milik saya

achmad arifaturrohman said...

tengkyu tutornya...

Dewangga Shevamillano S said...

Anda mau cari info?? Atau mau download lagu atau games keren?? Datang saja ke Segalainfo17.blogspot.com. THX buat admin.

PR. IPM SMKM 9 JKT said...

gan, cara mengatur speed gambarnya gmana yaa? tolong turtolnya ya gannn
makasihhh

Post a Comment