Jadikan Background WEBSITE Slide Auto

Pasti sobat sudah tidak asing lagi dengan Blog.Dimana Trik n Tip's selalu ada dan bermunculan blog-blog new bie seperti blog ini.

Tetapi tidak menutup kemungkinan untuk para blogger pasti banyak yang mengerti dan paham "Cara menjadikan Gambar Web Slid Auto".

Untuk kesekian kalinya saya post dan Hari ini saya akan berbagi dengan sobat semuanya tentang Trik ini.Trik ini Aku dapat waktu browsing di Google.

Tanpa di sengaja menemukan Trik ini di web nya master.Yang saya sendiri lupa nama blognya.
Sebelum ke pokok  Artikel di Blog ini silahkan sobat siapkan bahan-bahannya dulu yaitu pilih Gambar atau Photo yang mau di jadikan background.

Dari pada teman -teman penasaran lagi dan bingung langsung saja simak langkah-langkahnya di bawah ini :


1. Gambar atau Photo
2. Silahkan Upload photo atau gambarnya [ yang penting bisa dapat URL dari photo tsb ] saran saya : upload di picasaweb.google.com
3. Catat URL photo tadi yang sudah di Upload
4. Masuk / Login ke Blog anda. (Blogger)
5. Pilih "Template" >> Klik "Edit HTML" >> beri tanda centang pada "Expand Template Widget".
6. Untuk keamanan jika terjadi kesalahan sebaiknya anda "COPY" terlebih dahulu script HTML anda dan "PASTE" kan ke dalam NOTEPAD untuk backup.
7. Cari kode </head> pada bidang HTML template blog anda (gunakan tombol "Ctrl+F" untuk memudahkan pencarian)
8. Masukkan kode script berikut tepat diatas kode </head>


Kode Script-1 :

<br
 />
<br />
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'
type='text/javascript'></script><br />
<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>
</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><br />
<style type="text/css">
ul.slideshow {
list-style:none;
width:500px;        // ukuran lebar gambar
height:200px;       // ukuran tinggi gambar
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:500px;
height:200px;
border:none;
}
#slideshow-caption {
width:500px;
height:60px;
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><br />
<br />

9. "Simpan Template" blog anda.
10. Sekarang beralih ke menu "Tata Letak"
>> Klik "Tata Letak" >> Klik "Tambahkan Widget" >> pilih "HTML / JAVASCRIPT".
11. Masukkan kode script berikut kedalam bidang widget "HTML / Javascript" tersebut.


Kode script -2

<br
 />
<br />
<ul class="slideshow">
<li><a href="http://url link
tujuan"><img src="http://Url gambar-1" title="Judul Slideshow 1"
alt="Masukan Deskripsi Gambar-1 Slideshow Disini"
/></a></li>
<li><a href="http://url link tujuan"><img src="http://Url
 gambar-2" title="Judul Slideshow 2" alt="Masukan Deskripsi Gambar-2
Slideshow Disini" /></a></li>
<li><a href="http://url link tujuan"><img src="http://Url
 gambar-3" title="Judul Slideshow 3" alt="Masukan Deskripsi Gambar-3
Slideshow Disini" /></a></li>
<li><a href="http://url link tujuan"><img src="http://Url
 gambar-4" title="Judul Slideshow 4" alt="Masukan Deskripsi Gambar-4
Slideshow Disini" /></a></li>
</ul>
<br />
<br />

Keterangan :

- Untuk kode script-2 silahkan atur size / ukuran gambar sesuai dengan ukuran gambar yang sudah anda   upload tadi.

- Untuk kode script-2 sulahkan atur Url link gambar sesuai dengan url masing-masing gambar anda yang sudah anda simpan di media penyimpanan online tadi.

Gimana sobat Blogger mudah kan.Silahkan di coba dan di Save Trik diatas.Jika kurang jelas bisa di tanyakan di kotak komentar.Atau bisa masuk di sini untuk melihat Trik yang lebih dan plus.

Salam Blogger,,,,,by....by...by....
<marquee> Sala3_Web </marquee>