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 lebi...

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

COMMENTS

BLOGGER: 8
  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...!

Aluminium,4,Amdal,15,Arsitektur,64,Bahan bangunan,8,Bangunan Air,2,budaya indonesia,26,Denah Rumah,22,Galeri,32,Green house,6,Info sekilas,27,Interior,1,Irigasi,2,Jembatan,3,K3 konstruksi,4,Konservasi tanah,5,Konstruksi,48,Konstruksi Beton,15,Konstruksi kayu,38,Kuda kuda Baja,1,Kuda kuda kayu,4,Kusen,4,Lingkungan,15,Masjid,12,Mebelair,2,Menu navigasi,3,Opini,13,Pemberdayaan Masyarakat,7,Pendidikan,3,Peraturan,31,Pondasi,4,Profil Kusen,4,Property,46,RAB,28,Rumah adat,21,S E O,7,Sambungan Kayu,30,Sertifikasi,12,sipil,53,SNI,22,Software,2,Tangga,3,Tips trik blogger,27,Undang undang,12,Wisata,2,
ltr
item
Home Design and Ideas: Cara mudah membuat slide show
Cara mudah membuat slide show
http://1.bp.blogspot.com/--hS7h0KMnEc/Tq_J8CApHgI/AAAAAAAABB4/mDQfOSGl2Sc/s1600/icon_slideshow.png
http://1.bp.blogspot.com/--hS7h0KMnEc/Tq_J8CApHgI/AAAAAAAABB4/mDQfOSGl2Sc/s72-c/icon_slideshow.png
Home Design and Ideas
https://www.hdesignideas.com/2011/11/cara-mudah-membuat-slide-show.html
https://www.hdesignideas.com/
https://www.hdesignideas.com/
https://www.hdesignideas.com/2011/11/cara-mudah-membuat-slide-show.html
true
2215255630784927830
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content