MEMBUAT TEMPAT MENULIS KODE DALAM BLOG

A. Tempat Menulis Kode

Kode HTML dalam postingan blog agar lebih rapi diletakkan dalam frame sebuah kotak. Terdapat banyak jenis kotak yang dapat dibuat dengan HTML.

Dalam postingan ini akan diberikan beberapa contoh frame beserta kode HTML nya. Frame yang ada merupakan contoh hasilnya, sedangkan Kode yang berada di dalam frame adalah kode untuk membuat frame atau kotak tersebut.

B. Contoh Frame dan kode html

Dibawah ini terdapat beberapa contoh kotak frame untuk meletakkan Code dalam wordpress

Contoh 01  :

1
2
3
4
5
6
<div style="width: auto; color: #000; background-color: #f1f1f1; border: 1px solid #EBEBEB; margin: 0; padding: 10px; border-radius: 4px;">
 
Contoh  :
<div style="width: auto; background-color: #fff; padding: 4px 4px 4px 7px; border-left: 4px solid #33CCCC; font-size: 14px; border-radius: 4px;">
</div>
</div>


Contoh 02

1
2
<div style="width: auto; background-color: #ffefef; border: 2px solid #cce680; padding: 8px; text-align: left;">
</div>


Contoh 03

Contoh :
1
2
3
4
<div style="width:auto;height:25px;position:relative;left:5px;background:linear-gradient(-90deg,#D7D7D7,#A9A9A9) repeat scroll 0 0 transparent;border-bottom:1px solid #848484;border-top:1px solid #F5F5F5;border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:0 1px 1px rgba(0,0,0,0.15);">
<span style="margin:0 0 -5px;padding:18px;position:relative;text-shadow:0 1px 0 rgba(255,255,255,0.7);font:bold 15px/25px Georgia, serif;color:#000000;">Contoh : </span></div>
 
<div style="width:auto;height:90px;position:relative;left:5px;background:#fff;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4);margin-bottom:20px;padding:15px 18px;"></div>

Untuk mencopy code 1, 2, 3 klik disini

Keterangan:
  • untuk kode-kode di atas seperti width selain auto dapat di ganti dengan persen misal 70%
  • backgroung color dapat diganti dengan warna yang diinginkan
  • border 1px menerangkan ketebalan dari border tersebut
  • padding adalah jarak antara tulisan dan sisi yang mengelilinginya
  • kanan, atas,bawah, dan kiri. Backgroun:linear-gradient adalah untuk
  • memberi warna gradient pada kotak

Be the first to comment

Leave a Reply

Your email address will not be published.


*