Dalam rangka ngikutin trend mode saya mau posting seputar aksesoris/hiasan blog dulu nih...
Sekalian saya mau memberi info pada
blogspot template dark-7 ,karena sebelumnya ada yg kurang pas yaitu warna teks/konten pada salah satu sidebar ada yg kurang kontras dengan background dan sekarang sudah sy revisi + kode link yg sy mau post ini ,karena kreasi template blogspot yg gelap (dark-7) itu ternyata lumayan ada peminatnya, dan ada yg request ,katanya, linknya jgn yg berkedip-kedip gitu aja (karena disitu sy beri "
blink" pd text decoration) tapi yg bisa berubah-rubah warnanya..gt, tadinya blm paham yg di maksud rekan yg request tsb, setelah sy lihat2 pd blog yg dicontohkan ternyata yg di maksud fungsi
onmouseover dari javascipt , jadi jika di lewati
mouse maka akan menghasilkan efek anu...gt kira2. dan setelah saya lihat pada blog yg memakainya ternyata fungsi yang dipakai adalah fungsi membuat warna oleh
js tersebut.
Java script memang memiliki kemampuan yg sangat interaktif dan user friendly karena tak memerlukan compiler supaya hasil kreasi bisa di aplikasikan.
Si
js ini jangankan cuma membuat warna animasi pada teks atau link ,membuat jungkir-balik dan berjoget halaman websitepun bisa . Memang tak bisa di pungkiri, suatu tampilan yang menarik pada halaman web akan berpengaruh juga pada daya tarik pengunjung.
Ok, variasi link yg di maksud adalah seperti contoh beberapa link di blog saya ini jika anda mengarahkan pointer mouse kesuatu link.
Maaf, semua contoh bentuk link sementara sedang tidak di tampilkan di free-7.net ini , sehubungan dg keperluan memaksimalkan key-word untuk seo-kontes
kampanye damai pemilu indonesia 20091- Jika tertarik mau langsung memakainya tanpa repot maka masukan saja kode di bawah ini kedalam halaman css anda , letakan persis di bawah tag
<body> :
<script src='http://hastiantech.googlepages.com/dodol.js'></script>Dengan meletakan script itu pada web anda maka setiap link teks pada halaman akan punya efek seperti di blog ini.
2- Jika ingin membuat variasi supaya teks biasa atau artikel memiliki efek yang sama ,maka tambahkan kode di bawah ini pada
tag yang di maksud :
onmouseover="dodol(this);"onmouseout="stopdodol();"Bila ada yg belum paham apa itu
tag , tag adalah sesuatu yang ada di dalam tanda
<> ,misalnya
</span> ,<p>,<div> <body> dan lainya...
Contoh: misalnya kalimat-teks pada paragraf di bawah ini akan di beri efek dodol tersebut:<p align="center" onmouseover="dodol(this);"onmouseout="stopdodol();">contoh paragraf -teks yang di beri efek dodolcontoh paragraf -teks yang di beri efek dodol</p>Contoh pemakaian fungsi ini,seperti pada paragraf atas artikel-posting saya ini ,silahkan arahkan mouse kesitu.
3- Jika mau memodifikasi seluruh
script dan variasi warna ataupun efek yg di hasilkan maka di bawah ini source code-nya , di situ saya beri keterangan tentang bagian-bagiannya untuk keperluan variasi warnanya , silahkan copy-paste ke dalam Notepad ,lalu modifikasi ,lalu Save As dengan ekstensi js ,
misalnya dodol.js atau
warna-link.js .......dan upload ke hosting anda ,dan tentunya rubah pula url di dalam
<script src="dodol.js"> dengan alamat url di mana
script itu di upload.
Untuk yg pake hosting sendiri tentu bisa di upload ke root directory
public html dan tinggal memasukan
<script src="dodol.js">Source code
dodol.js----------------------
/*---------------------------------*/
/* DODOL - COLOR SCRIPT */
/* (C) Iwan Rachmanto 05 Des 2008 */
/* www.free-7.net */
/* http://free-7.blogspot.com */
/*---------------------------------*/
//mulai variabel
var rate = 27;
//====================================
//var "rate" ini jika di
//kurangi nilainya akan
//lebih slow-lembut perubahan warnanya
//nilai var "rate" nyaman mata
//melihat berkisar 0 sampai 255
//====================================
if (document.getElementById)
window.onerror=new Function
("return true")
var j = 105;
//====================================
//var j adalah utk kejenuhan
// warna,atau HUE
//nilai var j berkisar 0 sampai 255
//makin tinggi makin kontras
//=================================
var n = 250;
//====================================
//var n adalah utk kadar warna RGB,
//atau merah-hijau-birunilai
//var n berkisar 0 sampai 255
//makin tinggi makin jelas atau tajam
// jika kamu paham teknik warna maka:
// w adalah Hue
// j adalah Saturation
// n adalah Value
//===========================
var ondodol;
var ondodol1 =0;
var w = 0;
var awal;
var waktu;
//akhir variabel
//============================
// memulai perintah mouse
//pada obyek link atau teks
//===========================
if (document.all) {
document.onmouseover = dodol1;
document.onmouseout = stopdodol1;}
else if (document.getElementById) {
document.captureEvents
(Event.Mouseover|Event.Mouseout);
document.onmouseover = dodol2;
// untuk hack browser firefox
document.onmouseout = stopdodol2;}
// untuk hack browser firefox
//========================================
// memulai dodol - mengambil warna teks
//=======================================
function dodol(obj)
{
if (ondodol1 == 0) {
ondodol1 = 1;
if (obj)
ondodol = obj;
else
ondodol = event.srcElement;
awal = ondodol.style.color;
waktu = setInterval("ChangeColor()",150);}
// nilai waktu 150 adalah kecepatan
// perubahan warna, coba sendiri kurangi
// atau tambah sesuai selera kamu
// maksimal nyaman mata = 400 -
//jika merubah variabel "waktu" ini maka
// variabel "waktu" yang pd fungsi yg
// lain rubahlah juga supaya sama
// ada interval waktu yg sy beri
//nilai 150 pada halaman ini
}
//===================================
// stop dodol - mengambil warna teks
//===================================
function stopdodol()
{
if (ondodol1) {
ondodol.style.color = awal;
clearInterval(waktu);
ondodol1 = 0;
}}
//====================================
// memulai dodol-mengambil warna link
//====================================
function dodol1()
{if (ondodol1 == 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 != ''){
ondodol = obj;
ondodol1 = 1;
awal = ondodol.style.color;
waktu = setInterval("ChangeColor()",150);
}}}
//====================================
// stop dodol - mengambil warna link
//====================================
function stopdodol1()
{if (ondodol1) {
if (ondodol.tagName == 'A') {
ondodol.style.color = awal;
clearInterval(waktu);
ondodol1 = 0;}
}}
//=======================================
// memulai dodol - mengambil warna link
// untuk hack browser firefox-Netscape
//=======================================
function dodol2(e)
{if (ondodol1 == 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 != '') {
ondodol = obj;
ondodol1 = 1;
awal = obj.style.color;
waktu = setInterval
("ChangeColor()",150);}
}}
//=======================================
// stop dodol - mengambil warna link
// untuk hack browser firefox-Netscape
//=======================================
function stopdodol2(e)
{
if (ondodol1) {
if (ondodol.nodeName == 'A') {
ondodol.style.color = awal;
clearInterval(waktu);
ondodol1 = 0;}
}}
//======================================
// mulai membuat-memproduksi warna,
//sedikit hitungan matematika
//jika kamu kurang paham java script
// maka coba2 aja ber-eksperimen
// paling kalo salah bs di ulang...hehe
//========================================
function ChangeColor()
{ondodol.style.color = makeColor();}
function makeColor()
{
if (j == 0)
{merah = n; hijau = n; biru = n;}
else {
s1 = n;
s2 = (255 - j) * n / 255;
s3 = w % 60;
s3 = (s1 - s2) * s3 / 60;
if (w < 60)
{merah = s1; biru = s2; hijau = s2 + s3;}
else if
(w < 120)
{hijau = s1; biru = s2; merah = s1 - s3;}
else if
(w < 180)
{hijau = s1; merah = s2; biru = s2 + s3;}
else if
(w < 240)
{biru = s1; merah = s2; hijau = s1 - s3;}
else if
(w < 300)
{biru = s1; hijau = s2; merah = s2 + s3;}
else if
(w < 360)
{merah = s1; hijau = s2; biru = s1 - s3;}
else
{merah = 0; hijau = 0; biru = 0;}
}
merah = Math.floor(merah).toString(16);
hijau = Math.floor(hijau).toString(16);
biru = Math.floor(biru).toString(16);
if (merah.length == 1) merah = "0" + merah;
if (hijau.length == 1) hijau = "0" + hijau;
if (biru.length == 1) biru = "0" + biru;
w = w + rate;
if (w >= 360)
w = 0;
return '#' + merah + hijau + biru;}
--------
Selamat mencoba