Cara Membuat Tabel Box Untuk Menyimpan Tulisan - Sebenarnya untuk membuat tulisan pada postingan, dengan membuat tabel box untuk menyimpan tulisan tersebut tidaklah begitu penting, namun disini saya berbagi bila mana ada beberapa tulisan Anda yang mungkin tergolong dalam kategori penting untuk Anda sajikan kepada pengunjung, tidak ada salahnya jika tulisan tersebut kita simpan dalam tabel box seperti ini, sehingga sedikit mempercantik tampilan postingan Anda dimata pengunjung.

Sumber referensi ini, saya kutip dari beberapa tutorial saya sebelumnya tentang pembahasan cara memodifikasi text-box untuk menyimpan tulisan, yang selengkapnya dapat Anda pelajari pada Tab Navigasi di bawah ini:






Berikut beberapa model tabel box pilihan buat Anda semua pecinta SAHABAT BLOGGER 77 untuk menyimpan tulisan postingan Anda seperti ini:


Table box image


Baca juga Cara Membuat Menu Navigasi Fixed Fly Out Dengan CSS3



1. TABEL BOX DECORASI BUNGA

❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀
#border1-top {
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -o-border-radius: 10px;
   background-color: #93c47d;
   border-left: 3px solid green;
   border-radius: 10px;
   border-right: 3px solid green;
   border-top: 2px solid green;
   overflow: auto;
   padding: 8px;}

#border1-top span, #border1-bottom span {
   background: transparent;
   color: #fff;
   font: normal 25px/normal Arial;
   padding: 0 0 0 11px;}

#border1-bottom {
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -o-border-radius: 10px;
   background-color: #93c47d;
   border-bottom: 2px solid green;
   border-left: 3px solid green;
   border-radius: 10px;
   border-right: 3px solid green;
   overflow: auto;
   padding: 8px;}

.border1-content {
   background-color: #cccccc;
   font:normal 12px/15px Courier,Monospace;
   border-bottom: 4px double #999;
   border-left: 2px solid #999;
   border-right: 2px solid #999;
   border-top: 4px double #999;
   margin:0 8px 0 8px;
   overflow: auto;
   padding:10px;
   text-align: left;}
❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀

<div id="border1-top">
    <span>&#10048; &#10048; //dan seterusnya...</span>
</div>
         <div class="border1-content">
   ...
Tulis Text Anda Disini
    ...
        </div>
<div id="border1-bottom">
    <span>&#10048; &#10048; //dan seterusnya...</span>
</div>



2. TABEL BOX GAYA NASKAH

ELEMEN KODE
#rb-wrapper-top {
   -webkit-border-radius: 0 0 10px 10px;
   -moz-border-radius: 0 0 10px 10px;
   -o-border-radius: 0 0 10px 10px;
   background-image:-webkit-linear-gradient(right, #93c47d 10%, #38761d 100%);
   background-image:-moz-linear-gradient(right, #93c47d 10%, #38761d 100%);
   background-image:-ms-linear-gradient(right, #93c47d 10%, #38761d 100%);
   background-image:-o-linear-gradient(right, #93c47d 10%, #38761d 100%);
   background-image:linear-gradient(right, #93c47d 10%, #38761d 100%);
   border-left: 3px solid red;
   border-radius: 0 0 10px 10px;
   border-right: 3px solid red;
   border-top: 2px solid red;
   overflow: auto;
   padding: 10px;
   text-align: center;}

#rb-wrapper-bottom {
   -webkit-border-radius: 10px 10px 0 0;
   -moz-border-radius: 10px 10px 0 0;
   -o-border-radius: 10px 10px 0 0;
   background-image:-webkit-linear-gradient(left, #93c47d 10%, #38761d 100%);
   background-image:-moz-linear-gradient(left, #93c47d 10%, #38761d 100%);
   background-image:-ms-linear-gradient(left, #93c47d 10%, #38761d 100%);
   background-image:-o-linear-gradient(left, #93c47d 10%, #38761d 100%);
   background-image:linear-gradient(left, #93c47d 10%, #38761d 100%);
   border-bottom: 2px solid red;
   border-left: 3px solid red;
   border-radius: 10px 10px 0 0;
   border-right: 3px solid red;
   overflow: auto;
   padding: 10px;
   text-align: center;}

.rb-wrapper-content {
   background-color: #cccccc;
   border-bottom: 4px double red;
   border-left: 2px solid red;
   border-right: 2px solid red;
   border-top: 4px double red;
   margin: 0 8px 0 8px;
   overflow: auto;
   padding: 10px;
   text-align: left;
   font:normal 12px/15px Courier,Monospace;}
SAHABAT BLOGGER 77

<div id="rb-wrapper-top">
ELEMEN KODE</div>
<div class="rb-wrapper-content">
...
Tulis Text Anda Disini
...
</div>
<div id="rb-wrapper-bottom">
SAHABAT BLOGGER 77</div>



3. TABEL BOX DOUBLE BORDER

#border-text {
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -o-border-radius:10px;
   background-color: green;
   border-left: 4px solid red;
   border-radius: 10px;
   border-right: 4px solid red;
   overflow: auto;}

.text {
   background-image:-webkit-linear-gradient(top, #111 50%, #666 100%);
   background-image:-moz-linear-gradient(top, #111 50%, #666 100%);
   background-image:-ms-linear-gradient(top, #111 50%, #666 100%);
   background-image:-o-linear-gradient(top, #111 50%, #666 100%);
   background-image:linear-gradient(top, #111 50%, #666 100%);
   color:#ccc;
   font:normal 12px/15px Courier,Monospace;
   margin:0 20px 0 20px;
   overflow: auto;
   padding: 10px;
   border-left:2px solid #ccc;
   border-right:2px solid #ccc;
   text-align: left;}

<div id="border-text">
    <div class="text">
...
Tulis Text Anda Disini
...
    </div>
</div>


4. TABEL BOX DENGAN JUDUL

ELEMEN KODE
#box-top {
   background-color: blue;
   border-bottom: 3px solid yellow;
   padding: 8px;
   text-align: center;
   font: bold 14px/normal Helvetia;
   color: #fff;}

.box-content {
   background-image:-webkit-linear-gradient(left, #111 50%, #666 100%);
   background-image:-moz-linear-gradient(left, #111 50%, #666 100%);
   background-image:-ms-linear-gradient(left, #111 50%, #666 100%);
   background-image:-o-linear-gradient(left, #111 50%, #666 100%);
   background-image:linear-gradient(left, #111 50%, #666 100%);
   overflow: auto;
   padding: 10px;
   text-align: left;
   color:#ccc;
   font:normal 12px/15px Courier,Monospace;}

<div id="box-top">
ELEMEN KODE</div>
<div class="box-content">
...
Tulis Text Anda Disini
...
</div>



PENERAPAN DI POSTINGAN
Kode CSS untuk membuat tabel box seperti di atas, sudah saya tempatkan pada masing-masing model, silahkan Anda pilih tabel box mana yang menurut Anda sesuai dengan tampilan blog Anda. Selanjutnya COPY kode-nya lalu letakkan diatas kode ]]></b:skin> pada Template Anda, lalu letakkan kode HTML yang ada dibawahnya pada postingan Anda mode tulis HTML.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Cara Membuat Tabel Box Untuk Menyimpan Tulisan
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

10 komentar

  1. wah... keren-keren semua, jadi bingung pilih kode yang mana, ijin kopi semuanya yia bos, hehehe....

    BalasHapus
    Balasan
    1. biasanya kalau bingung, mau gak mau kudu pilih semuanya bos, hehe

      Hapus
  2. cantik...!, se..., maksudnya variatif mba Dev, ..!

    semoga postingan selanjutnya tentang "CARA MERUBAH TAMPILAN HOME BLOG YANG BEDA yang hanya menampilkan gambar sj...hehehehe..!

    Mohon maap lahir dan batin..!, semoga kita smua dalam ikatan silahturahmi yg kuat..! (telat)

    BalasHapus
    Balasan
    1. hmmm...bilang aja mas-nya ingin dibuatkan tutornya, hehe..!!
      insyaAllah mas, kalau ada waktu santai akan saya buatkan tutornya,,

      [blockquote]Walau tak' bisa bertatap
      Walau tak' bisa berjabat,
      Tetapi Devy N' keluarga, mengucapkan

      MINAL AIDZIN WAL'FAIDZIN ~ MOHON MAAF LAHIR DAN BATIN

      Selamat hari raya Idul Fitri ya sahabat semua, jika ada tutur kata devy dalam komentar yang salah, mohon dimaafkan.[/blockquote]

      Hapus
  3. mba pinter ih..
    aku nyimaknya belon ngerti semua, udah tua kali ya hehe
    aku buka atu per atu ya n mohon panduanya.. trims

    BalasHapus
  4. smua orang buat saya pinter kok mbak, karena orang yang belum mengerti tentang satu bidang hal belum tentu dikatakan bodoh, tetapi mungkin bidang itu bukan bidang yang dia suka,
    bukan begitu mbak,,hehe

    BalasHapus
  5. selamat hari raya idul fitri yamas
    maaf lahir batin

    BalasHapus
    Balasan
    1. waduh bikin salah lagi,mbak maksudnya bukan mas.hehehe

      Hapus
  6. Maaf lahir batin ya Mba, mumpung masih suasana lebaran.

    Salam

    BalasHapus
  7. tutorial yang bermanfaat untuk blogger yang suka membagikan ilmu-ilmu baru seputar pemasangan script

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK