Excalibur
Info

Selamat Datang

Selamat Datang Di Blog Roy Lichtenstein- Saya Senang Anda Berada Di Sini, Dan Berharap Anda Sering Datang Kembali. Silakan Berlama - Lama Di Sini Dan Membaca Lebih Lanjut Tentang Artikel Yang Saya Susun. Ada Banyak Hal Dapat Anda Pelajari, Anda Mungkin Akan Menemukan Sesuatu Yang Menarik

Sekilas Tentang Roy

Nama saya Roy Lichtenstein, Saya Bukan Seorang Blogger, Hacker, Desainer Atau Apapun Tapi Saya Hanya Seseorang Yang Ingin Selalu Belajar Dan Ingin Tau Sesuatu Yang Baru...

Social Icons

xtreme5-roylichtenstein.blogspot.com

Cara Membuat Highlight Text: Panduan Blogger Percantik Blog

Highlight text akan membuat pembaca blog lebih cepat dan lebih mudah pada saat ingin mengcopy teks yang disajikan. Hanya dengan KLIK atau menyentuhkan Cursor pada "Highlight" atau "select All", maka ketika selanjutnya kita KLIK copy atau Ctrl+C maka secara otomatis semua teks akan tercopy. Javascript yang sangat dan bekerja pada daerah texarea membuat fungsi seperti ini dapat kita lakukan. Untuk membuat Highlight Text seperti dimaksud di atas, kamu bisa copy seluruh KODE CSS, javascript dan tutorial penggunaanya pada DEMO yang telah saya sediakan.


 KODE CSS - Highlight Text :

<style type="text/css">

.pypaste{
    width:700px;
    border:2px solid #666;
    margin:2px 5px 10px 5px;
    padding:3px;
    background:#CCC;
    font-family:Tahoma, Arial, Verdana !important;
    font-size:11px;
    color:#000;
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
    }
a.selek{
    background:black;
    width:100px;
    display:block;
    border:1px solid red;
    font:14px Times New Roman;
    font-weight:bold;
    color:white;
    margin:10px 0 0 5px;
    padding:4px 10px;
    text-decoration:none;
    text-align:center;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    }
a.selek:hover{
    color:red;
    border:1px solid blue;
    float:left;
    }
</style>


Javascript - Highlight Text :

<script type="text/javascript">
//<[CDATA[
/* gubhugreyot - bloggerstars-1 */ 
  function pilihAText(){
  document.teksA.TheText.focus();
  document.teksA.TheText.select();
  }
  function pilihBText(){
  document.teksB.TheText.focus();
  document.teksB.TheText.select();
  }
  function pilihCText(){
  document.teksC.TheText.focus();
  document.teksC.TheText.select();
  }
//]]> 
</script>


xHTML - Highlight Text :

Cara pertama :


<a href="javascript:pilihAText()" class="selek">Select All</a>
<form name="teksA">
<textarea name="TheText" rows="12" class="pypaste">

Tuliskan Teks di sini !

</textarea>
</form>


Cara ke-2 :

<a class="selek" onmouseover="javascript:pilihBText()">Highlight Text</a>
<form name="teksB">
<textarea name="TheText" rows="12" class="pypaste">
Tuliskan Teks di sini !
</textarea>
</form>


Cara ke-3 :

<input type="button" value="Select All" onClick="javascript:pilihCText()" style="margin-left:5px;">
<form name="teksC">
<textarea name="TheText" rows="12" class="pypaste">

Tuliskan teks di sini !

</textarea>
</form>


Catatan :

1. KODE CSS diletakkan di atas KODE ]]></b:skin>

2. Javascript diletakkan di bawah KODE ]]></b:skin> atau di bawah kode <head>

3. xHTML digunakan di bagian body atau di ruang posting.

4. KODE "row" pada texarea berfungsi sebagai height atau untuk memberi ukuran tinggi texarea.

5. Lebar texarea dapat dirubah dengan merubah nilai width:700px; (pada KODE CSS) sesuai dengan ruang blog yang tersedia. atau bisa juga diganti dengan width:auto;

Tidak ada komentar:

Posting Komentar

Berikan Komentar Anda Dibawah Sini Jika Belum Punya Akun Google/Blogger Anda Bisa Pilih Anonymous