Kode-Kode HTML Untuk Membuat Kotak Di Postingan Blog

kode HTML membuat kotak dalam postingan

Pada artikel Cara Membuat atau Memodifikasi Kotak Script atau Border dengan HTML telah diuraikan bagaimana cara membuat atau memodifikasi Kotak Script atau border dengan kode HTML baik untuk postingan maupun untuk template blog, dan pada catatan kali ini saya akan menyajikan bentuk-bentuk kotak yang sudah dapat digunakan atau sudah jadi :



<div style="background-color: #f3f3f3; padding: 10px; text-align: left;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 1px solid #444; background-color: #eaeaea; padding: 10px; text-align: left;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 3px solid #FF0000; background-color: #; padding: 5px; text-align: center; width: auto; height: auto; ">SOBAT MENULISNYA DI SINI</div>

<div style="border: 3px #1780dd double; background-color: azure; padding: 10px; text-align: left;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 3px #8B0000 dashed; background-color: #7FFFD4; padding: 10px; text-align: left;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 3px #FF0000 dotted; background-color: #FAEBD7; padding: 10px; text-align: left;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 5px inset #1780dd; background-color: white; padding: 10px; text-align: left;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 5px groove #0000FF; background-color: #FFE4C4; padding: 10px; text-align: left;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 5px ridge #000000; background-color: #F0F8FF; padding: 10px; text-align: left;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 4px solid #fff; background-color: #F5F5DC; padding: 10px; t-align: left; border-radius: 10px;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 2px solid red; background-color: #7FFF00; padding: 10px; t-align: left; border-radius: 10px;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 2px solid black; background-color: #FF00FF; padding: 10px; t-align: left; border-radius: 10px 0px 0px 0px;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 2px solid red; background-color: white; padding: 10px; t-align: left; border-radius: 0px 10px 0px 0px;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 2px solid #000080; background-color: #F0FFF0; padding: 10px; t-align: left; border-radius: 0px 0px 10px 0px;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 2px solid green; background-color: #FFE4E1; padding: 10px; t-align: left; border-radius: 0px 0px 0px 10px;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 2px solid blue; background-color: #F5FFFA; padding: 10px; t-align: left; border-radius: 10px 10px 0px 0px;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 2px solid #FF0000; background-color: white; padding: 10px; t-align: left; border-radius: 10px 0px 10px 0px;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 2px solid black; background-color: #EEE8AA; padding: 10px; t-align: left; border-radius: 10px 0px 0px 10px;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 2px solid green; background-color: #B0C4DE; padding: 10px; t-align: left; border-radius: 0px 10px 0px 10px;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 2px solid #00FF00; background-color: #FFB6C1; padding: 10px; t-align: left; border-radius: 0px 10px 10px 0px;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 4px double #fff; background-color: #6fa8dc; padding: 10px; t-align: left; border-radius: 10px;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 4px double #0000CD; background-color: #00FA9A; padding: 10px; t-align: left; border-radius: 10px 10px 10px 0px;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 1px solid green; background-color: #FFFFE0; padding: 10px; t-align: left; border-left: 10px solid #0000FF;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 1px solid green; background-color: #FFFFE0; padding: 10px; t-align: left; border-left: 10px solid #0000FF; border-right: 10px solid red;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 1px solid #FF4500; background-color: #FDF5E6; padding: 10px; t-align: left; border-right: 15px solid #0000FF;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 1px solid #FF4500; background-color: #FDF5E6; padding: 10px; t-align: left; border-bottom: 5px solid #0000FF;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 1px solid #FF4500; background-color: #FDF5E6; padding: 10px; t-align: left; border-top: 5px solid #0000FF;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 1px solid #FF4500; background-color: #FDF5E6; padding: 10px; t-align: left; border-left: 5px solid #0000FF; border-bottom: 5px solid green;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 4px solid #800000; background-color: #; padding: 10px; t-align: left; border-radius: 10px 0px 0px 10px; border-left: 5px solid #0000FF;"SOBAT MENULISNYA DI SINI</div>

<div style="background-color: #febf80; padding: 10px; t-align: left; border-left: 5px solid #0000FF; border-radius: 10px;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 2px solid black; background-color: #febf80; border-right: 5px solid #0000FF; border-radius: 10px; padding: 10px; t-align: left;">SOBAT MENULISNYA DI SINI</div>

<div style="border-left: 10px solid gray; background-color: ghostwhite; padding: 20px; border-radius: 20px; border-right: 10px solid gray;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 4px outset #fff; background-color: #FFE4E1; padding: 10px; t-align: left; border-radius: 10px;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 4px outset blue; background-color: #FFE4E1; padding: 10px; t-align: left; border-radius: 10px;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 8px outset #D4771A; background-color: #F0FFFF; padding: 10px; t-align: left; border-radius: 10px;">SOBAT MENULISNYA DI SINI</div>

<div style="border: 2px solid gray; background-color: white; padding: 5px; overflow: auto; height: 100px; width: 400px;">SOBAT MENULISNYA DI SINI
SOBAT MENULISNYA DI SINI
SOBAT MENULISNYA DI SINI
SOBAT MENULISNYA DI SINI
SOBAT MENULISNYA DI SINI
SOBAT MENULISNYA DI SINI
</div>

<div style="border: 2px solid gray; background-color: white; padding: 5px; overflow: auto; height: 100px; width: auto;">SOBAT MENULISNYA DI SINI
SOBAT MENULISNYA DI SINI
SOBAT MENULISNYA DI SINI
SOBAT MENULISNYA DI SINI
SOBAT MENULISNYA DI SINI
SOBAT MENULISNYA DI SINI
</div>

<div style="border:1px solid black;width:auto ;height:100px;overflow-y:hidden;overflow-x:scroll;"> <p style="width: 1000%;">SOBAT MENULISNYA DI SINI</p></div>


<div style="border: 2px solid black; height: 100px; overflow-x: scroll; overflow-y: scroll; width: auto;"> <div style="width: 2000%;"> SOBAT MENULISNYA DI SINI
SOBAT MENULISNYA DI SINI
SOBAT MENULISNYA DI SINI
SOBAT MENULISNYA DI SINI
SOBAT MENULISNYA DI SINI
SOBAT MENULISNYA DI SINI
SOBAT MENULISNYA DI SINI
</div></div>






Demikian Catatan Kecil tentang :
Terima kasih atas kunjungannya dan "Selamat Berkreasi Semoga Sukses"

Selanjutnya 
« Prev Post
 Sebelumnya
Next Post »

Catatan Terkait



Kode-Kode HTML Untuk Membuat Kotak Di Postingan Blog