Kali ini Beben Koben si bloglang anu ganteng kalem tea akan berbagi trik tukeran links menggunakan javascript rotation. Itung-itung buat sobat yang kepengen warna lain dalam tradisi tukeran links ini. Nantinya itu si script dapat berganti-ganti dengan settingan waktu. Ayo tukeran links disimpan di homepage bagi sobat premium (misalkan begitu cara pemasarannya) :D
Pilih opsi Add a Gadget ► HTML/Javascript untuk menyimpan scriptnya bos.
<script type="text/javascript">
//<![CDATA[
// Highlighter Scroller II script
// For this and over 400+ free scripts, visit http://www.javascriptkit.com/
// This notice must stay intact
//CONFIGURE MESSAGES AND VARIABLES
var tickercontents=new Array()
tickercontents[0]='<a href="http://LINKBLOG.blogspot.com/">YOUR TITLE0</a><br>BLAH BLEH BLOH-0'
tickercontents[1]='<a href="http://LINKBLOG.blogspot.com/">YOUR TITLE1</a><br>BLAH BLEH BLOH-1'
tickercontents[2]='<a href="http://LINKBLOG.blogspot.com/">YOUR TITLE2</a><br>BLAH BLEH BLOH-2'
tickercontents[3]='<a href="http://LINKBLOG.blogspot.com/">YOUR TITLE3</a><br>BLAH BLEH BLOH-3'
tickercontents[4]='<a href="http://LINKBLOG.blogspot.com/">YOUR TITLE4</a><br>BLAH BLEH BLOH-4'
tickercontents[5]='<a href="http://LINKBLOG.blogspot.com/">YOUR TITLE5</a><br>BLAH BLEH BLOH-5'
tickercontents[6]='<a href="http://LINKBLOG.blogspot.com/">YOUR TITLE6</a><br>BLAH BLEH BLOH-6'
tickercontents[7]='<a href="http://LINKBLOG.blogspot.com/">YOUR TITLE7</a><br>BLAH BLEH BLOH-7'
var tickerwidth="100%"
var tickerheight="40px"
var tickdelay=3000 //delay between messages
var highlightspeed=3 //pixels at a time.
var highlightcolor="#555"
var backdroptextcolor="#fff"
/// Do not edit pass this line ///
document.write('<style>#highlighterbg a{color:'+backdroptextcolor+'}</style>')
document.write('<div style="position:relative;left:0px;top:0px; width:'+tickerwidth+'; height:'+tickerheight+';'+'">')
document.write('<span id="highlighterbg" style="position:absolute;left:0;top:0; width:'+tickerwidth+'; height:'+tickerheight+';padding: 3px"></span><span id="highlighter" style="position:absolute;left:0;top:0;clip:rect(auto 0px); background- width:'+tickerwidth+';height:'+tickerheight+';padding: 3px"></span>')
document.write('</div>')
var currentmessage=0
var clipbottom=1
function changetickercontent(){
msgheight=clipbottom=crosstick.offsetHeight
crosstick.style.clip="rect("+msgheight+"px auto auto 0px)"
crosstickbg.innerHTML=tickercontents[currentmessage]
crosstick.innerHTML=tickercontents[currentmessage]
highlightmsg()
}
function highlightmsg(){
//var msgheight=crosstick.offsetHeight
if (clipbottom>0){
clipbottom-=highlightspeed
crosstick.style.clip="rect("+clipbottom+"px auto auto 0px)"
beginclip=setTimeout("highlightmsg()",20)
}
else{
clipbottom=msgheight
clearTimeout(beginclip)
if (currentmessage==tickercontents.length-1) currentmessage=0
else currentmessage++
setTimeout("changetickercontent()",tickdelay)
}
}
function start_ticking(){
crosstickbg=document.getElementById? document.getElementById("highlighterbg") : document.all.highlighterbg
crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter
crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement
if (parseInt(crosstick.offsetHeight)>0)
crosstickParent.style.height=crosstick.offsetHeight+'px'
else
setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for Mozilla's sake
changetickercontent()
}
if (document.all || document.getElementById)
window.onload=start_ticking
//]]>
</script>
Gantilah script yg tulisannya berbeda itu yah sob :) Jika kepengen menambah link, sobat hanya tinggal membubuhkan kode//<![CDATA[
// Highlighter Scroller II script
// For this and over 400+ free scripts, visit http://www.javascriptkit.com/
// This notice must stay intact
//CONFIGURE MESSAGES AND VARIABLES
var tickercontents=new Array()
tickercontents[0]='<a href="http://LINKBLOG.blogspot.com/">YOUR TITLE0</a><br>BLAH BLEH BLOH-0'
tickercontents[1]='<a href="http://LINKBLOG.blogspot.com/">YOUR TITLE1</a><br>BLAH BLEH BLOH-1'
tickercontents[2]='<a href="http://LINKBLOG.blogspot.com/">YOUR TITLE2</a><br>BLAH BLEH BLOH-2'
tickercontents[3]='<a href="http://LINKBLOG.blogspot.com/">YOUR TITLE3</a><br>BLAH BLEH BLOH-3'
tickercontents[4]='<a href="http://LINKBLOG.blogspot.com/">YOUR TITLE4</a><br>BLAH BLEH BLOH-4'
tickercontents[5]='<a href="http://LINKBLOG.blogspot.com/">YOUR TITLE5</a><br>BLAH BLEH BLOH-5'
tickercontents[6]='<a href="http://LINKBLOG.blogspot.com/">YOUR TITLE6</a><br>BLAH BLEH BLOH-6'
tickercontents[7]='<a href="http://LINKBLOG.blogspot.com/">YOUR TITLE7</a><br>BLAH BLEH BLOH-7'
var tickerwidth="100%"
var tickerheight="40px"
var tickdelay=3000 //delay between messages
var highlightspeed=3 //pixels at a time.
var highlightcolor="#555"
var backdroptextcolor="#fff"
/// Do not edit pass this line ///
document.write('<style>#highlighterbg a{color:'+backdroptextcolor+'}</style>')
document.write('<div style="position:relative;left:0px;top:0px; width:'+tickerwidth+'; height:'+tickerheight+';'+'">')
document.write('<span id="highlighterbg" style="position:absolute;left:0;top:0; width:'+tickerwidth+'; height:'+tickerheight+';padding: 3px"></span><span id="highlighter" style="position:absolute;left:0;top:0;clip:rect(auto 0px); background- width:'+tickerwidth+';height:'+tickerheight+';padding: 3px"></span>')
document.write('</div>')
var currentmessage=0
var clipbottom=1
function changetickercontent(){
msgheight=clipbottom=crosstick.offsetHeight
crosstick.style.clip="rect("+msgheight+"px auto auto 0px)"
crosstickbg.innerHTML=tickercontents[currentmessage]
crosstick.innerHTML=tickercontents[currentmessage]
highlightmsg()
}
function highlightmsg(){
//var msgheight=crosstick.offsetHeight
if (clipbottom>0){
clipbottom-=highlightspeed
crosstick.style.clip="rect("+clipbottom+"px auto auto 0px)"
beginclip=setTimeout("highlightmsg()",20)
}
else{
clipbottom=msgheight
clearTimeout(beginclip)
if (currentmessage==tickercontents.length-1) currentmessage=0
else currentmessage++
setTimeout("changetickercontent()",tickdelay)
}
}
function start_ticking(){
crosstickbg=document.getElementById? document.getElementById("highlighterbg") : document.all.highlighterbg
crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter
crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement
if (parseInt(crosstick.offsetHeight)>0)
crosstickParent.style.height=crosstick.offsetHeight+'px'
else
setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for Mozilla's sake
changetickercontent()
}
if (document.all || document.getElementById)
window.onload=start_ticking
//]]>
</script>
tickercontents[XX]='<a href="http://LINKBLOG.blogspot.com/">YOUR TITLEX</a><br>BLAH BLEH BLOH-X'
tepat setelah codetickercontents[7]='<a href="http://LINKBLOG.blogspot.com/">YOUR TITLE7</a><br>BLAH BLEH BLOH-7'
Ubahlah [XX] dengan angka berikutnya.Kalau script diatas tadi berupa tulisan dan sedikit petikan subtitlenya ynag berganti-ganti. Sekarang bagaimana kalau banner (image) berubahnya :P Masih mode Add a Gadget ► HTML/Javascript
<style>
#Slider_Banner img {
width: 100%;
height: 100px;
text-align: center;
}
</style>
<div id="Slider_Banner"></div>
<script type="text/javascript">
//<![CDATA[
var cont = 0;
var arr = [
["http://beben-koben.blogspot.com/","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWYQK8J3yFa7M0FG8P7BqSZNwMuXo00ntlIP7sn2AuCmLziqgGZdFoMQ0Gb93Zu2N9cF75C3sfr3WmSW8sfsR6kTOSXm_6O1LeqPIw6kUFB7yy7xKpdUKQXp0kpZPmDjqJN4BdqbJChGo5/"],
["http://loseasi.blogspot.com/","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiySh4cA_BALbReH1pfgeBtfwx1y8EpkkIJ6zKtASyzX-rMRTLzwOMwYP17hr_SzdeXWOwQar6z_tlCJBw7ohN_wrxm3rN4m1ST5s5Oxihd7TvV6eF-iha-8bfNBATP4hW6lr5ZSDOaOHpn/s570/como-se-hace-lo-se-asi-cabezera.png"],
["http://YOUR-LINK-BLOG.blogspot.com/","http://YOUR-LINK-IMAGE.png"],
]
function Slider_Banner() {
var d = document.getElementById("Slider_Banner");
cont = cont % arr.length;
d.innerHTML = "<a href='"+arr[cont][0]+"' target='_blank'><img border=0 src='"+arr[cont][1]+"'></a>";
cont++;
}
function slideimg_bn() {
Slider_Banner();
setInterval(Slider_Banner, 3000);
}
window.onload=slideimg_bn;
//]]>
</script>
#Slider_Banner img {
width: 100%;
height: 100px;
text-align: center;
}
</style>
<div id="Slider_Banner"></div>
<script type="text/javascript">
//<![CDATA[
var cont = 0;
var arr = [
["http://beben-koben.blogspot.com/","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWYQK8J3yFa7M0FG8P7BqSZNwMuXo00ntlIP7sn2AuCmLziqgGZdFoMQ0Gb93Zu2N9cF75C3sfr3WmSW8sfsR6kTOSXm_6O1LeqPIw6kUFB7yy7xKpdUKQXp0kpZPmDjqJN4BdqbJChGo5/"],
["http://loseasi.blogspot.com/","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiySh4cA_BALbReH1pfgeBtfwx1y8EpkkIJ6zKtASyzX-rMRTLzwOMwYP17hr_SzdeXWOwQar6z_tlCJBw7ohN_wrxm3rN4m1ST5s5Oxihd7TvV6eF-iha-8bfNBATP4hW6lr5ZSDOaOHpn/s570/como-se-hace-lo-se-asi-cabezera.png"],
["http://YOUR-LINK-BLOG.blogspot.com/","http://YOUR-LINK-IMAGE.png"],
]
function Slider_Banner() {
var d = document.getElementById("Slider_Banner");
cont = cont % arr.length;
d.innerHTML = "<a href='"+arr[cont][0]+"' target='_blank'><img border=0 src='"+arr[cont][1]+"'></a>";
cont++;
}
function slideimg_bn() {
Slider_Banner();
setInterval(Slider_Banner, 3000);
}
window.onload=slideimg_bn;
//]]>
</script>
Resource script by: http://loseasi.blogspot.com/
Kalau mau menambahkan banner tinggal menuliskan kode
["http://YOUR-LINK-BLOG.blogspot.com/","http://YOUR-LINK-IMAGE.png"],
Sip begitu saja, selamat bertukar links...Happy rotation \m/
Tidak ada komentar:
Posting Komentar