Text Box Kotak Script Postingan Responsive Blogger Terkeren

bagaimana cara membuat kotak yang responsive di dalam postingan blog.

box kotak script postingan responsive 

Ada beberapa bentuk dari kotak teks yang akan saya bagikan, mari kita simak beberapa bentuk dari kotak teks lengkap dengan kode html

Membuat kotak di dalam postingan atau text box di blog adalah sebuah kotak yang didalamnya dapat dimasukan kalimat atau juga script kode html agar telihat responsive tidak acak-acakan. 

Biasanya kotak script dibuat untuk keperluan seperti menambahkan script pemograman html dan masih banyak lagi, ikuti langkah-langkah dibawah ini untuk lebih jelasnya.

Sebelum Menulis Teks Postingan Pastikan Rubah Dulu Compos HTML .

Pertma login ke akun blogger anda, buat entri baru atau postingan baru.

Setelah itu masuk kebagian HTML seperti gambar dibawah, selanjutnya copy salah satu kode kotak script.

Lalu buka Compose/Gambar pena pensil, maka kotak sudah tampil, terakhir tambahkan isi dari kotak tersebut.

Lihat Seperti Gambar Dibawa ini.

CONTOH JADI

<div style="background-color: #000000; border-radius: 5px;  height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;"> ISI TEKS ARTIKEL KONTEN BLOG ANDA DISINI</div>

CONTOH 2

ISI TEKS ARTIKEL KONTEN BLOG ANDA DISINI                                   text box kotak script postingan responsive                                                                                        

Dibawa ini bisa anda coba satu per satu ya guys....

<div style="background-color: white; border: 3px #eeeeee solid; padding: 10px; text-align: left; height: 100px; width: 520px; overflow: auto; ">Tulis teks konten artikel disini</div>

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff; text-align: left;"> Tulis teks konten artikel disini </div>

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

Tulis teks konten artikel 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;">  Tulis teks konten artikel disini </div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px putus-putus #aaa; padding: 10px; t-align : left;"> Tulis teks konten artikel 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;">Tulis teks konten artikel disini Sobat Disini </div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px awal #fff; padding: 10px; t-align : left;">Tulis teks konten artikel disini Sobat Disini </div>

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Tulis teks konten artikel disini  Sobat Disini </div>

<div style="background-color: #111; border-radius: 5px;  height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;"> ISI TEKS KODE SCRIPT DISINI

<br /></div>

<div style="background-image: linear-gradient(to right, #eeffe6, #fce6f8); border-radius: 10px; padding: 17px; text-align: left;">

 di sini...Tulis teks konten artikel ANDA

</div>

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

</div>

Usahakan anda bisa merubah aturan warna, jika anda menguasai coding html anda bisa mengubah warna atau style dari kotak yang ada diatas.

silakan pilih desain yang menurut Anda keren, dan soal warna, bisa diubah dengan menggunakan kode warna HTML.