Tutorial : Cara membuat text link berkelip-kelip saat di klik

Untuk pertemuan kali ini saya akan memberikan tutorial javascript lagi, yaitu cara membuat teks link berkedip kedip / berkelip saat link di klik.. wah pasti pada bingung gimana nih maksudnya... tenang... kebetulan saya melihat ada web blog yang mempergunakan javascript ini, kalo anda ingin melihat contonya silahkan klik disini . nah di webblog tersebut saat mouse anda letakkan di salah satu linknya pasti link akan berubah menjadi berkedip kedip / berkelip kelip. Gimana..? udah tau kan yang saya maksud..?
Ok.. sekarang saya akan melanjutkan lagi ke pembahasan.. scipt ini dinamakan dengan scipt RAINBOW ( RANBOW SCRIPT ) yang mana pembuatan script ini menggunakan bahasa pemprogaman berbasis JAVASCRIPT dan telah di publikasikan oleh web tool www.Dynamicdrive.com, kalo anda ingin mencari bermacam script javascript lainnya yang aneh aneh.. silah langsung aja anda kunjungi websitenya.. pasti di jamin ga bakaln bosen ngadepin websitenya.. coz, banyak sesuatu yang menarik disana...
Gimana..? masih mau scriptnya..? masih dunk... hehehe.. ok.. langsung aja akan saya kasih script nya..
Disni saya akan memeberikan scriptnya dan saya bagi menjadi 2 macam, yaitu scrip yang sudah mateng / sudah siap pake alias tinggal masang di blog anda dan script yang masih mentah alias musti di upload dulu ke website uploader / website file hosting dan yang pasti yang gratisan dunk... hehehe...
Jika anda pengen langsung bisa menggunakan scriptnya.. silahkan pakai aja script yang sudah saya upload di web file hosting dan tugas anda tinggal memasangkan di blog anda yaitu dengan cara copy lalu paste di editor HTML blog anda dan taruh tepat di atas kode </body> :

<script src='http://h1.ripway.com/ekhan/rainbow.js'></script>

Kemudian tekan tombol SAVE / SIMPAN ... ( lihat hasilnya... )

Dan jika anda masih belum puas dengan script yang sudah jadi diatas saya akan memberikan script mentahannya ( siapa tau kapan2 alamat file JS yang saya berikan di atas ga bisa di access lagi, maka anda bisa mengupload script dibawah ini )


/************************************************************************/
/* Rainbow Links Version 1.03 (2003.9.20) */
/* Script updated by Dynamicdrive.com for IE6 */
/* Copyright (C) 1999-2001 TAKANASHI Mizuki */
/* takanasi@hamal.freemail.ne.jp */
/*----------------------------------------------------------------------*/
/* Read it somehow even if my English text is a little wrong! ;-) */
/* */
/* Usage: */
/* Insert '<script src="rainbow.js"></script>' into the BODY section, */
/* right after the BODY tag itself, before anything else. */
/* You don't need to add "onMouseover" and "onMouseout" attributes!! */
/* */
/* If you'd like to add effect to other texts(not link texts), then */
/* add 'onmouseover="doRainbow(this);"' and */
/* 'onmouseout="stopRainbow();"' to the target tags. */
/* */
/* This Script works with IE4,Netscape6,Mozilla browser and above only, */
/* but no error occurs on other browsers. */
/************************************************************************/


////////////////////////////////////////////////////////////////////
// Setting

var rate = 20; // Increase amount(The degree of the transmutation)


////////////////////////////////////////////////////////////////////
// Main routine

if (document.getElementById)
window.onerror=new Function("return true")

var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID


if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}


//===================================================================
// doRainbow
// This function begins to change a color.
//===================================================================
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}


 
//===================================================================// stopRainbow
// This function stops to change a color.
//===================================================================
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}


//===================================================================
// doRainbowAnchor
// This function begins to change a color. (of a anchor, automatically)
//===================================================================
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}

if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}


//===================================================================
// stopRainbowAnchor
// This function stops to change a color. (of a anchor, automatically)
//===================================================================
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}


//===================================================================
// Mozilla_doRainbowAnchor(for Netscape6 and Mozilla browser)
// This function begins to change a color. (of a anchor, automatically)
//===================================================================
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}

if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}


//===================================================================
// Mozilla_stopRainbowAnchor(for Netscape6 and Mozilla browser)
// This function stops to change a color. (of a anchor, automatically)
//===================================================================
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}


//===================================================================
// Change Color
// This function changes a color actually.
//===================================================================
function ChangeColor()
{
objActive.style.color = makeColor();
}

//===================================================================
// makeColor
// This function makes rainbow colors.
//===================================================================
function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?
// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;

if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}

elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;

elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;

return '#' + elmR + elmG + elmB;
}


Copy script diatas kemudian paste kedalam notepad / sejenisnya lalu simpan file tersebut dalam format JS (javascript) sebagai contoh : anda simpan dengan nama RAINBOW.JS ( pokoknya di belakang nama file berekstensi ( .js ) tanpa tanda kurung )
kemudian upload file tersebut ke web file hosting yang anda punya, ( web file hosting rekomend : www.geocities.com , www.googlepages.com , www.ripway.com , dll )
Setelah anda upload file js tersebut sekarang anda membuat script perintah pemanggilan file js tersebut, yaitu seperti ini :

<script src='http://alamat-file-hosting-anda/contoh.js'></script>

kemudian taruh script yang barusan anda buat tadi tepat di atas code </body>

kemudian tekan tombol SAVE / SIMPAN dan lihat hasilnya....

udah begitu aja.... mudah kan...?
kalo masih ada yang bingung silahkan tanyakan aja yah.. moga aja sih ga da masalah dengan hal ini... selamat mencoba dan semoga sukses...

Tutorial : Javascript anti klik kanan

Jika anda adalah seorang blogger yang sangat protektif terhadap isi artikel yang ada pada blog anda, yang mana content artikel anda sering di jiplak alias di copy paste ke halaman blog orang lain tanpa ijin terlebih dahulu dengan anda, maka saya disini akan memberikan sedikit solusi buat anda. Yaitu dengan mengenakan javascript disable right click atau dalam bahasa indonesianya terkenal dengan javascript anti klik kanan pada halaman web blog anda. Emank sih kalo melihat isi artikel blog kita di publikasikan ke web blog orang lain alias di copy paste tanpa ijin terlebih dahulu dengan kita adalah hal yang sangat menjengkelkan dan membuat darah kita menjadi naik turun naik turun kayak komedi putar... hehehe.... nggak ah... berlebihan kaleeee...

Oke.. ngga banyak kata lagi saya akan langsung memeberikan scriptnya dan nggak lupa juga dengan cara memasangnya ke halaman web blog anda

...
Copy seluruh script javascript di bawah ini :

<script language=JavaScript>
<!--

//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com

var message=" Maaf tidak untuk di per copy - paste kan | kalao ingin mebuat halaman seperti ini kunjungi aja di http://master-blog-ayiek.blogspot.com";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->
</script>

Kemudian masukkan atau paste script diatas ke dalam blog anda yaitu tepatnya taruh script javascript tersebut tepat di atas kode </body> kemudian tekan tombol SAVE / SIMPAN , Jika Terjadi ERROR alias ga bisa di simpan maka sebaiknya anda PARSE terlebih dahulu script javascript di atas ke web parser , kemudian hasil PARSEannya baru anda masukkan ke halaman blog anda, kemudian jangan lupa tekan SAVE / SIMPAN.
Udah dech.. sekarang blog anda menjadi sedikit aman dari para pencuri artikel.. hehehe... Tapi perlu diingat bahwa script di atas masih mempunya banyak kelemahan dan kekurangan.
Dan sedikit saran dari saya " pikirkan matang matang sebelum menggunakan script ini kedalam halaman web blog anda " karena jika dengan adanya script ini pada halaman web blog anda menjadi ketidak nyamanan buat pengunjung blog anda, bisa bisa web blog anda jadi di benci oleh pengunjung dan tidak akan mau lagi berkunjung ke halaman web blog anda.
Tapi semua keputusan ada pada anda dan jadikan script ini sebatas permainan dan keindahan buat blog kita aja... hehehe...
Kalo masih bingung dengan cara memasukkan script di atas kedalam blog anda, silahkan tanyakan aja yah... insya allah saya akan membantu..
Selamat mencoba dan sukses...

Tutorial : Cara Menampilkan Tulisan Bergerak pada halaman blog

Halooo pengunjung... kita kembali lagi dalam tutorial HTML setelah beberapa minggu terakhir ini gencar memposting tutorial JAVASCRIPT dan untuk kali ini saya akan memberikan sedikit bocoran mengenai cara membuat efek marquee .. apa sih marquee itu dan yang gimana sih bentuknya...? pernah lihatkah anda tulisan yang bergerak atau berjalan kesamping kiri ke kanan atau sebaliknya dan atau bergerak dari atas kebawah atau sebaliknya..? nah.. itu namanya hasil pembentukan dari efek perintah marquee.
Oke dech.. kao udah punya gambaran mengenai apa itu marquee sekarang giliran saya akan memberikan contoh scriptnya.. dan ga berlama lama lagi akan saya tunjukkan scriptnya dan sekalian saya kasih penjelasannya, biar anda bisa mengubah dan mengembangkannya sendiri sesuai kebutuhan dan selera anda..
dibawah ini adalah perintah efek marquee default

<marquee>contoh kata kata anda disini</marquee>
dan hasilnya akan nampak seperti ini :

contoh kata kata anda disini
...

Contoh diatas adalah perintah marquee yang tanpa embel embel lainnya.. seumpama anda ingin menempatkan dalam halaman yang lebarnya sekian atau tingginya sekian.. maka perlu ditambahin embel embel width: lebar dan height: tinggi dan masih banyak lagi embel embel lainnya.. tapi tenang aja akan saya bahas satu persatu mengenai embel embel tersebut..
Coba anda sekarang lihat contoh script dibawah ini, baru penjelasannya dibawahnya:

<marquee behavior='alternate' bgcolor='#ADFF2F' scrollamount='8' width='400px'><span style='color:red'>tulisan anda taruh sini</span>
</marquee>

hasilnya akan nampak seperti ini :

tulisan anda truh disini

keterangan :

• behavior= adalah untuk mengatur perilaku gerakan, untuk kasus contoh diatas adalah 'alternat' yaitu bergerak bolak balik dari kiri kekanan/sebaliknya, nah jika anda pengen perintah perilaku yang lainnya seumpama bergerak sekali saja lalu berhenti adalah 'slide' atau 'scroll' yaitu bergerak berputar .. nah anda bisa mencobanya sendiri ntar satu satu biar tau dengan jelas dan puas... hehehe..
• bgcolor: adalah untuk mengatur warna backgroun .. bisa anda isi sesui yg anda inginkan.
• scrollamount= adalah perintah kecepatan gerakan, jika anda ingin lebih cepat maka anda perbesar jumlah angkanya dan sebaliknya jika pengen diperlambat.
• width: adalah perintah untuk membuat lebar, jika ingin ditambahkan bisa di dtambahin height: yaitu untuk ukuran tinggi.
• dan yang terakhir adalah span color: yaitu untuk mengatur warna text yang bergerak.

Selanjutnya lihat juga contoh yang berikutnya yaitu :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="170" height="100" >kata kata anda disini
kata kata anda disini
kata kata anda disini
kata kata anda disini
kata kata anda disini</marquee>

hasilnya akan nampak sebagai berikut :

kata kata anda disini
kata kata anda disini
kata kata anda disini
kata kata anda disini
kata kata anda disini

keterangan :

• onmouseover="this.stop()" : adalah perintah yang mana jika mouse anda letakkan diwilayah area teks yang anda kasih efek marquee akan berhenti bergerak.
• onmouseout="this.start()" : adalah kebalikan dari diatas, yaitu jika mouse anda lepaskan lagi maka akan kembali bergerak.
• direction="up" : adalah untuk mengatur perintah berjalan kearah atas. jika pengen kearah bawah ganti kata "up" dengan kata "down"
• keterangan selebihnya kayak diatas yah..

Setelah anda memahami penjelasang diatas.. anda bisa mengkolaborasikan antar masing.. yah sekedar bereksperimen gtu... ga papa ko.. ga meledak... hehehe..

Oke dech.. selamat mencoba yah.. jika ada yang bingung bisa ditanyakan lewat post komentar dibawah yah... atau pengen tanya style gerakan yang lainnya bahkan..? silahkan di muntahkan aja yah.. keburu membeku ntar.. wekekekeke...
GUD.. LUK...