running teks

Selamat Datang di Blog ini semoga bermanfaat bagi kita semua

This is default featured slide 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

Rabu, 08 September 2010

Fisheye Top Menu

02.39  krist   0

Sebagai pengguna internet tentunya anda pernah menemui web yang memiliki link menggunakan icon. Apabila kursor diarahkan maka ikon itu membesar dan siap untuk di klik menuju halaman yang dimaksud. Tampilannya seperti dibawah ini.

Fisheye Top Menu


Agar lebih jelas anda dapat mencoba contohnya pada blog indonesian music dan Dockmenu. Untuk membuatnya diperlukan beberapa icon gambar sebagai media link dan dua buah file JavaScript. Anda bisa mendownloadnya disini ,kemudian extract file tersebut.
Upload file diweb anda atau di photobucket, 4shared, dll. copy semua urlnya di notepad.


Pertama :
Login dulu ke blogger >> Rancangan >> Edit html.Jangan lupa expand template widget

Cari code: <title><data:blog.pageTitle/></title>

Kemudian copy code dibawah ini dan paste tepat diatasnya.

<script src='http://web_anda .com/jquery.js' type='text/javascript'/>
<script src='http://web_anda.com/interface.js' type='text/javascript'/>

Kedua :

Cari code : ]]></b:skin>

Copy code dibawah ini paste tepat diatasnya.
/* dock2 */

#dock2 { width: 100%; height:10px; position: relative; text-align: center;}

.dock-container2 { position: absolute; height: 25px; padding-left: 0px;}

a.dock-item2 { display: block; font: bold 12px Arial, Helvetica, sans-serif;

width: 40px; color: #ff9900;height: 0px; position: absolute; text-align: center;

text-decoration: none;}

.dock-item2 img { border: none; margin: 10px 10px 0px; width: 100%; }
.dock-item2 span { display: none; padding-left: 10px;}

Ketiga :

Cari code :<div id='header-wrapper'>

Copy code berikut ini paste tepat dibawahnya.

<div class='dock' id='dock2'>

<div class='dock-container2'>

<a class='dock-item2' href='http://www.google.co.id/' target='_blank'>

<img alt='Google' src='http:// web_anda .com /google.png'/><span>Google</span></a>
<a class='dock-item2' href='http://www.yahoo.co.id/' target='_blank'>

<img alt='Yahoo' src='http:// web_anda .com /yahoo.png'/><span>Yahoo</span></a>
<a class='dock-item2' href='http://www.blogger.com/' target='_blank'>

<img alt='Blogger' src='http:// web_anda .com /blogger.png'/><span>Blogger</span></a>
<a class='dock-item2' href='http://www.gamekecil.com/' target='_blank'>

<img alt='Gamekecil' src='http:// web_anda .com /gamekecil.png'/><span>Game kecil</span></a>
<a class='dock-item2' href='http://www.facebook.com/' target='_blank'>

<img alt='Facebook' src='http:// web_anda .com /facebook.png'/><span>Facebook</span></a>
<a class='dock-item2' href='http://www.twitter.com/' target='_blank'>

<img alt='Twitter' src='http:// web_anda .com /twitter.png'/><span>Twitter</span></a>
<a class='dock-item2' href='http://www.wordpress.com/' target='_blank'>

<img alt='Wordpress' src='http:// web_anda .com /wordpress.png'/><span>Wordpress</span></a>
<a class='dock-item2' href='http://www.youtube.com/' target='_blank'>

<img alt='Youtube' src='http:// web_anda .com /youtube.png'/><span>Youtube</span></a>

</div>

</div>
<script type='text/javascript'>

$(document).ready(

function()

{

$(&#39;#dock2&#39;).Fisheye(

{

maxWidth: 50,

items: &#39;a&#39;,

itemsText: &#39;span&#39;,

container: &#39;.dock-container2&#39;,

itemWidth: 50,

proximity: 80,

halign : &#39;center&#39;

}

)

}

);
</script>

Kata – kata Web_anda diganti dengan url file yang telah anda miliki.

Simpan dan lihat hasilnya.

Read More

Jumat, 03 September 2010

Teks Berkedip

04.55  krist   0

Tulisan berkedip dalam web atau blog dapat memberi penegasan pada arti yang terkandung
didalam isi kalimat, baik itu untuk keperluan suatu iklan ataupun untuk animasi teks.
Untuk membuat tulisan berkedip ini tidak terlalu sulit, warna teks dapat kita atur sedemikian
rupa melalui parameter yang tersedia.
Berikut ini contoh tulisan berkedip atau yang biasa disebut blinking text.





Header Berkedip



Contoh kode dibawah ini dapat anda copy sebagai bahan percobaan
Pilihan warna dapat anda ganti sesuai keinginan dan kecepatan berkedip dapat diganti
dengan anka lain, semakin besar angkanya makin lambat kedipannya.
Begitu juga dengan tulisan Header Berkedip dapat diganti dengan tulisan lain



<html>
<head>
     <script type="text/javascript">
              function blinking_header()
             {
              if (!document.getElementById('blink').style.color)
             {
                  document.getElementById('blink').style.color="green";
             }
             if (document.getElementById('blink').style.color=="green")
            {
                 document.getElementById('blink').style.color="orange";
             }
            else
            {
                document.getElementById('blink').style.color="green";
             }
            timer=setTimeout("blinking_header()",200);
             }
            function stoptimer()
            {
               clearTimeout(timer);
             }

    </script>

</head>
           <body onload="blinking_header()" onunload="stoptimer()">
                      <h1 id="blink">Header Berkedip</h1>
           </body>
</html>


































Selamat mencoba semoga sukses

Read More

Kamis, 02 September 2010

Mengganti background

09.08  krist   0

Pada kali ini kita belajar mengganti warna background pada browser menggunakan javascript.
Pilihan warna yang berada didalam kotak beberapa macam, yaitu : red,yellow, dan green.
Arahkan kursor mouse anda diatas kotak warna secara bergantian dan lihat efeknya.

Arahkan kursor diatas kotak!


Red    : layar menjadi berwarna merah walaupun kursor dipindahkan posisinya.
Yellow : layar menjadi berwarna kuning walaupun kursor dipindahkan posisinya.
Green : layar menjadi berwarna hijau dan berganti putih saat kursor dipindahkan posisinya.

Copy code JavaScript berikut ini pada notepad atau dreamweaver kemudian simpan dengan nama
background.html Jalankan script tersebut pada browser anda.

<html>
     <head>
         <script type="text/javascript">function bgChange(background)
        {
            document.body.style.background=background;
        }
        </script>
    </head>

    <body>

    <b>Arahkan kursor diatas kotak!</b>

    <table width="300" height="50">
     <tr>
          <td onmouseover="bgChange('red')" onmouseout="bgChange('red')"bgcolor="red">
          </td>
          <td onmouseover="bgChange('yellow')" onmouseout="bgChange('yellow')"
            bgcolor="yellow">
          </td>
          <td onmouseover="bgChange('green')" onmouseout="bgChange('transparent')"
            bgcolor="green">
          </td>
      </tr>
    </table>

Selamat mencoba

Read More