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
Iya, yang gua maksud emang Sherina yang itu. Yang mana? Sherina Munaf penyanyi ntuh lah, yang ultra menyilaukan itu. Siapa lagi. Lah emang doski blogger? Ada ceritanya, Jadi gini...
Di satu sisi nyali gua kepancing buat jabanin tantangan itu. Di sisi lain harga diri nggak ngijinin. Setelah pergumulan sengit, harga diri harus ikhlas derajatnya turun dikit dan ngerelain publikasi poto mengenaskan ini.
FYI masih ada aja beberapa blogger yang nggak tau gender gua cewe apa cowo. Nah poto masa kecil ini bakal memperjelas status kelamin gua di KTP. Gini ceritanya.
Gua update status di twitter kaya gini: "Orang yg baca blog saya biarpun sekejap bisa tau aslinya saya dibanding yg udh temenan lama di FB/Twit". Seorang Timeliner merespon "Saya mengenal baik anda dari apa yang anda tulis, you are what you write".
Gua baru sadar ada satu topik yang hampir nggak pernah dibahas di blog ini. Cinta. Selain Dakota Fanning, bisa dipastiin di lapak gua kagak ada satupun yang berhubungan sama cinta.
Ini dia rapper Indie yang tenar gara-gara lagunya yang ngehina salah satu band Indonesia abis-abisan. Sebenernya dia tenar bukan gara-gara lagu itu doang, tapi karena skill rapnya emang nggak bisa dipandang sebelah mata. Dijamin kuping kalian bakal dimanjain sama lirik-liriknya yang nggak murahan.
Banyak banget yang pas pertama kenal, entah itu lewat blog, facebook, forum Nakama, atau cuma selewat liat photo, langsung nanya, "Cewe apa cowo sih?" Pertanyaan yang langsung bikin MALESSSS!!!