Ini yaitu cara menciptakan kotak warna ( highlight box ) untuk instruksi HTML di postingan blog, terkadang kita ingin menciptakan instruksi html dan goresan pena artikel terpisah dengan sebuah kotak, baik itu kotak scroll maupun dengan warna yang kita inginkan.
Silahkan pilih dibawah ini :
1. Kotak mudah warna biru Silahkan masukan instruksi script/tulisan anda disini
<div style="border: 0; padding: 10px; background-color: #82CAFA; text-align: left;"> Silahkan masukan instruksi script/tulisan anda disini </div>
2. kotak mudah warna jingga
Silahkan masukan instruksi script/tulisan anda disini
<div style="border: 2px #5f200e solid; padding: 10px; background-color: #d9da81; text-align: left;"> Silahkan masukan instruksi script/tulisan anda disini </div>
3. Kotak dengan garis 1
Silahkan masukan instruksi script/tulisan anda disini
<div style="border: 3px #5f200e outset; padding: 10px; background-color: #d9da81; text-align: left;"> Silahkan masukan instruksi script/tulisan anda disini</div>
4. kotak dengan garis 2
Silahkan masukan instruksi script/tulisan anda disini
<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Silahkan masukan instruksi script/tulisan anda disini</</div>
5. kotak dengan garis luar
Silahkan masukan instruksi script/tulisan anda disini
<div style="border: 2px #006400 ridge; padding: 10px; background-color:#c2c2c2; text-align: left;"> Silahkan masukan instruksi script/tulisan anda disini</div>
6. Kotak dengan garis dobel
Silahkan masukan instruksi script/tulisan anda disini
<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Silahkan masukan instruksi script/tulisan anda disini</div>
7. kotak dengan garis putus putus
Silahkan masukan instruksi script/tulisan anda disini
<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; text-align: left;"> Silahkan masukan instruksi script/tulisan anda disini</div>
8. kotak dengan garis putus putus
Silahkan masukan instruksi script/tulisan anda disini
<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Silahkan masukan instruksi script/tulisan anda disini</div>
9. kotak dengan scroll
<div style="border: 2px #006400 solid; padding: 10px; background-color: #82CAFA; overflow: auto; height: 50px; width: 400px; text-align: left;"> Silahkan masukan instruksi script/tulisan anda disini </div>
<div style="border: 2px #006400 solid; padding: 10px; background-color: #82CAFA; overflow: auto; height: 50px; width: 400px; text-align: left;"> Silahkan masukan instruksi script/tulisan anda disini </div>
ket : 400px : adalah lebar kotak
50px : adalah tinggi kotak Sumber http://www.hendrisetiawan.com