Auto Scroller untuk gambar dan teks

Auto Scroller ini akan membuat gambar/teks yang disertai link bergeser secara otomatis sehingga teks dan gambar akan muncul secara berurutan. kelebihan dari scroller ini, selain menggunakan javascript yang relatif irit, juga secara otomatis gambar atau teks akan berhenti saat cursor menyentuhnya dan dengan cara tersebut link di dalamnya bisa di buka. Modifikasi scroller ini sangat mudah untuk dilakukan, yang meliputi luas halaman (lebar dan tingginya), background, jenis dan besaran font serta kecepatan gesernya. Apabila bentuk gambar yang akan dimunculkan, sebaiknya luasan scroller bar disesuaikan dengan ukuran gambarnya sehingga tampilan akan tampak rapi dan menerik.

Langkah pembuatan Auto Scroller :

1. Setelah LOGIN ke BLOGGER lakukan urutan dalam gambar berikut :
KLIK gambar

KODE-1 berikut silahkan di copy paste dan dicoba terlebih dahulu, baru kemudian setelah berhasil, lakukan penggantian gambar dan URL-nya. Demikian juga gunakan KODE-2 (untuk teks) untuk menggantikan KODE-1 yang berwarna biru (untuk gambar) :

KODE-1

<script type="text/javascript">
/** har-bloggerstars & bloggerstuars.blogspot.com **/
//lakukan modifikasi di bawah ini:

var memorywidth="150px" //lebar
var memoryheight="100px"//tinggi
var memorybgcolor="#DEFDD9"//warna
var memorypadding="4px"//padding
var borderCSS="border: 5px ridge blue;"//tebal, jenis, dan warna border
var memoryspeed=2 //(1 s/d 10)
var pauseit=1 // (0 atau 1)
var persistlastviewedmsg=1
var persistmsgbehavior="onload"

//lakukan perubahan pada KODE di bawah ini (gambar dan URL-nya)
var memorycontent='<nobr><a href="#"><img src="http://i33.tinypic.com/111thdi.gif"/></a><a href="#"><img src="http://www.fond-ecran.net/icones/dauphin_011.jpg"/><a/><a href="#"><img src="http://www.fond-ecran.net/icones/chevaux_014.jpg"/></a><a href="#"><img src="http://www.fond-ecran.net/icones/marioncotillard_003.jpg"/></a><a href="#"><img src="http://www.fond-ecran.net/icones/3dpaysage_001.jpg"/></a><a href="#"><img src="http://www.fond-ecran.net/icones/halleberry_004.jpg"/></a></nobr>'

////di bawah ini tidak perlu di rubah////////////
var combinedcssTable="width:"+(parseInt(memorywidth)+6)+"px;background-color:"+memorybgcolor+";padding:"+memorypadding+";"+borderCSS+";"
var combinedcss="width:"+memorywidth+";height:"+memoryheight+";"
var divonclick=(persistlastviewedmsg && persistmsgbehavior=="onclick")? 'onClick="savelastmsg()" ' : ''
memoryspeed=(document.all)? memoryspeed : Math.max(1, memoryspeed-1) //slow speed down by 1 for NS

var copyspeed=memoryspeed
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById

if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-10000px">'+memorycontent+'</span>')
var actualwidth=''
var memoryscroller

if (window.addEventListener)
window.addEventListener("load", populatescroller, false)
else if (window.attachEvent)
window.attachEvent("onload", populatescroller)
else if (document.all || document.getElementById)
window.onload=populatescroller
function populatescroller(){
memoryscroller=document.getElementById? document.getElementById("memoryscroller") : document.all.memoryscroller
memoryscroller.style.left=parseInt(memorywidth)+8+"px"
if (persistlastviewedmsg && get_cookie("lastscrollerpos")!="")
revivelastmsg()
memoryscroller.innerHTML=memorycontent
actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth
lefttime=setInterval("scrollmarquee()",20)
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}

return returnvalue;
}

function savelastmsg(){
document.cookie="lastscrollerpos="+memoryscroller.style.left
}

function revivelastmsg(){
lastscrollerpos=parseInt(get_cookie("lastscrollerpos"))
memoryscroller.style.left=parseInt(lastscrollerpos)+"px"
}

if (persistlastviewedmsg && persistmsgbehavior=="onload")
window.onunload=savelastmsg
function scrollmarquee(){
if (parseInt(memoryscroller.style.left)>(actualwidth*(-1)+8))
memoryscroller.style.left=parseInt(memoryscroller.style.left)-copyspeed+"px"
else
memoryscroller.style.left=parseInt(memorywidth)+8+"px"
}

if (iedom){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0" style="'+combinedcssTable+'"><td>')
write('<div style="position:relative;overflow:hidden;'+combinedcss+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=memoryspeed">')
write('<div id="memoryscroller" style="position:absolute;left:0px;top:0px;" '+divonclick+'></div>')
write('</div>')
document.write('</td></table>')
}
}

</script>



KODE-2


var memorycontent='<nobr><span style="font: bold 13px Verdana"> * Makan nangka banyak bijinya * <a href="http://bloggerstuars.blogspot.com"> Shannenpio Demo * </a> Besar besar seperti bola * <a href="#"> Makan petai pasti bijinya * </a> Besar-besar ampun baunya * <a href="#">Ah... kamu !!! * </a>Kalau buang air di sungai sana !!! Bau !!! *</span></nobr>'

Keterangan :

- KODE <a href="#"> tanda setelah "sama dengan" merupakan URL subyek yang ditampilkan atau URL link lain yang berkaitan dengan subyek.

- bloggerstuars.blogspot.com (pada KODE-2) juga diganti dengan link yang sesuai.

- untuk melakukan modifikasi pada KODE yang ada sudah sangat jelas. Khusus untuk KODE-2 (teks), gunakan ukuran teks dan tinggi dan lebar ruang auto scroll yang sesuai. Kira-kira bentuk yang dipergunakan adalah bentuk segi empat memanjang. Misalnya 300px dan 30px dengan besaran font 18px.

Selamat mencoba dan moga-moga cocok untuk digunakan di blog anda !!! Jangan lupa tambah petainya, tapi ingat...., buang airnya di lapangan bola atau di sungai !!! hiiiiiii........!!!!