Cara Membuat Kotak Script Sederhana Dalam Postingan

Cara Membuat Kotak Script Sederhana Dalam Postingan - Bagi kalian yang baru memulai belajar membuat blog dan ingin membuat postingan yang didalamnya ada kode script dan ingin tampilan kode script tersebut ada di dalam kotak, pasti anda merasa bingung gimana cara membuat box script.

Sebelumnya saya juga merasa bingung bagaimana caranya membuat kotak kode script tersebut, kemudian saya googling dan banyak juga artikel mengenai kotak kode script dan ternyata caranya cukup mudah untuk di buat.

Jika kalian ingin membuat kotak script untuk digunakan dalam postingan, maka kalian akan mendapatkan keuntungan dari memasang kotak tersebut yaitu postingan kalian akan terlihat rapi, tampilannya postingan akan terlihat keren dan elegan serta akan membuat nyaman pembaca blog anda.

Untuk saya akan bagikan cara membuat kode script di dalam postingan, silahkan ikuti langkah-langkah berikut ini:

  • Untuk langkah pertama kalian pilih kode script yang saya sediakan dibawah ini
  • Setelah kalian memilih kotak kode script yang ingin kalian pakai, Copy kode tersebut.
  • Kemudian kembali halaman blogger >>entri baru
  • Pada halaman postingan klik bagian HTML dan paste kode tadi (ingat!!! Setelah kalian klik entri baru kalian akan masuk ke halaman bagian compose jadi jangan paste di halaman tersebut, kalian harus mempaste kode yang kalian copy tadi di halaman HTML)

Pilih kotak script di bawah ini sesuai keinginan kalian .

Style 1 Elegan

<div style="background-color:  #BF00FF; border-radius: 5px; border-left:5px solid black; box-shadow: 5px 5px 0 rgba(0 , 0 , 0 , 0.16) , 0 2px 5px 0 rgba(0 , 0 , 0 , 0.12); overflow: hidden; padding: 20px; transition: 0.25s;"><span style="color: white; font-family: 'Trebuchet MS', sans-serif;">Isi Dengan kode Kalian </span></div>

Style 2 Elegan

<div style="background-color: deepskyblue; border-radius: 5px; border-left:5px solid black; box-shadow: 5px 5px 0 rgba(0 , 0 , 0 , 0.16) , 0 2px 5px 0 rgba(0 , 0 , 0 , 0.12); overflow: hidden; padding: 20px; transition: 0.25s;"><span style="color: white; font-family 'Trebuchet MS', sans-serif;">Isi Dengan Kode Kalian</span></div>

Style 3 Elegan

<div style="background-color:  black; border-radius: 5px; box-shadow: 5px 5px 0 rgba(0 , 0 , 0 , 0.16) , 0 2px 5px 0 rgba(0 , 0 , 0 , 0.12); overflow: hidden; padding: 20px; transition: 0.25s;"><span style="color: white; font-family: 'Trebuchet MS', sans-serif;">Isi Dengan Kode Kalian </span></div>

Style 4 Elegan

<div style="background-color:  black; border-radius: 5px; box-shadow: 5px 5px 0 rgba(0 , 0 , 0 , 0.16) , 0 2px 5px 0 rgba(0 , 0 , 0 , 0.12); border-left: 5px solid green; overflow: hidden; padding: 20px; transition: 0.25s;"><span style="color: white; font-family: 'Trebuchet MS', sans-serif;">TULISAN DISINI </span></div>


Style 1 scroll box

<div style="overflow:auto;width:300px;height:100px;padding:10px;border:1px solid #eee">





Isi Dengan Kode Kalian



</div>

Style 2 scroll box

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: gray; border-left: 5px solid #2288dd; border-radius: 10px; height: 100px; overflow: auto; padding: 10px; padding: 10px; width: 600px;">



Isi Dengan Kode Kalian



</div>


Style 1

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

Isi Dengan Kode Kalian

</div>

Style 2

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

Isi Dengan Kode Kalian

 </div>

Style 3

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

Isi Dengan Kode Kalian

</div>

Style 4

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

Isi Dengan Kode Kalian

</div>

Itulah kode script untuk membuat kotak kode script pada postingan, tinggal kalian pilih saja mana yang benar-benar cocok dari tipe dan warna yang pas di blog kalian.


Dan jika ingin merubah warna background contoh
Misal warna kotak kode sebelumnya #000000 (hitam) kalian hanya cukup merubahnya saja menjadi #ffffff (putih) atau bisa menggunakan huruf warna seperti background-color: white

Jika dirasa ukuran sudut lengkung tidak cocok, maka rubah Border radius: 10px rubah dengan misal 5px.

Tinggal kalian edit aja susuka hati kalian
yang penting warnanya cocok dengan tema blog kalian agar terlihat lebih rapi postingan atau artikel kalian, sehingga pembaca lebih nyaman dan mengerti apa yang dimaksud dari isi postingan kalian.

Selamat mencoba...

Belum ada Komentar untuk "Cara Membuat Kotak Script Sederhana Dalam Postingan"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel