Cara Membuat Kotak Kode Script di 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 ansa merasa bingung gimana cara membuat box script.

Sebelumnya saya juga merasa bingung bagaiman 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 membuat kotak kode script untuk digunakan dalam postingan, maka kalian mendapatkan keuntungan dari memasang kotak tersebut yaitu postingan kalian akan terlihat rapi, tampilannya postingan akan terlihat keren dan elegan serta akan membuat nyaman pembaca bog anda.

Cara Mudah Membuat Kotak Kode Script Sederhana

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 .
Cara Membuat Kotak Kode Script di Dalam Postingan

Kotak Kode Elegan

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>

Kotak Kode Scroll

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>

Kotak Kode Keren Lainnya

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.
Baca juga : Cara Membuat Postingan atau Artikel Blog Valid AMP

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

0 Response to "Cara Membuat Kotak Kode Script di Dalam Postingan"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel