Header Ads

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://lh3.googleusercontent.com/-V0muvokvUJI/TqfL4rCh9QI/AAAAAAAAA_g/_k-8ocOGEa8/s128/header_u15.png', '', '']
variableslide[1]=['https://lh5.googleusercontent.com/-n0A1XuDug1o/TqfL6xc-C9I/AAAAAAAAA_s/32xssXpJz2s/s128/header_u18.png', '', '']
variableslide[2]=['https://lh6.googleusercontent.com/-CPYi4mqUjEQ/TqTVDsqzdRI/AAAAAAAAA9M/pwcJl2nC-IE/s128/header_u2.png', '', '']
variableslide[3]=['https://lh3.googleusercontent.com/-HU4iyLUGzIU/TqTVFEJSiqI/AAAAAAAAA9M/CZ2bTyIk71s/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

8 komentar:

  1. thanks you...!
    have a nice day...!

    BalasHapus
  2. makasih infonya mas, saya lagi nyari nih artikel tentang cara pasang slideshow makasih
    <a href='http://yahyagan.blogspot.com/>Yahyagan Blog</a>

    BalasHapus
  3. makasih nich infonya.
    cuman sayang saya ga pakai blogsport
    salam kenal ya...

    BalasHapus
  4. maksih infonya, saya banyak belajar disini :)

    BalasHapus
  5. @tasbih ctk.. makasih smoga bermanfaat...!

    BalasHapus
  6. siip ...dicoba dulu..makasih infonya kang...

    BalasHapus

Note :

. Komentar yang mengandung usur pornografi / sara / kekerasan akan dihapus.
. Terima kasih komentarnya...!
. Semoga bermanfaat...!

Diberdayakan oleh Blogger.