Tutorial Lengkap Cara Membuat Kotak Script Di Dalam Postingan Blog



Hay sobat RT/RW NET Indonesia. Kali ini saya mau kasih tutorial cara membuat kotak script di dalam postingan blogspot, untuk sobat sekalian yang pengen blog nya keren ketika posting terkait Cascading Style Sheets (css) atau Hypertext Markup Language (HTML) tutorial kali ini sangatlah cocok lho buat kalian :)

membuat kotak script di postingan blog


Kotak script ini sendiri berupa text box yang bisa di isikan dengan script/kode misal html,css, php, java script. Banyak juga kegunaan dari kotak script ini teman-teman.
kotak script lainnya

Tampilan dari script yang akan teman-teman bagikan terlihat lebih rapi, dan juga bisa di modifikasi berdasarkan bentuk dan warnanya.

Dan yang terutama adalah kenyamanan pengunjung blog kita agar semakin nyaman berlama-lama membaca di website atau blog teman-teman. Langsung saja ya, silahkan scroll ke bawah. lanjut.

Cara Membuat Kotak Script Di Dalam Postingan Blog


1. Pilih create new post seperti melakukan posting biasa.

    Lalu tekan menu HTML (biasa defaultnya Compose)



2. Selanjutnya, copy paste kode dibawah ini dan ganti tulisan berwarna dibawah sesuai kode/script yang teman-teman inginkan.


<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white; border-bottom: 5px solid #2288dd; border-radius: 10px; border-top: 5px solid red; color: red; height: 90px; overflow: auto; padding: 10px;">

Masukkan kode teman-teman di sini. by blogrtrwnet.blogspot.com</div>

Kotak di atas tidak saya atur lebarnya (width) supaya flexible mengikuti lebar kolom postingan.

Variasi yang lainnya seperti berikut ini teman-teman.

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-bottom: 5px solid #2288dd; border-radius: 10px; border-right: 5px solid #2288dd; color: red; height: 90px; overflow: auto; padding: 10px;">

Masukkan kode teman-teman di sini. by blogrtrwnet.blogspot.com</div>

<div style="background-color: #af7da3; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;height:60px">

Masukkan kode teman-teman di sini. by blogrtrwnet.blogspot.com</div>

<div style="background-color: green; border-radius: 10px; border: 4px double rgb(255, 255, 255); height: 60px; padding: 10px;">Masukkan kode teman-teman di sini. by blogrtrwnet.blogspot.com </div>

<div style="background-color: green; border-radius: 10px; border: 4px double rgb(255 , 255 , 255); height: 260px; padding: 10px; width: 150px;">

Masukkan kode teman-teman di sini. by blogrtrwnet.blogspot.com</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: gold; border-bottom: 5px solid green; border-radius: 40px 10px; border-right: 5px solid green; color: red; height: 80px; overflow: none; padding: 10px;">

Masukkan kode teman-teman di sini. by blogrtrwnet.blogspot.com</div>

<div style="background-color: #e5802b; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 4px outset #fff; height: 60px; padding: 10px;">

Masukkan kode teman-teman di sini. by blogrtrwnet.blogspot.com</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; height: 100px; overflow: auto; padding: 10px;color:blue">Masukkan kode teman-teman di sini. by blogrtrwnet.blogspot.com</div>

Catatan :

  1. height = untuk mengganti ukuran tinggi kotak (dalam pixel)
  2. overflow = untuk mengatur scrollbar (jika ingin dihilangkan bisa ganti "auto" menjadi "none")
  3. background-color = warna background (untuk menggantinya bisa ganti #ffe599 menjadi #fff, #000, kalkulator warna bisa ke encycolorpedia.id . Atau bahkan bisa menggunakan text misal background-color:yellow atau background-color :red
  4. color= warna teks kode, untuk menggantinya bisa menggunakan kalkulator warna atau pun menuliskan teks warnanya
  5. border= bentuk garis pada kotak script, dapat berupa dotted, dash
  6. border-radius= untuk mengatur setiap sudut kotak jadi bundar (melingkar)

Nah, kira-kira seperti itu ya teman-teman tutorial Cara Membuat Kotak Script Di Dalam Postingan Blog. Semoga bermanfaat dan selamat mencoba ya :)

You may like these posts