Cara Membuat Kotak Copy Paste Text Dan Kode Html DI Dalam Postingan


Postingan Mbloginfo untuk kali ini ialah mengenai Cara membuat kotak area copy paste box tempat text atau Java script Html lengkap dengan tombol Highlight all atau Copy semua pada artikel postingan Blogger.Cara membuat kotak box copy paste text ini di bagikan untuk para pemula blogger yang ingin memasukan sebuah kode java script,Html,Css,teks biasa ke dalam sebuah postingannya.Karena kotak copy paste ini di perlukan bagi para newbi yang sedang gemarnya membagikan tutorial sederhana untuk Blog dan tampilan blog.

Apabila kamu menyajikan sebuah artikel tentang tutorial blogger di dalam blogmu,Mungkin kamu membutuhkan sebuah kotak area copy paste agar artikel tulisan pada postinganmu bisa di pisahkan antara penjelasan dengan kode Html yang di bagikan.Untuk itulah sebuah kode box area copy paste berborder dan bisa di scroll juga akan kamu butuhkan bilamana kode html yang kamu masukan terlalu panjang,dan jika menggunakan kotak area copy paste biasa,kemungkinan border atau kotak pinggirnya ikut melebar bahkan membesar.Dan hal seperti itu akan membuat postingan blogmu kacau dan terlihat ribet.

Adakalanya,Jika kamu menggunakan kotak teks area biasa yang berwarna,Yang bisa kamu fungsikan untuk menandai sebuah penjelasan dari inti topik postingan yang kamu publikasikan.Dan sampai di sisni,semoga kamu bisa memahami ,antara Kotak box copy paste dengan scroll,Mempunyai tombol highlight all dan kotak copy paste berwarna biasa.Jika sebelumnya kamu mencari Kode html untuk membuatnya,maka secara kebetulan kamu bisa menemukan kode htmlnya di blog ini lengkap dengan cara memasangnya atau membuatnya di halaman penulisan posting.

Info singkat:Cara yang di sajikan dan kode yang di paparkan pada postingan kali ini,bersumber dari berbagi media blog,jadi jika kamu menemukan suatu kesalahan,Mohon di maklumi saja ya.Dan mari simak cara membuat kotak box copy paste lengkap dengan Tombol Copy semua,pilih semua,Highlight all,Berborder tipis dan bisa di scroll serta untuk kotak area copy paste berwarna.Cocok dan khusus untuk pengguna Blogger saja.Untuk pengguna wordperss ,silahkan cari di weblog lain ya.

1.Kotak area copy paste Text ,Java script html lengkap dengan Tombol pilih copy semua.
berikut kode htmlnya:

<div><form name="copy"><div align="center"><span><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Highlight All" type="button"> </span></div><p align="center"><textarea style="width: 150px; height: 80px;" name="txt" rows="5" wrap="VIRTUAL" cols="20">ISI TULISAN SOBAT DISINI</textarea></p></form></div>


Cara memasangnya di Dalam postingan blogger:

- Buka Blogger dan langsung menuju postingan dan pilih new entri,Jika sudah di halaman penulisan postingan,Pilih mode html dan pastekan kode di atas,Di mode html ini juga,pastekan kode html yang akan kamu publikasikan ,dengan cara menghapus dan mengganti tulisan "Isi tulisan sobat disini".Lihat gambarnya seperti di bawah ini.


- Jika sudah memasukan kode yang akan di publikasikan,Langsung saja klik mode compose dan lihat hasilnya,Namun jika menurutmu kotak areanya terlalu kecil,Kamu bisa merubahnya pada bagian bagian di bawah ini.

[ Widht 150px ]:dengan mengubah atau memasukan angka yang lebih besar agar lebar kotak menjadi agak besar ,tidak terlalu kecil.
[ Height 80px ]:Bisa kamu gunakan untuk merubah tinggi dari box kotak copy pastenya,silahkan atur sesuai seleramu.

- Terakhir ,jika usai dan inginmelihat hasilnya,klik pertinjau atau publikasikan langsung postingan yang di buat tadi.
sumber:https://beginikey.blogspot.com/2016/03/cara-membuat-kotak-copy-paste-teks-area.html

2.Kotak Box copy paste Text dan html javascript scroll model biasa
berikut kode htmlnya:

<div style="background-color: white; border: 2px solid gray; height: 100px; overflow: auto; padding: 5px; width: auto;">
 TULSAN DISINI
</div>

Ini adalah Hasilnya, kode html di atas,Copy dan gunakan kode di atas untuk membuat kotak box copy paste.
.





<div style="border: 3px #00000 solid; padding: 10px;background-color:#00000;
overflow: auto; height: 100px; width: 520px;
text-align: left;">
.kode script disini.</div>

Ini adalah contoh hasil dari kode html copy paste border dan bisa di scroll dan berwarna.






<div style="border: 2px solid black; height: 100px; overflow-x: scroll; overflow-y: scroll; width: auto;">
<div style="width: 2500%;">
TULISAN DISINI</div>
</div>

Contoh hasilnya.






<div style="background-color: antiquewhite; border: 2px solid blue; height: 100px; overflow: auto; padding: 5px; width: auto;">
TULSAN DISINI
</div>

contoh hasilnya.








<div style="border: 2px solid black; height: 100px; overflow-x: scroll; overflow-y: scroll; width: auto;">
<div style="width: 2500%;">
TULISAN DISINI</div>
</div>

Contoh hasil.






Cara membuatnya atau memasangnya ke dalam postingan blogger.silahkan simak di bawah ini ya.
- buka dasbhord blogger
- klik postingan dan klik new entri.
- Pada halaman new entir,pilih mode html dan pastekan kode Di atas
- Jika sudah di paste,Klik mode compose dan hapus tulisan yang muncul dan masukan kode html yang akan kamu bagikan.
- kemudian buka mode Html lagi dan berikan sebuah tanda titik pada kode paling akhir baik itu </dive> atau </br> ini bertujuan agar border bisa mempunyai jarak.
- klik mode compose lagi dan hapus tanda titik tersebut dan klik enter,

3.Kotak area copy paste teks dan kode html biasa tanpa scroll namun berwarna.
Berikut kode htmlnya:

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff; text-align: left;"> Kode Script Sobat Disini</div>

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
Kode Script Sobat Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;"> Kode Script Sobat Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Kode Script Sobat Disini</div>

<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Kode Script Sobat Disini</div>

<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: ghostwhite; border-left: 5px solid red; padding: 20px; t-align: left;">
<span style="color: black;"><span style="font-family: &quot;trebuchet ms&quot; , sans-serif;">TULISAN DISINI </span>

<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: #6ddb98; border-left: 7px solid green;  padding: 20px; t-align: left;">
<span style="color: black;"><span style="font-family: 'Trebuchet MS', sans-serif;">TULISAN DISINI </span></div>

<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: ghostwhite; border-left: 7px solid rosybrown; padding: 20px; t-align: left;">
<span style="color: black;"><span style="font-family: &quot;trebuchet ms&quot; , sans-serif;">TULISAN DISINI </span>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 10px solid #2288dd; border radius: 10px; padding: 10px; t-align: left;">TULISAN DI SINI</div>

<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: turquoise; border-left: 10px solid #4fee0f; border: 10px; padding: 10px; t-align: left;">Tulis script di sini! </div>

<div style="-moz-border-radius: 20px; -webkit-border-radius: 20px; background-color: ghostwhite; border-left: 10px solid gray; border-radius: 20px; border-right: 10px solid gray; padding: 20px;">
TULISAN DISINI</div>


<div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: ghostwhite; border-top: 8px solid red; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;">
TULISAN DISINI</div>

Cara memasangnya ke dalam postingan blog,sama saja dengan cara memasang kotak area copy paste yang scroll.Dan mungkin inilah kode yang kamu butuhkan untuk membuat postingan dengan tambahan kode html untuk blog.

Baiklah ,selamat mencoba dan mohon maaf bila ada kesilapan dalam pengetikan,semoga artikel ini bermanfaat untuk kamu yang membutuhkan.Thanks :)

Author

Blogger Awam Blogger Awam Fiksioner is a free template that suitable for personal blogging because the layout is like a journal.

Post a Comment