100% berhasil! Cara Buat Kotak Script atau Text Box pada Postingan Blogger

Kotak script pada blogger yaitu berguna untuk mengisi sebuah script atau tulisan berupa kode yang dapat dilihat secara menarik dan memudahkan orang lain untuk membedakan mana yang postingan biasa dan mana yang script.

Kotak script di sini juga memiliki nama lain yaitu text box dan ini bisa digunakan pada blogspot maupun wordpress tergantung pemakaian si pengguna tersebut.

Nah di sini mas Amin ingin menerapkan kotak script tersebut di postingan ini supaya tampilannya lebih keren dan bagus.

Cara membuat kotak script pada postingan

Nah kali ini saya akan share bagaimana caranya membuat kotak area atau kotak script di dalam postingan blog terbaru. Bagi Anda yang belum paham silakan ikuti tutorial berikut ini.

1. Buka situs blogger dan pilih blogger mana yang ingin anda posting.

2. Setelah itu klik postingan baru pada dashboard blog tersebut

3. Nah di bawah bagian judul ada simbol pensil, Anda klik saja kemudian pilih tampilan HTML

4. Nah setelah itu masukkan script ini dalam postingan bentuk HTML:

<div style="background-color: white; border: 3px #eeeeee solid; padding: 10px; text-align: left;">Masukkan Kode Script Anda Disini.</div>

#ganti tulisan warna biru pada script tersebut dan masukkan kode yang ingin anda tambahkan supaya terlihat box teksnya.

Untuk melihat hasilnya anda bisa ganti pilihan html ke tampilan menulis pada icon pensil tersebut.

5. Bagi Anda yang ingin kotak script tersebut menjadi scroll ke bawah bisa menambahkan kode berikut ini yang berwarna merah.

<div style="background-color: white; border: 3px #eeeeee solid; padding: 10px; text-align: left; height: 100px; width: 520px; overflow: auto;">
Masukkan Kode Script Anda Disini.</div>

#untuk mengatur ukuran bisa mengubah angka pada tulisan merah tersebut height (tinggi) dan widht(lebar).

6. Jika sudah paham berarti Anda siap untuk mempublishkan artikel tersebut.

Kumpulan text box atau kotak script keren

Bagi Anda yang menginginkan kotak script yang beraneka ragam Anda bisa mendapatkan script tersebut di bawah ini secara gratis tanpa bayar sedikitpun.

<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>

Kesimpulan

Dari artikel di atas dapat kita simpulkan bahwa cara membuat kotak script sangatlah mudah dan berguna untuk para blogger yang ingin mencantumkan teks penting di dalam postingan tersebut.

Mungkin itu saja yang dapat saya sampaikan lebih dan kurang saya mohon maaf jangan lupa untuk share ke teman-teman yang lain dan jangan lupa untuk berkomentar di bawah ini terima kasih.

Berbagi :