Background

Tampilan Kotak Pada Postingan

Selamat pagi kawan, Kali ini saya akan posting tutorial blog yang mungkin kawan butuhkan, langsung saja. kali ini membuat macam-macam kotak dalam postingan, biasanya ini dibutuhkan/dipergunakan untuk kode HTML, kata yang penting juga banyak yang lainnya, oke dech mungkin kawan sudah mengerti jadi. Langsung saja, Cekidot>

Berikut langkah-langkah untuk bikin macam-macam tampilan kotak dalam postingan :

1. Kode untuk Solid Border

<div style="border: 2px #FF0000solid; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div>

Maka hasilnya seperti ini :


Isi dengan tulisan kawan disini

2. Kode untuk Ridge Border

<div style="border: 2px #FF0000 ridge; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div>

Maka hasilnya seperti ini :

Isi dengan tulisan kawan disini

3. Kode untuk Groove Border

<div style="border: 2px #FF0000 ridge; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div>

Maka hasilnya seperti ini :

Isi dengan tulisan kawan disini

4. Kode untuk Inset Border

<div style="border: 2px #FF0000 inset; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div> 

Maka hasilnya seperti ini :

Isi dengan tulisan kawan disini

5. Kode untuk Outset Border

<div style="border: 2px #FF0000 outset; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div> 

Maka hasilnya seperti ini :

Isi dengan tulisan kawan disini

6. Kode untuk Double Border

<div style="border: 2px #FF0000 double; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div>

Maka hasilnya seperti ini :

Isi dengan tulisan kawan disini

7. Kode untuk Dotted Border

<div style="border: 2px #FF0000 dotted; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div>

Maka hasilnya seperti ini :

Isi dengan tulisan kawan disini

8. Kode untuk Dashed Border

<div style="border: 2px #FF0000 solid; padding: 10px; background-color: #FFCC00; overflow: auto; height: 50px; width: 300px; text-align: left;"> Isi dengan tulisan kawan disini </div>

Maka hasilnya seperti ini :

Isi dengan tulisan kawan disini

9. Kode untuk Dashed Border

<div style="border: 2px #FF0000 dashed; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini </div>

Maka hasilnya seperti ini :

Isi dengan tulisan kawan disini

10. Kode untuk Border dengan scroll, lebar dan tinggi

<div style="border: 2px #FF0000 solid; padding: 10px; background-color: #FFCC00; overflow: auto; height: 50px; width: 300px; text-align: left;"> Isi dengan tulisan kawan disini </div>

Maka hasilnya seperti ini :

Isi dengan tulisan kawan disini


Keterangan :
1. Tulisan berwarna pink : silahkan ganti dengan kode HTML yang anda inginkan.
2. Tulisan yang berwarna biru : ganti dengan kode warna menurut selera anda. Untuk mengganti kode warna silahkan kawan lihat di postingan saya mengenai Kode warna
3. Perlu diketahui : Dalam penulisan kode HTML yang ingin kawan tampilkan pada postingan harus pada posisi HTML bukan Compose.

Categories: Share

10 komentar:

  1. weeehh, bagus-bagus nih kotaknya...
    happy blogging

    BalasHapus
  2. kok aku coba gak bisa ya sob???

    BalasHapus
  3. mantaf nih gan, , , biSa untk posting sript

    BalasHapus
  4. bookmark. keren banget gan, akan saya terapin :D

    BalasHapus
  5. Kunjungan malam sobat
    maaf baru bisa berkunjung
    kotak postingan ya?
    pasti akan lebih mempercantik postingan nih
    kereeen
    makasih tipsnya

    BalasHapus
  6. bisa di isi script neh... tapi kalau ketikannya banyak bisa scrol ngk itu om nti ketutup karena nggak muat...

    BalasHapus
  7. kasi script buat nambahin scroll dong kak..

    BalasHapus
  8. @earth, oke makasih kawan
    @suara hati, masa sih bisa ko kawan, Dalam penulisan kode HTML yang ingin kawan tampilkan pada postingan harus pada posisi HTML bukan Compose.
    @arief, iya kawan memang bener tuh ^_^
    @rizal, oke silahkan kawan
    @rizki, iya kawan sama sama
    @agusbg, oke nanti saya usahakan. tenang ya kawan ^_^
    @ade, iya nanti kaka posting ^_^

    BalasHapus
  9. oiya sama mau nagih postingan yang buat meta-tag di setiap postingan itu kak..
    katanya ada caranya?

    BalasHapus