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
Show 10 Comments Show widget

10 komentar:

  1. Unknown2 Maret 2012 pukul 22.08

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

    BalasHapus
  2. Unknown3 Maret 2012 pukul 00.35

    kok aku coba gak bisa ya sob???

    BalasHapus
  3. RESUME IMMORAL RELEASE3 Maret 2012 pukul 03.41

    mantaf nih gan, , , biSa untk posting sript

    BalasHapus
  4. Unknown3 Maret 2012 pukul 04.43

    bookmark. keren banget gan, akan saya terapin :D

    BalasHapus
  5. rizki_ris3 Maret 2012 pukul 08.29

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

    BalasHapus
  6. agusbg4 Maret 2012 pukul 03.28

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

    BalasHapus
  7. Chikita Nawaristika4 Maret 2012 pukul 19.15

    kasi script buat nambahin scroll dong kak..

    BalasHapus
  8. IQ-dua34 Maret 2012 pukul 20.40

    @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. Chikita Nawaristika4 Maret 2012 pukul 20.58

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

    BalasHapus
  10. IQ-dua34 Maret 2012 pukul 21.00

    @ade, ok siap komandan ^_^

    BalasHapus