Sunday, January 31, 2010

Variasi Pada Titlebar

Sunday, January 31, 2010
Apa itu titlebar?
Itu lho, tulisan paling atas di browser kita, judul yang muncul klo lagi buka satu web.
* pasti pada tau sih ~(-_-~) *
Kali ini aku mau share cara biar bisa mengganti titlebar itu jadi lebih variatif dan atraktif (?)
Ada dua versi nih...

Sebelum na, coba liat site sederhana berikut yang khusus dibikin biar memperjelas tutor kali ini...

VERSI 1
VERSI 2

Itu site isi na ga ada apa-apa, soal na emang buat demo titlebar aja XD
Gimana? Perhatikan tulisan titlebar na yang berubah-ubah. Pengen nyoba?

Copas script berikut sebelum </head>

VERSI 1

<script>
//TITLEBAR
function tb8_makeArray(n){
this.length = n;
return this.length;
}

tb8_messages = new tb8_makeArray(3);
tb8_messages[0] = "Now you are connected with [L]ain";
tb8_messages[1] = "No matter where you are, everyone is always connected";
tb8_messages[2] = "And you don't seem to understand...";
tb8_rptType = 'infinite';
tb8_rptNbr = 5;
tb8_speed = 100;
tb8_delay = 1000;

var tb8_counter=1;
var tb8_currMsg=0;
var tb8_tekst ="";
var tb8_i=0;
var tb8_TID = null;
function tb8_pisi(){
tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1);
document.title = tb8_tekst;
tb8_sp=tb8_speed;
tb8_i++;
if (tb8_i==tb8_messages[tb8_currMsg].length){
tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay;
}
if (tb8_currMsg == tb8_messages.length){
if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){
clearTimeout(tb8_TID);
return;
}
tb8_counter++;
tb8_currMsg = 0;
}
tb8_TID = setTimeout("tb8_pisi()", tb8_sp);
}
tb8_pisi()
// -->
</script>

VERSI 2

<script>
//TITLEBAR
function tb9_makeArray(n){
this.length = n;
return this.length;
}

tb8_messages = new tb8_makeArray(3);
tb9_messages[0] = "Now you are connected with [L]ain";
tb9_messages[1] = "No matter where you are, everyone is always connected";
tb9_messages[2] = "And you don't seem to understand...";
tb8_rptType = 'infinite';
tb8_rptNbr = 5;
tb9_speed = 100;
tb9_delay = 1000;

var tb9_counter=1;
var tb9_currMsg=0;
var tb9_timerID = null
var tb9_bannerRunning = false
var tb9_state = ""
tb9_clearState()
function tb9_stopBanner() {
if (tb9_bannerRunning)
clearTimeout(tb9_timerID)
tb9_timerRunning = false
}
function tb9_startBanner() {
tb9_stopBanner()
tb9_showBanner()
}
function tb9_clearState() {
tb9_state = ""
for (var i = 0; i < tb9_messages[tb9_currMsg].length; ++i) {
tb9_state += "0"
}
}
function tb9_showBanner() {
if (tb9_getString()) {
tb9_currMsg++
if (tb9_messages.length <= tb9_currMsg) {
if ((tb9_rptType == 'finite') && (tb9_counter==tb9_rptNbr)){
tb9_stopBanner();
return;
}
tb9_counter++;
tb9_currMsg=0;
}
tb9_clearState()
tb9_timerID = setTimeout("tb9_showBanner()", tb9_delay)
}
else {
var tb9_str = ""
for (var j = 0; j < tb9_state.length; ++j) {
tb9_str += (tb9_state.charAt(j) == "1") ? tb9_messages[tb9_currMsg].charAt(j) : "____"
}
document.title = tb9_str
tb9_timerID = setTimeout("tb9_showBanner()", tb9_speed)
}
}
function tb9_getString() {
var full = true
for (var j = 0; j < tb9_state.length; ++j) {
if (tb9_state.charAt(j) == 0)
full = false
}
if (full) return true
while (1) {
var num = tb9_getRandom(tb9_messages[tb9_currMsg].length)
if (tb9_state.charAt(num) == "0")
break
}
tb9_state = tb9_state.substring(0, num) + "1" + tb9_state.substring(num + 1, tb9_state.length)
return false
}
function tb9_getRandom(max) {
var now = new Date()
var num = now.getTime() * now.getSeconds() * Math.random()
return num % max
}
tb9_startBanner()
// -->
</script>

Yang warna MERAH itu tulisan buat titlebar na. Ganti aja sama yang kamu mau. Klo pengen nambahin tulisan na jadi lebih banyak, tinggal tambah script plus ganti nominal angka na jadi:

• VERSI 1
tb8_messages[3] = "TULISAN";
tb8_messages[4] = "BLAH BLAH";

• VERSI 2
tb9_messages[3] = "TULISAN";
tb9_messages[4] = "BLAH BLAH";

.....dan seterus na...
yang pasti, klo mau nambahin jumlah tulisan, script yang new tb8_makeArray(3) / new tb9_makeArray(3) juga mesti ikut diganti sesuai sama jumlah titlebar. I mean, script standar yang aku kasih kan jumlah titlebar na ada 3, jadi tulisan di new tb8_makeArray(3) / new tb9_makeArray(3) juga TIGA. Klo mau nambahin jadi lima, ya ganti angka na jadi 5.

buat warna BIRU juga bisa diganti:
  1. tb8_speed / tb9_speed, kecepatan tulisan. Semakin kecil angka, semakin cepat tulisan berjalan
  2. tb8_delay / tb9_delay, jarak jeda ketika tulisan berganti. Semakin kecil angka, semakin sebentar jeda

Itu aja sih hal penting yang mesti diganti, yang lain ga usah diubah juga gpp. Aku sendiri ga pake beginian, lebih enak pake titlebar asli aja, lebih simpel.

Comment, minna~



10 Comments Stored:

  1. ya ampun yg ini

    agak mengganggu mata sih walopun bntuknya lucu jg :giggle:

    ReplyDelete
  2. wooow, thanks sobat atas infona lain kali saya coba...sekarang udah terlalu banyak widget takut memberatkan blog. untuk sekarang infona saya simpen dulu..hehehe

    ReplyDelete
  3. thx infonya gan.... tapi nyobanya juga besok....

    abis bongkar total aku....

    ReplyDelete
  4. sekali lagi makasi infonya... :yay:

    ReplyDelete
  5. wow wow wow
    keren bo'
    :thumb:


    ada nupost nhe...

    ReplyDelete
  6. waaahh.. menarik juga nihh, hhe..
    mantab..
    di cicipi ah, buat bahan referensi.. xixixxi...
    makasii in tutor nya...

    ReplyDelete
  7. Keren neh, buat title bar lebih keren. tapi bikin berat ga yah?

    ReplyDelete
  8. salam kenal gan blh tanya ga? template aku sama dng temp agan,tapi knp ya ditempatku ga ada kotak komennya?sekalian maou ganti related post dan psng imoticon sprti agan...bisa kasih link tutorialnya ga? maaf ngrepotin nih.plese help me ya gan? :cry: lihatin sekalian mampir diblog aku ya? TQ

    ReplyDelete

[L]ain Disconnected © 2008 - 2016 | Powered by Blogger | Read Disclaimer

Back To Top