-->

K.E ^_~ Yang lagi galau ini penawarnya link

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