Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan

Minggu, 31 Januari 2010

Variasi Pada Titlebar

Minggu, Januari 31, 2010 10 Comments Stored
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~

Jumat, 30 Oktober 2009

Menampilkan Jam

Jumat, Oktober 30, 2009 1 Comment Stored
Kali ini ada tutor yang nggak terlalu penting.
Liat di SITE INI ada jam? Klo kamu minat buat pasang yang begituan juga, lanjut baca. Klo dikira nggak penting (karena toh di kompi udah ada jam), nggak usah lanjut baca...

Copas kode ini diatas / sebelum </body>

<script src='http://sites.google.com/site/hira404site/date.js' language='javascript'></script>

Terus copas kode ini ditempat kamu mau pasang jam na.
Ya misal mau dipake di sidebar kaya aku, pas awal tampilan dashboard blog pencet Layout, terus di bagian Page Element klik Add Gadget n pilih HTML. Atau suka-suka dah dimana aja kamu mau pasang. Trus copas kode ini...

<form name="hira404_datetime">
<input type="text" size="30" name="hira404" class="codebuttons" style="font:11px tahoma; color:gold; vertical-align: center; background-color:navy; border:1px solid white; text-align:center;">
</form>

Yang warna biru itu style tulisan & tampilan na. Boleh diganti sesuai sama selera.

Dan perlu diingat, jam ini sesuai sama setingan komputer kamu sendiri, jadi bukan berdasarkan perbedaan GMT. Klo di Indonesia (WIB) ada yang pake tutor ini trus kebeneran lagi pukul 2 siang misal, maka orang lain yang di luar kota (WITA / WIT) yang juga sama-sama memakai tutor ini akan menampilkan jam yang sesuai sama setingan waktu di komputer dia sendiri, entah itu lagi pukul 3 atau 4. Bahkan mungkin sama-sama menampilkan pukul 2 siang, karena setingan jam di komputer na salah =A=

Yay daripada pake widget yang nambahin berat waktu loading, mendingan pake ini. Lebih simpel n efisien. Yang terpening, ga bakal ngeberatin blog kamu.

Another stupid tutorial...
Comment, mina~
*cih saya benci kalimat promosi diatas*

Minggu, 04 Oktober 2009

Tutor Floating Menu Pinggir

Minggu, Oktober 04, 2009 8 Comments Stored
Kalian lihat kotak panjang di sebelah kanan SITE INI yang selalu ngikut kemanapun blog ini di scroll atas atau bawah? Ketika mouse diarahkan kesana, muncul tulisan lain yang membuat kotak na melebar. Jika mouse na ditarik atau kotak na tidak disorot mouse, kotak itu akan tetap pada ukuran semula yang tidak lebar. How to make it?

Inilah tutor na =A=
...

Copy script berikut setelah ]]></b:skin> dan sebelum </head>

<script language='JavaScript1.2' src='http://sites.google.com/site/hira404site/menu.js'></script>


<script>
resizereinit=true;

/* Style Menu*/
menu[1] = {
id:'menu1',
bartext:'BLOG LABELS', /*Tulisan Bar Utama*/
menupos:'right', /*Letak menu, jika ingin berada di kiri ganti LEFT*/
barbgcolor:"#009900", /*Background Bar Utama*/
barcolor:"#ffffff", /*Warna tulisan Bar Utama*/
barfontweight:"bold",
barfontsize:'100%',
bordercolor:'#ffffff', /*Warna border*/
fontsize:'100%',
linkheight:30, /*Panjang masing-masing menu yang keluar dari Bar Utama*/
hdingwidth:150 , /*Lebar masing-masing menu yang keluar dari Bar Utama*/

/* Tulisan di Menu*/
menuItems:[
["Gajeb", "http://hira404.blogspot.com/search/label/gajeb", ""],
["Fanfic", "http://hira404.blogspot.com/search/label/fanfic", ""],
["Art", "http://hira404.blogspot.com/search/label/art", ""],
["Tutor", "http://hira404.blogspot.com/search/label/tutor", ""],
["Review", "http://hira404.blogspot.com/search/label/review", ""],
["Seriusan", "http://hira404.blogspot.com/search/label/seriusan", ""],
["Blog", "http://hira404.blogspot.com/search/label/blog", ""],
["Forum", "http://hira404.blogspot.com/search/label/forum", ""],
["Award", "http://hira404.blogspot.com/search/label/award", ""],
["Ivory", "http://hira404.blogspot.com/search/label/ivory", ""] //pada akhir entry jangan dikasih koma
]};
make_menus();
</script>

<style>
#menu1 a {color:#ffffff; background-color:#084303; text-decoration:none; text-indent:1ex;}
#menu1 a:link, a:active; a:visited {color:#00FF80; text-decoration:none;}
#menu1 a:hover {color:#00FF80;background-color:#008800
</style>


Tinggal edit-edit aja warna na sesuai sama template kalian...

How's that?
Berhasilkah?
Kalau tidak, silakan coba lagi xD
Kalau semua kode disini sudah dicopy semirip mungkin tapi belum berhasil juga, mungkin tutor na yang salah :D
Tolong kasih tau saya kalau kalian mengalami na, nanti saya perbaiki...
Yang penting comment, minna~

Selasa, 24 Februari 2009

How to make a spoiler button (versi 3)

Selasa, Februari 24, 2009 8 Comments Stored
Aye-aye..
At [L]ast, sampai pada tutor terakhir tentang spoil button >_<
Err, I mean, I HOPE ini tutor terakhir tentang spoil button Dx

Apa yang bikin beda sama spoil versi 2?
Well, button kedua na na sama-sama nggak akan ilang pas di'klik.
BEDA NA!!! Woi Dx
Ngg, klo versi 2, tulisan di button pas di'klik sama udah di'klik kan sama.
Klo versi 3, beda (???)
*Bingung sendiri cara ngomong na*

Se-seperti biasa, langsung praktek saja..

Kode na..



Hasil na..



Sekarang ngerti kan apa yang dimaksud sama "tulisan di button pas di'klik sama udah di'klik beda"? *smirk*

Perhatiin, tulisan Show Spoiler na, ada dua. Bisa aja sih salah satu na diganti. Tapi biar nggak ribet, klo pun kamu mau ganti, mending tulisan dua itu samain. Tulisan Hide spoiler na juga bisa diganti, tapi yang ini bedain sama yang dua tadi :)


Senin, 23 Februari 2009

How to make a spoiler button (versi 2)

Senin, Februari 23, 2009 2 Comments Stored
Yay!
Finally, sampai pada another stupid tutorial from Rain :D
Btw sori buat shino, tutor na telat. Pas tutor spoil pertama itu beres dibikin n diposting, tau na kamu udah pasang begituan di blog kamu =,=
Ja-jadi buat apa aku bikin tutor *nangis guling-guling*

Masih melanjutkan postingan sebelum na, kita bikin spoiler button lagi.
Lagi? Nggak kok, nggak akan sama tapi na..
Klo spoil yang kemarin itu kan pas di klik button na langsung ilang, tapi yang ini nggak.
Binun? Saiaa juga =,=
Langsung praktek aja --'

Kode na...



And it's time for, HENSHIN!!!
Beginilah hasil na.




Ba-bagaimana?
Lebih advance dari spoil yang dulu, kan? *sparklin*

Sama, klo nggak mau pake border, ganti aja style border na jadi 0px.




Heran, kok bisa ya aku serajin ini sampai bikin tutor x(
Yadda..yadda..
Dan di dunia ini nggak ada yang gratis.
Kasih komen klo udah baca --'



Minggu, 22 Februari 2009

How to make a spoiler button (versi 1)

Minggu, Februari 22, 2009 1 Comment Stored
Yo^^..
Welcome to the stupid tutorial from Rain :)
This tutor dedicated for my Nakama, shinobu yang mina dibikin beginian^^ (maaf sempet bilang males, ohckck)
Buat bikin spoiler button, tinggal pake kode ini..




Klo kode diatas dipake, hasil na bakal kaya gini..




Tinggal edit-edit aja bagian yang butuh diedit --'
Ngomong-ngomong aku pake font Tahoma ukuran 11px buat spoil diatas.
Trus klo mau, pakein aja tag center diawal kode spoil biar keliatan lebih proporsional. Itu bakal bikin semua tulisan jadi ada ditengah

Ta-tapi klo pengen button na ada di tengah tapi isi spoil na tetep dipinggir, pake kode ini.




The result..




Karena template blog aku warna na item, maka na border na putih =,=
Klo nggak mau putih, liat bagian <div style="border: 1px" solid white>. Si white na ganti sama warna yang kamu mau.
Eh, biar bener-bener kaya spoil, ilangin aja border yang di pinggir na :D
Tinggal ubah bagian <div style="border: 1px">, border na ganti sama 0px.


Ngg, aku yakin sih semua orang udah tau gimana cara na bikin spoil kaya gini.
Jadi klo ada yang komen klo tutor ini nggak guna, aku maklum =,=


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