Cara Membuat Kotak Kode HTML Pada Postingan Blog

Cara membuat kotak kode html pada postingan blog - Bila anda membahas artikel tentang sesuatu yang di dalamnya terdapat kode-kode script seperti kode html yang harus anda cantumkan supaya pengunjung lebih mudah memahaminya, maka anda perlu mengurung atau menaruh kode script tersebut di dalam sebuah kotak yang berbeda dengan pembahasan artikel supaya pengunjung lebih mudah untuk memahami kode dan tidak keliru saat mengcopy kode tersebut.

cara membuat kotak html


Hal ini juga akan membuat artikel yang anda buat dengan memasukkan kode script pada blog akan kelihatan menarik bila dibandingkan dengan biasa saja. Oke kita langsung saja ke poin utama.

Berikut ini cara membuat border / kotak html di dalam postingan blog anda.

1. Pada saat anda membuat artikel dan ingin membuat kotak, silahkan anda beralih dari mode Compose ke mode HTML

2. Nah di bagian HTML terdapat kode-kode tulisan anda. Kemudian anda taruh kode di bawah ini di dalam mode HTML tersebut, Pilih salah satu kode sesuai selera.




<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
Kode Script Anda Di Sini
</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">Kode Script Anda Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;">Kode Script Anda Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">Kode Script Anda Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">Kode Script Anda Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">Kode Script Anda Disini</div>

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;"> Kode Script Anda Disini</div>

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kode Script Anda Disini</div>

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Kode Script Anda Disini</div>

<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Kode Script Anda Disini</div>


Keterangan:

Nah diatas adalah bebera model kotak script yang dapat anda terapkan di blog, silahkan anda pilih saja salah satunya. Ingat, ganti kode yang berwarna merah dengan kode script atau kata kata lain yang ingin anda letakkan pada kolom tersebut.

Jika anda ingin merubah warna kotak silahkan saja anda ubah kode warna HTML nya, atau anda juga bisa modif sendiri kotaknya, mulai dari lengkungan kotak dan sebagainya.

Demikianlah pembahasan mengenai cara membuat kotak html, semoga dapat menambah pengetahuan anda. Silahkan anda coba terapkan di blog. Oke sekian artikel kali ini, semoga bermanfaat buat anda.

Berlangganan update artikel terbaru via email GRATISS !!

13 Responses to "Cara Membuat Kotak Kode HTML Pada Postingan Blog"

  1. Ternyata buat scipt gk segampang yang kita bayangkan yaa

    BalasHapus
  2. ini nanti fungsinya buat apa gan ?
    nanti di taruh di bagian mana ya ?
    sorry masih newbie

    BalasHapus
    Balasan
    1. buat ditaruh di artikel gan, misal ada kata yang penting bisa di taruh di dalam kotak tersebut

      Hapus
  3. kotak script fungsinya untuk apa ya gan?

    BalasHapus
    Balasan
    1. buat ditaruh di artikel gan, misal ada kata yang penting bisa di taruh di dalam kotak tersebut

      Hapus
  4. Nah ini artikel yang saya cari selama ini. Ternyata tidak sulit ya. Makasih informasinya admin.

    BalasHapus
    Balasan
    1. siap, sama-sama semoga bermanfaat gan

      Hapus
  5. Kurang keren gan, lebih baik pake syntax code highlighting

    BalasHapus
  6. owalah gini to caranya , ijin coba ya gan. thanks sharenya heuhbeu

    BalasHapus

Bila ada pertanyaan atau masukan, silahkan tinggalkan komentar agan, terima kasih.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel