Cara Memberi Border/Kotak Pada Tulisan

Salam Jumpa Kembali Sobat Blogger.com

Sobat blogger, Anda tentu sering melihat bukkan sebuah kalimat, kode script, ataupun gambar yang memiliki border dalam sebuah postingan ?. nah semua itu akan terbingkai saat kita mengetikkan postingan kita dan memberi sedikit kode HTML pada bagian HTML postingan. Lalu bagaimana caranya? Anda Ikuti saja langkah-langkah dibawah ini :

• Pertama tentunya Anda harus masuk kedalam menu blog pada bagian pos.
• Kemudian ketikkan postingan Anda secara biasa pada bagian Compose
• Dan disaat akan memasukkan border kedalam postingan Anda maka beralihlah dari menu Compose menuju menu HTML dan pastekan kode dibawah ini tepat diakhir kode terakhir pada bagian HTML.

 Perhatian! : Setelah Anda mem_paste_kan kode border di bawah ini maka beralihlah kembali ke dalam menu Compose dan ketikkan tulisan di dalam bordernya.

Bentuk dan Kode HTML Border 1 :

<div style="-moz-border-radius: 20px 10px 20px 10px; -webkit-border-radius: 20px 10px 20px 10px; background-color: #cccccc; border-radius: 20px; border: 2px solid black; color: black; font-family: Arial; padding: 5px;">Tepi Kiri Kanan Melengkung</div>

Bentuk dan Kode HTML Border 2 :

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

Bentuk dan Kode HTML Border 3 :

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

Bentuk dan Kode HTML Border 4 :

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

Bentuk dan Kode HTML Border 5 :

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

Bentuk dan Kode HTML Border 6 :

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

Bentuk dan Kode HTML Border 7 :

<div style="border: 3px #000099 solid; padding: 5px; background-color: #00FFCC; text-align: left"> Tulisan,gambar,maupun kode script</div>

Bentuk dan Kode HTML Border 8 :

<div style="-moz-border-radius: 1em 0em 0em 0em; background-color: red; border-radius: 1em 0em 0em 0em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">Pojok Kiri Atas Melengkung</div>

Bentuk dan Kode HTML Border 9 :

<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>

Bentuk dan Kode HTML Border 10 :

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; text-align: left;"> Kode Script Anda Disini……</div>

Bentuk dan Kode HTML Border 11 :

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kode Script Anda Disini……</div>

Bentuk dan Kode HTML Border 12 :

<div style="-moz-border-radius: 0em 1em 0em 0em; background-color: red; border-radius: 0em 1em 0em 0em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">Pojok Kanan Atas Melengkung</div>

Bentuk dan Kode HTML Border 13 :

<div style="-moz-border-radius: 0em 0em 0em 1em; background-color: red; border-radius: 0em 0em 0em 1em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">Pojok Kiri Bawah Melengkung</div>

Bentuk dan Kode HTML Border 14 :

<div style="-moz-border-radius: 0em 0em 1em 0em; background-color: red; border-radius: 0em 0em 1em 0em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">Pojok Kanan Bawah Melengkung</div>

Bentuk dan Kode HTML Border 15 :

<div style="-moz-border-radius: 1em 0em 0em 1em; background-color: green; border-radius: 1em 0em 0em 1em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">Tepi Kiri Melengkung</div>

Bentuk dan Kode HTML Border 16 :

<div style="-moz-border-radius: 1em 0em 0em 1em; background-color: green; border-radius: 0em 1em 1em 0em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">Tepi Kanan Melengkung</div>

• Untuk memberikan enter atau jarak setelah mengetikkan teks dalam kotak, maka beralih kembali ke menu HTML dan tambahkan <br /> diakhir kode terakhir pada bagian HTML. 

 Sekianlah cara memberikan border pada teks postingan, semoga bermanfaat bagi blogger.com.

Terima Kasih Atas Kunjungan Anda.