Sabtu, 23 April 2011

Cara Membuat Gambar Berubah-ubah di blogspot | Membuat Slide Show

cara membuat gambar berubah-ubah secara otomatis di website, cara membuat gambar berubah-ubah pada halaman utama blogspot, cara membuat gambar berubah-ubah di atas postingan blog atau website, tips membuat gambar berjalan otomatis di website, tips memasang gambar berjalan atau berubah-ubah di blogspot, website, blogger


Mungkin ketika anda melakukan browsing pernah melihat gambar yang berubah ubah dengan keren tampak di halaman awal sebuah website atau sebuah blog. Jangan kuatir. kali ini anda juga bisa membuatnya. Caranya adalah sebagai berikut :

Masuk ke edit html blog...

Cari Kode </head>

Copy kode di bawah ini dan pastekan 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>




Setelah itu buat gadget baru (HTML/JavaScript) dengan kode di bawah ini..


<ul class="slideshow">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigmzN9NgNZpx7u_qqgk9XUC1jmgblu89gDNDbXurkYZ-W9C9wK3bZ53VjAd4PnTtymAJuYDHlPRLugKX8n6w-hHky3S6_sY9JYqMz57p4jBjfdgDJOOoIGCC91wWIBQTE1FHnLmLSNFbs/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdR1Ifao1s2dyODd6MLjk2rTyOnvQMP91unNuesf3t1pKNhBBcqeeZWm9xYlFY5puhTL-S-wpkg3R_SSaCS9KndMAiZXzFoYKU1lTO2R7oHjTQxeuvhzqSRPPqRpl8CGnrLNGyAFQ6i-A/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaHPwWohbv1iFv3K3uAj5fTopbApGd9jcH6zFJUg45JHLUlcdzI9tznzqQpkpIky4GT57OtwG0w_59fwbKQ7bEnaxHN2puOZ9r8Uj6M1o6XkhyViS9J9kaAkMliooBpgbBF4ePOiQo4Qg/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQz1rpshegKTFcdphXvdAiTJnSoqz-Jh-ODQSsB_LJezzls5oj41OWX3rt_aPtQsblXTVttLFl8_hgvgpRHTaAUGpcTNdhVmTyMNsjYkjf95cpNpnNL-qj6GGnuoFhKFWZq8IhDjzG7iM/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>

</ul>

Catatan : Ganti Tulisan Tebal dengan URL gambar anda.. !!!. Ganti title dan alt sesuai keinginan anda..!!!
UNTUK MELIHAT CONTOH SILAHKAN Klik link INI

Artikel menarik lainnya :
Cara Membuat Gambar Bergetar di Blogspot


SELAMAT MENCOBA....
by Khairul Umam

65 komentar:

  1. Aduuhh Soobb....ane nyari2 tutorial seperti ini sampe budeg ng' ketemu.., ternyata artikelnya disini ta..??
    Makasih banyak Sobb..Ini artikel yg ane cari2.., akhirnya ketemu juga...

    BalasHapus
  2. Oya sob.., sekalian nih mau nanya.., Tadi ane coba klik tab HOME di web ente.., terus GAMBAR SLIDE SHOWnya jadi muncul.., Tapi ketika ane klik salah satu artikel blog ente..GAMBAR SLIDE SHOW nya jdi hilang..

    Naahh...cara buat seperti itu gimana sob..?? Soalnya ane dah coba di blog ane, tpi ketika ane klik salah satu postingan.., lha kok GAMBAR SLIDE SHOW nya masih ada...

    Tolong bantu ane ya sob.., makasih sebelumnya..

    BalasHapus
  3. Ilalang : sama sama sob.... :-D
    itu karena slide show nya saya non aktifkan di bagian postingan.. tetapi kalo dibagian home saya aktifkan.. jadi tidak memberatkan blog....

    BalasHapus
  4. Khazanah Islam : Terimakasih :-D

    BalasHapus
  5. ovivision maturnuhun gan..ni artikel sangat membantu buat ane si pemula....
    uye...

    BalasHapus
  6. sama sama gan.. sering sering mampir y.. mf ane akhir2 niy jarang posting.. ujian akhir smester gan.. haha.. thansk 4 comment.....

    BalasHapus
  7. kalo ngubah ukuran gambar gimana mas??? Mantaff.. infonya...

    BalasHapus
  8. Khairul_Umam said... July 6, 2011 8:07 AM
    Ilalang : sama sama sob.... :-D
    itu karena slide show nya saya non aktifkan di bagian postingan.. tetapi kalo dibagian home saya aktifkan.. jadi tidak memberatkan blog....


    gimana caranya agar menghapus di bagian posting..?
    mohon bantuANNYa

    BalasHapus
  9. Tomi : Setelah kode img , tambahkan kode style="height:100px; width:50px"

    itu untuk panjang dan lebar.. kalo ukuran nya terserah ... :-D

    terimakasih

    BalasHapus
  10. makasi bro...keren banget artikelnya...sangat membantu

    BalasHapus
  11. Sangat bermamfaat kak, langsung take action ahh...!!!

    BalasHapus
  12. gimana kalo yang slide 7 postingan terakhir dan selalu terapdate apabila qta posting baru
    kaya di lihatberita.com
    bisa ga??

    BalasHapus
  13. klo mau rubah ukuran gmn ????

    truz klo mau tambah gambar gmn ???



    help please

    blz via email knalpot_motor@yahoo.co.id


    thanks

    BalasHapus
  14. kang trus gimana sih cara untuk masukin gambar dari komputer kita untuk slideshownya... sorry newbie..

    BalasHapus
  15. upload dulu ke situs penyedia layanan upload gambar.. saya sarankan upload nya ke photobucket.com

    BalasHapus
  16. Trims banget informasinya ........
    kami coba dulu gan slide show nya ... nanti kami berkunjung lagi

    BalasHapus
  17. Kang Umam TQ ya, ijin copy scriptnya utk dibagikan ke yg laennya...Yg udah baca di JK, sdh diundang juga agar berkunjung ke Blog Kang Umam.
    Kalau ada waktu, banner blog Kang Umam saya tampilkan di Blog saya...

    BalasHapus
  18. thanks
    oya mas bagaimana amembuat slid show pada posting soal nya saya ingin membuat gambar revie di blog saya menggunakn slideshow

    BalasHapus
  19. cara ganti dgn URL gambar sndri gmna ? URLnya itu dri mna ?

    BalasHapus
  20. terimaaaa kkaasiihhhh :)))))) tapi cara biar gambarnya bisa di klik gimanaa???

    BalasHapus
  21. sama kalo kita buat link biasa.. cuman tag a nya di antara image

    BalasHapus
  22. kunjung & follow ke blogku jg ya...
    ni: http://liberty-aries.blogspot.com/

    BalasHapus
  23. Kalo diterapkan pada template dinamis blog yang baru bisa gak?

    BalasHapus
  24. mantap gan ... thank buat ilmu nya Semoga mendapatkan balasan yang lebih baik .... sukses bung ....

    BalasHapus
  25. Amiin.. makasih do'anya bung.. sukses selalu... :-D

    BalasHapus
  26. Alhamdulillah saya berhasil mencoba dan blog ini masih aktif..
    saya mau tanya sedikit nih.. saya coba modif dari script yang udah di kasih d sni.. tapi belum bisa menemukan jalan keluar nya.. mungkin karena kurang mengerti juga script jquery nya.. ini kan hanya bisa nampilin dari gambar aja.. gimana kalo slideshow nya sebagian ada yang full text tanpa caption di bawah..
    urutan yang saya ingin buat dari tulisan misal Jadwal Pelatihan tanggal tempat dll.. kemudian baru masuk ke galeri yang menampilkan foto2 seperti yang sudah mampu ditangani oleh script ini..
    mungkin saudara bisa membantu saya..
    Terima Kasih..

    jawaban nya bisa d kirim k email saya.. cuma maap agak sedikit privacy ndak papa kan ya..
    gimana saya kasik email saya biar ndak k post di umum..?

    BalasHapus
  27. Alhamdulillah mas khairul, syukron ats artikelnya and specially for website pribadi sy yg mas rancang...mantap mas. o ya mas, ukuran brp gambar yg cocok utk slideshow-nya?? sy dah cb tp tlalu besar n ga' muat...hehehe

    BalasHapus
  28. Bro numpang nanya nie w kan baru bermaen di blog nie numpang tanya donk itu buat gambar nya ke url gimana ya bro tolong kasi solusi donk terimakasi sebelum nya atas petunjuk nya

    BalasHapus
  29. Pak syukrin : untuk ukuran nya cukup kecil saja sekitar 400an px... Silahkan mas cari cara untuk mengecilkan ukurannya di google dengan kata kunci :
    Cara Mengecilkan Ukuran Gambar Dengan Html

    BalasHapus
  30. Untuk RICHI silahkan baca artikel ini : Mengenal Link Dalam Blog itu juga berlaku untuk gambar kok..

    BalasHapus
  31. mas,kl mau ganti ukuran gambar slideshow nya gmn supaya sesuai gmn ya? yg diganti kode img sebelah mana? gambarnya terlalu kecil soalnya..sy udah coba cari tapi ga nemu2..
    makasi buat infonya mas ;))

    BalasHapus
  32. makasih gan,,!
    http://pulauseributours.com

    BalasHapus
  33. makasih gan,,!
    http://pulauseributours.com

    BalasHapus
  34. Terimakasih ya tipsnya.. salam blogger..

    BalasHapus
  35. waaah... tambah ilmu lagi nih buat ngobrak ngabrik blog... hehe...
    keren sob triknya... thanks ye.. ^_^

    BalasHapus
  36. wow mantap gan infonya terimaksih gan

    BalasHapus
  37. Keren Sob tutorial Cara Membuat Gambar Berubah-ubah di blogspot | Membuat Slide Show nice info ya

    BalasHapus
  38. terimakasi gan ilmunya. bagus artikelnya

    BalasHapus
  39. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  40. alamat ulr gambarnya gimana ( maksudnya mengganti dengan url blog saya )

    BalasHapus
  41. salam kenal.. sob sy mau tnya untuk bagian slidesow, sy sdh ganti linknya tp ko hasilnya gambar g muncul y, linknya gambarnya itu saya buat dr photobuchet... mohon bantuannya y sob...thanks bgt

    BalasHapus
  42. berhasil.sayangnya ditempelete punyaku ka maksimal tapi saya puas bisa mengaplikasikanya karna saya masih baru..trima kasih tutorialnya sangat membantu sekali..trims salam persahabatan dari saya

    BalasHapus
  43. Terimah kasih,,,mantap gan ilmunya!!!!silikan mampir dilapak saya thank's
    barafabisnis

    BalasHapus
  44. kalau ukuran lebar tinggi panjang yang sesuai itu biasanya berapa ya?

    BalasHapus
  45. makasih banyak buat ifonya,, nice artikel

    http://goo.gl/onRyrt - obat kelenjar getah bening

    BalasHapus
  46. makasih banyak buat artikel nya,, nice post...

    http://goo.gl/7DUIes

    BalasHapus
  47. Artikelnya Uapikk tenan.. nganti drijiku kriting cari tutorial kayak gini..
    makasih byk gan..

    BalasHapus