Membuat Kotak Tukar Link Otomatis Select All Saat DiKlik

Menambahkan lagi artikel saya sebelumnya mengenai kotak (textarea) tukar link yaitu Cara Membuat Kotak Tukar Link / Link Exchange, Membuat Tombol Select All pada Kotak Tuker Link dan Membuat Kotak Tukar Link Anti Edit. Kali ini saya akan melengkapi penjelasan mengenai Cara Membuat Kotak Tukar Link Otomatis Select All Saat DiKlik. Kotak tukar link ini sangat favorit digunakan oleh para blogger karena berfungsi cukup optimal karena cukup kita klik kode html di dalam kotak maka secara otomatis akan mem-blok semua kode html tersebut, pengunjung yang ingin tukar link tinggal mengcopy nya. Bagaimana caranya?

Coba bandingkan kedua tampilan kotak tukar link dibawah ini, sebelum dan sesudahnya.

Sebelum

Sesudah

Sudah bisa membedakan kedua tampilan tersebut datas bukan? Pada tampilan bawah kode html di dalam kotak akan otomatis mem-block saat kita klik.

Seperti pada posting saya sebelumnya tentang Membuat Kotak Tukar Link Anti Edit, Kotak Tukar Link Otomatis Select All Saat DiKlik ini kita juga tinggal menambahkan kode onclick pada text area. Kode tersebut yaitu : 

onclick=”this.focus(); this.select();”
Jadi sekarang kode html textarea secara keseluruhan yaitu :
<center><textarea style=”width: 150px; height: 100px;” name=”txt” rows=”100″ wrap=”VIRTUAL” cols=”55″ readonly=”readonly” onclick=”this.focus(); this.select();”>&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></center>
Selamat mencoba

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

Cara Membuat Kotak Tukar Link / Link Exchange

Tukar Link atau Link Exchange adalah hal yang sangat penting untuk kita sebagai seorang blogger. Semakin banyak link blog rekan yang terpasang di blog lain maka akan semakin baik blog rekan di mata mesin pencari / search engine seperti Google, Yahoo, bing dan lain-lain. 

Untuk membuat kotak tukar link ini sangat lah mudah. Kita tinggal copas kode dibawah ini pada sidebar atau pada posting artikel kita. Pada sidebar seperti biasa buka Layout > Elemen Laman. Pilih Tambah Gadget > HTML/JavaScript. Copas kode di bawah ini.

<textarea name=”code” rows=”6″ cols=”16″><a href=”http://www.wbcwonogiri.blogspot.com/” target=”_blank” title=”WBC (Wonogiri Blogger Community)“><img style=”width: 153px; height: 36px;” src=”http://72.51.34.83/images/9c2/9c2fe617d36c8c766f651c1b445a62b3fb041dd7.gif” alt=”WBC Wonogiri” /></a></textarea>
Hasilnya seperti di bawah ini :

Tugas rekan WBC silahkan edit teks berwarna biru sesuai dengan yang diinginkan. Cukup mudah bukan?

Selamat Mencoba.