back Sekai No Shouri: Cara membuat kotak script di postingan blog

Tuesday, May 24, 2016

Cara membuat kotak script di postingan blog

Cara membuat kotak script adalah kotak pada postingan  agar lebih simple dan mudah di pahami oleh semua orang. Kodenya ada d bawah ni :

<div style="border: 1px #DC143C Inset; padding: 10px;background-color:#F2FEBF;
text-align: left;">(Ganti tulisan ini)</div>
lankah cara memasngnya :
  1. Buat Entri, lalu pilih HTML di atas pojok kanan.
  2. Copas kodenya di HTML.
  3. Lihat hasilnya, pilih Compose di atas pojok kanan.
  4. ganti tulisan sesuai selera anda.
Keterangan kodenya :
warna merah (border. 1px) = ketebalan garis pinggir
warna biru (#DC143c) = warna garis pinggir
warna pink (#F2FEBF) = warna backgroundnya/latar belakang
warna orange (Inset) = bentuk pola garisnya
Macam-macam bentuk pola garisnya:
  • Inset
  • Dashed
  • Outset
  • Ridge
  • Dotted
  • Double
  • Solid
  • Groove
Yang ini lebih simple kodenya, lihat di bawah ini :
<div style="background-color: gold; border: 2px #006400 solid; padding: 10px; text-align: left;">
tulis kodenya</div>
Yang ini kodenya dengan panjang, lebar, dan scroll, lihat di bawah ini:

<div style="background-color: blue; border: 2px #006400 solid; height: 65px; overflow: auto; padding: 10px; text-align: left; width: 370px;">tulis kodenya disini</div>




lihat perbedaannya di antara kode di bawah ini, lebih simpel mana :
<div style="background-color: white; border: 2px #006400 solid; padding: 10px; text-align: left;">tulis kodenya</div>
<div style="border: 1px #DC143C Inset; padding: 10px;background-color:#F2FEBF;
text-align: left;">(Ganti tulisan ini)</div>
Yang atas atau yang bawah.

Cara mewarnai tulisan di dalam kotak, salin di HTML, lihat kode di bawah ini :
<span style="color: red;"> jangan di salin tulisan yang ditebal hanya kodenya </span>
dan akhirnya penampakan jadinya seperti Ini :
jangan di salin tulisan yang ditebal hanya kodenya
Warna merah sesuai anda.
itulah beberapa tips cara membuat kotak tulisan di postingan blog.

No comments:

Post a Comment