Cara Membuat Kotak Link Text Area Otomatis Menjadi Responsive
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)
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'><a href="<data:post.url/>" target="_blank"><data:blog.pageName/></a></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'><a href="<data:post.url/>" target="_blank"><data:blog.pageName/></a></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)
Sekian informasi tentang Cara Membuat Kotak Link Text Area Otomatis Menjadi Responsive, semoga bermanfaat salam blogger.
Jejak Unik
Kumpulan Informasi Unik Menarik Dari Berbagai Belahan Dunia. www.jejakunik.com