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:

68 komentar:

reksajaya mengatakan...

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

berkelana mengatakan...

he he he

Komu School Contest VI mengatakan...

Wah gan bagus Juga Nih carannya...!

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

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

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

PAKENJENG CHILD'S mengatakan...

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

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

Roni Saprijal mengatakan...

blog yang membantu

Imelda Music mengatakan...

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

Anonim mengatakan...

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

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

Anonim mengatakan...

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

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

Anonim mengatakan...

nuhun kang, sangat membantu :)

sukses terus kang!!

roni mengatakan...

AMIN,BEGITU JUGA SEBALIKNYA SMOGA SOBAT JUGA TAMBAH SUKSES

Firmansyah mengatakan...

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

roni mengatakan...

MAAF, KANGRONI BELUM BISA MENEMUKAN SOLUSINYA

budi os 19 mengatakan...

mantabb....Sob

Arifin Yus mengatakan...

Mas..makasih,belum jadi juga slide slidenya nih

MangOzie mengatakan...

thank broo..

Yogz Blogspot mengatakan...

wah thx nih infonya gan slidenya udh jadi nih

roni mengatakan...

terimakasih sobat semua dah mau berkunjung....

success mengatakan...

thanks gan atas artikelnya, ini membantu bgt..

Click Back y bos

A10math mengatakan...

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

roni mengatakan...

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

Hotel mengatakan...

makasi gan atas ilmu sharingnya...hasilnya tidak mengecewakan

roni mengatakan...

Thanks gan atas kunjungannya

Ahmad Faisol Munir mengatakan...

klo memperlambat slide nya gmna tu gan?

roni mengatakan...

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

Makasih gan, ini yg dicari-cari!

Hack v 1.5 mengatakan...

mksih min.!

Anonim mengatakan...

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

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

watashigame mengatakan...

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

angkasa5 mengatakan...

Makasih sob buat tutorialnya,, mau di coba dulu nihh

roni mengatakan...

Thanks gan atas kunjungannya

m.herry hidayat mengatakan...

mantabb
sob...

Dixin antheM mengatakan...

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

roni mengatakan...

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

mantab Min... Thx, slide show nya membantu

RONI-BLOGQ mengatakan...

Terima kasih atas blognya, mas..

dutapraja.blogspot.com mengatakan...

thanks tutorialnya..

Jefry mengatakan...

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

ddy haris mengatakan...

thx gan informasinya sngt bermanfaat

Financial Advertising mengatakan...

Kalau slide buat postingan bisa gak gan cara ini

roni mengatakan...

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

era fone mengatakan...

brow mau tanya klau pasan gambarx ambil linknya dimana klau diblog

roni mengatakan...

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

Mitra Ticketing mengatakan...

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

Makasih ya Kang...

roni mengatakan...

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

Cari Uang di Internet mengatakan...

Terima Kasih Infonya...

safitrie mustika sarie mengatakan...

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

roni mengatakan...

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

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

roni mengatakan...

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

Herlina Han mengatakan...

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

roni mengatakan...

Coba yg atas sob...

Admin mengatakan...

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

Silahkan sob...

farhan muzakki mengatakan...

siapa yang mau cheat ke sini:

farhanmastercheat.blogspot.com

desainer asri mengatakan...

thank you ini blog ku desainerasri.blogspot.com

Anonim mengatakan...

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

terima kasih banyak mas, artikelnya sangat berguna untuk blog saya

Baiturrahman mengatakan...

Alhamdulillah ...... :)
makasih

Ardian Ardiansyah mengatakan...

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

Makasih gan Infonya..

TOHA SAPUTRA mengatakan...

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

Kangroniblog mengatakan...

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

Poskan Komentar