Cara pasang Jquery Slideshow Header Cara pasang Jquery Slideshow Header

Satu lagi efek JQuery yang di rasakan sangat mudah untuk di cuba. Slideshow header yang boleh anda lihat di sini(sila klik), sememangnya sangat menarik dan mudah untuk di pasang di blogspot. Anda tidak perlu menggunakan sebarang software atau teknik flash yang sukar dan sedikit membebankan dari segi loading. Ini kerana script jquery adalah ringan dan efek yang terpapar adalah 'smooth'. Ia berbeza dengan teknik javascript dan HTML biasa yang di lihat efek pergerakannya adalah kaku, tidak menarik dan ada kalanya tersekat-sekat.

Untuk mencuba JQuery slideshow header seperti yang boleh anda lihat di sini, adalah di nasihatkan supaya anda mencubanya di sebuah blog yang lain yang menggunakan template yang ringkas dan background Header yang kosong. Di cadangkan supaya anda menggunakan Template Minima.

Langkah 1

Log in blog => Dashboard => Layout => Edit HTML

Langkah 2

Pada script template, cari kod </head> 

Langkah 3

Salin dan paste kod biru di bawah di atas kod </head>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://sites.google.com/site/javascript10/jquery.innerfade.js' type='text/javascript'/>

Langkah 4

Kembali ke paparan Layout dan seterusnya klik Add A Gadget => HTML/Javascript.

Salin dan edit kod merah di bawah dengan menggantikan image URL yang di bold dengan image URL anda sendiri.

<script>

$(document).ready(function() {

$('#image_rotate').innerfade({

speed: 1800,

timeout: 3300,

fx: 'fade',

containerheight: '365px'

});

});

</script>

<ul id="image_rotate" style="list-style: none;">

<li><img src="masukkan URL image di sini" /></li>

<li><img src="masukkan URL image di sini" /></li>

<li><img src="masukkan URL image di sini" /></li>

</ul>

Seterusnya, paste pada ruang Content HTML/Javascript dan Save.

Langkah 6

Delete Header yang asal (lama) dan drag Header yang baru ke bahagian atas dengan menggantikan tempat Header yang asal (lama).
Sumber....http://maribinablog.blogspot.com