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 wordpressContoh 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
Leave a Reply