Membuat Link Image Preview

Seperti apa itu link image preview ??

Untuk Demonya, silahkan Agan buka halaman ini. Lalu arahkan kursor mouse ke masing-masing link yang di sediakan.

Style ini bisa Agan gunakan untuk koleksi Banner antar blogger, atau galeri foto dagangan jika Agan punya usaha online, atau sebagainya. Bagaimana Agan tertarik ? Silahkan salin scriptnya.


<script language="javascript" type="text/javascript">
/* Visit http://www.ketagihanbaca.blogspot.com/ for full source code
and get more free JavaScript, CSS and DHTML scripts! */
<!-- Begin
var toad = new Image();
var lizard = new Image();
var gecko = new Image();

toad.src = "ALAMAT FOTO.JPG 1";
lizard.src = "ALAMAT FOTO.JPG 2";
gecko.src = "ALAMAT FOTO.JPG 3";

function doButtons(picimage) {
eval("document['picture'].src = " + picimage + ".src");
}
//  End -->
</script>
<center>
<table border=1>
<tr><td>
<center>Arahkan kursor ke link</center>
<p>
<li><a href = "LINK HALAMAN FOTO 1" onmouseover = "doButtons('toad')">JUDUL FOTO 1<p>

<li><a href = "LINK HALAMAN FOTO 2" onmouseover = "doButtons('lizard')">JUDUL FOTO 2<p>

<li><a href = "LINK HALAMAN FOTO 3" onmouseover = "doButtons('gecko')">JUDUL FOTO 3<p>

<td>
<img name=picture src="../FSBackground/blank.gif" width=330 height=190 border=0></td>
</tr>
</table>
</center>

Perhatikan :

Ganti tulisan Alamat foto.jpg 1 -3 dengan alamat gambar Agan.
Ganti tulisan Link halaman foto 1 -3 dengan link yang di tuju.
Ganti tulisan Judul Foto 1 -3 dengan judul Fotonya masing-masing.

Selamat mencoba. Happy Blogging.

Halaman Blog Bergerak Ke Atas

Sebenarnya saya bingung mau kasih judul apa.

Agan pasti tahu bukan, setiap film-film layar lebar (bioskop) di akhirnya itu muncul sekumpulan tulisan yang bergerak dari bawah ke atas. Di mana di situ tertulis nama-nama pemeran asli, para kru, para tim yang terlibat dan sebagainya.

Nah, untuk menirunya ke dalam blog, kurang lebih seperti demo berikut. Silahkan Agan masuk ke sini.

Sudah lihat ?? Ini dia scriptnya.

<script language="JavaScript1.2">

/*
For full source code, visit http://ketagihanbaca.blogspot.com/
Jangan ubah bagian ini.
*/

//change 1 to another integer to alter the scroll speed. Greater is faster
var speed=1
var currentpos=0,alt=1,curpos1=0,curpos2=-1
function initialize(){
startit()
}

function iecompattest(){
return (document.compatMode!="BackCompat")? document.documentElement : document.body
}

function scrollwindow(){
if (document.all)
temp=iecompattest().scrollTop
else
temp=window.pageYOffset
if (alt==0)
alt=1
else
alt=0
if (alt==0)
curpos1=temp
else
curpos2=temp
if (curpos1!=curpos2){
if (document.all)
currentpos=iecompattest().scrollTop+speed
else
currentpos=window.pageYOffset+speed
window.scroll(0,currentpos)
}
else{
currentpos=0
window.scroll(0,currentpos)
}
}
function startit(){
setInterval("scrollwindow()",10)
}
window.onload=initialize
</script>

Letakkan itu di dalam artikel di atas teks postingan, tepatnya di tool "HTML" (Samping Compose). Selamat berkreasi.

Cara Membuat Menu Untuk Gambar

Membuat menu untuk gambar.

Ini merupakan penggabungan antara drop down menu dan juga tombol show close up. Untuk melihat demonya, silahkan Agan buka ini.

Silahkan di pilih, lalu di buka. Lumayan keren bukan ?

Nah, untuk scriptnya sendiri, silahkan Agan salin. Ini dia.

<script language="javascript" type="text/javascript">
/* Visit http://ketagihanbaca.blogspot.com/ for full source code
and get more free JavaScript, CSS and DHTML scripts! */
<!-- Begin
function previewPic(sel) {
document.previewpic.src = "" + sel.options[sel.selectedIndex].value;
}
function showPic(sel) {
images = new Array();
images[1] = "alamat gambar 1";
images[2] = "alamat gambar 2";
images[3] = "alamat gambar 3";
images[4] = "alamat gambar 4";
window.location.href = images[sel.selectedIndex+1];
}
//  End -->
</script>
<center>
<form name=picform>
<select name=selbox size=1 onChange="previewPic(this)">
<option value="alamat gambar 1">Judul 1
<option value="alamat gambar 2">Judul 2
<option value="alamat gambar 3">Judul 3
<option value="alamat gambar 4">Judul 4
</select>
<br>
<img name="previewpic" src="alamat gambar 1" width=106 height=64 border=1>
<br>
<input type=button value="Show Image" onclick="showPic(this.form.selbox)">
</form>
</center>

Perhatikan :

Ganti tulisan alamat gambar 1-4 dengan alamat gambar Agan. Begitu juga judulnya. Ini bisa di letakkan di dalam postingan ataupun side bar. Selamat mencoba.

Cara Membuat Teks Mengembang

Seperti apa teks mengembang itu ??

Untuk demonya, silahkan lihat di sini. Bagaimana Agan tertarik ?? Silahkan salin kode berikut ke dalam blog Agan. Sangat simpel.

<center>
<script language="javascript" type="text/javascript">
/* Script  oleh : http://ketagihanbaca.blogspot.com/ */
<!-- Begin
var speed = 100;
var cycledelay = 2000;
var maxsize = 28;

var x = 0;
var y = 0;
var themessage, size;
var esize = "</font>";

function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
   }
}
var themessage2 = new initArray(
"Hei Selamat datang",
"Selamat menikmati blog sederhana kami",
"Jangan lupa tinggalkan jejak",
"Salam blogger !!"
);

document.write('<span id="wds"></span><br>');
function upwords(){
themessage = themessage2[y];
if (x < maxsize) {
x++;
setTimeout("upwords()",speed);
}
else setTimeout("downwords()",cycledelay);

wdss=document.getElementById('wds');

wdss.innerHTML = "<center>"+themessage+"</center>";
wdss.style.fontSize=x+'px'
}
function downwords(){
if (x > 1) {
x--;
setTimeout("downwords()",speed);
}
else {
setTimeout("upwords()",cycledelay);
y++;
if (y > themessage2.length - 1) y = 0;
}


wdss.innerHTML = "<center>"+themessage+"</center>";
wdss.style.fontSize=x+'px'
}
setTimeout("upwords()",speed);
//  End -->
</script>
</center>

Ganti pesan teks yang ada dengan teks dari Agan.

Membuat Teks Dengan Efek Highlighting

Seperti apa teks dengan efek Highlighting itu ??

Seperti di bawah ini misalnya :


Bagaimana ?? menarik bukan ?? Nah untuk membuatnya, Agan bisa salin kode berikut ke dalam blog Agan masing-masing.

<script language="JavaScript" type="Text/JavaScript">
//Made by 1st JavaScript Editor
//created by : http://ketagihanbaca.blogspot.com/
//Come and get more (free) products

var fifteenth = 'Selamat Datang Sobat'; var sixteenth = 'red'; var seventeenth = 'yellow'; var eighteenth = '30'; var nineteenth = 150;var twentieth = 0;var first2;
document.write('<div id=second2></div>');
function sixth2()  {
fifth2 = '<font size=' + eighteenth + '><font color=' + sixteenth + '>';
for (var first2 = 0; first2 < fifteenth.length; first2++) {
if( first2 == twentieth) {fifth2 += '<font color=' + seventeenth + '>' + fifteenth.charAt(twentieth) + '</font>';}else {fifth2 += fifteenth.charAt(first2);   }}fifth2 += '</font></font>';document.getElementById("second2").innerHTML = fifth2;(twentieth == fifteenth.length) ? twentieth=0 : twentieth++; }setInterval('sixth2()', nineteenth);
</script>

Di mana letak pemasangannya ?? Tergantung Agan maunya di mana. Misal di dalam postingan, ya letakkan di tool HTML saat berada di halaman membuat postingan.

Jika ingin tampil di side bar atau header, ya masukkan melalui menu Tata Letak.

Selamat mencoba.

Membuat Pesan Dengan Tombol Up Down

Seperti apa Pesan Dengan Tombol Up Down ??

Untuk melihat demonya, silahkan buka ini. Arahkan kursor di dalam kolom, lalu tekan tombol Atas atau Bawah pada keyboard Agan.

Bagaimana sudah lihat ?

Apabila Agan ingin memasang itu silahkan Agan salin kode berikut ini.


<script language="javascript" type="text/javascript">
/* Visit http://www.ketagihanbaca.blogspot.com/ for full source code
and get more free JavaScript, CSS and DHTML scripts! */
<!-- Begin
var listOpt = new Array("", "Selamat Datang", "Selamat Menikmati Blog Sederhana Kami", "Kami Menyediakan Berbagai Artikel Pilihan", "Tinggalkan Jejak Agar Kami Dapat Balik Mengunjungi Anda", "Salam Blogger", "Terima Kasih");
var Ex = false;
var Net = false;
//var app = navigator.appName.substring(0,1);
if (!document.all) Net = true;
else Ex = true;
document.onkeyup = keyUp;
if (Net) document.captureEvents(Event.KEYUP);
function keyUp(ev) {
if (Net) {
var source = ev.target.name;
if(source) {
if(ev.which == 40 && source == "target_box") cycleUp(source);
if(ev.which == 38 && source == "target_box") cycleDown(source);
   }
}
else if (Ex) {
var source = window.event.srcElement.name;
if(source) {
if(window.event.keyCode == 40 && source  == "target_box") cycleUp(source);
if(window.event.keyCode == 38 && source  == "target_box") cycleDown(source);
      }
   }
}
var arrayIndex = 0;
function cycleUp(source) {
arrayIndex++;
if(arrayIndex > listOpt.length-1) arrayIndex = 0;
var change_box = eval("document.cycleForm." + source);
change_box.value = listOpt[arrayIndex];
}
function cycleDown(source) {
arrayIndex--;
if(arrayIndex < 0) arrayIndex = listOpt.length - 1;
var change_box = eval("document.cycleForm." + source);
change_box.value = listOpt[arrayIndex];
}
//  End -->
</script>
<form name="cycleForm">
<input name="target_box" value="" size="65"><br>
</form>
<b>Tekan tombol Atas atau Bawah.</b>


Letakkan kode itu di tool "HTML" dalam halaman membuat postingan. Maka akan muncul di dalam postingan itu saja.

Tetapi jika ingin tampil di seluruh halaman, pasang di salah satu sisi elemen blog pada menu Tata Letak. Maka ia akan muncul di setiap halaman.

Selamat mencoba.

Cara Membuat Dancing Text Dengan Tombol Stop

Widget yang satu ini sangat cocok untuk Agan yang ingin berkreasi lebih dalam mempercantik blognya. Dancing Text Dengan Tombol Stop namanya.

Untuk demonya, bisa Agan klik di sini.

Dan untuk kodenya, silahkan Agan salin :

<script language="javascript" type="text/javascript">
<!-- Web Site:  http://www.ketagihanbaca.blogspot.com/ -->

<!-- Begin
var message="   Ayo kita Bergoyang !!";
var spc=10;
var speedisplay=50;
var times=2;
var rows=5;
var cols=40;
var stopbutton="yes"; // yes or no
var stopbuttonvalue="                      STOP                          ";
var startvalue="                      START                          ";
var len=spc*2;
var text=message;
var i;
var stop=false;
var stoppedisplay;
for (i=0;i<spc;i++) {
text=text+" ";
}
function array(n) {
this.length = n
for (i=1; i <= n; i++) {
this[i] ="";
}
return this;
}
document.writeln('<form name="F">')
document.writeln('<textarea rows='+rows+' cols='+cols+' name="display" wrap=soft></textarea>')
if (stopbutton == "yes") {
document.writeln('<br><input type=button value="'+stopbuttonvalue+'" onClick="stopstart()" name=stopit>');
}
document.writeln('</form>')
var l=text.length;
var ll=message.length;
var lb=new array(l)
var lr=new array(spc*2+1)
var lg=new array(ll)
var lk=new array(ll)
lb[0]=text;lb[l]=text;lr[0]=message;lg[0]=message;

for (j=1;j<l;j++) {
lb[j]=lb[j-1].substring(1, l)+lb[j-1].charAt(0);
}
lr[spc*2]=message;
for (i=1;i<=spc;i++) {
lr[i]=" "+lr[i-1]
}
for (i=spc*2-1;i>=spc+1;i--) {
lr[i]=" "+lr[i+1]
}
var ll=message.length;
for (j=1;j<ll;j++) {
for (i=lg[j-1].length-2;i>=0;i--) {
lg[j]=lg[j-1].charAt(i)+lg[j];
   }
}
lk[ll]=message;
for (j=ll-1;j>=0;j--) {
lk[j]=lk[j+1].substring(1, l);
}
var lge="";
var lbe="";
var rle="";
for (i=0;i<rows;i++) {
lge=lge+lg[i]+unescape('%0D%0A');
}
for (i=0;i<rows;i++) {
lbe=lbe+lb[l-i]+unescape('%0D%0A');
}
for (i=1;i<=rows;i++) {
rle=rle+lr[spc*2-i]+unescape('%0D%0A');
}
var c=1;
var i=ll;
var j=0;
var f=0;
function lgf() {
if(stop==false) {
if(i>ll) {
j=0;
i=i-2;
}
if(i==0&&j==0) {
c++;
j=1;
}
if(j!=0) {
document.F.display.value=lg[i]+unescape('%0D%0A')+document.F.display.value;
i++;
}
if(j==0) {
document.F.display.value=lg[i]+unescape('%0D%0A')+document.F.display.value;
i--;
}
if(c<=times) {
setTimeout("lgf()",speedisplay);
}
else {
document.F.display.value=lge;
i=0;
j=0;
c=0;
t();
      }
   }
}
function t() {
if(stop==false) {
if(i>l) {i=1};
document.F.display.value=lb[i]+unescape('%0D%0A')+document.F.display.value;
i++;
j++;
if(j<=l*times) {
setTimeout("t()",speedisplay)}else{document.F.display.value=lbe;
i=0;
j=0;
rl();
      }
   }
}
function rl() {
if (stop==false) {
if(i>=spc*2) {i=0};
document.F.display.value=lr[i]+unescape('%0D%0A')+document.F.display.value;
i++;
j++;
if(j<len*times) {setTimeout("rl()",speedisplay)}else{document.F.display.value=rle;i=ll-1;j=0;trans()}
}
}
function trans() {
if(stop==false) {
document.F.display.value=lk[i]+unescape('%0D%0A')+document.F.display.value;
i--;
if(i!=1) {
setTimeout("trans()",speedisplay)
}
else {
i=ll;
lgf();
      }
   }
}
function stopstart() {
stoppedisplay=stop;
if(stoppedisplay==false) {
stop=true;document.F.stopit.value=startvalue;
}
if(stoppedisplay==true) {
stop=false;document.F.stopit.value=stopbuttonvalue;
document.F.display.value="";
i=11;
j=0;
c=0;
lgf();
   }
}
if (rows>spc||rows>ll) {
alert("ERROR!\nrows can NOT be more that spaces or message length!!!!")
}
if (spc+ll>cols) {
alert("ERROR!\ncols(coloums) can NOT be less that the message length + spacing length")
}
if (rows<=spc&&rows<=ll&&spc+ll<=cols) {
lgf();
}
// End -->
</script>

Letakkan di dalam postingan apabila ingin muncul di postingan tertentu. Atau letakkan sebagai widget Side bar yang muncul di setiap halaman.

Sesuaikan isi teks dengan kehendak Agan. Ok selamat mencoba.

Dancing Text Dengan Tombol Stop

Demo :

Disco Light Pada Background Blog

Masih orang yang sama yang tidak mau di sebutkan namanya, saat sebelumnya ia menanyakan pada saya melalui inbox FB tentang cara me-matikan klik kanan di halaman tertentu, kali ini ia menanyakan bagaimana cara membuat disco light pada halaman tertentu.

Ia bertanya sesudah melihat halaman milik ketagihan baca yang satu ini.

Sudah Agan lihat ??

Selama saya tahu, maka saya janjikan padanya. Tetapi apabila saya tidak tahu, tanpa malu-malu saya jawab "saya tidak bisa". Oke langsung saja, untuk membuat disco light di halaman tertentu Agan cukup masukkan  kode berikut.

Letakkan di dalam postingan yang Agan kehendaki.

 <SCRIPT LANGUAGE="JavaScript">
/* Visit http://ketagihanbaca.blogspot.com/ for full source code
and get more free JavaScript, CSS and DHTML scripts! */
<!-- Hide from old browsers
var Color= new Array(9);
Color[1] = "444444";
Color[2] = "000000";
Color[3] = "999999";
Color[4] = "000008";
/* Do not display text on a fading background. Instead, let it
fade in and out once or twice, then load a new page.        */
function fadeIn(where) {
if (where >= 1) {
document.bgColor="#" + Color[where] +"0000";
where -= 1;
setTimeout("fadeIn("+where+")", 15);
} else {
setTimeout('fadeOut(1)', 15);
   }
}
function fadeOut(where) {
if (where <=16) {
document.bgColor="#" + Color[where] +"0000";
where += 1;
setTimeout("fadeOut("+where+")", 15)
} else {
setTimeout("fadeIn(16)", 15);
   }
}
function Go()
{
    fadeIn(16);
}
window.onload=Go;
// Unhide -->
</SCRIPT>

Ayo kita ber-disco !!

Cara Membuat Message Text Area

Ketagihan Javascript

Cara membuat Message Text Area :

Agan cukup salin kode berikut ke dalam blog Agan.

<script language="javascript" type="text/javascript">
/* Visit  http://ketagihanbaca.blogspot.com/ for more */
<!-- Begin
var max=0;
function textlist() {
max=textlist.arguments.length;
for (i=0; i<max; i++)
this[i]=textlist.arguments[i];
}
tl = new textlist(
"Selamat Datang teman - teman blogger se Nusantara!",
"Senang bertemu lagi dengan kalian semua",
"Selamat menikmati blog ketagihan baca yang sederhana ini",
"Jangan lupa juga tinggalkan jejak agar saya dapat balik berkunjung ke blog kalian",
"Ok Salam blogger !"
);

var x = 0; pos = 0;
var l = tl[0].length;
function textticker() {
document.tickform.tickfield.value = tl[x].substring(0, pos) + "_";
if(pos++ == l) {
pos = 0;
setTimeout("textticker()", 2000);
if(++x == max) x = 0;
l = tl[x].length;
} else
setTimeout("textticker()", 50);
}
window.onload = textticker;
//  End -->
</script>
<form name=tickform>
<textarea name=tickfield rows=3 cols=70 style="background-color: rgb(0,0,0); color: rgb(255,255,255); cursor: default; font-family: Arial; font-size: 12px" wrap=virtual>Loading...</textarea>
</form>

Perhatikan :

Angka 70 adalah ukuran lebar.
Arial adalah jenis huruf.
12 adalah ukuran huruf.

Untuk letak pemasangannya sendiri. Apabila Agan letakkan di side bar, maka ia akan muncul di semua halaman. Sementara apabila hanya ingin di dalam postingan tertentu, maka masukkan di tool "HTML" saat Agan sedang berada di halaman membuat postingan.

Selamat mecoba, awas ketagihan javascript !