Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogspot / Widget

Cara Menciptakan Tabel Dan Kolom Di Postingan Blog

Cara Praktis Membuat Tabel dan Kolom di Postingan Blog Cara Membuat Tabel dan Kolom di Postingan Blog
Tabel merupakan daftar yang berisi ikhtisar sejumlah data-data warta yang biasanya berupa kata-kata maupun bilangan yang tersusun dengan garis pembatas. Kaprikornus dapat dikatakan bahwa tabel ialah daftar yang berisi rangkuman dari sejumlah data-data yang sulit di pahami namun dibentuk lebih gampang dalam bentuk kolom. Singkatnya, tabel terdiri dari kolom dan juga baris. Kolom memanjang ke arah kanan, sedangkan baris memanjang ke arah bawah. Masing-masing kolom dan baris ini kemudian dihubungkan dengan isi tabel, yang tak lain berupa data. Pada dasarnya data-data yang meliputi angka-angka akan sulit dipahami atau dicerna apabila disajikan dalam bentuk paragraf dan artikel.  Namun akan berbeda apabila data berupa angka tersebut disajikan dalam bentuk tabel, oleh alasannya yaitu itu banyak yang menyajikan data angka dalam bentuk tabel hal ini tidak lain agar lebih gampang dipahami oleh pembaca dengan cepat dan akurat. Bagi para blogger memasang tabel juga merupakan salah satu hal penting untuk membantu artikel mereka lebih akurat dan gampang di mengerti, karna ada beberapa postingan yang membutuhkan tabel. Nah oleh alasannya yaitu itu kali ini saya akan memperlihatkan tutorial menciptakan tabel keren, menarik, dan responsive di blog. Seperti apa pembuatannya simak aja ulasannya berikut ini.

Cara Memasang Tabel atau Kolom Keren di Blog
1. Untuk langkah awal silahkan Anda login dulu ke Blogger
2. Lalu Klik Template → Edit HTML
4. Setelah itu cari kode ]]></b:skin> atau </style>
5. Kemudian Copy kode CSS dibawah ini, lalu Paste diatas atau sebelum kode ]]></b:skin> atau </style> 

/* Table */ .container th h1 { font-family : "Times New Roman";    font-weight: bold;    font-size: 18px;   text-align:left;   color: #fff; }  .container td {    font-weight: normal;    font-size: 14px; color: #fff;    -webkit-box-shadow: 0 2px 2px -2px #000000;     -moz-box-shadow: 0 2px 2px -2px #000000;          box-shadow: 0 2px 2px -2px #000000; }  .container {    text-align: left;    overflow: hidden;    width: 80%;    margin: 0 auto;   display: table;   padding: 0 0 0 0; }  .container td, .container th {    padding-bottom: 2%;    padding-top: 2%;   padding-left:2%;   }  /* Background-color of the odd rows */ .container tr:nth-child(odd) {    background-color: #323C50; }  /* Background-color of the even rows */ .container tr:nth-child(even) {    background-color: #2C3446; }  .container th {    background-color: #1F2739; }  .container tr:hover {    background-color: #464A52; -webkit-box-shadow: 0 6px 6px -6px #0E1119;     -moz-box-shadow: 0 6px 6px -6px #0E1119;          box-shadow: 0 6px 6px -6px #0E1119; }  .container td:hover {   background-color: #FFF842;   color: #403E10;   font-weight: bold;      box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;   transform: translate3d(6px, -6px, 0);      transition-delay: 0s;    transition-duration: 0.4s;    transition-property: all;   transition-timing-function: line; }  @media (max-width: 800px) { .container td:nth-child(4), .container th:nth-child(4) { display: none; } }

6. Setelah itu Simpan atau Save Tempalatenya.
7. Nah dikala Anda menciptakan postingan dan membutuhkan Tabel atau Kolom sebagai perhiasan artikel, maka Anda tinggal menCopy kode dibawah ini kemudian memasangnya di Mode HTML (bukan Compose) pada postingan. 

 <table class="container">  <thead>   <tr>    <th><h1>Kolom 1</h1></th>    <th><h1>Kolom 2</h1></th>    <th><h1>Kolom 3</h1></th>    <th><h1>Komom 4</h1></th>   </tr>  </thead>  <tbody>   <tr>    <td>RAM</td>    <td>Isi 1...</td>    <td>Isi 2...</td>    <td>Isi 3...</td>   </tr>   <tr>    <td>Processor</td>    <td>Isi 1...</td>    <td>Isi 2...</td>    <td>Isi 3...</td>   </tr>   <tr>    <td>VGA Card</td>    <td>Isi 1...</td>    <td>Isi 2...</td>    <td>Isi 3...</td>   </tr>     <tr>    <td>Harddisk</td>    <td>Isi 1...</td>    <td>Isi 2...</td>    <td>Isi 3...</td>   </tr>     <tr>    <td>Lan Card</td>    <td>Isi 1...</td>    <td>Isi 2...</td>    <td>Isi 3...</td>   </tr>     <tr>    <td>DVD RW</td>    <td>Isi 1...</td>    <td>Isi 2...</td>    <td>Isi 3...</td>   </tr>  </tbody> </table>
Silahkan Anda atur sendiri datanya sesuai selera dengan hanya menganti isyarat yang saya warnai. Selain itu Anda juga dapat menambahkan jumlah kolom sesuai keinginan.
8. Setelah itu silahkan Anda Publikasikan postingan, dan lihat bagaimana hasilnya.

[Preview ##eye##]

Nah itulah langkah singkat menciptakan kolom atau tabel keren diblog, dimana pemasanganya sendiri tidaklah rumit, disini Anda tinggal menganti data sesuai keinginan. Sekian dulu tutorial pembuatan tabel di blog, kalau ada yang ingin Anda tanyakan atau tidak paham silahkan komentar dibawah ini terima kasih.

Anda mungkin menyukai postingan ini :