Supported = IE6, Opera9+, Safari2+, dan Firefox1+
Akhir akhir ini saya lama mempostingkan sesuatu diblog ini, mungkin karna saya terlalu banyak aktifitas, cieee :P dan mungkin lagi tidak mendapatkan sepeser ide dari sana dari sini. Tetapi semenjak saya tekun mencarinya akhirnya ketemu juga solusi dari pada kehilangan ide, yaitu semangat :D.
Nah, sekarang saya akan membagi bagikan tips atau cara membuat Slide Show Gambar dengan Efek Scroll mouse. Sobat tau Slide Show? Tentunya tau lah, itu yang seperti Microsoft Power Point, beberapa lembar (entah gambar video dokumen) yang ditampilkan kepada sipenglihat dengan bergiliran yang biasanya dengan melihatkan beberapa efek. Yang saya bahas ini seperti itu, tetapi dengan Efek Scroll Mouse. Nah sobat tau Scroll Mouse yang ada di Mouse atau si penggerak kursor tersebut? nah, efek slide show ini akan menampilkan gambar yang secara bergiliran bergantian dengan memutar scroll mouse tersebuat dalam satu tempat.
View The Demo : Slide Show Effect
Nah, Bagus bukan? Jika mau membuatnya sendiri, hanya tinggal ikuti cara berikut :)
• Pertama tama buka blogger.com dan masukan ID dan Pass
• Pilih tab Design atau Page Element
• Klik Tombol Add a Gadget dan pilih Javascript
• Masukan kode berikut sebagai tempat Javascript yang kosong itu :
• Nah Berikut Kode sebagai pelontarnya yang akan ditaruhkan di mana saja, contoh di Sidebar seperti Demo di atas :
Sampai jumpa di Posting Berikutnya yang lebih menarik :)
Akhir akhir ini saya lama mempostingkan sesuatu diblog ini, mungkin karna saya terlalu banyak aktifitas, cieee :P dan mungkin lagi tidak mendapatkan sepeser ide dari sana dari sini. Tetapi semenjak saya tekun mencarinya akhirnya ketemu juga solusi dari pada kehilangan ide, yaitu semangat :D.
Nah, sekarang saya akan membagi bagikan tips atau cara membuat Slide Show Gambar dengan Efek Scroll mouse. Sobat tau Slide Show? Tentunya tau lah, itu yang seperti Microsoft Power Point, beberapa lembar (entah gambar video dokumen) yang ditampilkan kepada sipenglihat dengan bergiliran yang biasanya dengan melihatkan beberapa efek. Yang saya bahas ini seperti itu, tetapi dengan Efek Scroll Mouse. Nah sobat tau Scroll Mouse yang ada di Mouse atau si penggerak kursor tersebut? nah, efek slide show ini akan menampilkan gambar yang secara bergiliran bergantian dengan memutar scroll mouse tersebuat dalam satu tempat.
View The Demo : Slide Show Effect
Nah, Bagus bukan? Jika mau membuatnya sendiri, hanya tinggal ikuti cara berikut :)
• Pertama tama buka blogger.com dan masukan ID dan Pass
• Pilih tab Design atau Page Element
• Klik Tombol Add a Gadget dan pilih Javascript
• Masukan kode berikut sebagai tempat Javascript yang kosong itu :
<script type="text/javascript">Kode Merah adalah kode gambar yang akan diurutkan tergantung scroll mouse keatas atau kebawah.
var myimages=[
"http://www.javascriptkit.com/script/script2/summer.jpg",
"http://www.javascriptkit.com/script/script2/spring.jpg",
"http://www.javascriptkit.com/script/script2/winter.jpg"
]
var slideshow=document.getElementById("slideshow")
var nextslideindex=0
function rotateimage(e){
var evt=window.event || e
var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta
nextslideindex=(delta<=-120)? nextslideindex+1 : nextslideindex-1
nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>myimages.length-1)? 0 : nextslideindex
slideshow.src=myimages[nextslideindex]
if (evt.preventDefault)
evt.preventDefault()
else
return false
}
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel"
if (slideshow.attachEvent)
slideshow.attachEvent("on"+mousewheelevt, rotateimage)
else if (slideshow.addEventListener)
slideshow.addEventListener(mousewheelevt, rotateimage, false)
</script>
• Nah Berikut Kode sebagai pelontarnya yang akan ditaruhkan di mana saja, contoh di Sidebar seperti Demo di atas :
<img id="slideshow" src="http://www.javascriptkit.com/script/script2/summer.jpg" />nah, kemudian Save. Bagus bukan? Tetapi :(
Sampai jumpa di Posting Berikutnya yang lebih menarik :)
wah unik juga nih sob...sy save dulu ya...
BalasHapuscontoh demo-nya yang mana sih??
BalasHapusLiat di Sidebarnya kk :) Sidebar dari blog demo tersebut
BalasHapusKomentar ini telah dihapus oleh administrator blog.
BalasHapusTo Farixsan Quilicuor (Faris Hardiyanto 177) : pas aku mbuka link demo,,ternyata di sana nggak ada gambar ataupun postingan
BalasHapuskakak memakai Browser apa? tergantung yang diatas postingan tersebut kakak :) akupun baru sadar kemaren lusa :D
BalasHapusTo Farixsan Quilicuor (Faris Hardiyanto 177) : pake firefox 4.01..emang bisanya pake browser apa??
BalasHapusNice post! Keep up the good work!
BalasHapusMy site - Mission Homes for Sale
awesome post! Keep up the informative work!
BalasHapusAlso see my site :: Mission Homes for Sale