Home > Tips trik blogger > Cara mudah membuat slide show
Cara mudah membuat slide show
Posted on Selasa, 01 November 2011 by ndesain.web.id
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/AVvXsEh003bI-uJqmz4JAuOqD8cxNW3H0yQdLOhOZ4yTiaU9sfvJQbCW7v_oyvBi8mnzr3cTSQytDywWKbnJsisYf_Ac_lboFh-75DyHWarro38K1gYqKUw0lZxdXvsVmcrVSOAC9yX_9I8fKug/s128/header_u15.png', '', '']
variableslide[1]=['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRVH1E1ulpd-LQaEJR3BaHqaYmULpY8vklZIUEEr_WZWd2SzUlU7LNQTJmX3D0dXsqsyNsm6XuwBCbxwpe8yvOIBKvCA7sxfKEGk1gN0ZqZv5rNfGsKUkO6KtpA3hPRbetjxddqn8zV60/s128/header_u18.png', '', '']
variableslide[2]=['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZp8DV98TpCUCodld56dYtBvW3TRkyPwUlUImdrOmy3hOmVSddPTX3vd9aCUb8XWZus3eoVNOcLaOU6fyZcPqgkTCoe67Xu88kwrtUfAJcqe93QAPthisWTpVJd2w5PpY3RECmhmwsggo/s128/header_u2.png', '', '']
variableslide[3]=['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqcoK8L2SVDvuNW4EPBt1ju11h0Gz6pgD89v7HDWn10C07OA_i3uzunkeqysdZW-vP5e9YJwlGtF2UfY-3buHHltcnL33QQxsSOyY1hRB3F3fFgvx-ODgicM4l3sHK9yEwNWhhpNuvNcY/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/AVvXsEh003bI-uJqmz4JAuOqD8cxNW3H0yQdLOhOZ4yTiaU9sfvJQbCW7v_oyvBi8mnzr3cTSQytDywWKbnJsisYf_Ac_lboFh-75DyHWarro38K1gYqKUw0lZxdXvsVmcrVSOAC9yX_9I8fKug/s128/header_u15.png', '', '']
variableslide[1]=['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRVH1E1ulpd-LQaEJR3BaHqaYmULpY8vklZIUEEr_WZWd2SzUlU7LNQTJmX3D0dXsqsyNsm6XuwBCbxwpe8yvOIBKvCA7sxfKEGk1gN0ZqZv5rNfGsKUkO6KtpA3hPRbetjxddqn8zV60/s128/header_u18.png', '', '']
variableslide[2]=['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZp8DV98TpCUCodld56dYtBvW3TRkyPwUlUImdrOmy3hOmVSddPTX3vd9aCUb8XWZus3eoVNOcLaOU6fyZcPqgkTCoe67Xu88kwrtUfAJcqe93QAPthisWTpVJd2w5PpY3RECmhmwsggo/s128/header_u2.png', '', '']
variableslide[3]=['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqcoK8L2SVDvuNW4EPBt1ju11h0Gz6pgD89v7HDWn10C07OA_i3uzunkeqysdZW-vP5e9YJwlGtF2UfY-3buHHltcnL33QQxsSOyY1hRB3F3fFgvx-ODgicM4l3sHK9yEwNWhhpNuvNcY/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
Category Article Tips trik blogger
Diberdayakan oleh Blogger.