Rabu, 09 Mei 2012

membuat table 4 kolom dengan css

seperti biasa cari kode ]]></b:skin> di edit html
paste kode css nya diaatas ]]></b:skin>
contoh table 4 kolom


css nya
.isiboks {
background-color:#ccc;
font-family:comic sans ms;
font-size:12px;
color:#3d010a;
padding:5px;
width:200px;
}
.isiboks:hover{
background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg64R-JPaTiYV-br3ZARIU78Ui5fsNldKYt-iiEsIzIEvOI9rHYL3ThFVNlwxDvXpvT90rHS-tPnJHCwfCvJskAzEMsgb2EBmIcBHdoEpoiOYU3JmbSBLl1gGio2yzn01PMinfo0fj8Zmw/s400/bgsGR_bgTablesilver.jpg);
}
.isiboks a{
font-family:tahoma;
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(http://japarus.xtgem.com/bgrpagar.jpg);
color: #999900;
border-color:#FF0000;
}


html nya
<table background="http://japarus.xtgem.com/pagar.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>


htmlnya bisa di taruh di postingan dan juga bisa di widget baru
width="800"> ukuran lebar tempelate anda
anda bisa edit sendiri ukurannya ... selesai ..

0 komentar:

Posting Komentar