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.
<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/AVvXsEge30nAx5PQVpVsozjUgITK158W_gGJm50MbEm1qPQuJwBXwM9r1nrW-bsXCeAWjDxZWLrMjrHDWZ3oaR2e4S5K4B-GxmtXxgRZHWBo5iPKIy_HD5QRa4tNHHjvjSXI5TvapGIneVKGEP0/s128/header_u15.png', '', '']
variableslide[1]=['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj85gDbgmkii1_deucePRoYNzwxyu_v7DNaYSkafEHG1F8I6gg-OMjTIABHV87MZzp0cfaPN905tmHueILfYy5fZEGTV3fJjw6lVFGiBP7JP2xRQ7XFwyzP5IXq05hIte3u86EaXd6XccM/s128/header_u18.png', '', '']
variableslide[2]=['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihuve_Cf-F_BEUuetgjYX66TlB1xrxeYLbY0fpVhHeinovgh9i-sUPZEsRHNlvCLlD3Lrz8_Qal_85HLEV0etqjVRRVaMfVXU12z5L_qrvQOaRh4PTCHGBUrR0JmTBkzsCcevDA_UUdaA/s128/header_u2.png', '', '']
variableslide[3]=['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhsgD0S6iX1lJci8mECaIpkc3d1GBsMLyqNkPBa_iK8RD20M-34LfLEWS5KGt7coWsswx0jwNtGCUoCtROl-2pQLgYlC2gAzVYBjgY7eT8VJhT5DgI47rV1-qGHYgbT1shMu2woygK5Gw/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>
- 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/AVvXsEge30nAx5PQVpVsozjUgITK158W_gGJm50MbEm1qPQuJwBXwM9r1nrW-bsXCeAWjDxZWLrMjrHDWZ3oaR2e4S5K4B-GxmtXxgRZHWBo5iPKIy_HD5QRa4tNHHjvjSXI5TvapGIneVKGEP0/s128/header_u15.png', '', '']
variableslide[1]=['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj85gDbgmkii1_deucePRoYNzwxyu_v7DNaYSkafEHG1F8I6gg-OMjTIABHV87MZzp0cfaPN905tmHueILfYy5fZEGTV3fJjw6lVFGiBP7JP2xRQ7XFwyzP5IXq05hIte3u86EaXd6XccM/s128/header_u18.png', '', '']
variableslide[2]=['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihuve_Cf-F_BEUuetgjYX66TlB1xrxeYLbY0fpVhHeinovgh9i-sUPZEsRHNlvCLlD3Lrz8_Qal_85HLEV0etqjVRRVaMfVXU12z5L_qrvQOaRh4PTCHGBUrR0JmTBkzsCcevDA_UUdaA/s128/header_u2.png', '', '']
variableslide[3]=['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhsgD0S6iX1lJci8mECaIpkc3d1GBsMLyqNkPBa_iK8RD20M-34LfLEWS5KGt7coWsswx0jwNtGCUoCtROl-2pQLgYlC2gAzVYBjgY7eT8VJhT5DgI47rV1-qGHYgbT1shMu2woygK5Gw/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