Sabtu, 04 Desember 2010

Circle Text Around Cursor

Pernah Ga Sih Kalian Pada Saat Masuk Ke Blog Seseorang Anda Melihat Di Kursornya Ada Tulisan Berputar-Putar Mengitari Cursor...?
Nah Disini Saya Akan Menjelaskan Tentang Cara Membuat Kursor Tersebut...

Copy/Paste Kode Dibawah Ini:

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {

font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #000;
/* End Optional */

/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">



;(function(){

// GANTI PESANNYA DISINI (QUOTED STRING)
var msg = "Nico Savero";


// GANTI UKURAN HURUF (DESIMAL DAN MINUS TIDAK BOLEH)
var size = 24;

//HANYA BOLEH MEMILIH ANTARA 0-3 UNTUK MENETUKAN OVAL/LINGKARAN
var circleY = 0.75; var circleX = 2;

//JARAK SPASI TULISAN (DESIMAL DIPERBOLEHKAN)
var letter_spacing = 5;

//UKURAN LINGKARAN
var diameter = 10;

//ARAH ROTASI (SET KE MINUS KALAU MAU BERPUTAR SEARAH JARUM JAM)
var rotation = 0.4;

//KECEPATAN ROTASI
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
 e = e || window.event;
 ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
 xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
 if(init.nopy){
  o.style.top = (b || document.body).scrollTop + 'px';
  o.style.left = (b || document.body).scrollLeft + 'px';
 };
 currStep -= rotation;
 for (var d, i = n; i > -1; --i){ // makes the circle
  d = document.getElementById('iemsg' + i).style;
  d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
  d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
 };
},

drag = function(){ // makes the resistance
 y[0] = Y[0] += (ymouse - Y[0]) * speed;
 x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
 for (var i = n; i > 0; --i){
  y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
  x[i] = X[i] += (x[i-1] - X[i]) * speed;
 };
 makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
 if(!isNaN(window.pageYOffset)){
  ymouse += window.pageYOffset;
  xmouse += window.pageXOffset;
 } else init.nopy = true;
 for (var d, i = n; i > -1; --i){
  d = document.createElement('div'); d.id = 'iemsg' + i;
  d.style.height = d.style.width = a + 'px';
  d.appendChild(document.createTextNode(msg[i]));
  oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
 };
 o.appendChild(oi); document.body.appendChild(o);
 setInterval(drag, 25);
},

ascroll = function(){
 ymouse += window.pageYOffset;
 xmouse += window.pageXOffset;
 window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
 window.addEventListener('load', init, false);
 document.addEventListener('mouseover', mouse, false);
 document.addEventListener('mousemove', mouse, false);
  if (/Apple/.test(navigator.vendor))
   window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
 window.attachEvent('onload', init);
 document.attachEvent('onmousemove', mouse);
};

})();

</script>


Cara Memasukkan:
1. Klik Rancangan.
2. Klik Tambahkan Gadget.
3. Pilih HTML/JavaScript.
4. Copy Code/Paste Script Diatas.
5. Save.

Jumat, 03 Desember 2010

Translator

Biar Blog Kita Bisa Dimengerti Oleh Orang-Orang Dari Luar Negri...
Makanya Kita Harus Membuat Sebuah Translator.
Maka dari Itu Sekarang Saya Akan Membeeritahukan Cara Membuat Translator.

Ketik atau copy paste code di bawah ini.

Cara Memasukkan:
1. Klik Rancangan.
2. Klik Tambahkan Gadget.
3. Pilih HTML/JavaScript.
4. Copy Code/Paste Script Diatas.
5. Save.

Cara Membuat ChatBox

Kalau Yg Ini Saya Kurang Mengerti Karena Saya Hanya Copy/Paste Dari Blog Remo-Xp Jadi Kalau Mau Bertanya...
Tanya Saja Sama Kk Remo.

Ketik atau copy paste code di bawah ini.


Cara Memasukkan:
1. Klik Rancangan.
2. Klik Edit HTML.
3. Tekan Ctrl+F.
4. Cari</body>
5. Paste Script Ini Diatas</body>
6. Save.

Ganti Tulisan Di Title

Jika kalian Melihat Blog Ini Kalian Pasti Akan Melihat Titlenya Berubah-Ubah...
Disini Saya Akan Memberitahukan Cara Merubah Tittle Di Blog...

Ketik atau copy paste code di bawah ini.



Cara Memasukkan:
1. Klik Rancangan.
2. Klik Edit HTML.
3. Tekan Ctrl+F.
4. Cari<head>
5. Copy/Paste Script Diatas.
6. Save

Musik

Jika Anda Ingin Memasukkan Musik Ke Blog Anda Silahkan Copy Paste Script Dibawah...

Ketik atau copy paste code di bawah ini.



Cara Memasukkan:
1. Klik Rancangan.
2. Klik Tambah Gadget.
3. Pilih HTML/JavaScript.
4. Copy/Paste Script Diatas.
5. Save.

Kursor Bintang

Jika Anda Membuka Blog ini Dan Anda Melihat Kursornya...
Pasti Anda Akan Melihat Banyak Bintang Berjatuhan...
Disini Saya Akan Menjelaskan Cara Membuat Kursor Bintang...

Ketik atau copy paste code di bawah ini.



Cara Memasukkan:
1. Klik Rancangan.
2. Klik Tambahkan Gadget.
3. Pilih HTML/JavaScript.
4. Copy Code/Paste Script Diatas.
5. Save.

Goodbye Alert.

Pernah Ga Sih Kalian Pas Keluar dari Blog Seseorang Lalu Keluar Box Dengan Tulisan "KAPAN-KAPAN DATANG LAGI YA" Nah Disini Akan saya Beritahukan Rahasianya...

Tampilan Scriptnya:
<script type='text/javascript'>
function goodbye(){
alert('KAPAN-KAPAN DATANG LAGI YA...');
}
parent.window.onunload=goodbye;
</script>

Cara Memasukkan:
1. Klik Rancangan.
2. Klik Tambah Gadget.
3. Pilih HTML/JavaScript.
4. Copy/Paste Script Diatas.
5. Edit Tulisan Berwarna Kuning Dengan Kata-Kata Anda sendiri.
6. Save.

Cara Membuat Daftar Teman

Kalau Anda Melihat Di Blog Ini Anda Pasti Melihat Daftar Teman Di Sisi Kanan Blog...
Gimana Sih Buatnya...
Disini Akan saya Ajarkan Cara membuatnya...

Ini Scriptnya:
<h2 class="title">
.::Group List::.</h2>

<div>
<table border="1" cellpadding="1" height="100" style="width: 170px;"><tbody>
<tr> <td align="left">
<h3>
<b><span style="color: blue;">- Nico</span></b></h3>
<span style="color: yellow;"><blink><b>.::.</b></blink></span> <span style="color: red;"><b> Chairman</b></span>
<h3>
<b><span style="color: blue;">- Savero</span></b></h3>
<span style="color: yellow;"><blink><b>.::.</b></blink></span> <span style="color: red;"><b> Chairman</b></span></td></tr>
</tbody></table>
</div>
Tampilannya:

.::Group List::.



- Nico

.::. Chairman

- Savero

.::. Chairman

Cara Memasukkannya:
1. Klik Rancangan.
2. Klik Tambah Gatget.
3. Pilih HTML/JavaScript.
4. Copy/Paste Script Diatas.
5. Save.

Cara Membuat Search Box Di Blog Anda.

Kadang Kita Suka Melihat Search Box Di Blog Orang...
Apa Sih Fungsinya...?
Fungsinya Yaitu Mempermudah Orang-orang Untuk Mencari Di Blog Kita...

Scriptnya Yaitu:
< form id="searchform" action="http://nico-savero1.blogspot.com" name="searchform" method="get">
< input id="s" value="" name="q" type="text" /< < input id="searchsubmit" value="Cari" type="submit" /> </form>

nanti Akan Muncul Tampilan Seperti Ini:

Cara membuatnya Yaitu;
1. Klik Rancangan.
2. Klik Tambah Gadget.
3. Pilih HTML/JavaScript.
4. Copy/Paste Kode Diatas.
5. Save.

Kalelawar Terbang Disekitar Blog

Jika Anda Membuka Blog Ini...
Anda Pasti Akan Melihat Begitu Banyak Kalelawar Berterbangan Di Sekitar Blog...
Disini Saya Akan Menjelaskan Cara Membuat Gambar kalelawar Tersebut.

Ketik atau copy paste code di bawah ini.

Cara Memasukkan Gambar:
1. Klik Rancangan.
2. Klik Tambahkan Gadget.
3. Pilih HTML/JavaScript.
4. Copy Code Diatas.
5. Paste Di Kolom HTML/JavaScript.
6. Save.

Cara Mengubah Gambar:
1. Tekan Ctrl+F
2. Cari Tulisan floatimages[0]='http://i160.photobuck.......';
3. Ganti Linknya Dengan Link Gambar Anda.
4. Kalau Mau Memasukkan Lebih Dari Satu Gambar Copy Saja floatimages[0]='http://i160.photobuck....... tetapi Angka 0nya Diganti Jadi 1,2,3,...Dst.


Dasar-Dasar HTML 2

Kali Ini Saya Akan Membahas Tentang Jenis Huruf Ukuran Huruf Dan Warna Huruf...

Jenis Huruf:
<font face="comic">Text Anda</font>

Tampilannya:
Text Anda


Ukuran Huruf:
<font size=20>Text Anda</font>

Tampilannya:
Text Anda


Warna Huruf:
<font color="red">Text Anda</font>

Tampilannya:
Text Anda


Jika Anda Ingin Menggabungkan Ketigannya:
<font face="arial"; size=20 color="red">Text Anda</font>

Tampilannya:
Text Anda

Kamis, 02 Desember 2010

Dasar-Dasar HTML

Mungkin Banyak Orang Yang Sudah Mengerti Tentang HTML...
Tapi Banyak Juga Yg Tidak Mengerti Tentang HTML...
Oleh karena Itu Disini saya Akan Menjelaskan Dasar-dasar HTML...

Membuat Huruf Tebal
<b>Text Anda</b>

Membuat Huruf Miring
<i>Text Anda</i>

Membuat Huruf Bergaris Bawah
<u>Text Anda</u>

Membuat Huruf Bergaris Tengah
<s>Text Anda</s>

Membuat Huruf Berkedip
<blink>Text Anda</blink>


Kalau Anda Ingin Menggunakan Semuanya Anda Tinggal Menggabungkan Semuannya Seperti Ini:

<b><i><u><s><blink>Text Anda</blink></s></u></i></b>

Marquee 6

Kali Ini Saya Akan Menjelaskan Tentang Kecepatan Gerak Marquee...
Kadang Kita Ingin Gerak Marquee Kita Cepat...
Atau Sebaliknya Gerakan Marquee Kita Lambat...
Untuk Mengatur kecepatan Marquee Digunakan Scrollamount:

Scrollamount mengontrol banyaknya pergerakan dalam pixel.
Semakin kecil nilai yang diberikan akan menjadikan gerakan tulisan semakin lambat dan sebaliknya, semakin besar nilainya akan membuat gerakan tulisan semakin cepat.

Contoh dengan nilai kecil

<marquee scrollamount=1>
Ini contoh tulisan dengan attribute scrollamount dengan nilai kecil
</marquee>

Hasilnya (gerakan lebih lambat)


Ini contoh tulisan dengan attribute scrollamount dengan nilai kecil


Contoh dengan nilai besar

<marquee scrollamount=400>
Ini contoh tulisan dengan attribute scrollamount dengan nilai besar
</marquee>

Hasilnya (gerakan lebih cepat)


Ini contoh tulisan dengan attribute scrollamount dengan nilai besar

Marquee 5

Kali Ini Saya Akan Menjelaskan Tentang Marquee Tag...
Marquee Tag Dibagi Menjadi 3:

BEHAVIOR terdiri dari : ALTERNATE, SCROLL, SLIDE
DIRECTION, terdiri dari LEFT, dan RIGHT
SIZING, terdiri dari HEIGHT/WIDTH, dan HSPACE/VSPACE

Untuk Direction Sudah Kita Pelajari Di Tips Sebelumnya...
Jadi Kali Ini Kita Akan Mempelajari Tentang Behavior Dan Sizing...
Dan kali Ini Saya Akan Menggunakan Background Text Berwarna Kuning...



ALTERNATE

<MARQUEE WIDTH=100% BEHAVIOR=ALTERNATE BGColor=yellow>Ini adalah contoh marquee dengan ALTERNATE,…....
</MARQUEE>

Hasilnya

Ini adalah contoh marquee dengan ALTERNATE,…....

SCROLL

<MARQUEE WIDTH=100% BEHAVIOR=SCROLL BGColor=yellow>Ini adalah contoh marquee dengan SCROLL,……..
</MARQUEE>

Hasilnya

Ini adalah contoh marquee dengan SCROLL,……..



SLIDE

<MARQUEE WIDTH=100% BEHAVIOR=SLIDE BGColor=yellow>Ini adalah contoh Marquee dengan SLIDE,…....
</MARQUEE>

Hasilnya

Ini adalah contoh Marquee dengan SLIDE,…....


Untuk memperindah tampilan, kita juga dapat mengkombinasikan dengan tampilan font yang berbeda dengan format sebagai berikut:

Alternate dengan format font

<FONT SIZE="4" FACE="times new roman" COLOR=blue><MARQUEE WIDTH=100% BEHAVIOR=ALTERNATE BGColor=yellow>Ini adalah contoh marquee dengan alternate dengan format font,…....
</MARQUEE></FONT>

Hasilnya seperti di bawah ini,..

Ini adalah contoh marquee dengan alternate dan kombinasi font...

Marquee 4

Masih Mengenai Marquee...

Kali Ini saya Akan Menjelaskan Tentang Cara Memasukkan Link Ke marquee...




Salah satu format yang akan membuat link bergerak ke bawah adalah sebagai berikut.

<marquee align=center direction=down onmouseover="this.stop()" onmouseout="this.start()">
<a href="URL_Link_satu">Nama_Link_satu</a>
<a href="URL_Link_dua">Nama_Link_dua</a>

</marquee>

URL_Link diganti dengan alamat link yang kita inginkan
Nama_Link diganti dengan nama linknya
Jika ingin linknya bergerak ke atas, tinggal mengganti "down" menjadi "up"
Jika ingin bergerak ke kiri tinggal mengganti "left" ke kanan "right"

Contohnya dapat dilihat di bawah ini.

<marquee align=center direction=down onmouseover="this.stop()" onmouseout="this.start()">

<a href=”http://nico-savero1.blogspot.com/”>Tips Membuat Blog</a>
<a href=”http://nico-savero2.blogspot.com/”>My New Blog</a>
<a href=”http://Alat-komunikasi.blogspot.com/”>Blog Kelompok 2 Yg Kedua</a>
<a href="http://tugasbsi22.blogspot.com/">Blog Kelompok 2</a>

</marquee>

dan hasilnya seperti di bawah ini.


Tips Membuat Blog
My New Blog
Blog Kelompok 2 Yg Kedua
Blog Kelompok Kedua

Marquee 3

Di Pembahasan Sebelumnya Kita Sudah Mempelajari Cara Memberi Warna Pada Blog...

Sekarang Kita Akan Mempelajari Arah Bergeraknya marquee...



TEKS BERJALAN KE KANAN

Ketik atau copy paste code di bawah ini.



hasilnya dapat dilihat seperti di bawah ini.

Teks ini akan berjalan ke kanan

TEKS BERJALAN KE KIRI

Ketik atau copy paste code di bawah ini.



hasilnya dapat dilihat seperti di bawah ini.

Teks ini akan berjalan ke kiri

TEKS BERJALAN KE BAWAH

Ketik atau copy paste code di bawah ini.



hasilnya dapat dilihat di bawah ini.

Teks ini akan berjalan ke bawah

TEKS BERJALAN KE ATAS

Ketik atau copy paste code di bawah ini.



dan hasilnya akan seperti di bawah ini.

Teks ini akan berjalan ke atas

TEKS AKAN BERHENTI JIKA DIDEKATKAN MOUSE

Ketik atau copy paste code di bawah ini.

Agar teks yang berjalan berhenti saat mouse didekatkan maka harus ditambahi kode seperti berikut onmouseover="this.stop()" onmouseout="this.start()"



hasilnya dapat dilihat seperti di bawah ini.

Teks akan berjalan ke bawah

Marquee 2

Ini Adalah Lanjutan dari Pembahasan Yang Pertama...
Yang Pertama Kita Hanya Diajarkan Cara Membuat Tulisan Bergerak...
Kali Ini Saya Akan Mengajarkan Cara Merubah Warna Tulisan Di Marquee...

Hampir Sama Seperti Di Pembahasan Yang Pertama...
Yang Perlu Anda Lakukan Adalah:
1. Klik Rancangan...
2. Klik Tambahkan Gatget...
3. Pilih HTML/JavaScript...

Setelah Itu Masukkan Sript Ini:
<marquee style='color:purple;'> Text Anda </marquee>

Tulisan Berwarna Hijau Bisa Anda Ganti Dengan Warna Kesukaan Anda...
Tulisan Berwarna Biru Bisa Diganti Dengan Text Anda...

Marquee 1

Tulisan Bergerak Atau Yang Sering Juga Disebut Marquee...
Kadang Kalau Kita Sedang Browsing Blog Kita Sering menemui Tulisan2 Yang Bergerak Ke Arak Kiri, Kanan, Atas, Dan Bawah...
Disini saya Akan Menjelaskan Cara Menggunakan Marquee...

1. Klik Rancangan...
2. Klik Tambah Gadget...
3. Pilih HTML/JavaScript...

Setelah Anda Mengikuti Langkah Diatas...
Anda Masukkan Script Dibawah Ini:

<marquee> Text Anda </marquee>
Selesai...
Sekarang Tulisan Anda Sudah Bergerak...
[hide]
KALAU ADA SESUATU YANG MAU DITANYA TANYA SAJA NICO SAVERO