Cara Membuat Tabel Box Untuk Menyimpan Tulisan

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:

TEXT BOX STYLE

Berikut beberapa model tabel box pilihan buat Anda semua pecinta DUNIA ILMU untuk menyimpan tulisan postingan Anda seperti ini:

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

DUNIA ILMU

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