Jasa pendaftaran google adsense, jasa seting ganti domain, agen pulsa dan ppob saldo terjamin aman .
membuat kolom tabel responsif yang di maksud membuat kolom responsif adalah jika kita mau membuat postingan / artikel / laman yang di dalam artikel tersebut harus menggunakan angka-angka atau kolom dan yang lainya maka kita memmerlukan kode untuk membuat kolom-kolm tersebut
kolom-kolom dalam postingan atau dalam laman ini sering kita sebut sebagai tabel untuk lebih jelasnya silahkan lihat pada gambar di bawah ini :
jika di antara para pengunjung agen pulsa dan ppob disini ingin membuat tabel dalam postingan atau dalam laman seperti pada gambar di atas , disini saya akan berikan panduanya untuk cara pembuatanya dan silahkan simak cara pembuatanya di bawah ini :
2. pada penulisan postingnya pindahkan ke dalam HTML bukan compose
3.kopi kode di bawah ini dan pastekan dalam postingan anda
4.lalu pindahkan cara penulisanya ke compose
5.selanjutnya silahkan edit atau isikan konten anda
6.selesai...
membuat kolom tabel responsif yang di maksud membuat kolom responsif adalah jika kita mau membuat postingan / artikel / laman yang di dalam artikel tersebut harus menggunakan angka-angka atau kolom dan yang lainya maka kita memmerlukan kode untuk membuat kolom-kolm tersebut
kolom-kolom dalam postingan atau dalam laman ini sering kita sebut sebagai tabel untuk lebih jelasnya silahkan lihat pada gambar di bawah ini :
jika di antara para pengunjung agen pulsa dan ppob disini ingin membuat tabel dalam postingan atau dalam laman seperti pada gambar di atas , disini saya akan berikan panduanya untuk cara pembuatanya dan silahkan simak cara pembuatanya di bawah ini :
- cara membuat tabel lewat posting
2. pada penulisan postingnya pindahkan ke dalam HTML bukan compose
3.kopi kode di bawah ini dan pastekan dalam postingan anda
<style type="text/css">
table {
*border-collapse: collapse; /* IE7 and lower */
border-spacing: 0;
width: 100%;
}
.bordered {
border: solid #ccc 1px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 1px #ccc;
-moz-box-shadow: 0 1px 1px #ccc;
box-shadow: 0 1px 1px #ccc;
}
.bordered tr:hover {
background: #93F193;
-o-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.bordered td, .bordered th {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 10px;
text-align: left;
}
.bordered th {
background-color: #dce9f9;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -moz-linear-gradient(top, #ebf3fc, #88F188);
background-image: -ms-linear-gradient(top, #ebf3fc, #08630E);
background-image: -o-linear-gradient(top, #ebf3fc, #08630E);
background-image: linear-gradient(top, #ebf3fc, #08630E);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
-moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
border-top: none;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.bordered td:first-child, .bordered th:first-child {
border-left: none;
}
.bordered th:first-child {
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;
}
.bordered th:last-child {
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
border-radius: 0 6px 0 0;
}
.bordered th:only-child{
-moz-border-radius: 6px 6px 0 0;
-webkit-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
}
.bordered tr:last-child td:first-child {
-moz-border-radius: 0 0 0 6px;
-webkit-border-radius: 0 0 0 6px;
border-radius: 0 0 0 6px;
}
.bordered tr:last-child td:last-child {
-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;
border-radius: 0 0 6px 0;
}
</style>
<table class="bordered">
<thead><tr>
<th> Judul Tabel 1 </th><th> Judul Tabel 2 </th><th> Judul Tabel 3 </th></tr></thead><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr>
table {
*border-collapse: collapse; /* IE7 and lower */
border-spacing: 0;
width: 100%;
}
.bordered {
border: solid #ccc 1px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 1px #ccc;
-moz-box-shadow: 0 1px 1px #ccc;
box-shadow: 0 1px 1px #ccc;
}
.bordered tr:hover {
background: #93F193;
-o-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.bordered td, .bordered th {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 10px;
text-align: left;
}
.bordered th {
background-color: #dce9f9;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -moz-linear-gradient(top, #ebf3fc, #88F188);
background-image: -ms-linear-gradient(top, #ebf3fc, #08630E);
background-image: -o-linear-gradient(top, #ebf3fc, #08630E);
background-image: linear-gradient(top, #ebf3fc, #08630E);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
-moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
border-top: none;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.bordered td:first-child, .bordered th:first-child {
border-left: none;
}
.bordered th:first-child {
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;
}
.bordered th:last-child {
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
border-radius: 0 6px 0 0;
}
.bordered th:only-child{
-moz-border-radius: 6px 6px 0 0;
-webkit-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
}
.bordered tr:last-child td:first-child {
-moz-border-radius: 0 0 0 6px;
-webkit-border-radius: 0 0 0 6px;
border-radius: 0 0 0 6px;
}
.bordered tr:last-child td:last-child {
-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;
border-radius: 0 0 6px 0;
}
</style>
<table class="bordered">
<thead><tr>
<th> Judul Tabel 1 </th><th> Judul Tabel 2 </th><th> Judul Tabel 3 </th></tr></thead><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr>
</table>
4.lalu pindahkan cara penulisanya ke compose
5.selanjutnya silahkan edit atau isikan konten anda
6.selesai...
- cara membuat tabel lewat laman / page
caranya sama persis seperti pada cara membuat tabel pada postingan , tapi untuk pertamanya saja yang di buka laman / page dan buat laman baru selanjutnya sama persis dengan cara membuat tabel lewat posting
sampai disini panduan blogger jasa pembuatan google adsense tentang cara membuat kolom / tabel yang responsif , semoga berguna , jika ada kesulitan jangan segan-segan untuk bertanya , terimakasih..