-->

K.E ^_~ Slot iklan masih tersedia, hubungi kami

one stop tutorials
  1. Mengambil kode gambar untuk smiley chat facebook
  2. [Masking] Membingkai ombak dengan photoshop
  3. Rincian layanan pembuatan blog
  4. Merubah foto menjadi hitam putih dengan photoshop
  5. Ngeflood di yahoo! messenger dengan BUZZ
  6. Download nuptk web browser
  7. Alat sederhana pengubah sampah plastik menjadi minyak
  8. Cara keren membuat banyak folder
  9. 10 persiapan untuk menghadapi Ujian Nasional
  10. Install xampp di linux ubuntu
  11. 6 pertanyaan dasar seputar html
  12. Menghitung denyut jantung dengan sedotan
  13. Berkenalan dengan HTML
  14. Memakai kaskus smiley untuk facebook chat
  15. Huruf berwarna untuk facebook chat
  16. Sembunyikan file anda ke dalam gambar
  17. Cara simpel install windows 7
  18. Setting BIOS untuk booting melalui flashdisk
  19. Cara baru membuat status biru di facebook
  20. Test Otak!! Seberapa pintarkah anda
  21. Hutan buatan di tengah kota
  22. Membuat folder super hidden
  23. Jika Janin dapat bicara
  24. Membuat aplikasi penghitung luas dengan C++
  25. Cara menggunakan sqlmap pada backtrack
  26. Menambahkan fitur tab pada microsoft office
  27. Inilah presiden termiskin di dunia yang patut kita teladani
  28. Alay teks generator
  29. Membuat tulisan terbalik
  30. Melihat URL asli dari layanan pemendek URL
  31. Buka situs yang diblokir part (2)
  32. Mempercepat kinerja windows xp sp3
  33. Daftar referensi situs penting part(1)
  34. Daftar referensi situs-situs penting
  35. 4 langkah cek virus tanpa antivirus
  36. Hacker adalah
  37. Manfaat mengkonsumsi susu kedelai bagi yang suka begadang
  38. Metode compresing untuk mempercepat loading website/blog
  39. Mempercepat proses streaming video di youtube
  40. Download driver notebook, VGA, Windows, sound card etc
  41. Perbaikan Komputer Pada Kasus Windows Blue Screen Errors
  42. Download ebook di scribd.com tanpa register
  43. Membuat avatar dengan animasi teks
  44. Beginilah cara membuat status biru di facebook
  45. TTS Online bagian 2 (materi teknologi informasi)
  46. Teknologi yang memungkinkan kita membuat kue coklat dengan printer
  47. Membuat keylogger di flashdisk
  48. Menyembunyikan status dari beranda facebookmu
  49. Kunci jawaban teka-teki silang online V1
  50. Teka-teki silang Online
  51. Facebook shortcut keyboard
  52. Mengembalikan file yang terhapus
  53. SMS Gratis
  54. Kapitalisasi pendidikan
  55. Mikroskop digital untuk ilmuwan cilik
  56. All about punk
  57. Shortcut keyboard windows 7
  58. Memainkan game onet di windows 7
  59. Membangun toko online dengan wordpress
  60. Teka teki mbah Einstein
  61. 14 keyboard shortcut di windows 7
  62. Cara menemukan shortcut keyboard sendiri
  63. Belajar mengetik dengan 10 jari
  64. Teknik SEO MLM Backlink
  65. Menumbuhkembangkan karakter kebahasaan
  66. Produktifitas Karakter Respon Konservasi Berbasis Multiple Intelegence
  67. Pembelajaran Sains dalam Pendekatan Tematik
  68. Belajar Sains yang Membebaskan
  69. (PTK) Penerapan pendekatan kontekstual untuk meningkatkan kualitas pembelajaran Biologi SMP
  70. (PTK) Karakteristik pembelajaran Biologi
  71. (PTK) Hasil Penelitian dan pembahasan
  72. Mencari link asli dari foto kita di facebook
  73. Browsing dengan efek 3D dengan add ons firefox
  74. Manusia, sel, kromosom dan DNA
  75. Aku mau buat situs, harus register dimana?
  76. Membunuh akun facebook secara permanen
  77. Alasan bermigrasi ke domain sendiri
  78. Instalasi aplikasi sistem penjaminan mutu pendidikan part (1)
  79. Instalasi aplikasi sistem penjaminan mutu pendidikan part (2)
  80. Instalasi aplikasi sistem penjaminan mutu pendidikan Final
  81. Trik tersembunyi windows 7
  82. Membuat partisi harddisk di windows 7
  83. Yang baru di windows 7
  84. Cek saldo tabungan melalui HP
  85. Install windows tanpa CD
  86. 4 langkah persiapan update BIOS
  87. Chatting lewat HP dengan MXIT
  88. Domain khusus untuk situs porno
  89. Menilik video ariel
  90. Karakter aneh untuk nama file
  91. Penunjuk arah di belantara maya
  92. Shortcut keyboard photoshop CS2
  93. Steganografi teknik kamuflase file
  94. Karakteristik umum virus komputer
  95. Mengubah icon aplikasi dengan resource hacker
  96. Membasmi virus brontok
  97. Koleksi software
  98. Mengembalikkan file dan folder super hidden
  99. DNA windows
  100. Membuka registry yang terkunci
  101. Virtual mesin (komputer di dalam komputer)
  102. Proteksi file dengan FFP
  103. Jalan pintas membuka program
  104. Tiga tombol sakti
  105. Trik jitu sembunyikan folder pribadi

Baca lebih banyak tutorial »
Teka teki silang online

Teka-teki silang online

Premium Blogger Services

Cara memasang aplikasi chat berwarna facebook pada widget blog

Ketika saya menulis tutorial membuat smiley sendiri untuk chat facebook, sebenarnya saya sedang merencanakan untuk membagikan source code aplikasi huruf berwarna chat facebook. Dengan demikian saya lebih mudah untuk menjelaskan kelanjutannya.

Dan ini merupakan salah satu rangkaian tutorial lanjutan tentang facebook chat. Pembahasan kita kali ini tentang cara memasang aplikasi chat berwarna pada blog. Cara yang akan saya jelaskan hanya untuk pengguna blogger/blogspot, untuk pengguna blog lain saya rasa tidak jauh berbeda, asal tahu prinsip kerjanya.
Agar dapat mengikuti tutorial ini, saya asumsikan anda sudah mengerti cara mengambil kode gambar untuk digunakan chat di facebook. Loh kok gambar? yaa sebab huruf berwarna ini sebenarnya sebuah gambar :D. Gimana caranya? baca di sini, ato jika anda malas membuat gambar huruf anda sendiri, pakai saja yang sudah ada, saya sendiri sudah membuatkannya.

Asumsi kedua, anda sudah memiliki source code aplikasinya, jika belum gimana? sudah saya bagikan



Okeeey, jika semua sudah siap, mari kita mulai.

Letakkan kode css pada template blog 

Masuk ke blogger.com tentunya menggunakan akun anda > template > edit html. Jika muncul peringatan dari blogger, tekan tombol lanjutkan.




Cari kode ]]></b:skin> *** Gunakan Ctrl + F untuk mempermudah pencarian.

kemudian paste kode css berikut persis di atas kode tersebut. Jangan lupa klik tombol simpan template jika selesai.

/**
 * Cuma iseng, buat belajar
 * Anda bebas menggunakan dan memodifikasi 
 * dan mohon untuk tidak menghapus komentar ini dan link credit untuk klikedukasi
 * Panembahan Satyapradana http://klikedukasi.com
 */
 
 body {
 background: #2d2d2d;
 font:normal 11px Arial,Sans-Serif;
 padding: 30px 0px 0px 500px;
 }
 #chatwarna {
 background: #3B5998;
 width: 310px;
 border: solid #3B5998;
}
.chatfboke {
 width: 300px; 
 background: #3B5998;
 text-align: center;
 border: solid #ffffff 5px
}
.chatfboke h2 {
 background: url("http://2.bp.blogspot.com/-jfCef4mQmkc/T8PM8q9y7pI/AAAAAAAABIk/OVWHkbaw_zU/s1600/hurufberwarna.png") #ffffff;
 color: #ffffff;
 padding:10px;
 height: 32px;
}
.chatfboke form {
 padding: 0px 10px 0px 10px;
 margin: 0px;
 width: 280px;
}
.chatfboke .kotak1 {
 width: 260px;
 margin: 10px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */
.tombols {
 -moz-box-shadow:inset 0px 1px 0px 1px #ffffff;
 -webkit-box-shadow:inset 0px 1px 0px 1px #ffffff;
 box-shadow:inset 0px 1px 0px 1px #ffffff;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
 background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
 background-color:#ededed;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border-radius:4px;
 border:1px solid #dcdcdc;
 display:inline-block;
 color:#000000;
 font-family:arial;
 font-size:12px;
 font-weight:bold;
 padding:5px 11px;
 text-decoration:none;
 text-shadow:1px 1px 0px #ffffff;
}.tombols:hover {
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
 background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
 background-color:#dfdfdf;
}.tombols:active {
 position:relative;
 top:1px;
}
.chatfboke textarea {
 width: 260px;
 height: 100px;
 margin: 10px;
}
#pwd {
 font-family:Arial;
 font-size:7pt;
 margin:2px 10px 0px 0px;
 padding: 5px;
 text-align:left;
 color: #ffffff;
}
#pwd a {
 text-decoration: none;
 color: #ffffff;
}


Memasang aplikasi pada widget blog 

Sekarang kita akan memasang aplikasi pada widget blog. Letaknya terserah anda, bisa di sidebar atau pada bagian footer. Masuklah pada halaman Tata Letak > Tambah Gadget > pilih HTML/Javascript.
Pada jendela yang muncul paste kode javascript berikut

<script type="text/javascript">
var thisString;
function startText() {
thisString = document.klikedukasi.warna.value;
thisString = thisString.replace(/A/g, "[[276629925723949]] ");
thisString = thisString.replace(/B/g, "[[276629952390613]] ");
thisString = thisString.replace(/C/g, "[[276629969057278]] ");
thisString = thisString.replace(/D/g, "[[276629999057275]] ");
thisString = thisString.replace(/E/g, "[[276630019057273]] ");
thisString = thisString.replace(/F/g, "[[276630042390604]] ");
thisString = thisString.replace(/G/g, "[[276630052390603]] ");
thisString = thisString.replace(/H/g, "[[276630089057266]] ");
thisString = thisString.replace(/I/g, "[[276630105723931]] ");
thisString = thisString.replace(/J/g, "[[276630122390596]] ");
thisString = thisString.replace(/K/g, "[[276630149057260]] ");
thisString = thisString.replace(/L/g, "[[276630162390592]] ");
thisString = thisString.replace(/M/g, "[[276630182390590]] ");
thisString = thisString.replace(/N/g, "[[276630209057254]] ");
thisString = thisString.replace(/O/g, "[[276630242390584]] ");
thisString = thisString.replace(/P/g, "[[276630262390582]] ");
thisString = thisString.replace(/Q/g, "[[276630279057247]] ");
thisString = thisString.replace(/R/g, "[[276630305723911]] ");
thisString = thisString.replace(/S/g, "[[276630322390576]] ");
thisString = thisString.replace(/T/g, "[[276630342390574]] ");
thisString = thisString.replace(/U/g, "[[276630352390573]] ");
thisString = thisString.replace(/V/g, "[[276630379057237]] ");
thisString = thisString.replace(/W/g, "[[276630405723901]] ");
thisString = thisString.replace(/X/g, "[[276630429057232]] ");
thisString = thisString.replace(/Y/g, "[[276630475723894]] ");
thisString = thisString.replace(/Z/g, "[[276630515723890]] ");
thisString = thisString.replace(/a/g, "[[276634635723478]] ");
thisString = thisString.replace(/b/g, "[[276634652390143]] ");
thisString = thisString.replace(/c/g, "[[276634685723473]] ");
thisString = thisString.replace(/d/g, "[[276634709056804]] ");
thisString = thisString.replace(/e/g, "[[276634729056802]] ");
thisString = thisString.replace(/f/g, "[[276634769056798]] ");
thisString = thisString.replace(/g/g, "[[276634809056794]] ");
thisString = thisString.replace(/h/g, "[[276634835723458]] ");
thisString = thisString.replace(/i/g, "[[276634852390123]] ");
thisString = thisString.replace(/j/g, "[[276634872390121]] ");
thisString = thisString.replace(/k/g, "[[276634905723451]] ");
thisString = thisString.replace(/l/g, "[[276634939056781]] ");
thisString = thisString.replace(/m/g, "[[276634979056777]] ");
thisString = thisString.replace(/n/g, "[[276635015723440]] ");
thisString = thisString.replace(/o/g, "[[276635059056769]] ");
thisString = thisString.replace(/p/g, "[[276635072390101]] ");
thisString = thisString.replace(/q/g, "[[276635102390098]] ");
thisString = thisString.replace(/r/g, "[[276635125723429]] ");
thisString = thisString.replace(/s/g, "[[276635155723426]] ");
thisString = thisString.replace(/t/g, "[[276635185723423]] ");
thisString = thisString.replace(/u/g, "[[276635232390085]] ");
thisString = thisString.replace(/v/g, "[[276635279056747]] ");
thisString = thisString.replace(/w/g, "[[276635305723411]] ");
thisString = thisString.replace(/x/g, "[[276635342390074]] ");
thisString = thisString.replace(/y/g, "[[276635369056738]] ");
thisString = thisString.replace(/z/g, "[[276635379056737]] ");
document.klikedukasi.kodewarna.value=thisString;
}
</script>



Di bawah kode javascript tadi tambahkan form html berikut

<div id="chatwarna">
<div class="chatfboke">
 <h2></h2>
 <form name="klikedukasi">
  <input type="text" name="warna" class="kotak1" value="ganteng" />
  <input onClick="startText();" type="button" class="tombols" value="convert"/>
  <input onClick="javascript:this.form.kodewarna.focus();this.form.kodewarna.select();" type="button" class="tombols" value="Select All"/>
  <textarea name="kodewarna">copy kode yang muncul</textarea>
 </form>
 <div id="pwd">Powered by <a href="http://www.klikedukasi.com" target="_blank">klikedukasi</a></div>
</div>
</div>

Klik tombol simpan, dan lihat hasilnya.
selamat mencoba

comment 5 komentar

  1. ada lagi widget untuk livechat yang gratis gan,kayaknya cocok untuk website agan. namanya wgchat, webnya wgchat.com. asli bikinan indonesia, bisa integrasi dengan ym, facebook, dan gtalk juga.
    semoga bermanfaat.

    BalasHapus
  2. makasih ya ka infonya... =D tapi saya masih bingung neh caranya...kunjung ke ilyas175 yaah :salaman...ane tunggu... :bye

    BalasHapus
  3. Thank scriptnya bro,, oke banget,,
    Ijin mempublikasikan aplikasinya bro,,

    BalasHapus

Catatan:
Seluruh komentar yang masuk akan dimoderasi terlebih dahulu. Komentar yang berbau spam, kasar, menghina, seluruhnya yang bersifat menghancurkan bukan membangun tidak akan ditampilkan. Silahkan bertanya dan memberi pendapat dengan sopan dan sesuai aturan.

Anda diperbolehkan mempublikasikan ulang artikel ini, dengan syarat:
1. Mintalah izin dengan cara berkomentar di bawah artikel ini
2. Wajib menyertakan link ke artikel ini dan menyertakan nama penulis

 
© Klikedukasi 2008 - 2013 | Design by Panembahan Satyapradana | 170p3x