Membuat Kotak Tukar Link Anti Edit

Setelah melakukan posting artikel tentang Cara Membuat Kotak Tukar Link dan Membuat Tombol Select All pada Kotak Tuker Link, ternyata ada yang bisa kita perbaiki lagi. Ternyata setelah kita menggunakan kode textarea pada kedua tips di kedua artikel saya tersebut tampilan kode html pada kotak tukar link (textarea) masih berupa text editor atau setiap pengunjung bisa melakukan perubahan seperti pada text editor notepad biasa. Jika pengunjung secara tidak sengaja melakukan tombol delete pada saat masuk textarea maka kode html tersebut pasti akan terjadi kesalahan.

Untuk menghindari hal tersebut pada posting kali ini saya akan membahas Membuat Kotak Tukar Link Anti Edit. Artinya kita tidak bisa melakukan proses editing seperti yang saya jelaskan tadi menghapus atau menambah kode-kode di dalam kotak textarea. Bandingkan tampilan sebelum dan sesudah di bawah ini.

Sebelum

Sesudah

Caranya sangat mudah yaitu kita tinggal memasukkan satu deklarasi read only pada kode html textarea. Lebih jelasnya kode tersebut yaitu : readonly=”readonly”
Sehingga kode keseluruhannya yaitu :
<textarea style=”width: 150px; height: 100px;” name=”txt” rows=”100″ wrap=”VIRTUAL” cols=”55″ readonly=”readonly”>&lt;a href=”http://www.wbcwonogiri.blogspot.com/” target=”_blank” title=”WBC (Wonogiri Blogger Community)“&gt;&lt;img style=”width: 153px; height: 36px;” src=”http://72.51.34.83/images/9c2/9c2fe617d36c8c766f651c1b445a62b3fb041dd7.gif” alt=”WBC Wonogiri” /&gt;&lt;/a&gt;</textarea>
Bisa dipahami? Okey selamat mencoba ya..

Membuat Tombol Select All pada Kotak Tuker Link

Pada artikel sebelumnya saya membahas Cara Membuat Kotak Tukar Link  / Link Exchange berupa kotak yang berisi kode HTML banner dari blog WBC ditempatkan pada sidebar. Jika sebelumnya hanya berupa kotak, kali ini saya akan menambahkan sebuah tombol yang fungsinya untuk men-select all seluruh kode html yang berada di dalam kotak. Diharapkan dengan adanya Tombol Select All ini dapat mengurangi kesalahan kode oleh rekan blog lain yang ingin bertukar link dengan blog kita karena dengan 1 klik semua kode sudah terblok tinggal klik kanan dan copy kode tersebut.

Jika tampilan sebelumnya adalah


Maka hasilnya akan seperti ini

Bagaimana caranya?
Caranya cukup mudah, kita hanya tinggal menambahkan kode tombol tersebut sebelum kode textarea/kotak pada posting sebelumnya. Kode yang perlu ditambahkan yaitu :
<div><form name=”copy”><div align=”center”><input onclick=”javascript:this.form.txt.focus();this.form.txt.select();” type=”button” value=”Select All“> </div><div align=”center”></div><p align=”center”>
Dan untuk kode keseluruhannya yaitu :
<center><span class=”fullpost”></span>
<div>
<form name=”copy”>
<div align=”center”>
<span class=”fullpost”><input onclick=”javascript:this.form.txt.focus();this.form.txt.select();” type=”button” value=”Select All” /> </span></div>
<div align=”center”>
</div>
<div align=”center”>
<textarea cols=”16″ name=”code” rows=”6″>&lt;a href=”http://www.wbcwonogiri.blogspot.com/” target=”_blank” title=”WBC (Wonogiri Blogger Community)“&gt;&lt;img style=”width: 153px; height: 36px;” src=”http://72.51.34.83/images/9c2/9c2fe617d36c8c766f651c1b445a62b3fb041dd7.gif” alt=”WBC Wonogiri” /&gt;&lt;/a&gt;</textarea></div>
</form>
</div>
Selamat Mencoba