Cara Membuat Kotak Script Di Dalam Postingan Blog

Carapos - Halo teman-teman blogger semua, sudah lama nih tidak posting artikel. Kali ini saya mau kasih tutorial cara membuat kotak script di dalam postingan blogspot, ya walaupun pengetahuan saya terkait Cascading Style Sheets (css) atau Hypertext Markup Language (HTML cukup minim ya. hahaha.
Ngga papa ya, yang penting berbagi ilmu. :)

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

Cara Membuat Kotak Script Di Dalam Postingan Blog

1. Pilih create new post seperti melakukan posting biasa.
    Lalu tekan menu HTML (biasa defaultnya Compose)
cara membuat kotak script di blog
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 carapos.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 carapos.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 carapos.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 carapos.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 carapos.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 carapos.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 carapos.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 carapos.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. Selanjutnya, silahkan dicoba ya. :)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel