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.
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 2009
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 2009
1- 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 dodol
contoh 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
Keren euy.... ini gara2 efek anu... heuheue.
BalasHapussamaan dong kek Iko.... dark, tp tetap... ada birunya. :D
BalasHapuskeren, keren
Nah sekali kali bagi2 ilmu beginian to bang,...
BalasHapusJangan ilmu begituan terus,...
Sukses!
makin mantap suhu tutorialnya, emang basic nya sudah kuat mau nulis apa aja pasti dibuat mudah :)
BalasHapusnah good tutorial bos hehehee,,,
BalasHapustrims,,, tar coba comot ah :D
Keren amat, amat aja nggak keren-keren amat
BalasHapusHebat banget, cocok buat blog tentang celeb nich
hoho...mantap2....kudu banyak kursus disini nih....
BalasHapushaiiiii
BalasHapusmasih belum paham bang....
BalasHapusbingung