Membuat Kotak untuk Posting di Blog adalah Salah
satu cara agar tampilan website/blog lebih menarik dan informatif
adalah dengan menambahkan CSS (Cascading Style Sheet). Tetapi kali ini
tidak akan dibahas apa itu CSS, tetapi langsung menerapkan dan mencoba
untuk membuat kotak informasi, peringatan, atau sejenisnya dalam sebuah
tulisan di web/blog dengan salah satu fungsi/kode CSS.
Hal ini bisa kita lakukan dengan kode (tag) HTML div.
DIV merupakan kode HTML yang akan menghasilkan blok paragraf, biasa
saya istilahkan dengan Box, karena dengan menuliskan paragraf atau
kalimat diantara tag <div>....</div> maka kalimat/paragraf
tersebut akan tampil dalam box yang bisa kita atur tampilannya. Untuk
memudahkannya, berikut berbagai contoh dan penggunaan tag DIV.
Simple Box
Kode Script Anda Disini…….
<div style="border: 2px #5f200e solid; padding: 10px; background-color: #d9da81; text-align: left;"> Kode Script Anda Disini…….</div>Simple Box 2
Kode Script Anda Disini…….
<div style="border: 0; padding: 10px; background-color: #82CAFA; text-align: left;"> Kode Script Anda Disini…….</div>Ridge Border
Kode Script Anda Disini……
<div style="border: 2px #006400 ridge; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kode Script Anda Disini……</div>Inset Border
Kode Script Anda Disini……
<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Kode Script Anda Disini……</</div>Outset Border
Kode Script Anda Disini…….
<div style="border: 3px #5f200e outset; padding: 10px; background-color: #d9da81; text-align: left;"> Kode Script Anda Disini…….</div>
Double Border
Kode Script Anda Disini…….
<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Kode Script Anda Disini…….</div>Dotted Border
Kode Script Anda Disini……
<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kode Script Anda Disini……</div>Dashed Border
Kode Script Anda Disini……
<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; text-align: left;"> Kode Script Anda Disini……</div>Scroll Box
<div style="border: 2px #006400 solid; padding: 10px;
background-color: #82CAFA; overflow: auto; height: 50px; width: 300px;
text-align: left;"> Kode Script Anda Disini…… </div>
<div style="border: 2px #006400 solid; padding: 10px; background-color: #82CAFA; overflow: auto; height: 50px; width: 300px; text-align: left;"> Kode Script Anda Disini…… </div>
Pilih salah satu contoh diatas yang Anda sukai, kemudian copy code scriptnya, dan pastekan code itu di mode HTML di post editor Blogger saat posting artikel. Untuk Cek buka Compose
Anda bisa rubah ukuran border, warna border, ukuran box, warna
background, sesuai warna yang disukai dan ukuran yang dikehendaki.
Catatan :
0 komentar:
Posting Komentar