Jumat, 23 Januari 2009
Rabu, 21 Januari 2009
Minggu, 11 Januari 2009
Iframe generator
Iframe Generator
kalo udah di isi semua lalu tekan tombol generate code,lalu akan terdapat code lalu copy code tersbut
selanjutnya...
Sabtu, 10 Januari 2009
Membuat menu dtree
Membuat menu dtree atau menu drop seperti di bawah ini
Navigation
caranya:
copy script di bawah ini
<h3>Navigation</h3> <ul> <!-- start dtree --> <div style="text-align:left;padding-left:10px"> <style type="text/css"> /*--------------------------------------------------| | dTree 2.05 | www.destroydrop.com/javascript/tree/ | |---------------------------------------------------| | Copyright (c) 2002-2003 Geir Landr? | |--------------------------------------------------*/ .dtree { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; color: #666; white-space: nowrap; padding: 6px; padding-left: 5px; }.dtree img { border: 0px; vertical-align: middle; }.dtree a { color: #333; text-decoration: none; }.dtree a.node,.dtree a.nodeSel { white-space: nowrap; padding: 1px 2px 1px 2px; }.dtree a.node:hover,.dtree a.nodeSel:hover { color: #000; text-decoration: underline; }.dtree a.nodeSel { background-color: #c0d2ec; }.dtree.clip { overflow: hidden; } .siteMapLink{ border: 1px dashed #aaa; background-color: #FFFFFF; padding: 4px; }.siteMapLink:hover{ border: 1px solid #aaa; background-color: #FFFFFF; padding: 4px; text-decoration: none; } </style> <script type="text/javascript" src="http://www.geocities.com/once179/sitemap/dtree.js" ></script > <div class="dtree" style="background-color: rgb(FF, FF, FF); padding-top: 10px; width: 200px;"> <a href="javascript: d.openAll();" class="dtree"><b>Open For All</b></a> | <a href="javascript: d.closeAll();" class="dtree"><b>Close For All</b></a><br> <br/> <script type="text/javascript"> <!-- d = new dTree('d'); d.add(0,-1,'Home','http://link.com','','','', ''); //menu d.add(10, 0,'My Other Blog', '','','','http://i162.photobucket.com/albums/t253/rohman24/otherblog.gif', 'http://i162.photobucket.com/albums/t253/rohman24/otherblog.gif'); d.add(11, 10,'link2', 'http://link2.com','','','', ''); d.add(12, 10,'link3', 'http://link3.com','','','', ''); d.add(13, 10,'link4', 'http://link4.com','','','', ''); d.add(20, 0,'Blog Tutorial', '','','','http://i162.photobucket.com/albums/t253/rohman24/Blogtutor.gif', 'http://i162.photobucket.com/albums/t253/rohman24/Blogtutor.gif'); d.add(21, 20,'link5','http://link5.html','','','', ''); d.add(22, 20,'link6', 'http://link6.html','','','', ''); d.add(40, 0,'Free Download', '','','','http://i162.photobucket.com/albums/t253/rohman24/Untitled-2_03.gif', 'http://i162.photobucket.com/albums/t253/rohman24/Untitled-2_03.gif'); d.add(41, 40,'link7','http://link7','','','', ''); d.add(42, 40,'link8','http://link8.html','','','', ''); d.add(50, 0,'Link Exchange', '','','','http://i162.photobucket.com/albums/t253/rohman24/link-ex_03.gif', 'http://i162.photobucket.com/albums/t253/rohman24/link-ex_03.gif'); d.add(51, 50,'link9','http://link9.com','','','', ''); d.add(52, 50,'link10','http://link10.com','','','', ''); d.add(80, 0,'Sponsored Links', '','','','', ''); d.add(81, 80,'link11', 'http://link11.com','','','', ''); d.add(82, 80,'link12','http://link12','','','', ''); document.write(d); //--> </script> </div> </div> </ul> <!-- Akhir dari dtree --> <br/>ganti link yang di beri warna dengan link kamu.. Peace!
selanjutnya...
Rabu, 07 Januari 2009
Zoom image dengan FancyZoom
Kali ini membuat zoom gambar lagi,Sama seperti posting zoom image sebelumnya tapi yang sebelumnya onmouseover zoom image, kali on klik zoom image, Skala gambar otomatis akan membesar jika kita klik gambar,zoom ini juga menggunakan efek bayangan
liat contohnya diwww.cable.name, kang rohman
caranya
karena file scriptnya panjang download fancyzom.zip dibawah ini.. :
Instructions
Installing FancyZoom on your web pages .
Download the FancyZoom package, right here:
Jika sudah di download, silahkan di ekstrak terlebih dahulu dengan memakai software ekstraktor seperti winzip atau winrar. Nanti akan terdapat dua file script java :
Nanti akan ada file javascript yang nama nya : FancyZoom.js dan FancyZoomHTML.js.
Didalamnya fancyzoo.zip tadi juga ada folder images,didalam folder tersebut terdapat beberapa images yang berfungsi sebagai efek untuk fancyzoom.. Tetapi agar efek dapat bekerja kamu harus edit kedua script tersebut
contoh km upload gambar diyahoo geocities
username nya eko editny menjadi seperti ini:
pada js
fancyzoom.js
cari tulisan
images/
kalo udah ketemu ganti dengan induk alamat hosting gambar contohnya
http://www.geocities.com/eko/
yang jelas itu adalah alamat gambar itu berkumpul tapi jika ada mengelopokan didalam folder images pada web yang di masukan jadi seperti ini
http://www.geocities.com/eko/images/
selanjutnya lalu edit script fancyzoomHTML.js
Yang dilakukan adalah mengedit alamat gambar sesuai nama gambar,
jika sudah selesai simpan file js
Tugas anda selanjutnya adalah mengupload file java tersebut ke server tempat anda biasa menyimpan file javascript, misalkan ke yahoo geocities atau yang lainnya. Setelah di upload, kemudian copy kedua alamat file tersebut, misalkan anda sudah mempunyai alamat sebagai berikut saya mempunyai username eko di yahoo geocities alamatnya dan kodenya menjadi:
http://www.geocities.com/eko/FancyZoom.js
http://www.geocities.com/eko/FancyZoomHTML.js
Dari alamat tersebut, kodenya jadi seperti ini :
<script src='http://www.geocities.com/eko/FancyZoom.js' type='text/javascript'></script> <script src='http://www.geocities.com/eko/FancyZoomHTML.js' type='text/javascript'></script>
Kemudian masukan kode tersebut di atas kode </head> di dalam template blog anda Lengkapnya seperti berikut :
- login ke blogger yang pastinya
- Klik Tata Letak.
- Klik tab Edit HTML.
- nah kalo km takut terjadi yang kagak2,dari pada bingung,Klik tulisan Download template Lengkap. Agar mudah mengembalikan template seperti semula
- Cari kode </head>
- lalu paste yang kode
<script src='http://www.geocities.com/eko/ FancyZoom.js' type='text/javascript'></script> <script src='http://www.geocities.com/eko/FancyZoomHTML.js' type='text/javascript'></script>yang telah diganti alamat kamu karena alamat diatas hanya contoh, paste di atas kode </head>. - selanjutnya lalu cari code kode ini <body>
- Hapus kode <body> lalu ganti dengan kode :
<body onload="setupZoom()"> - lalu SIMPAN TEMPLATE.
Atau sebagai contoh lengkap dengan alamat gambar seperti berikut ini
<a href="http://www.cabel.name/images-post/2008/02/mwsf-2.jpg"><img src="http://www.cabel.name/images-post/2008/02/mwsf-2.jpg" width="161" height="123" border="0" alt="" id="img-mwsf-2" class="photo" /></a>
agar dapat efek zoom tentunya ukuran gambar harus tampil lebih kecil dari yang sebenarnya,agar gambar yang tampil bisa menjadi berukuran lebih kecil daripada ukuran aslinya yaitu Kode width="161" height="123" ganti menurut keinginan km.
script from :
www.fancyzoo.com selanjutnya...
Jumat, 02 Januari 2009
Membuat text kelap kelip
Membuat text jadi kelap kelip seperti pelangi,biasanya hanya link yang bisa kelap kelip,text jg bisa kelap kelipnya contohnya seperti berikut ini,
pelangi pelangi alangkah indahmu,merah kuning hijau,dilangit yang biru,pelukismu agung,siapa gerangan,pelangi pelangi ciptaan tuhan..
yang ini teks pelangi bawah perpisahan yang menjadi batas tengah teks pelangi oce.modifblog.blogspot.com
scriptnya seperti ini: Copy script berikut ini pada head
<script type="text/javascript"> <!-- Begin /* This script and many more are available free online at The JavaScript Source!! http://javascript.internet.com Created by: HaganeNoKokoro :: http://tinyurl.com/buvp9 */ /* * Notes on hue * * This script uses hue rotation in the following manner: * hue=0 is red (#FF0000) * hue=60 is yellow (#FFFF00) * hue=120 is green (#00FF00) * hue=180 is cyan (#00FFFF) * hue=240 is blue (#0000FF) * hue=300 is magenta (#FF00FF) * hue=360 is hue=0 (#FF0000) * * Notes on the script * * This script should function in any browser that supports document.getElementById * It has been tested in Netscape7, Mozilla Firefox 1.0, and Internet Explorer 6 * * Accessibility * * The script does not write the string out, but rather takes it from an existing * HTML element. Therefore, users with javascript disabled will not be adverely affected. * They just won't get the pretty colors. */ /* * splits par.firstChild.data into 1 span for each letter * ARGUMENTS * span - HTML element containing a text node as the only element */ function toSpans(span) { var str=span.firstChild.data; var a=str.length; span.removeChild(span.firstChild); for(var i=0; i<a; i++) { var theSpan=document.createElement("SPAN"); theSpan.appendChild(document.createTextNode(str.charAt(i))); span.appendChild(theSpan); } } /* * creates a rainbowspan object * whose letters will be colored [deg] degrees of hue * ARGUMENTS * span - HTML element to apply the effect to (text only, no HTML) * hue - what degree of hue to start at (0-359) * deg - how many hue degrees should be traversed from beginning to end of the string (360 => once around, 720 => twice, etc) * brt - brightness (0-255, 0 => black, 255 => full color) * spd - how many ms between moveRainbow calls (less => faster) * hspd - how many hue degrees to move every time moveRainbow is called (0-359, closer to 180 => faster) */ function RainbowSpan(span, hue, deg, brt, spd, hspd) { this.deg=(deg==null?360:Math.abs(deg)); this.hue=(hue==null?0:Math.abs(hue)%360); this.hspd=(hspd==null?3:Math.abs(hspd)%360); this.length=span.firstChild.data.length; this.span=span; this.speed=(spd==null?50:Math.abs(spd)); this.hInc=this.deg/this.length; this.brt=(brt==null?255:Math.abs(brt)%256); this.timer=null; toSpans(span); this.moveRainbow(); } /* * sets the colors of the children of [this] as a hue-rotating rainbow starting at this.hue; * requires something to manage ch externally * I had to make the RainbowSpan class because M$IE wouldn't let me attach this prototype to [Object] */ RainbowSpan.prototype.moveRainbow = function() { if(this.hue>359) this.hue-=360; var color; var b=this.brt; var a=this.length; var h=this.hue; for(var i=0; i<a; i++) { if(h>359) h-=360; if(h<60) { color=Math.floor(((h)/60)*b); red=b;grn=color;blu=0; } else if(h<120) { color=Math.floor(((h-60)/60)*b); red=b-color;grn=b;blu=0; } else if(h<180) { color=Math.floor(((h-120)/60)*b); red=0;grn=b;blu=color; } else if(h<240) { color=Math.floor(((h-180)/60)*b); red=0;grn=b-color;blu=b; } else if(h<300) { color=Math.floor(((h-240)/60)*b); red=color;grn=0;blu=b; } else { color=Math.floor(((h-300)/60)*b); red=b;grn=0;blu=b-color; } h+=this.hInc; this.span.childNodes[i].style.color="rgb("+red+", "+grn+", "+blu+")"; } this.hue+=this.hspd; } // End --> </script>
Jika script terlalu panjang simpan aja script berwarna biru diatas dalam format pelangi.js lalu upload lalu yang di letakan di atas </head> jadi seperti ini
<script src='http://.../pelangi.js' type='text/javascript'></script>
Penulisan textnya pada <body> seperti ini:
Pelangi atas seperti ini
<div align="center">
<p id="r1">pelangi pelangi alangkah indahmu,merah kuning hijau,dilangit yang biru,pelukismu agung,siapa gerangan,pelangi pelangi ciptaan tuhan..</p>
</div>
<script type="text/javascript">
var r1=document.getElementById("r1"); //get span to apply rainbow
var myRainbowSpan=new RainbowSpan(r1, 0, 360, 255, 50, 18); //apply static rainbow effect
myRainbowSpan.timer=window.setInterval("myRainbowSpan.moveRainbow()", myRainbowSpan.speed);
</script>
pelangi bawah seperti berikut ini:
<div align="center">
<p id="r2">yang ini teks pelangi bawah perpisahan yang menjadi batas tengah <a href='http://oce-modifblog.blogspot.com'>oce.modifblog.blogspot.com</a></p>
</div>
<script type="text/javascript">
var r2=document.getElementById("r2"); //get span to apply rainbow
var myRainbowSpan2=new RainbowSpan(r2, 0, 360, 255, 50, 348); //apply static rainbow effect
myRainbowSpan2.timer=window.setInterval("myRainbowSpan2.moveRainbow()", myRainbowSpan2.speed);
</script>
Langganan:
Postingan (Atom)
