Cara Membuat Kotak Script Border Dan Scroll Pada Blog




Cara membuat kotak tempat kode Script pada blog yang sangat mudah dan di delengkapi dengan border beserta warna background yang bisa di atur sesuai dengan selera agar tampilan kotak scriptnya terlihat bagus dan rapi.
Cara membuat kotak area copy paste javascript dan kode html untuk blogspot | Cara membuat kotak copy paste | tutorial membuat kota areac copy paste javascript dan html keren untuk blog.
Pada postingan kali ini Blog ini akan membagikan tutorial blogging buat kalian yang ingin membuat script menjadi tambahan postingan.Kotak script yang akan di bagikan ini berbeda dengan kotak script pada umumnya yang mempunyai kolom.

Kotak script mempunyai beragam macam,Ada yang berbentuk kolom dan bisa di scroll dan ada juga kotak script yang menggunakan tampilan border namun seperti lampiran biasa saja.Hal itu bisa di bedakan antara kotak script yang bisa di scroll dan yang tidak bisa di scroll.

Kotak script ini khususnya untuk menempatkan sebuah Kode Html ,JavaScript,Css ,Jquery,pada postingan blog.Jika blog kalian adalah blog tutorial bloging ,Maka kalian bisa menggunakan kotak border sebagai penempatan Script yang akan di akan sajikan.Berikut ini adalah kode untuk membuat kotak script pada blog dan cara membuatnya menjadi sebuah postingan.

Sebelum membuat kotak script ,Pahami dulu cara memasangkannya pada blog,Agar tidak ribet dan bingung jika memasukan Kode area html dan area untuk kode html tersebut.



Cara membuat kotak area copy paste JavaScript Html pada postingan Blog
Cara yang bisa kalian pahami adalah dengan melihat contoh gambar yang ada di bawah ini,Langkah langkahnya perlu kalian ketahui.
  • Yang pertama silahkan Buka Dasbhord Blogger kalian
  • Langsung Ke Postingan
  • Klik New Post atau New entri/Entri baru
  • Di halaman postingan langsung saja pilih mode HTML ,ini di lakukan untuk memasukan kode Kotak tempat text area ,yang nantinya di dalamnya sebuah kode JavaScript Html ,Yang akan kalian jadikan sebagai isi postingan.
  • Isikan judul postingan kalian,dalam mode HTML
  • Masukan sebuah kode pembentuk Kotak area Copy Paste Script yang berbentuk sebuah Border biasa.
  • Kemudian coba masukan atau copy kode HTML pembentuk kota area di bawah ini.
<div style="background-color: white; border: 3px #ffa5a5 solid; padding: 10px; text-align: left;"> silahkan Masukkan Kode Html atau Script Sobat Disini.</div>
  • Namun jika kalian ingin membuat kode teks area yang bisa di scroll,Bisa menggunakan kode html seperti di bawah ini.

<div style="background-color: white; border: 2px solid gray; height: 100px; overflow: auto; padding: 5px; width: auto;">
Isikan tulisan kalian di sisni
</div>
  • Jika sudah bisa mengetahui bentuk kode script box untuk kotak area pada postingan,Ini nantinya di tujukan untuk tempat sebuah kode yang bisa di copy paste.
  • Jika sudah memasukan Kode box kotak area yang border biasa maupun Kotak border dengan scroll ,langkah selanjutnya silahkan memilih mode Compose pada halaman Entri tersebut.
  • Pada gambar di atas adalah hasil dari kode border yang telah di masukan tadi,Text Yang muncul adalah text dalam isi border box script yang juga bisa di rubah degan tulisan atau menempatkan sebuah kode HTML/Java Script.Dan kalian bisa mengetikannya langsung lewat mode Compose.
Di atas adalah tutorial untuk membuat atau memasang kode box tempat kode html da javascript yang biasanya akan di buat menjadi sebuah postingan blog.namun kalian tentu juga membutuhkan pilihan kode untuk membuat border box script.



Kotak Area Tempat Kode Html Dan JavaScript Untuk Blog Border Biasa Non Scroll
Di bawah ini adalah kumpulan kode pembentuk border box tempat java script copy paste,jika cara pemasangannya sudah kalian pahami,maka kalian dapat menggunakan kode kotak area copy paste di bawah ini.

<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="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; 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>


Diatas semuanya adalah kode border script hanya berbentuk box biasa tanpa ada scroolnya,Apabila kalian ingin menggunakan yang mode scroll,inilah kodenya.



Kode Html Untuk Membuat Kotak Area HTML JavaScript Scroll Pada Postingan Blog

Berikut ini adalah kotak area yang menggunakan mode scroll,dan di dalamnya ada sebuah tulisan baik untuk KOde html Script dan lain-lain,Dan juga kalian bisa merubah warna backgroundnya menjadi warna hitam,hijau biru dan lain sebagainya.

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

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



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

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

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


Baiklah itulah semua kotak area untuk script ,baik untuk bentuk border box biasa dan juga dalam bentuk box yang bisa di scroll,postingan ini termasuk kedalam kategori tutorial blogging dengan tag judul Cara membuat kotak area Script border Box biasa dengan Box Scroll pada postingan blog yang bisa kalian copy semua kode html untuk pembuatan kotak scriptnya.





Artikel Terkait

Postingan populer dari blog ini

Begini Cara Memasang iklan penelusuran bersponsor google adsense Di Blog

Membuat Related Post Grid Untuk Template AMP Blogger

Download Template Igniel versi premium Gratis

Cara Menampilkan Traffic Data Koneksi Internet Pada Laptop

Koleksi Symbol Text Keren Untuk Blog Dan Sosial Media

Tutorial Full Flash Smartphone OPPO A37 ,Lupa Pola

Cara Mengatasi Gagal Install Driver VGA Pada windows 7 All version

Cara membuat Link Model no follow dan Do follow

Cara Membuat Akun Google Adsense Hosted Terbaru