Iklan

Penataan ulang

Sedang dalam penataan ulang. Silahkan nikmati dan bila ada yang kurang berkenan mohon maaf!

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"> bloggerstars1 * </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........!!!!

1 2 komentar:

SEVEN STARS TOUR AND TRAVEL said...

pagi gan, aku ini newbie, aku bnyk yang belum paham, aku mau tanya di sebelah header home agan kan ada kotak blogroll, nah tadi aku bawa mouse aku kesitu, kan ada turun lagi ke bawah. nah itu namanya apa? dan gimana caranya biar aku juga bisa ya punya yang begitu gan? tolong dibalas ya gan, terima kasih, salam...

Unknown said...

Om aku minta tolong boleh..? om coba tolong buka http://kaskus.us/ pada halaman utama ada sebuah permainan mouse over pada link dengan gambar, bisa kah om ajarin aku cara membuatnya berikut tag nya...? kurang lebih seperti menu om yang bertuliskan "diposkan oleh" lalu keluar gambar foto om.... om aku mohon bantuanya buat skripsi aku om... mohon maaf apabila ada kata2 yang kurang berkenan terimakasih banyak om.....

Post a Comment

 

ujung bawah

gubhug reyot
Add to Technorati Favorites
Search Engine Optimization SEO