Cara membuat kotak warna ( highlight box ) / scroll box untuk kode HTML di postingan blog

Ini adalah cara membuat kotak warna ( highlight box ) untuk kode HTML di postingan blog, terkadang kita ingin membuat kode html dan tulisan artikel terpisah dengan sebuah kotak, baik itu kotak scroll maupun dengan warna yang kita inginkan.

Silahkan pilih dibawah ini :

1. Kotak simpel warna biru

Silahkan masukan kode script/tulisan anda disini

<div style="border: 0; padding: 10px; background-color: #82CAFA; text-align: left;"> Silahkan masukan kode script/tulisan anda disini </div>

2. kotak simpel warna jingga

Silahkan masukan kode script/tulisan anda disini

<div style="border: 2px #5f200e solid; padding: 10px; background-color: #d9da81; text-align: left;"> Silahkan masukan kode script/tulisan anda disini </div>

3. Kotak dengan garis 1

Silahkan masukan kode script/tulisan anda disini

<div style="border: 3px #5f200e outset; padding: 10px; background-color: #d9da81; text-align: left;"> Silahkan masukan kode script/tulisan anda disini</div>

4. kotak dengan garis 2

Silahkan masukan kode script/tulisan anda disini

<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Silahkan masukan kode script/tulisan anda disini</</div>

5. kotak dengan garis luar

Silahkan masukan kode script/tulisan anda disini

<div style="border: 2px #006400 ridge; padding: 10px; background-color:#c2c2c2; text-align: left;"> Silahkan masukan kode script/tulisan anda disini</div>

6. Kotak dengan garis dobel

Silahkan masukan kode script/tulisan anda disini

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Silahkan masukan kode script/tulisan anda disini</div>

7. kotak dengan garis putus putus

Silahkan masukan kode script/tulisan anda disini

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; text-align: left;"> Silahkan masukan kode script/tulisan anda disini</div>

8. kotak dengan garis putus putus

Silahkan masukan kode script/tulisan anda disini

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Silahkan masukan kode 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 kode 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 kode script/tulisan anda disini </div>

ket :  400px : adalah lebar kotak
          50px : adalah tinggi kotak

Tag : Tips Blog

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn