Ceriwis
Halaman 1 dari 2 1 2
Show 40 post(s) from this thread on one page

Ceriwis (https://forum.ceriwis.com/forum.php)
-   Tips & Trick (https://forum.ceriwis.com/forumdisplay.php?f=396)
-   -   Tips & Trik Desain Web (https://forum.ceriwis.com/showthread.php?t=391572)

maximillianw 14th July 2011 08:25 AM
Tips & Trik Desain Web
 

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.
HTML Code:
                                  <script>
                                <!--
                                function showtip(tip){
                                document.tool.tip.value=tip
                                }
                                file://-->
                                </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 :


PHP Code:
<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>.


PHP Code:
<style                                  type="text/css">
                                <!--
                                A:hover {background-color: orange}
                                -->
                                </style> 

maximillianw 14th July 2011 08:27 AM
Membuat browser "menari"
 

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

Code:
<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:
Code:
<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:
Code:
<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:

Code:
<script                                        language="JavaScript1.2">
                                      <!-- Start
                                      var bookmarkurl="http://www.klik-kanan.com/"
                                      var bookmarktitle="Gudangnya ilmu komputer"
                                      function addbookmark(){if
                                      (document.all)window.external.AddFavorite                                        (bookmarkurl,bookmarktitle)}
                                      // End -->
                                      </script>

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

Code:
<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:

Code:
<SCRIPT                                        language="JavaScript">
                                      <!-- Begin
                                      <!-- Script By Yousuf Imtiaz-->
                                      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


All times are GMT +7. The time now is 09:39 AM.
Halaman 1 dari 2 1 2
Show 40 post(s) from this thread on one page