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;

Pages

Roy

Ads 468x60px

Social Icons

Cara Membuat Highlight Text: Panduan Blogger Percantik Blog

0 comments:

Post a Comment

Search This Blog