Skip to main content

Cara Membuat Kotak Link Text Area Otomatis Menjadi Responsive

Senin, 12 April 2021

Cara Membuat Kotak Link Text Area Otomatis Menjadi Responsive - Hari ini saya cukup pusing mencari jalan agar kotak link text area ini bisa menjadi responsive. 

Kebanyakan tutorial yang beredar hanya menampilkan kode text area namun tidak ada yang responsive  dan sudah tidak ada blogger yang memperbaharuinya.

Fungsi kotak link text area ini ialah agar memudahkan visitor meng-copy link artikel url yang baru saja ia baca untuk dibagikan (share). Biasanya kotak ini diletakan pada akhir postingan (perhatikan gambar)

Cara Membuat Kotak Link Text Area Otomatis Menjadi Responsive

Saya mencoba mencari solusi karena penasaran dengan kotak link area otomatis ini yang tidak mau responsive. Akhirnya saya menemukan trik mudah agar kotak link text area ini menjadi responsive dan saya terapkan ternyata berhasil.

umumnya kode untuk menampilkan kotak link text area otomatis seperti ini:

<textarea cols='80' id='bju' name='blogjk' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>

Bila kamu langsung menerapkan kode di atas maka tampilan kotak link text area menjadi tidak responsive.

Untuk mengakalinya agar menjadi responsive cukup mudah, kita tinggal tambahkan kode pembungkus seperti ini

<div style='background-color:#FBFBFB; border:1px solid #D2D2D2; padding:5px; width:autopx; height:75px; overflow:auto;';
</div>

Sehingga menjadi seperti ini

<div style='background-color:#FBFBFB; border:1px solid #D2D2D2; padding:5px; width:autopx; height:75px; overflow:auto;'>
<textarea cols='80' id='bju' name='blogjk' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
</div>

Silahkan simpan di mana saja pada HTML template blog anda dan lihat hasilnya.

Catatan: Untuk demonya bisa Anda lihat pada blog ini jika masih saya gunakan atau lihat cuplikan animasi gambar di bawah ini (klik untuk perbesar gambar)

Cara Membuat Kotak Link Text Area Otomatis Menjadi Responsive

Sekian informasi tentang Cara Membuat Kotak Link Text Area Otomatis Menjadi Responsive, semoga bermanfaat salam blogger.

Bagikan:

Hallo sobat! blog.jejakunik.com membuka kesempatan untuk anda mempromosikan Produk atau Jasa secara GRATIS pada blog ini. Detailnya bisa kamu lihat di CLICK HERE
Buka Komentar
Tutup Komentar