Cara Membuat Kotak Script di Postingan Blog


Cara Membuat Kotak Script di Postingan Blog

Zona TutorialCara Membuat Kotak Script di Postingan Blog, bila kita ingin membuat suatu tutorial yang mengharuskan pembuat posting untuk menampilkan script baik JAVA, CSS, HTML ataupun script lainya terkadang kita akan bingung karena kotak script tidak di sajikan dalam lembar kerja atau menu di halaman posting kita secara default maka kali ini saya membagikan cara untuk membuat kotak script sederhana, cara ini juga mudah bisa digunakan untuk memberi catatan tertentu pada blog. 

Sebenarnya sobat juga dapat membuat kotak script dengan menggunakan Prism Syntag Highlighter memang terlihat bagus dan profesional akan tetapi menurut saya akan mempengaruhi beban load blog saat membuaka suatu blog karena script CSS yang di tanam pada template lumayan panjang. sehingga tidak ada salahnya untuk mencoba untuk menggunakan script berikut ini, mari simak tutorial berikut.


Tutorial Membuat Kotak Script di Postingan Blog :

  1. Buka dashboard blog anda.
  2. Buat Entry baru - pilih HTML, lalu copykan script di bawah ini.

Kotak Script Dotted :

<div style="border: 3px #9191ed Dotted; padding: 10px; background-color:#eaeaea; text-align: left;"><code>
TULIS KODE/SCRIPT ANDA DISINI
</code></div>

Kotak Script Scroll :

<div style="background-color: #ffeb7e; height: 50px; overflow: auto; padding: 10px; text-align: left; width: 600px;">
Pasang Kode Script Anda Disini</div>

Kotak Script Blue Navy :

<div style="border-radius: 10px; border: 4px double #fff; padding: 10px; background-color:#eaeaea; text-align: left;"><code>
TULIS KODE/SCRIPT ANDA DISINI
</code></div>


Kotak Script Left Border :

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


  3. Nanti hasilnya akan seperti berikut ini (klik gambar untuk memperbesar).

tutorial membuat kotak script


Cara Membuat Kotak Script di Postingan Blog

Anda tinggal beralih ke COMPOSE untuk mengislkan script yang ingin di tampilkan dalam kotak tersebut. kita juga bisa mengganti warna background dengan sedikit meng edit script sesuai dengan keinginan sobat untuk kode yang berwarna merah dibawah ini. 
  • border: 3px = ketebalan border kotak script.  #9191ed = warna border kotak script.
  • Dotted : bentuk border putus putus. (kode ini bisa diganti dengan kode yang lain atau juga bisa dihilangkan).
  • Text-align:left; = posisi tulisan didalam kotak di kiri ( dapat diganti dengan center atau right)
  • background-color:#eaeaea; = warna dalam kotak tersebut.
  • padding:10px = lebar kotak ke bawah.
Sekian yang dapat saya bagikan kali ini tentang cara untuk membuat kotak script pada blog, selamat mencoba dan semoga bermanfaat....

1 Response to "Cara Membuat Kotak Script di Postingan Blog"

  1. thx gan, tp gimana ya kalau script diatas agar tidak terpotong oleh iklan yg ditengah.

    ReplyDelete

Iklan Atas Artikel

Iklan2

Iklan Tengah Artikel 2

Iklan Bawah Artikel