Tips & Trik Desain Web [Archive]

maximillianw

14th July 2011, 08:25 AM

Menampilkan keterangan pada link

Mungkin halaman web Anda mempunyai banyak link, sehingga jika tidak disertai keterangan yang jelas orang akan bingung, link tersebut akan menuju ke mana ? Dengan javascript berikut Anda dapat menambahkan keterangan untuk link Anda.
<script>

</script>
<A href="http://www.lutfian.com" onMouseover="showtip('Download freeware dan shareware!')" onMouseout="showtip('')"> Lutfian Software</A>

Background warna pada teks

Mungkin Anda ingin menonjolkan tulisan tertentu pada halaman web Anda. Untuk itu Anda bisa memakai CSS berikut ini :

<span style="background-color:yellow">Text yang ada background warna </span>

CSS di atas akan menghasilkan tulisan seperti di bawah ini :
Text yang ada background warna

Sedangkan untuk menampilkan background warna pada link, Anda perlu menambahkan kode berikut di antara tag <head> dan </head>.

<style type="text/css">

</style>

maximillianw

14th July 2011, 08:27 AM

Pengen membuat kejutan pada pengunjung web Anda ? Copy dan Paste kode di bawah ini ke dalam Notepad lalu simpan sebagai file HTML

<html>
<HTML>
<HEAD>
<TITLE> Browser yang bisa menari</TITLE>
<script language="JavaScript" type="text/javascript">
function init() {
setTimeout("shake(3)",1000);
setTimeout("this.focus()",4000);
setTimeout("shake(3)",4100);
}
function register()
{
var isAol = "no";
var res = 800 ;
}
function shake(n) {
if (self.moveBy) {
for (i = 10; i > 0; i--) {
for (j = n; j > 0; j--) {
self.moveBy(0,i);
self.moveBy(i,0);
self.moveBy(0,-i);
self.moveBy(-i,0);
}
}
}
}
a=275;
b=275;
r=20;
x=1;
z=1;
function rotate(r) {
while (z<=3) {
for (var i = 0; i <360; i++) {
x = (r * Math.cos((i * Math.PI)/180)) + a;
y = (r * Math.sin((i * Math.PI)/180)) + b;
window.moveTo(x,y);
}
z+= 1;
}
setTimeout("shake(3)",10000);
}
</script>
</HEAD>
<BODY ONLOAD="init()" BGCOLOR="Black">
</BODY>
</HTML>

Menampilkan title pada link
Apakah Anda sudah tahu atribut "title" pada tag A HREF ? Atribut "title" tersebut berfungsi untuk menampilkan keterangan pada suatu link.

Contoh:
<a href="myfile.htm" title="Download freeware">Lutfian Software</a>

Jika cursor mouse diarahkan ke link tersebut maka akan muncul keterangan "Download freeware"

maximillianw

14th July 2011, 08:29 AM

Membuat tombol 3 dimensi
Kalau Anda rajin surfing pasti sudah sering melihat "tombol" yang dibuat dengan tag <TABLE> yang mempunyai efek 3 dimensi. Buat Anda yang belum pernah melihatnya,

Di bawah ini adalah contoh bagaimana membuat tombol sepeti itu:
<HTML>
<HEAD>
<TITLE> Tombol 3 Dimensi </TITLE>
</HEAD>
<STYLE>
.link1:hover {
FONT-SIZE: 10px; COLOR: #f0f2f3; FONT-FAMILY: Verdana,Arial; TEXT-DECORATION: underline
}
.link1 {
FONT-SIZE: 10px; COLOR: #f0f2f3; FONT-FAMILY: Verdana,Arial; TEXT-DECORATION: none
}
.tabel1 {
BORDER-RIGHT: black 2px outset; BORDER-TOP: white 1px outset; BACKGROUND: #507488; BORDER-LEFT: white 1px outset; BORDER-BOTTOM: black 2px outset
}
</STYLE>
<BODY bgcolor=#f0f2f3>
<TABLE align=center class=tabel1>
<TR><TD> <b><a class=link1 href=http://www.lutfian.com target=blank> Lutfian Software </a></b> </TD></TR>
</TABLE>
</BODY>
</HTML>
Bookmark dengan link
Anda pasti sering menjumpai link seperti "Bookmark situs ini", yang jika link tersebut kita klik maka akan langsung masuk ke dalam Favorites. Dengan memasukkan situs ke dalam Favorites, maka kita tidak perlu susah-susah lagi mengetikkan nama situs pada Address Bar, tapi cukup dengan mengklik nama situs yang terdapat pada daftar Favorites.

Untuk membuat link bookmark tersebut, masukkan kode di bawah ini di antara tag <HEAD> dan </HEAD> pada halaman web Anda:

<script language="JavaScript1.2">

</script>

Setelah itu kita dapat membuat link yang akan "memanggil" kode javascript di atas:

<script language="JavaScript">
if (document.all)document.write('<a
href="javascript:addbookmark()">Bookmark Situs Ini!</a>')
</script>

Harap diingat bahwa kode di atas hanya untuk browser Internet Explorer. Bagaimana jika si user menggunakan Netscape Navigator? Gunakan saja script di bawah ini:

<SCRIPT language="JavaScript">

if (document.all) { //
var url="http://www.klik-kanan.com";
var title="Gudangnya ilmu komputer";
document.write('<A HREF="javascript:window.ext');
document.write('ernal.AddFavorite(url,title);" ');
document.write('onMouseOver=" window.status=');
document.write("'Bookmark Now!'; return true ");
document.write('"onMouseOut=" window.status=');
document.write("' '; return true ");
document.write('">Bookmark Situs Ini!</a>');
}
else {
document.write("Bookmark Situs Ini! (CTRL+D)");
}
// End -->
</SCRIPT>

ononiha

5th November 2011, 09:47 AM

terima kasih atas sharingnya

paidjoireng

5th November 2011, 03:50 PM

ane bookmark dlo ndan.. :loveindonesia
thanks

handysetiady

6th November 2011, 12:17 PM

Nice inpo, ndan

risers

6th November 2011, 03:33 PM

nice info :2good:

kimpoi

8th November 2011, 10:33 PM

bookmark dlu...

viericool

9th November 2011, 01:32 AM

nice info . .

risa01

9th November 2011, 05:17 AM

di coba dolo bro

jokgir

9th November 2011, 11:16 AM

wah mantab, banyak banget ilmunya

dreadlock

9th November 2011, 05:20 PM

ijin nyoba ndan, thx udah berbagi