Cara membuat kotak script didalam artikel blog

Menambahkan kotak script kedalam artikel blog merupakan sebuah upaya untuk mempercantik tampilan post blog agar terlihat lebih menarik serta nyaman saat dibaca.

Bagi pemilik situs yang menjelaskan tentang kode-kode html atau javascript tentu akan sangat terbantu dengan adanya kotak sctipt tersebut. Karena selain terlihat lebih rapih dan profesional seperti yang terlihat pada gambar di atas,hal tersebutpun tentu akan membuat nyaman para pengunjung saat membaca artikel yang anda publikasikan.

Untuk membuat kotak script terbilang cukup mudah karena anda hanya tinggal mengcopy saja kode yang sudah ada pada postingan ini sesuai dengan bentuk kotak script yang anda inginkan.

Beberapa pilihan model kotak script.

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff; text-align: left;"> Masukan kode script atau teks 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;">Masukan kode script atau teks 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;">Masukan kode script atau teks 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;">Masukan kode script atau teks 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;">Masukan kode script atau teks disini</div>

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;">Masukan kode script atau teks disini</div>

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
Masukan kode script atau teks</div>

<div style="background-color: transparent; border-radius: 30px; border: 4px solid #254779; box-shadow: 0px 0px 10px; padding: 10px; text-align: left;">Masukan kode script atau teks disini</div>

<div style="padding:20px 30px;text-align:left; background: #999 no-repeat right; color: #fff;font-size: 16px;line-height: 1.4; border: 0;border-radius: 10px;margin: 0 30px 10px;display: block; box-shadow: 11px 10px 0px #555; ">Masukan kode script atau teks disini</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;">
Masukan kode script atau teks disini</div>

Style scroll atau tulisan pada kotak script dapat digulir.

<div style="background-color: lime; border: 2px #006400 solid; height: 50px; overflow: auto; padding: 10px; text-align: left; width: 300px;">Masukan kode script atau teks disini</div>

Cara menambahkan kode kotak script saat menulis artikel di blog.

Langkah pertama setelah anda masuk ke akun blogger adalah :

Klik postingan baru untuk membuka halaman entri blog.

Selanjutnya ketika anda ingin menempatkan kode kotak script yang akan anda tambahkan silahkan klik ikon pensil untuk mengalihkan halaman dari tampilan menulis ke tampilan html.

Tempatkan kode tersebut pada posisi yang diinginkan.

Setelah selesai dan untuk melanjutkan menulis klik kembali ikon pensil kemudian pilih tampilan menulis.

Demikian artikel ini saya tulis,semoga bermanfaat untuk semuanya.

Sampai jumpa di postingan berikutnya dan terimakasih atas kunjungannya.