Cara membuat tabel keren responsive pada postingan blog


Cara membuat tabel keren responsive pada postingan blog - Hallo sobat blogger mania, Dan juga sobat netizen, Selamat datang kembali di blog saya ini, Jika kalian ada firts time visitor saya ucapkan selamat datang kepada kalian.


Pada kesempatan kali ini saya akan membagikan sebuah informasi yang mungkin akan sangat bermanfaat sekali buat kalian semua, Bila kalian  berencana untuk membuat tabel yang keren maupun responsive pada blog kalian, Kalian telah tepat sekali memilih artikel ini.
Yossh langsung saja ke utamanya, Saya kan memberikan langkah langkah nya kepada kalian semua.

Langkah - Langkah


  1. Silahkan kalian masuk ke blogger kalian masing masing.

  2. Selanjutnya kalian masuk ke menu Template, Lalu kalian pilih Opsi Edit Html.

  3. Selanjutnya kalian cari code ]]></b:skin> Dengan ketik Ctrl + f .

  4. Selanjutnya letakan kode di bawah ini tepat Diatas Code ]]><b:skin>.

      /* CSS Post Table */
    .post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:5px 10px;text-align:left;vertical-align:top;}
    .post-body table th {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
    .post-body table.tr-caption-container {border:1px solid #e9e9e9;}
    .post-body table caption{border:none;font-style:italic;}
    .post-body table{}
    .post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
    .post-body table tr:nth-child(even) > td {background-color:#f9f9f9;}
    .post-body table tr:nth-child(even) > td:hover {background-color:#fbfbfb;}
    .post-body th{background:#fff;font-weight:400;text-transform:uppercase;font-size:14px}
    .post-body th:hover{background:#fdfdfd;}
    .post-body td a{color:#768187;padding:0 6px;font-size:85%;float:right;display:inline-block;border-radius:3px}
    .post-body td a:hover {color:#7f9bdf;border-color:#adbce0;}
    .post-body td a[target="_blank"]:after {margin-left:5px;}
    .post-body table.tr-caption-container td {border:none;padding:8px;}
    .post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
    .post-body td.tr-caption {font-size:80%;padding:0px 8px 8px !important;}
    .post-body li {list-style-type:square;}
    img {max-width:100%;height:auto;border:none;}
    table {max-width:100%;width:100%;margin:1.5em auto;}
    table.section-columns td.first.columns-cell{border-left:none}
    table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
    table.columns-2 td.columns-cell{width:50%}
    table.columns-3 td.columns-cell{width:33.33%}
    table.columns-4 td.columns-cell{width:25%}
    table.section-columns td.columns-cell{vertical-align:top}
    table.tr-caption-container{padding:4px;margin-bottom:.5em}
    td.tr-caption{font-size:80%}
    .widget ul {padding:0;}  

  5. Lalu silahkan kalian simpan.

  6. kode
  7. Untuk menerapkan tabel nya, Kalian bisa buat post, Lalu Kalian pilih mode Html.

  8. Selanjutnya kalian copy paste code di bawah ini, Lalu kalian terapkan di mode Html Postingan.

      <table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
    <tr> <th>Detail:</th>   <th>Renaldy Ways</th> </tr>
    <tr> <td>Website URL</td>   <td>url here</td> </tr>
    <tr> <td>Tipe jaringan</td>   <td>CPM, CPC, CPA</td> </tr>
    <tr> <td>Tipe iklan</td>   <td>Banner, Rich media, pop up/under, text</td> </tr>
    <tr> <td>Metode pembayaran</td>  <td>Paypal, Wire Transfer, Payoneer</td> </tr>
    <tr> <td>Minimal Payout</td>   <td>Paypal $20, Wire transfer $500, Payoneer $20</td> </tr>
    <tr> <td>Fill rate</td>   <td>100%</td> </tr>
    <tr> <td>Frekuensi pembayaran</td>  <td>NET 30</td> </tr>
    <tr> <td>Rate eCPM tertinggi</td>  <td>US, Europe traffic</td> </tr>
    <tr> <td>Penerimaan traffic</td>  <td>Seluruh negara</td> </tr>
    <tr> <td>Ad Mobile</td>   <td>Yes</td> </tr>
    <tr> <td>Ad custom format</td>  <td>Yes</td> </tr>
    <tr> <td>Affiliasi</td>   <td>Yes</td> </tr>
    <tr> <td>Bebas virus dan malware</td> <td>Yes</td> </tr>
    <tr> <td>Dukungan web Indonesia</td>  <td>Yes</td> </tr>
    <tr> <td>Kolaborasi dengan Adsense</td> <td>Hight risk</td> </tr>
    </tbody> </table> 

  9. Nah selanjutnya kalian tinggal sesuaikan saja dengan sesuai keinginan kalian.
  10. Publikasikan.
Nah dengan cara diatas lah, Kalian bisa dengan mudah membuat table yang keren dan responsive, Pokok nya jos dah

Jika kalian mengalami kebingungan kalian bisa sematkan pertanyaan kalian pada kolom komentar.

Penutup

Demikianlah artikel ini bisa saya sampaikan kepada kalian semua para pengunjung setia blog saya, Semoga ilmu ini bermanfaat, jangan lupa juga untuk selalu mengunjungi blog saya ini, Cukup sekian dari saya.

Terima kasih.

0 Response to "Cara membuat tabel keren responsive pada postingan blog"

Post a Comment

Silahkan Berkomentar Dengan Baik, Dilarang !
- Sara
- Provokasi
- Menggunakan Kata Kasar
- Spam
- Phissing
- Sebar Url
- Dan Lain Lain yang melanggar ketentuan Google.

Berkomentarlah Dengan Sopan Dan Santun,

Jika komentar kalian melanggar ketentuan blog bang ariel, Dalam Sekejap Komentar Anda Akan Saya Hapus.

Terimakasih.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel