Cara membuat dan Memasang Tabel 4 Kolom: Panduan BloGGeR

Tabel 4 Kolom dimaksudkan untuk memaksimalkan ruang yang tersedia sehingga tidak terlalu banyak bagian ruang yang terbuang dengan sia-sia karena terlalu banyaknya spasi yang sering terjadi dengan terlalu luasnya ruang yang digunakan. Penggunaan tabel juga memberikan keuntungan dari sisi tampilan karena terlihat seperti 3D. Untuk membuat tabel 4 kolom ini hanya perlu dilakukan dengan menyimpan KODE CSS yang tersedia di atas KODE ]]></b:skin> dan menggunakan xHTML di bagian body atau di ruang posting.

Kode CSS :

.isiboks{ 
        background-color:#ccc;
        font-family:Arial; 
        font-size:12px; 
        color:#3d010a;
        padding:5px;
        width:200px;
}
.isiboks:hover{
        background:#666 url(https://lh3.googleusercontent.com/-Mw3kJ59U-K8/T3GO617OpqI/AAAAAAAAAj0/RuHocRx20Jg/h120/bgsGR_bgTablesilver.jpg);
} 
.isiboks a{
        font-weight:bold;
        color: #003366;
        text-decoration:none;
}
.isiboks a:hover{
        color:#FF00FF;
}
td.judulboks{ 
        text-align:center; 
        font-size:22px; 
        font-weight:bold;
        color:#3d010a;
        font-family:Tahoma;
}
td.judulboks:hover{
        background:#fff url(https://lh3.googleusercontent.com/-Mw3kJ59U-K8/T3GO617OpqI/AAAAAAAAAj0/RuHocRx20Jg/h120/bgsGR_bgTablesilver.jpg);
        color: #999900;
        border-color:#FF0000;
}

xHTML :

<table background="https://lh6.googleusercontent.com/-KE3t_y1KLnw/T3GPqYxzsjI/AAAAAAAAAj8/-fR6Ao4weVY/h120/background-repeat-01.jpg" bordercolor="cdd4cd" border=1 cellspacing="10" width="800">
<tr bordercolor="d8ffde">
<td class="judulboks" colspan=5 bgcolor="#CCCCCC">Judul Tabel 4 Kolom</td></tr>
<td class="isiboks" bordercolor="#d8ffde">
01. <a target="_blank" href="Link Judul-01">Judul-01</a> Tuliskan teks di sini !<br>
02. <a target="_blank" href="Link Judul-02">Judul-02</a> Tuliskan teks di sini !<br>
03. <a target="_blank" href="Link Judul-03">Judul-03</a> Tuliskan teks di sini !<br>
04. <a target="_blank" href="Link Judul-04">Judul-04</a> Tuliskan teks di sini !
</td>
<td class="isiboks" bordercolor="d8ffde">
01. <a target="_blank" href="Link Judul-05">Judul-05</a> Tuliskan teks di sini !<br>
02. <a target="_blank" href="Link Judul-06">Judul-06</a> Tuliskan teks di sini !<br>
03. <a target="_blank" href="Link Judul-07">Judul-07</a> Tuliskan teks di sini !<br>
04. <a target="_blank" href="Link Judul-08">Judul-08</a> Tuliskan teks di sini !
</td>
<td class="isiboks" bordercolor="d8ffde">
01. <a target="_blank" href="Link Judul-09">Judul-09</a> Tuliskan teks di sini !<br>
02. <a target="_blank" href="Link Judul-10">Judul-10</a> Tuliskan teks di sini !<br>
03. <a target="_blank" href="Link Judul-11">Judul-11</a> Tuliskan teks di sini !<br>
04. <a target="_blank" href="Link Judul-12">Judul-12</a> Tuliskan teks di sini !
</td>
<td class="isiboks" bordercolor="d8ffde">
01. <a target="_blank" href="Link Judul-13">Judul-13</a> Tuliskan teks di sini !<br>
02. <a target="_blank" href="Link Judul-14">Judul-14</a> Tuliskan teks di sini !<br>
03. <a target="_blank" href="Link Judul-15">Judul-15</a> Tuliskan teks di sini !<br>
04. <a target="_blank" href="Link Judul-16">Judul-16</a> Tuliskan teks di sini !
</td>
</tr>
</table>

1. Login ke Blogger.
   
   • Upload javascript Rounded Corners dan buat dalam bentuk link seperti yang terlihat pada box ke-3.
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS dan letakkan di atas ]]></b:skin>
7. Copy javascript dan letakkan di bawah ]]></b:skin>
8. Klik "Simpan Template (Save Template)".
9. Gunakan xHTML saat posting atau manfaatkan melalui penambahan gadget.

Catatan/Keterangan :

1. Panduan cara backup template, cari kode dan berbagai cara menyimpan kode css, xHTML dan javascript dapat dibuka di Special Tutorials pada menu sebelah kiri halaman blog.
2. Untuk menyesuaikan dengan ruang yang tersedia lebar tabel dapat disesuaikan dengan merubah width="800" pada xHTML dan merubah lebar (width:200px;) pada syntax .isiboks{...} (pada KODE CSS).
3. width pada table (800) merupakan jumlah 4xwidth pada syntax .isiboks{...} (200px).
4. Untuk merubah jumlah kolom dilakukan dengan mengurangi seluruh kode yang termuat dalam KODE <td class="isiboks" bordercolor="#d8ffde"> ....</td> (xHTML).

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Update » Senen WAGE, Maret, 26, 2012

» Happy Blogging - gubhugreyot «