RadarURL

Artikel Terbaru

Membuat Kotak Sederhana Didalam Blog

Sedikit sharing saja kali ini saya membagi trik  bagaimana cara membuat kotak/box sederhana didalam artikel blog. Biasanya kotak ini sangat berguna untuk membuat artikel jadi lebih menarik lagi tampilannya, sehingga memudahkan sobat blogger dalam membaca artikel.

Berikut ini contoh box sederhana yang bisa diterapkan didalam artikel blog:




1.  SOLID
Contoh Tampilan :
Tulisan/script HTML atau artikel blog letakkan disini

Kode:
<div style="border: 1px solid #000000; background-color:#A9F5A9; padding: 5px;width: 330px;">Tulisan/script HTML atau artikel blog letakkan disini</div>


2. DOTTED
Contoh Tampilan :
Tulisan/script HTML atau artikel blog letakkan disini

Kode:
<div style="border: 1px dotted #000000; background-color:#81F7F3; padding: 5px;width: 330px;">Tulisan/script HTML atau artikel blog letakkan disini</div>

3. DASHED 

Contoh Tampilan :
Tulisan/script HTML atau artikel blog letakkan disini

Kode:
<div style="border: 1px dashed #faac58; background-color:#F4FA58; padding: 5px;width: 330px;">Tulisan/script HTML atau artikel blog letakkan disini</div>

4. DOUBLE
Contoh Tampilan:

Tulisan/script HTML atau artikel blog letakkan disini

Kode:
<div style="border: 4px double #000000; background-color:#BDBDBD; padding: 5px;width: 340px;">Tulisan/script HTML atau artikel blog letakkan disini</div>

5. GROOVE
Contoh Tampilan:


Kode:
<div style="border: 4px groove #000000; background-color:#FFFFFF; padding: 5px;width: 340px;">Tulisan/script HTML atau artikel blog letakkan disini</div>


6. OUTSET
Contoh Tampilan :

Tulisan/script HTML atau artikel blog letakkan disini


Kode:
<div style="border: 4px outset #000000; background-color:#FA5858; padding: 5px;width: 340px;">Tulisan/script HTML atau artikel blog letakkan disini</div>

7. RIDGE
Contoh Tampilan:

Tulisan/script HTML atau artikel blog letakkan disini

Kode:
<div style="border: 4px ridge #faac58; background-color:#FAAC58; padding: 5px;width: 340px;">Tulisan/script HTML atau artikel blog letakkan disini</div>

Semoga bisa membantu.


23 komentar:

  1. wah wah tadi tak buka kok ndak bisa ya sob pas muncul di daftar bacaan blog sya? kenapa itu?

    BalasHapus
    Balasan
    1. tadi sengaja saya belum publish sob jadi belum bisa dibuka

      Hapus
  2. Peh jan Masya Allah sob template mu ini.. kata katae ku source,,

    BalasHapus
    Balasan
    1. maksudnya apa sob, saya engak maksud

      Hapus
    2. maaf saya belum sempet ganti sob, nanti kapan kapan saya ganti, maaf atas ketidaknyamanannya

      Hapus
    3. wah wah pas saya source kok kata katanya kaya gitu, memang template dr mana ta sob? kok kata katanya aneh kaya gitu

      Hapus
    4. itu dari temen perkumpulan didaerahku, nanti kalau sempet saya ganti sob, makasih buat sarannya

      Hapus
  3. wah tutorial baru lagi nich hehe*bagiku*
    ijin sedot ya kodenya semoga jadi tambah menarik blog gw hehey

    BalasHapus
  4. kode yg nomor 4 aq suka,ijin copy sob
    mksh infonya

    BalasHapus
  5. @Reo adam_sama sama sob, semoga bisa membantu

    BalasHapus
  6. ♥VPie◥♀◤MahaDhifa♥_monggo disimpan

    BalasHapus
  7. Aku Simpan dulu sob
    entar kalo butuh ku ambil hehehhe

    Mangkin mantap aja nih Blognya

    Tapi Komentarnya kurang mantap sob...

    Saran

    BalasHapus
  8. Em Albar_makasih buat sarannya sangat membangun, saya tunggu saran lainnya ya

    BalasHapus
  9. wah mantap ni tutorialnya thank's artikelnya Sob :D

    BalasHapus
  10. Hendra herwanto_sama sama sob, smoga aja bisa membantu sobat

    BalasHapus
  11. ♥VPie◥♀◤MahaDhifa♥_sama sama sob

    BalasHapus
  12. oh,,,ini sering di pake ama blog tutorial gitu,yang udah senior di dunia blogging,ambil semua ah...
    thanks sob,ane bawa pulang dulu ya,mau di tempel di jidad,hehehee...

    BalasHapus
    Balasan
    1. silahkan sob tapi massa di tempel dijidad sih sob

      Hapus

Sebelum berkomentar baca dulu aturannya :

1. Jangan melakukan spam. Seperti mencantumkan link tertentu, baik link hidup atau link mati
2. Berkomentarlah dengan sopan,
3. Jangan menyinggung masalah SARA.


Jika ternyata melakukan tersebut diatas Admin berhak menghapus komentar tersebut. Harap dijadikan maklum

Silahkan mengisi komentar anda.

Terimakasih

 
AnakBaik © 2012 Enjoy Share With Us. |Tim Kreatif AnakBaik | Indahnya Berbagi AnakBaik