Berbagi Ilmu Dan Informasi

Jumat, 21 April 2017

Cara Membuat Tabel Keren Pada Postingan Blogger

Membuat Tabel Keterangan Pada Postingan - Awal-awal ini sangat banyak orang yang mencari-cari bagaimana cara membuat tabel keterangan pada postingan blog yang keren dan menarik dilihat oleh pengunjung dan visitor. Untuk table keterangan ini biasanya digunakan untuk membuat sintak dan pengertian , agar mudah di pahami oleh orang dan bagus di lihat.
Fungsi Tabel keterangan ini biasanya memudahkan pengunjung blog anda agar bisa melihat fitur-fitur apa saja yang terdapat pada postingan kita, ada beberapa contoh yang digunakan orang dalam membuat sebuat tabel keterangan ini : membuat keterangan / fitur-fitur pada template, membuat syntak dan keterangannya dan banyak lagi lainnya.

Sebelumnya saya akan melihatkan hasil dari tampilan tabel yang telah saya buat, yang sangat keren dan bagus dilihat :
Name Keterangan
Website URL www.mintailmu.com
Description Berbagi Ilmu Di Dunia IT
Keyword Minta Ilmu
Pembuatan Blog 31 Maret 2017
Besic  Semua Dunia IT Di bahas
SEO 97%
Rate 80%
Onwer Ilham Mulia
No HP  0822-1024-8734
E-MailNonblog11400@gmail.com
Pasang Iklan Rp. 75.000/Bln
Visitor 1000/Day via Blogger
Visitor 1 300-400/day Histet
Dukungan Blog Indonesia Yes
Adsense Yes

Untuk tampilan tabel keterangan di atas mungkin bagus kan,, ok sekarang saya akan menjelaskan bagaimana cara kerja pembuatan Tabel Keterangan Yang keren :

Langkah Pembuatan Tabel Keterangan Postingan Blog : 
  1.  Masuk ke halaman dashboard blogger anda.
  2.  Lalu pada menu dashboard banyak pilihan di situ dan anda harus memilih Menu Template / Tema.
  3.  Setelah anda masuk kelahalam Template / Tema lalu klick Edit HTML.
  4.  Lalu anda akan masuk ke halaman Edit HTML , setelah itu cari ]]></b:skin> , anda bisa melakukan dengan cara cepat dengan cara menekan pada keyboard ( Ctrl+F ).
  5.  Setelah anda mendapatkan kode ]]></b:skin> , copy scrip code di bawah ini , dan letakan atau paste-kan scrip code itu ke atas ]]></b:skin>  .
  6. /* MintaIlmu.com Tabel Keren */
    table,caption,tbody{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
    table{border-collapse:collapse;border-spacing:0;}
    .post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
    .post-body table tr th {border:1px solid #457fdf;font-weight:bold;color:#fff;padding:15px 10px;text-align:left;vertical-align:top;font-size:14px}
    .post-body table th {background:#4285f4;}
    .post-body table.tr-caption-container {border:1px solid #f1f1f1;}
    .post-body table caption{border:none;font-style:italic;}
    .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 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 {color:#666;font-size:80%;padding:0px 8px 8px !important;}
    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%}
  7.  Setelah anda copy kan scrip code itu lalu Save / simpan / publikasikan.
  8.  Setelah itu pasti anda akan membuat postingan yang akan membuat table keterangan lalu anda pergi ke Dashboard pilih Pos dan klick Entri Baru
  9.  Pada halaman Entri Baru anda masukan / copy scrip kode di bawah ini, dan letakan / paste pada Pilihan HTML , 
  10. <table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
    <tr> <th>Name</th>   <th>Keterangan</th> </tr>
    <tr> <td>Website URL</td>   <td>www.mintailmu.com</td> </tr>
    <tr> <td>Description</td>   <td>Berbagi Ilmu Di Dunia IT</td> </tr>
    <tr> <td>Keyword</td>   <td>Minta Ilmu</td> </tr>
    <tr> <td>Pembuatan Blog</td>  <td>31 Maret 2017</td> </tr>
    <tr> <td>Besic&nbsp;</td>   <td>Semua Dunia IT Di bahas</td> </tr>
    <tr> <td>SEO</td>   <td>97%</td> </tr>
    <tr> <td>Rate</td>  <td>80%</td> </tr>
    <tr> <td>Onwer</td>  <td>Ilham Mulia</td> </tr>
    <tr> <td>No HP&nbsp;</td>  <td>0822-1024-8734</td> </tr>
    <tr> <td>E-Mail</td><td>Nonblog11400@gmail.com</td> </tr>
    <tr> <td>Pasang Iklan</td>  <td>Rp. 75.000/Bln</td> </tr>
    <tr> <td>Visitor</td>   <td>1000/Day via Blogger</td> </tr>
    <tr> <td>Visitor 1</td> <td>300-400/day Histet</td> </tr>
    <tr> <td>Dukungan Blog Indonesia</td>  <td>Yes</td> </tr>
    <tr> <td>Adsense</td> <td>Yes</td> </tr>
    </tbody> </table>
  11. Lalu anda publikasikan atau save ,
  12. Selesai dehh
Keterangan :
Setiap Srcrip Code yang saya warnakan anda bisa merubah dengan fungsi dan keterangan yang anda inginkan saat membuat tabel keterangan yang keren dan mantap ,
Losss, itu lah yang saya buat tutorial dan tips cara membuat tabel yang keren pada postingan blog anda , jangan lupa selalu kunjungi Mintailmu.com.
See You

2 comments

apanya yang gak muncul,, coba cek dulu,, apakah udh pass,,,
udh banyak yang coba,, work 100% semua kok,,

Silahkan Anda berkomentar yang baik, menarik Dan Benar sesuai dengan isi Postingan Minta Iilmu .com.
Komentar-Komentar yang tidak diperbolehkan Di dalam Postingan Ini :

1. Berbau penghinaan SARA ,PXXN & SPAM
2. Komentar dengan Link hidup (SPAM)
3. Komentar tidak nyambung dengan isi postingan

EmoticonEmoticon