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 :)
 | |
|
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.
 | |
|
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
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;">
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;">
<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>
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>
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>
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>
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 :
- height = untuk mengganti ukuran tinggi kotak (dalam pixel)
- overflow = untuk mengatur scrollbar (jika ingin dihilangkan bisa ganti "auto" menjadi "none")
- 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
- color= warna teks kode, untuk menggantinya bisa menggunakan kalkulator warna atau pun menuliskan teks warnanya
- border= bentuk garis pada kotak script, dapat berupa dotted, dash
- 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 :)
0 komentar:
Posting Komentar