Membuat Kotak Html Keren

Membuat kotak dengan kode HTML yang keren,Kali ini saya akan share demi melengkapi tutorial dan trick untuk mendesign blog.semoga tutorial yang saya bagikan ini berguna untuk para pengunjung di blog saya.Oke langsung saja.

Membuat kotak untuk postingan blog atau buat apa saja terserah anda disini saya akan berikan contoh dan script nya plus penjelasan apa yang bisa anda rubah nanti pada kotak.

Membuat kotak Type Groove

Contoh bentuknya seperti dibawah ini,penampakannya,

TEXT DISINI

Scriptnya

<div style="width: 500px; height: 100px; background-color: #a9bac2; border-color: #000000; border-width: 4px; border-style: groove; color: #ff0303; font-size: 14px; font-family: Arial; overflow: auto;"> TEXT DISINI</div>

Membuat Kotak double Border

Contoh penampakannya

Text anda disini

Script nya

<div style="width: 500px; height: 100px; background-color: #a9bac2; border-color: #000000; border-width: 5px; border-style: double; color: #ff0303; font-size: 14px; font-family: Arial; overflow: auto;"> Text anda disini</div>

Membuat kotak model inset

contoh penampakan

Text Anda

Scriptnya

<div style="width: 500px; height: 100px; background-color: #a9bac2; border-color: #000000; border-width: 5px; border-style: inset; color: #ff0303; font-size: 14px; font-family: Arial; overflow: auto;"> Text Anda</div>

Membuat Kotak Type Dooted

Contoh penampakannya

TEXT DISINI

Scripnya

<div style="width: 500px; height: 100px; background-color: #a9bac2; border-color: #000000; border-width: 2px; border-style: dotted; color: #ff0303; font-size: 14px; font-family: Arial; overflow: auto;"> TEXT DISINI</div>

Membuat Kotak model Dashed

Contoh Penampakannya

TEXT DISINI

Scriptnya

<div style="width: 500px; height: 100px; background-color: #a9bac2; border-color: #000000; border-width: 2px; border-style: dashed; color: #ff0303; font-size: 14px; font-family: Arial; overflow: auto;"> TEXT DISINI</div>

Membuat Kotak Model Ridge

Contoh Penampakannya

TEXT DISINI

Scriptnya

<div style="width: 500px; height: 100px; background-color: #a9bac2; border-color: #000000; border-width: 7px; border-style: ridge; color: #ff0303; font-size: 14px; font-family: Arial; overflow: auto;"> TEXT DISINI</div>


Dari 6 model diatas silahkan anda ganti Width,backgroundnya,border colornya font size,whatever terserah selera anda,silahkan anda ganti.

Oke sekian dulu sob membuat kotak dengan HTML,besok kita lanjut dengan tutorial yang lainnya.

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest

Related Articles :

• Menghilangkan Obeng Kunci Pada BlogMenghilangkan obeng kunci pada blog atau menghilangkan Quick edit dengan mudah Ada sebagian orang yang resah karena blog mereka tert ...
• Submit Blog Baru Untuk Index Search EngineSalam Sobat Blogger, Saat kita baru pertama buat blog baru dengan URL baru,alamat URL sobat yang baru,alamat sobat belum terindek di s ...
• Cara Meberi Alt Tag Pada GambarCara memberi alt tag pada gambar postingan Kemarin kita sudah melihat tutorial blog tentang cara membuat postingan terbaru pada blogge ...
• Membuat Klik Show Dipostingan BlogMembuat klik show di postingan blog,, Cara membuat tombol klik show saat anda memposting blog,banyak para publisher menggunakan script ...
• Cara Ganti Gambar Pavicon BlogCara merubah Gambar pavicon blog,,Kali ini saya akan memposting tentang gambar pavicon pada blog,default nya pavicon blog bergambar hu ...