Tuesday, November 1, 2011

Cara mudah membuat slide show

Membuat blog lebih tampil menarik salah satunya dengan menampilkan slide show berupa gambar, cara ini cukup mudah dan cepat, Untuk lebih lengkapnya ikuti langkah berikut.
  • Login ke akun Blogger kamu.
  • Dari halaman dashboard
  • Pilih tab Elemen Halaman ( Page Element ).
  • Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
  • Copykan script berikut dan letakkan pada kotak Content ( dimana saja bisa ) yang tersedia :

<script language="JavaScript1.2">
var variableslide=new Array()

//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]

variableslide[0]=['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFsEM49qVDKQrE23ky1s35rcr-XmdpIfwQYhM580ht7BLCZRdl5YuNQm0jev2hDq4v4vhqXUupgj41AwREFC4wMmtwDH6Z34XZ2G96ltU6uoCYd8k_zE1B1nxvNp3-KqcGVDDINUmZn74/s128/header_u15.png', '', '']
variableslide[1]=['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxRoPncl1BPBXXFu4OxwgBxgMxaE721l6QbLG-cvNzGT-4tvTtyxRxqjOZYwmZzz2F6nYeGnObEuQdJr8BhDvqghuOps00AmQD96HSEdaao_CiV3VXb2T3pBuC82p7DbnuAE76NGJswxM/s128/header_u18.png', '', '']
variableslide[2]=['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzb0hncNVqQsTJb-sZ_2nB8i0VlbpS-ndw0ATD10rAGWLQStRPWc8sL94q_YrDj7Aw8BTjWkJqieVBC27fife6TBP0o5rF71sEPQCMsET1xM2RIgGing44_0gibAMfLbUfK0wTnTgrWjQ/s128/header_u2.png', '', '']
variableslide[3]=['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQKEkBQKIII5AAABEaP4Ic6swaNeNq_4w3LTffgHmtHploHr02pWe_HQL58iGTE7tVdsSk47hB2GOSSuk_UkEDfx6Yi3q-DmQLWN4T4bGqglzMGcv_u9-V-WYOl51ueoLD5pk5QesuI14/s128/header_u3.png', '', '']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth='300px' //set to width of LARGEST image in your slideshow
var slideheight='auto' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='transparent'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById

for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}

var currentslide=0

function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]

if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}

if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider

</script>

<ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgcolor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer>

Keterangan :
  • Warna Merah ; alamat URL image yang akan dipasang, silakan ganti dengan punya kamu sendiri.
  • Warna Kuning ; lebar widget yang ada, sesuaikan dengan kebutuhan.
  • Warna Aqua ; waktu perputaran tampilan image, silakan ganti sesuai kebutuhan tambah besar makin lambat.

Selamat mencoba...!

Sumber : http://dynamicdrive.com

No comments:

Post a Comment