Membuat Tabel Pada posting Blog

Bismillah, sobat blogger yang udah pernah posting blog pasti udah bisa donk caranya menulis dan meng,edit postingan, tapi ada yang tahu gak caranya membuat tabel/kotak2 untuk postingan???
nah yang blom bisa, langsung aja kita praktek otak atik kode tabel..

Setiap tabel minimal tersusun dari tiga tag dasar yaitu tag <TABLE> yang menandai sebuah tabel, tag <TR> yang membentuk baris dan tag <TD> yang membentuk kolom. Masing-masing tag tersebut harus memiliki tag penutup.

Untuk lebih jelasnya berikut contohnya :

<TABLE>
<TR>
<TD>kolom 1 dari baris 1</TD>
</TR>
</TABLE>

Susunan tag-tag di atas memerintahkan kepada browser untuk menampilkan sebuah tabel yang terdiri dari satu baris dan satu kolom yang diisi dengan tulisan: kolom 1 dari baris 1.

kolom 1 dari baris 1

Mana tabelnya? Sesungguhnya, tabelnya ada, hanya saja tanpa bingkai (border). Ternyata, secara default, tabel menggunakan nilai border = 0 (nol) alias tanpa bingkai. Jadinya yang tampak hanya tulisan semata. Untuk membuat bingkai dari tabel tersebut, kita harus menyertakan atribut BORDER.

<TABLE BORDER=1>
<TR>
<TD>kolom 1 dari baris 1</TD>
</TR>
</TABLE>

Sehingga tabelnya tampak sebagai berikut:

kolom 1 dari baris 1

Semain besar nilai BORDER ( Bingkai ) yang di masukkan otomatis semakin besar juga Bingkai tabel yang di tampilkan seperti contoh berikut :

<TABLE BORDER=10>
<TR>
<TD>kolom 1 dari baris 1</TD>
</TR>
</TABLE>

Hasilnya akan seperti ini :

kolom 1 dari baris 1

Pada contoh di atas kita coba masukkan Nilai BORDER 10 ( Bingkai ) Maka otomatis bingkai tabel akan berubahkan....? seperti contoh di atas

Nah Silakan coba sendiri mengganti ukuran bingkai menjadi 2, 3 dan seterusnya lalu bandingkan hasilnya. Sekarang mari kita membagi tabel sebaris tersebut menjadi dua kolom. Artinya kita menambah sepasang tag TD lagi.
Seperti contoh berikut:

<TABLE BORDER=1>
<TR>
<TD> kolom 1 dari baris 1</TD>
<TD> kolom 2 dari baris 1</TD>
</TR>
</TABLE>

Beginilah hasilnya :

kolom 1 dari baris 1

kolom 2 dari baris 1

Nah, bila anda ingin menambah sekian baris ke bawah, cukup menyalin ulang dari tag <TR> sampai </TR>. Sorot (blok) dari tag <TR> hingga </TR> lalu Copy (Ctrl+C). Tempatkan kursor di bawah tag </TR> lalu Paste (Ctrl+V). Sekian baris yang ingin anda buat, sekian kali pula anda harus menyalinnya (melakukan perintah Paste). Setelah itu tinggal meng-edit tulisan sesuai keinginan anda. Begini contohnya:

<TABLE BORDER=1>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>

Tampilannya Akan menjadi:

kolom 1 dari baris 1	kolom 2 dari baris 1
kolom 1 dari baris 2	kolom 2 dari baris 2

Setelah atribut BORDER, atribut selanjutnya yang perlu kita ketahui adalah atribut CELLSPACING yang mengatur jarak antar sel dan CELLPADDING yang mengatur jarak antara sel dan tulisan di dalamnya. Misalnya:

<TABLE BORDER=1 CELLSPACING=10>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>

Dengan penambahan atribut CELLSPACING=10 dalam tag TABLE berarti akan dihasilkan sebuah tabel dengan jarak antar sel adalah 10 pixel.

Beginilah tampilannya :

kolom 1 dari baris 1	kolom 2 dari baris 1
kolom 1 dari baris 2	kolom 2 dari baris 2

Sekarang mari kita coba bandingkan bila atribut CELLSPACING tersebut diganti dengan CELLPADDING.

<TABLE BORDER=1 CELLPADDING=10>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>

Beginilah hasilnya :

kolom 1 dari baris 1	kolom 2 dari baris 1
kolom 1 dari baris 2	kolom 2 dari baris 2

Sedangkan kalau kedua tag tersebut dipakai bersama-sama seperti ini:

<TABLE BORDER=1 CELLSPACING=10 CELLPADDING=10>
<TR>
<TD> kolom 1 dari baris 1</TD>
<TD> kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD> kolom 1 dari baris 2</TD>
<TD> kolom 2 dari baris 2</TD>
</TR>
</TABLE>

Akan menghasilkan tabel seperti ini:

kolom 1 dari baris 1	kolom 2 dari baris 1
kolom 1 dari baris 2	kolom 2 dari baris 2

Ternyata mudah, kan membuat tabel? Bila kita lihat tabel-tabel pada contoh di atas, tampak bahwa secara default, lebar kolom dan tinggi baris mengikuti lebar dan tinggi tulisan di dalamnya. Kita bisa mengatur sendiri lebar dan tinggi tabel, kolom dan barisnya dengan menggunakan atribut WIDTH (lebar) dan HEIGHT (tinggi). Misalnya:

<TABLE BORDER=1 WIDTH=100%>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>

Bagaimana jadinya tabel dengan lebar 100% ?

kolom 1 dari baris 1	kolom 2 dari baris 1
kolom 1 dari baris 2	kolom 2 dari baris 2

Kesimpulannya, lebar tabel 100% artinya tabel tersebut akan melebar hingga memenuhi lebar tampilan halaman. Bila lebar setiap kolom tidak ditentukan, maka lebar 100% itu akan terbagi sejumlah kolomnya. Seperti dalam contoh di atas, karena terdiri dari dua kolom maka lebar masing-masing kolom adalah 50%. Nah, bagaimana bila kita ingin membagi lebar kolom tidak sama? Ya, caranya sama saja, yaitu dengan memasukkan atribut WIDTH dalam tag kolom.

<TABLE BORDER=1 WIDTH=100%>
<TR>
<TD WIDTH=25%>kolom 1 dari baris 1</TD>
<TD WIDTH=75%>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD WIDTH=25%>kolom 1 dari baris 2</TD>
<TD WIDTH=75%>kolom 2 dari baris 2</TD>
</TR>
</TABLE>

Bagaimana jadinya?

kolom 1 dari baris 1	kolom 2 dari baris 1
kolom 1 dari baris 2	kolom 2 dari baris 2

Bagaimana halnya dengan atribut HEIGHT (tinggi)? Atribut ini juga bisa disisipkan dalam tag TABLE dan tag TR (baris). Selain menggunakan persen untuk menentukan ukuran tabel, kita bisa pula menggunakan satuan pixel. Bila angka sesudah WIDTH dan HEIGHT tidak menggunakan persen (%), berarti satuannya adalah pixel. Contoh:

<TABLE BORDER=7>
<TR HEIGHT=40>
<TD WIDTH=150> kolom 1 dari baris 1</TD>
<TD WIDTH=250> kolom 2 dari baris 1</TD>
</TR>
<TR HEIGHT=80>
<TD WIDTH=150> kolom 1 dari baris 2</TD>
<TD WIDTH=250> kolom 2 dari baris 2</TD>
</TR>
</TABLE>

Ukuran border tabel kita ubah menjadi 7. Tinggi baris pertama adalah 40 pixel sedang baris kedua 80 pixel. Adapun lebar kolom pertama adalah 150 pixel sedang kolom kedua 250 pixel. Perhatikanlah bagaimana atribut-atribut di atas, menghasilkan tampilan tabel menjadi:

kolom 1 dari baris 1	kolom 2 dari baris 1
kolom 1 dari baris 2	kolom 2 dari baris 2

nb:

1. waktu posting usahakan anda dalam modus "edit html" untuk preview, pilih modus"compose"
2. silahkan ganti kata kolom 1 baris 1 dst dengan teks anda/ kode anda
3. tabel ini juga bisa di pasang di sidebar

Oke Selamat Mencoba,    salam sahabat blogger dari santri-one

»»  Baca Lebih Lengkap... >>

Memasang Emoticon KaskuSer

Bismillahketemu lagi nech, adem2 gini di temanin kompie untuk buat posting blog...
hmmmm ada yang pernah lihat blog yang ada emoticonnya gak??  seperti emoticon yahoo, emoticon kucing, dan emoticon yang laen2. nah sekarang kita akan coba bikin emoticon yang paling rame bikinan anak indonesia , yaitu emoticon Kaskus, di jamin dech, tampilan komentar kamu bakal lebih rame....  untuk contohnya, langsung lihat aja di kotak komentar blog ini... hehehe
cara bikinnya: Pertama Log In ke Blogger.com

- Habis itu ke Menu Tata Letak
- Lalu Pilih tab Edit HTML
- Nah disini jangan lupa centang dulu gan Expand Template Widget
- Sudah? Kalo sudah langsung cari kode yang </body>. Dan copas kode berikut sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
a = document.getElementsByTagName('LABEL');
if(a) {
for(i=0; i < a.length; i++) {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7F3-kC6wPI/AAAAAAAAAFA/OcXUR4ihkhI/s200/a.png' alt='' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7F4hmi6AsI/AAAAAAAAAFI/nonaCyDo1jk/s200/b.png'' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7F4-MvYODI/AAAAAAAAAFY/Ws4oMdeXRzk/s200/c.png' alt='' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://1.bp.blogspot.com/_BQvRTVngrrc/S7F5IlXv5lI/AAAAAAAAAFg/8Wm05rBx-CU/s200/d.png' alt='' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7F5NnmOBXI/AAAAAAAAAFo/Lh6-SoQJ_nk/s200/e.png' alt='' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://1.bp.blogspot.com/_BQvRTVngrrc/S7F5SesE_lI/AAAAAAAAAFw/Anzj90f9sWY/s200/f.png' alt='' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://2.bp.blogspot.com/_BQvRTVngrrc/S7F5YJg6ktI/AAAAAAAAAF4/h2oi5sd4ykI/s200/g.png' alt='' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7F5cm_mN0I/AAAAAAAAAGA/hqlea01SYOE/s200/h.png' alt='' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://1.bp.blogspot.com/_BQvRTVngrrc/S7F5iiF3aTI/AAAAAAAAAGI/CStpXElpJPw/s200/i.png' alt='' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://3.bp.blogspot.com/_BQvRTVngrrc/S7F5rckegGI/AAAAAAAAAGQ/ftRJk1Kg-NE/s200/j.png' alt='' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://2.bp.blogspot.com/_BQvRTVngrrc/S7F5yGHuQmI/AAAAAAAAAGY/KpYvdFKdw3A/s200/k.png' alt='' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://2.bp.blogspot.com/_BQvRTVngrrc/S7GASaKJaTI/AAAAAAAAAGg/7Zooibt6Bbo/s200/l.png' alt='' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://2.bp.blogspot.com/_BQvRTVngrrc/S7GAWc0pU6I/AAAAAAAAAGo/YlL0LkwsIQw/s200/m.png' alt='' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://1.bp.blogspot.com/_BQvRTVngrrc/S7GAbtwXXdI/AAAAAAAAAGw/sDzc1C6xPmw/s200/n.png' alt='' class='smiley'/>");
_str = _str.replace(/:o:/gi, "<img src='http://3.bp.blogspot.com/_BQvRTVngrrc/S7GAqDwLpCI/AAAAAAAAAHA/BgSOdCMNSzo/s200/o.png' alt='' class='smiley'/>");
_str = _str.replace(/:p:/gi, "<img src='http://1.bp.blogspot.com/_BQvRTVngrrc/S7GAuDRJ4sI/AAAAAAAAAHI/AlbBShq6IjI/s200/p.png' alt='' class='smiley'/>");
_str = _str.replace(/:q:/gi, "<img src='http://2.bp.blogspot.com/_BQvRTVngrrc/S7GAygycuUI/AAAAAAAAAHQ/91vykjMOqsY/s200/q.png' alt='' class='smiley'/>");
_str = _str.replace(/:r:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7LqrDz_NXI/AAAAAAAAAIw/w99hdkmFpgQ/s320/r.png' alt='' class='smiley'/>");
_str = _str.replace(/:s:/gi, "<img src='http://1.bp.blogspot.com/_BQvRTVngrrc/S7LqzyUp8BI/AAAAAAAAAI4/WgGF6haAnFg/s320/s.png' alt='' class='smiley'/>");
_str = _str.replace(/:t:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7LrUknxdyI/AAAAAAAAAJI/p1qgISvACsA/s320/t.png' alt='' class='smiley'/>");
_str = _str.replace(/:u:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7LrY0wsM1I/AAAAAAAAAJQ/VjL6jKPiI8s/s320/u.png' alt='' class='smiley'/>");
_str = _str.replace(/:v:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7LrdmnJ-0I/AAAAAAAAAJY/63i1u_VdKlM/s320/v.png' alt='' class='smiley'/>");
_str = _str.replace(/:w:/gi, "<img src='http://3.bp.blogspot.com/_BQvRTVngrrc/S7Lrh-r7ZrI/AAAAAAAAAJg/VFdXCa9nHE4/s320/w.png' alt='' class='smiley'/>");
_str = _str.replace(/:x:/gi, "<img src='http://3.bp.blogspot.com/_BQvRTVngrrc/S7Lxf-BTYoI/AAAAAAAAAJo/Fu-P2E4nM2I/s320/x.png' alt='' class='smiley'/>")


a.item(i).innerHTML = _str;
}
}

a = document.getElementById('comments');
if(a) {
b = a.getElementsByTagName("DD");
for(i=0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'comment-body') {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7F3-kC6wPI/AAAAAAAAAFA/OcXUR4ihkhI/s200/a.png' alt='' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7F4hmi6AsI/AAAAAAAAAFI/nonaCyDo1jk/s200/b.png'' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7F4-MvYODI/AAAAAAAAAFY/Ws4oMdeXRzk/s200/c.png' alt='' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://1.bp.blogspot.com/_BQvRTVngrrc/S7F5IlXv5lI/AAAAAAAAAFg/8Wm05rBx-CU/s200/d.png' alt='' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7F5NnmOBXI/AAAAAAAAAFo/Lh6-SoQJ_nk/s200/e.png' alt='' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://1.bp.blogspot.com/_BQvRTVngrrc/S7F5SesE_lI/AAAAAAAAAFw/Anzj90f9sWY/s200/f.png' alt='' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://2.bp.blogspot.com/_BQvRTVngrrc/S7F5YJg6ktI/AAAAAAAAAF4/h2oi5sd4ykI/s200/g.png' alt='' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7F5cm_mN0I/AAAAAAAAAGA/hqlea01SYOE/s200/h.png' alt='' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://1.bp.blogspot.com/_BQvRTVngrrc/S7F5iiF3aTI/AAAAAAAAAGI/CStpXElpJPw/s200/i.png' alt='' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://3.bp.blogspot.com/_BQvRTVngrrc/S7F5rckegGI/AAAAAAAAAGQ/ftRJk1Kg-NE/s200/j.png' alt='' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://2.bp.blogspot.com/_BQvRTVngrrc/S7F5yGHuQmI/AAAAAAAAAGY/KpYvdFKdw3A/s200/k.png' alt='' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://2.bp.blogspot.com/_BQvRTVngrrc/S7GASaKJaTI/AAAAAAAAAGg/7Zooibt6Bbo/s200/l.png' alt='' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://2.bp.blogspot.com/_BQvRTVngrrc/S7GAWc0pU6I/AAAAAAAAAGo/YlL0LkwsIQw/s200/m.png' alt='' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://1.bp.blogspot.com/_BQvRTVngrrc/S7GAbtwXXdI/AAAAAAAAAGw/sDzc1C6xPmw/s200/n.png' alt='' class='smiley'/>");
_str = _str.replace(/:o:/gi, "<img src='http://3.bp.blogspot.com/_BQvRTVngrrc/S7GAqDwLpCI/AAAAAAAAAHA/BgSOdCMNSzo/s200/o.png' alt='' class='smiley'/>");
_str = _str.replace(/:p:/gi, "<img src='http://1.bp.blogspot.com/_BQvRTVngrrc/S7GAuDRJ4sI/AAAAAAAAAHI/AlbBShq6IjI/s200/p.png' alt='' class='smiley'/>");
_str = _str.replace(/:q:/gi, "<img src='http://2.bp.blogspot.com/_BQvRTVngrrc/S7GAygycuUI/AAAAAAAAAHQ/91vykjMOqsY/s200/q.png' alt='' class='smiley'/>");
_str = _str.replace(/:r:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7LqrDz_NXI/AAAAAAAAAIw/w99hdkmFpgQ/s320/r.png' alt='' class='smiley'/>");
_str = _str.replace(/:s:/gi, "<img src='http://1.bp.blogspot.com/_BQvRTVngrrc/S7LqzyUp8BI/AAAAAAAAAI4/WgGF6haAnFg/s320/s.png' alt='' class='smiley'/>");
_str = _str.replace(/:t:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7LrUknxdyI/AAAAAAAAAJI/p1qgISvACsA/s320/t.png' alt='' class='smiley'/>");
_str = _str.replace(/:u:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7LrY0wsM1I/AAAAAAAAAJQ/VjL6jKPiI8s/s320/u.png' alt='' class='smiley'/>");
_str = _str.replace(/:v:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7LrdmnJ-0I/AAAAAAAAAJY/63i1u_VdKlM/s320/v.png' alt='' class='smiley'/>");
_str = _str.replace(/:w:/gi, "<img src='http://3.bp.blogspot.com/_BQvRTVngrrc/S7Lrh-r7ZrI/AAAAAAAAAJg/VFdXCa9nHE4/s320/w.png' alt='' class='smiley'/>");
_str = _str.replace(/:x:/gi, "<img src='http://3.bp.blogspot.com/_BQvRTVngrrc/S7Lxf-BTYoI/AAAAAAAAAJo/Fu-P2E4nM2I/s320/x.png' alt='' class='smiley'/>")
b.item(i).innerHTML = _str;
}
}
}

a = document.getElementById('comments');
if(a) {
c = a.getElementsByTagName("DD");
for(i=0; i < c.length; i++) {
if (c.item(i).getAttribute('CLASS') == 'owner-Body') {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7F3-kC6wPI/AAAAAAAAAFA/OcXUR4ihkhI/s200/a.png' alt='' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7F4hmi6AsI/AAAAAAAAAFI/nonaCyDo1jk/s200/b.png'' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7F4-MvYODI/AAAAAAAAAFY/Ws4oMdeXRzk/s200/c.png' alt='' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://1.bp.blogspot.com/_BQvRTVngrrc/S7F5IlXv5lI/AAAAAAAAAFg/8Wm05rBx-CU/s200/d.png' alt='' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7F5NnmOBXI/AAAAAAAAAFo/Lh6-SoQJ_nk/s200/e.png' alt='' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://1.bp.blogspot.com/_BQvRTVngrrc/S7F5SesE_lI/AAAAAAAAAFw/Anzj90f9sWY/s200/f.png' alt='' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://2.bp.blogspot.com/_BQvRTVngrrc/S7F5YJg6ktI/AAAAAAAAAF4/h2oi5sd4ykI/s200/g.png' alt='' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7F5cm_mN0I/AAAAAAAAAGA/hqlea01SYOE/s200/h.png' alt='' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://1.bp.blogspot.com/_BQvRTVngrrc/S7F5iiF3aTI/AAAAAAAAAGI/CStpXElpJPw/s200/i.png' alt='' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://3.bp.blogspot.com/_BQvRTVngrrc/S7F5rckegGI/AAAAAAAAAGQ/ftRJk1Kg-NE/s200/j.png' alt='' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://2.bp.blogspot.com/_BQvRTVngrrc/S7F5yGHuQmI/AAAAAAAAAGY/KpYvdFKdw3A/s200/k.png' alt='' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://2.bp.blogspot.com/_BQvRTVngrrc/S7GASaKJaTI/AAAAAAAAAGg/7Zooibt6Bbo/s200/l.png' alt='' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://2.bp.blogspot.com/_BQvRTVngrrc/S7GAWc0pU6I/AAAAAAAAAGo/YlL0LkwsIQw/s200/m.png' alt='' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://1.bp.blogspot.com/_BQvRTVngrrc/S7GAbtwXXdI/AAAAAAAAAGw/sDzc1C6xPmw/s200/n.png' alt='' class='smiley'/>");
_str = _str.replace(/:o:/gi, "<img src='http://3.bp.blogspot.com/_BQvRTVngrrc/S7GAqDwLpCI/AAAAAAAAAHA/BgSOdCMNSzo/s200/o.png' alt='' class='smiley'/>");
_str = _str.replace(/:p:/gi, "<img src='http://1.bp.blogspot.com/_BQvRTVngrrc/S7GAuDRJ4sI/AAAAAAAAAHI/AlbBShq6IjI/s200/p.png' alt='' class='smiley'/>");
_str = _str.replace(/:q:/gi, "<img src='http://2.bp.blogspot.com/_BQvRTVngrrc/S7GAygycuUI/AAAAAAAAAHQ/91vykjMOqsY/s200/q.png' alt='' class='smiley'/>");
_str = _str.replace(/:r:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7LqrDz_NXI/AAAAAAAAAIw/w99hdkmFpgQ/s320/r.png' alt='' class='smiley'/>");
_str = _str.replace(/:s:/gi, "<img src='http://1.bp.blogspot.com/_BQvRTVngrrc/S7LqzyUp8BI/AAAAAAAAAI4/WgGF6haAnFg/s320/s.png' alt='' class='smiley'/>");
_str = _str.replace(/:t:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7LrUknxdyI/AAAAAAAAAJI/p1qgISvACsA/s320/t.png' alt='' class='smiley'/>");
_str = _str.replace(/:u:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7LrY0wsM1I/AAAAAAAAAJQ/VjL6jKPiI8s/s320/u.png' alt='' class='smiley'/>");
_str = _str.replace(/:v:/gi, "<img src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7LrdmnJ-0I/AAAAAAAAAJY/63i1u_VdKlM/s320/v.png' alt='' class='smiley'/>");
_str = _str.replace(/:w:/gi, "<img src='http://3.bp.blogspot.com/_BQvRTVngrrc/S7Lrh-r7ZrI/AAAAAAAAAJg/VFdXCa9nHE4/s320/w.png' alt='' class='smiley'/>");
_str = _str.replace(/:x:/gi, "<img src='http://3.bp.blogspot.com/_BQvRTVngrrc/S7Lxf-BTYoI/AAAAAAAAAJo/Fu-P2E4nM2I/s320/x.png' alt='' class='smiley'/>")
c.item(i).innerHTML = _str;
}
}
}
//]]>
</script>

- Kalo sudah langsung cari kode yang berwarna merah di bawah ini

<p class='comment-footer'>
----- LOKASI PASTE KODE -----
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

- Uah ketemu! Kalo udah Copy Kode berikut lalu paste di antara kode yang warna merah tersebut.

<div align="center">
<img border='0' height='30' src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7F3-kC6wPI/AAAAAAAAAFA/OcXUR4ihkhI/s200/a.png' width='30'/> :a:
<img border='0' height='30' src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7F4hmi6AsI/AAAAAAAAAFI/nonaCyDo1jk/s200/b.png' width='30'/> :b:
<img border='0' height='30' src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7F4-MvYODI/AAAAAAAAAFY/Ws4oMdeXRzk/s200/c.png' width='30'/> :c:
<img border='0' height='30' src='http://1.bp.blogspot.com/_BQvRTVngrrc/S7F5IlXv5lI/AAAAAAAAAFg/8Wm05rBx-CU/s200/d.png' width='30'/> :d:
<img border='0' height='30' src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7F5NnmOBXI/AAAAAAAAAFo/Lh6-SoQJ_nk/s200/e.png' width='30'/> :e:
<img border='0' height='30' src='http://1.bp.blogspot.com/_BQvRTVngrrc/S7F5SesE_lI/AAAAAAAAAFw/Anzj90f9sWY/s200/f.png' width='30'/> :f:
<img border='0' height='30' src='http://2.bp.blogspot.com/_BQvRTVngrrc/S7F5YJg6ktI/AAAAAAAAAF4/h2oi5sd4ykI/s200/g.png' width='30'/> :g:
<img border='0' height='30' src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7F5cm_mN0I/AAAAAAAAAGA/hqlea01SYOE/s200/h.png' width='30'/> :h:
<br/>
<img border='0' height='30' src='http://1.bp.blogspot.com/_BQvRTVngrrc/S7F5iiF3aTI/AAAAAAAAAGI/CStpXElpJPw/s200/i.png' width='30'/> :i:
<img border='0' height='30' src='http://3.bp.blogspot.com/_BQvRTVngrrc/S7F5rckegGI/AAAAAAAAAGQ/ftRJk1Kg-NE/s200/j.png' width='30'/> :j:
<img border='0' height='30' src='http://2.bp.blogspot.com/_BQvRTVngrrc/S7F5yGHuQmI/AAAAAAAAAGY/KpYvdFKdw3A/s200/k.png' width='30'/> :k:
<img border='0' height='30' src='http://2.bp.blogspot.com/_BQvRTVngrrc/S7GASaKJaTI/AAAAAAAAAGg/7Zooibt6Bbo/s200/l.png' width='30'/> :l:
<img border='0' height='30' src='http://2.bp.blogspot.com/_BQvRTVngrrc/S7GAWc0pU6I/AAAAAAAAAGo/YlL0LkwsIQw/s200/m.png' width='30'/> :m:
<img border='0' height='30' src='http://1.bp.blogspot.com/_BQvRTVngrrc/S7GAbtwXXdI/AAAAAAAAAGw/sDzc1C6xPmw/s200/n.png' width='30'/> :n:
<img border='0' height='30' src='http://3.bp.blogspot.com/_BQvRTVngrrc/S7GAqDwLpCI/AAAAAAAAAHA/BgSOdCMNSzo/s200/o.png' width='30'/> :o:
<img border='0' height='30' src='http://1.bp.blogspot.com/_BQvRTVngrrc/S7GAuDRJ4sI/AAAAAAAAAHI/AlbBShq6IjI/s200/p.png' width='30'/> :p:
<img border='0' height='30' src='http://2.bp.blogspot.com/_BQvRTVngrrc/S7GAygycuUI/AAAAAAAAAHQ/91vykjMOqsY/s200/q.png' width='30'/> :q:
<img border='0' height='30' src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7LqrDz_NXI/AAAAAAAAAIw/w99hdkmFpgQ/s320/r.png' width='50'/> :r:
<img border='0' height='30' src='http://1.bp.blogspot.com/_BQvRTVngrrc/S7LqzyUp8BI/AAAAAAAAAI4/WgGF6haAnFg/s320/s.png' width='50'/> :s:
<img border='0' height='30' src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7LrUknxdyI/AAAAAAAAAJI/p1qgISvACsA/s320/t.png' width='40'/> :t:
<img border='0' height='30' src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7LrY0wsM1I/AAAAAAAAAJQ/VjL6jKPiI8s/s320/u.png' width='40'/> :u:
<img border='0' height='30' src='http://4.bp.blogspot.com/_BQvRTVngrrc/S7LrdmnJ-0I/AAAAAAAAAJY/63i1u_VdKlM/s320/v.png' width='50'/> :v:
<img border='0' height='30' src='http://3.bp.blogspot.com/_BQvRTVngrrc/S7Lrh-r7ZrI/AAAAAAAAAJg/VFdXCa9nHE4/s320/w.png' width='70'/> :w:
<img border='0' height='30' src='http://3.bp.blogspot.com/_BQvRTVngrrc/S7Lxf-BTYoI/AAAAAAAAAJo/Fu-P2E4nM2I/s320/x.png' width='60'/> :x:
</div>

- Terakhir klik Simpan Template
Selesai!.... lalu kamu tinggal cobain/test dengan komentar2 unik n lucu ala kaskus, di jamin rame dech..
 salam sahabat blogger dari santri-one

»»  Baca Lebih Lengkap... >>

Membuat Widget Top Comment

Bismillah 
sesuai dengan judul di atas, saat ini kita akan membuat widget top comments, widget ini berguna untuk menampilkan siapa saja yang sering berkomentar di artikel2 kita, dengan begitu, siapa yang paling sering komentar, maka ia akan selalu tampil di barisan paling atas. nah ini juga bisa meningkatkan trafic jumlah pengunjung blog agar mereka berlomba2 menjadi Top Komentator di blog kita. gimana,,,, menarik bkan???

Nah, cara menampilkan Top Comment di blog sebagai berikut :

• Login dulu ke Blogger
• Pada halaman dashboard, klik Tata Letak/Layout
• Klik Add Gadget
• Pilih HTML/Javascript
• "untuk pemula, yang masih bingung, langsung aja kalian baca cara menambahkan sesuatu di sidebar"
• yang sudah tahu caranya, langsung Masukkan code dibawah ini :

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a55cb97ebb368bb1b89b7f6bdeb35336&url=http%3A%2F%2Fnama-blog.blogspot.com&num=10&filter=nama sobat" type="text/javascript"></script> 

• Ganti tulisan berwarna merah dengan link blog sobat
• Ganti tulisan berwarna biru dengan Nama sobat yang biasa dipakai untuk membalas komentar.
• Sedangkan angka 10 adalah jumlah Top Comment yang akan ditampilkan 
• Simpan Gadgetnya
• Coba dech lihat hasilnya

Selamat mencoba sobat
Semoga bermanfaat
Terima Kasih
 salam sahabat blogger dari santri-one

sumber:  serba-seru.blogspot.com

»»  Baca Lebih Lengkap... >>

Cara membuat Animasi Teks Membesar Part1

Bismillah... kali ini kita mau mencoba membuat teks animasi
Cara Membuat" Text Animation Hover dengan efek membesar ketika disorot dengan mouse. Kita tidak perlu menambahkan code apa-apa di template blog, langsung ditempat postingan saja, bener-bener simple dan tidak memengaruhi berat blog.

Cara Membuatnya :

1. Masuk ke halaman posting, pilih "Edit HTML" bukan Compose
2. Letakkan kode berikut

<style type="text/css">
#qthink{margin:0 auto;padding:5px;text-align:CENTER;}.polo_box {width:280px;height:200px;background:none;}#ease.polo_box {
-webkit-transition: all 4s ease-in;-moz-transition: all 4s ease-in;-o-transition: all 4s ease-in;-webkit-transition: all 4s ease-in;transition: all 4s ease-in;}#qthink:hover .polo_box, #qthink.hover_effect .polo_box {text-shadow: 0 0 10px rgb(251, 51, 51);color:GREEN;-moz-transform:scale(2.2);-webkit-transform:scale(2.2);-webkit-transition-duration: 3s;}
</style>
<div id="qthink">
<div class="polo_box" id="qthink">
<div class="center">
ARAHKAN KURSOR KESINI...!!! MEMBESAR KHAN???</div>
</div>
</div>

• Keterangan :  GREEN adalah kode warna setelah membesar. none adalah warna background, jika ingin memberi background dengan warna, silahkan ganti dengan kode warna. CENTER adalah rata teksnya, silahkan dimodif sendiri. Jangan lupa ganti teksnya. Baca : Kode-Kode Warna HTML
• HASILNYA :

ARAHKAN KUSOR KESINI..!!! MEMBESAR KHAN??? HEHEHE

salam sahabat blogger dari santri-one

»»  Baca Lebih Lengkap... >>

Membuat Menu Custom Dropdown

Bismillah
kali ini kita akan belajar cara membuat menu sendiri, jadi bisa kita edit sesuka kita, tampilannya juga bisa kita ganti2, seperti yg di bawah ini.... gmana???

• Home
• Facebook
• Yahoo!
• Twitter
• Youtube

lihat menu di atas?? sepertinya biasa aja, tapi sebenarnya Menu diatas merupakan contoh Menu Drop-Down Unik...
Menu tersebut sangat cocok untuk tampilan blog anda karena ukuran dan tampilan yang unik yang cocok untuk tampilan di menu blog anda..
Tertarik untuk memasangnya?
Oke Langsung saja Copy Paste kode nya dibawah ini dan taruh di sidebar, caranya bisa kamu baca di " cara memasang html di sidebar"
untuk kodenya, silahkan ganti yang berwarna biru  dengan url/alamat link kamu. untuk yanga hijau, silahkan ganti dengan judul menu yg kamu inginkan

<!--Menu Drop-Down Unik-->

<center><div id="menu">

<ul>

<li><a class="current" href="http://santri-one.blogspot.com">Home</a></li>

<li><a href="http://facebook.com">Facebook</a></li>

<li><a href="http://id.yahoo.com">Yahoo!</a></li>

<li><a href="http://twitter.com">Twitter</a></li>

<li><a href="http://www.youtube.com">Youtube</a></li>

</ul>

</div></center>

<style>

*{

margin:0;

padding:0;

}

#menu{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_pcdN-guCc93y1jZMUIHRLBWKaE0axUl9v0Qf8F3g5xGUUVuG2VwukGXjH0cyOovnG4SZ6IODKw6jmlfcFg3krF2oIJsjrcVdsvqExbiIhKCa0JNvpjP6AqFFCJaQEm6gjjmXm2GIzGs/s1600/menu_026_bg.jpg) no-repeat;

width:172px;

height:193px;

padding:15px;

}

#menu ul{

list-style:none;

padding:0 0 0 8px;

}

#menu li{

list-style:none;

display:block;

padding:10px 0;

}

#menu li a{

list-style:none;

display:block;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0jE3LBT9ivd0G8O3TkveREYuRqYJk6DKbogNK8gNQ970J1A5lmg5IN7hzdvixTA9nsNGUMVOKcOTjbPJasgDE9vS-2BhVKndP8A7apnVLhcB_3Aq0yaFWuHA7rE53kY9bfol09RmdoXy-/) no-repeat left center;

color:#ffe991;

font-weight:bold;

text-transform:uppercase;

font-size:11px;

line-height:1.5em;

text-decoration:none;

padding:0 5px 0 25px;

}

#menu li a:hover{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXt7B7p01o0Cu_VMOdzyETf_zZLx2GpX4tgUnjWOuGbuC21g_c9a3R8nMNhAbkIP0drj3nvfThFv9BJgXvOjMyE_KsgdQxfp41V4aX2tM3G5flS9SkbIPg0pm-suXtcpd3ndu2ovVFjIVz/) no-repeat left center;

color:#fff;

text-decoration:none;

}

#menu li .current{

list-style:none;

display:block;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXt7B7p01o0Cu_VMOdzyETf_zZLx2GpX4tgUnjWOuGbuC21g_c9a3R8nMNhAbkIP0drj3nvfThFv9BJgXvOjMyE_KsgdQxfp41V4aX2tM3G5flS9SkbIPg0pm-suXtcpd3ndu2ovVFjIVz/) no-repeat left center;

color:#fff;

font-weight:bold;

text-transform:uppercase;

font-size:11px;

text-decoration:none;

padding:0 5px 0 25px;

}

#menu li a.current, #menu li a:hover.current{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXt7B7p01o0Cu_VMOdzyETf_zZLx2GpX4tgUnjWOuGbuC21g_c9a3R8nMNhAbkIP0drj3nvfThFv9BJgXvOjMyE_KsgdQxfp41V4aX2tM3G5flS9SkbIPg0pm-suXtcpd3ndu2ovVFjIVz/) no-repeat left center;

color:#fff;

text-decoration:none;

}

</style>

<!--santri-one.blogspot.com-->

salam sahabat blogger dari santri-one

»»  Baca Lebih Lengkap... >>

Kode warna Untuk Blog

Bismillah

Kode warna sangat penting terutama untuk anda yang sering mengotak-atik kode HTML template. Oleh karena itu saya akan membahas cara memasang kode warna blogspot. Ini adalah contoh mesin kode warna yang akan kita buat

Kode warna yang terpilih :

get like this
Cara membuatnya sebagai berikut :
#Langkah 1 :
1. Login ke blogger.
2. kalau sudah masuk ke Dasbor, klik Tata Letak.
3. masuk ke Elemen Halaman
4. Klik Tambah Widget
5. Pilih HTML/Java Sript
6. Masukkan kode JS di bawah ini :

<script language='javascript'>
function Barva(koda)
{
document.getElementById("vzorec").bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById("vzorec2").bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}
</script>
<script type='text/javascript'>
var hue;
var picker;
//var gLogger;
var dd1, dd2;
var r, g, b;
function init() {
if (typeof(ygLogger) != "undefined")
ygLogger.init(document.getElementById("logDiv"));
pickerInit();
//ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"
//ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"
}
// Picker ---------------------------------------------------------
function pickerInit() {
hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
hue.onChange = function(newVal) { hueUpdate(newVal); };
picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180);
picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };
hueUpdate();
dd1 = new YAHOO.util.DD("pickerPanel");
dd1.setHandleElId("pickerHandle");
dd1.endDrag = function(e) {
// picker.thumb.resetConstraints();
// hue.thumb.resetConstraints();
};
}
executeonload(init);
function pickerUpdate(newX, newY) {
pickerSwatchUpdate();
}
function hueUpdate(newVal) {
var h = (180 - hue.getValue()) / 180;
if (h == 1) { h = 0; }
var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);
document.getElementById("pickerDiv").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
pickerSwatchUpdate();
}
function pickerSwatchUpdate() {
var h = (180 - hue.getValue());
if (h == 180) { h = 0; }
document.getElementById("pickerhval").value = (h*2);
h = h / 180;
var s = picker.getXValue() / 180;
document.getElementById("pickersval").value = Math.round(s * 100);
var v = (180 - picker.getYValue()) / 180;
document.getElementById("pickervval").value = Math.round(v * 100);
var a = YAHOO.util.Color.hsv2rgb( h, s, v );
document.getElementById("pickerSwatch").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
document.getElementById("pickerrval").value = a[0];
document.getElementById("pickergval").value = a[1];
document.getElementById("pickerbval").value = a[2];
var hexvalue = document.getElementById("pickerhexval").value ='#'+
YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)
if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select();
}
</script><!--[if gte IE 5.5000]>
<script type="text/javascript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
YAHOO.util.Event.addListener(window, "load", correctPNG);
</script>
<![endif]-->

7. Simpan



#Langkah 2 :

1. Buat satu postingan baru.
2. Masukkan kode HTML di bawah ini :

<center><form name="hcc" id="hcc">
<table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody><tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b40404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0101">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f78181">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#61380b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df7401">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#faac58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#868a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#38610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#74df00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bef781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df74">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a85">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861">
</td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0174df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#08088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0101df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#380b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#7401df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb">
</td></tr><tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b38">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0174">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5">
</td></tr><tr height="10"><td>
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#151515">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#424242">
</td><td onclick="Barva(this.bgColor)" bgcolor="#585858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#848484">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff">
</td></tr></tbody></table></td></tr></tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="2"><tbody><tr height="24"><td id="vzorec" width="24" height="24">
</td><td valign="bottom"><p>Kode warna yang terpilih : <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p></td></tr></tbody></table>
</form><p><a href="http://santri-one.blogspot.com/2010/12/kode-warna-untuk-blog.html" target="new">Get it</a></p></center>

3. Klik Terbitkan Entri.
Nah Sekarang kita sudah mempunyai mesin kode warna sendiri di blog kita.

salam sahabat blogger dari santri-one

»»  Baca Lebih Lengkap... >>