Cara Membuat Tabel Cantik Postingan di Blog

Kali ini saya akan share tentang cara membuat tabel saat posting di Blogger seperti tabel yang dimiliki oleh Google Support. Membuat tabel keren ini menggunakan dua source kode, yaitu CSS dan HTML. Dimana kode CSS akan disisipkan pada template blogger, sedangkan kode HTML yang akan disisipkan pada postingan Blog kita. Kode CSS dan HTML ini murni saya dapatkan dari halaman Google Support. So, tanpa panjang lebar mari kita simak cara membuat tabel mirip tabel yang dimiliki oleh Google.com.
Tahap Pertama:
1. Login ke Blogger > Template > Edit HTML
2. Jangan lupa centang "Expand Template Widget"
3. Cari kode ]]></b:skin> lalu sisipkan kode CSS berikut ini tepat di atas ]]></b:skin>
<!-- Nice Table Tipnya.blogspot.com--> table th { padding-top: 7px; text-align: left; } .nice-table { border-collapse: collapse; border-spacing: 0; } .nice-table tr:first-child th { border-top: 0 none; } .nice-table th:first-child { border-left: 0 none; } .nice-table tr:first-child th:last-child { border-right-color: #5476FC; } .nice-table th { background-color: #5476FC; color: white; font-weight: bold; } .nice-table th, .nice-table td { border: 1px solid #EBEBEB; padding: 3px 10px; } .nice-table td { background-color: #E6E6E6; border-color: #E5E5E5 #CCCCCC #E5E5E5 #E5E5E5; color: #444444; } .nice-table td:last-child { border-right-color: #E5E5E5; } .nice-table tr:nth-of-type(2n) td { background-color: #FFFFFF; border-right-color: #E5E5E5; } .nice-table.spaced-table td, .nice-table.spaced-table th { padding: 10px; } .nice-table.wide { width: 95%; } .nice-table.narrow { width: 75%; } .nice-table.narrower { width: 50%; } .nice-table.narrowest { width: 35%; } <!-- Nice Table tipnya.blogspot.com-->
4. Klik Simpan template Tahap Kedua:
Tahap kedua adalah saat anda membuat postingan Blogger yang akan menggunakan tabel, pastikan edit entri pada mode HTML bukan "Compose".
Untuk membuat tabelnya silahkan ikuti contoh kode di bawah ini
<table class="nice-table" style="width: 90%px;"><tbody> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> </tr> <tr> <td>kolom 1 baris 1</td> <td>kolom 2 baris 1</td> <td>kolom 3 baris 1</td> <td>kolom 4 baris 1</td> </tr> <tr> <td>kolom 1 baris 2</td> <td>kolom 2 baris 2</td> <td>kolom 3 baris 2</td> <td>kolom 4 baris 2</td> </tr> <tr> <td>kolom 1 baris 3</td> <td>kolom 2 baris 3</td> <td>kolom 3 baris 3</td> <td>kolom 4 baris 3</td> </tr> <tr> <td>kolom 1 baris 4</td> <td>kolom 2 baris 4</td> <td>kolom 3 baris 4</td> <td>kolom 4 baris 4</td> </tr> </tbody> </table>
Header 1 Header 2 Header 3 Header 4
kolom 1 baris 1 kolom 2 baris 1 kolom 3 baris 1 kolom 4 baris 1
kolom 1 baris 2 kolom 2 baris 2 kolom 3 baris 2 kolom 4 baris 2
kolom 1 baris 3 kolom 2 baris 3 kolom 3 baris 3 kolom 4 baris 3
kolom 1 baris 4 kolom 2 baris 4 kolom 3 baris 4 kolom 4 baris 4

Catatan:
  • Jika ingin menambah atau mengurangi jumlah kolom dan baris, silahkan mengedit dengan memperhatikan kode <td> dan <tr>
  • Disetiap kolom akan ada kode <td> dan </td>
  • Disetiap baris akan ada kode <tr> dan </tr>
  • "Tahap Pertama" cukup dilakukan sekali saja, dan "Tahap Kedua" dilakukan setiap membuat tabel
  • Ada pertanyaan silahkan komentar.
Untuk yang ingin Copas, mohon link sumbernya :D

Baca Juga

Share this article :
 

+ komentar + 6 komentar

Rabu, 02 Januari 2013 02.22.00 WIB

nice post....

Rabu, 19 Februari 2014 13.54.00 WIB

perlu dicoba gan

Kamis, 06 Maret 2014 10.42.00 WIB

mantap,saya coba juga gan

Selasa, 17 Maret 2015 12.09.00 WIB

Nice info

Selasa, 03 November 2015 07.35.00 WIB

Terima kasih infonya , artikelnya sangat bermanfaat buat blogger pemula kaya saya

Minggu, 14 Agustus 2016 07.25.00 WIB

Kok punya saya gak ada ]]>>,trus klo gak ada tarok mana?

Poskan Komentar

 
Copyright © 2012. Belajar Ngeblog Aja - All Rights Reserved
Home| Contact Us| Term of Service| Privacy Policy|
Template Created by Creating Website
Proudly powered by Blogger