-->

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

Source code aplikasi teks berwarna facebook chat

Ga nyangka aplikasi sederhana teks berwarna facebook chat mendapatkan sambutan luar biasa dari temen-teman. Sampai posting ini ditulis aplikasi ini sudah digunakan sebanyak kurang lebih 50.000 kali. Alhamdulillah jika hasil isengku bermanfaat bagi sobat klikedukasi.

Untuk mengatakan ini sebuah aplikasi sebenarnya saya sendiri kurang pede. kenapa? aplikasi berbasis web ini hanya menggunakan sedikit javascript sebagai enginenya, ditambah dengan beberapa tags html dan sedikit manipulasi css dasar. Saya yakin temen-teman pun bisa dengan mudah membuatnya sendiri

Namun tidak sedikit yang menanyakan cara membuatnya, ada juga yang minta dikirim source code via email (wew kok nyuruh yak, emang siapa elu :p). Jika anda sedikit jeli sebenarnya aplikasi tersebut bisa dilihat source codenya dengan cara view source code (Ctrl+U) ato jika ingin lebih mudah anda bisa menggunakan add ons firefox bernama firebug. makanya tiap ada yang minta saya selalu jawab "silahkan ambil aja sendiri", sebab saya pikir kode javascript, css maupun html bisa anda dapatkan dengan mudah

Sebenarnya niat untuk membagikan source code ini sudah sejak lama, hanya saja baru sempet merealisasikannya hari ini. Yah dengan harapan anda bisa memasangnya di blog masing-masing, bisa dipasang di sidebar, ato bisa juga dalam posting. Anda bebas menggunakannya dengan catatan tidak menghapus tulisan Powered by klikedukasi.


Sebelumnya saya hanya menggunakan html dan javascript, tidak disertai css sama sekali. Namun untuk menyajikan tampilan yang agak bagus, akhirnya saya putuskan untuk menambahkan sedikti css. Tempatkan kode css ini sebelum tag </head> pada dokumen html. berikut kodenya:

.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;
}

Di bawah kode css di atas, masukkan kode javascript, kode ini tugasnya untuk mereplace dan mengambil kode dari kata-kata yang ditulis pada kolom input dan menampilkannya pada textarea di bawahnya.

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;
}


Selanjutnya, pasang kerangka html beserta form inputnya dibawah tags <body>.

<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>


Untuk memasang pada blog akan di bahas pada tutorial selanjutnya

comment 7 komentar

  1. Gan tolong bantu saya edit template download di sini

    http://bit.ly/TYTcyp

    BalasHapus
    Balasan
    1. Gan Gak Bisa caranya

      tolong edit Template saya donk

      http://www.klikedukasi.com

      Hapus
    2. itu alamatnya aja di pendekin gitu om, jadi curiga mau buka jg :D
      lagian ga bisanya disebelah mana? tolong jelaskan detilnya, bisa kita bahas di sini

      Hapus
  2. mas caranya gak detail jelasin lagi donk yang detail.
    saya ingin membuat tpi saya akan meletakan nama Powered by klikedukasi. ke blog saya


    please........!!!!!!!!!!!11

    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