Membuat Macam Bingkai/Border Tulisan Pada Blog/Web



Bagaimana membuat bingkai/border tulisan pakai script berikut ini :

Script 1

<div style="border: 1px solid #CCC; margin: 10px 0px; padding: 10px; width: auto; height: auto; background-color:#EFEFEF; text-align: center;">Tulisan temen-temen yang akan ditampilkan disini</div>


Tulisan temen-temen yang akan ditampilkan disini

Keterangan: Border: 1px solid #CCC, berarti ketebalan garis (border) adalah 1px dengan warna abu-abu (mengenai kode warna dapat dilihat disini). Margin: 10px 0px, berarti margin atas-bawah 10 px dan margin kiri-kanan 0 px. Padding: 10px, berarti jarak tulisan ke border adalah 10px. Perintah auto pada width dan height supaya lebarnya mengikuti lebar kolom yang tersedia, sedangkan tingginya mengikuti isi (tulisan) yang dimasukkan kedalamnya. Kamu bisa merubah perintah auto kedalam bentuk pixel, misalnya: 100px. Background-color:#EFEFEF, berarti kotak berwarna abu-abu. Jika ingin dihilangkan warnanya, ganti kode #EFEFEF dengan none atau hapus perintah background-color berikut kode warnanya. Text-align: left, berarti tulisan dalam bentuk rata kiri. Jika kamu ingin mengubahnya, ganti saja left-nya dengan right, center, atau justify (rata kanan = right, rata tengah = center, dan rata kiri-kanan = justify).



Script 2

<textarea rows="5" cols="50">Tulisan yang temen-temen ingin tampilkan disini</textarea>





Script 3

<blockquote class="tr_bq" style="-webkit-box-shadow: rgb(204, 204, 204) 0px 5px 15px; background-color: #ffffcc; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; border: 2px dotted rgb(255, 204, 102); box-shadow: rgb(204, 204, 204) 0px 5px 15px; color: #6e6e6e; font-family: Georgia, 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif; font-size: 14px; height: auto; line-height: 19.600000381469727px; padding: 10px; width: 431.20001220703125px;">
Tulisan Sobat</blockquote>
Tulisan Sobat




Script 4

<div style="overflow:auto; border: 1px solid #CCC; margin: auto; padding: 3px; width: 95%; height: 100px; background-color: #49B2D6; text-align: justify;">Tulisan yang temen-temen ingin tampilkan disini</div>


Tulisan yang temen-temen ingin tampilkan disini



Script 5

<font style="border: 2px solid red; display: block; padding: 3px;">Teks yang ingin diberi border</font>

Teks yang ingin diberi border



Script 6

<font style="border: 2px dashed purple; display: block; padding: 3px;">Teks yang ingin diberi border</font>

Teks yang ingin diberi border



Script 7

<font size="15" style="background: #222; color: lime; border: 2px outset orange; padding: 3px; display: block;">Teks Yang Dihiasi</font>

Teks Yang Dihiasi



Script 8

<div style="background:green;border:1px solid #000; padding:6px; margin-left:20px"> Ini adalah text anda </div>


Ini adalah text anda



Script 9

<div style="border: 4px double #000000; background-color:#00CCFF; padding: 5px; width: auto;"> Tulisan,gambar,maupun kode script </div>


Tulisan,gambar,maupun kode script



Script 10

<div style="border: 4px groove #000000; background-color:#00CCFF; padding: 5px; width: auto;"> Tulisan,gambar,maupun kode script </div>


Tulisan,gambar,maupun kode script




Script 11

<div style="width:200px;height:100px;border:6px outset orange;">
Tulisan
</div>




Tulisan  




Script 12

<div style="width:200px;height:100px;border:6px double orange;">
Tulisan
</div>




Tulisan



Colour Code : Here or Here


Masih Terus Update................

0 Response to "Membuat Macam Bingkai/Border Tulisan Pada Blog/Web"

Post a Comment