Bagi kalangan blogger mungkin kebiasaan exchange links masih menjadi primadona tersendiri. Dari trik sederhana menggunakan satu halaman dijadikan lahan buat tukeran links, sampe memakai jasa web online.
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
Kalau mau menambahkan banner tinggal menuliskan kode
Happy rotation \m/
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/AVvXsEi_EaQHKwxwUOWt3MJygiCaNZIIn_rptJVH0m0UTE5uCg8ohXZx8GyyS_GxWNKob-H9N64qp18WJqcY1Q62Rd0dPxH-2Gn2IGK1_GPpHHeggemh9RbQu6itKb7U0E0lpxKDr0wNSxROscVx/"],
["http://loseasi.blogspot.com/","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGgSPfzOx-zlXKTDePlWRRKQpZQ7i7sbao8t-FTfqlbSo-oQf7f3tczChyGlNQkK22sw0UP5jrJE6IkWKKbF3KisRkl4WU6_2FIZbR802EVlHdNo3j5c17-u6hmM2ajuA1VsNcfSQsdB-y/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/AVvXsEi_EaQHKwxwUOWt3MJygiCaNZIIn_rptJVH0m0UTE5uCg8ohXZx8GyyS_GxWNKob-H9N64qp18WJqcY1Q62Rd0dPxH-2Gn2IGK1_GPpHHeggemh9RbQu6itKb7U0E0lpxKDr0wNSxROscVx/"],
["http://loseasi.blogspot.com/","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGgSPfzOx-zlXKTDePlWRRKQpZQ7i7sbao8t-FTfqlbSo-oQf7f3tczChyGlNQkK22sw0UP5jrJE6IkWKKbF3KisRkl4WU6_2FIZbR802EVlHdNo3j5c17-u6hmM2ajuA1VsNcfSQsdB-y/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/
Loading... |
6 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...