Tabel merupakan data yang paling sering digunakan untuk memberikan list atau data secara lengkap, hal ini paling sering digunakan baik di presentasi, website, toko online bahkan blog.
Namun ada beberapa kelemahan tabel yaitu sulit dibaca dan sulit mencari data jika isi dari data tabel banyak . Dengan kesulitan ini tentu harus ada trik khusus untuk memudahkan user membacanya.

Bagi anda pengguna blogger jangan berkecil hati, karena pada artikel kali ini saya akan membahas bagaimana caranya agar tabel dinamis bisa di terapkan pada blogger anda. Anda bisa lihat klik demonya  dibawah ini

Yuk silahkan ikuti tutorialnya
1. Login ke user blogger anda
2. Masuk ke Menu Template > Edit HTML

3. Masukkan kode css berikut tepat sebelum tag ]]></b:skin> atau tag </style> tergantung dari template yang anda gunakan

@import url('https://cdn.rawgit.com/dokterweb/code/gh-pages/table/filtergrid.css');

.mytable{
width:100%; font-size:12px;
border:1px solid #ccc;
}
div.tools{ margin:5px; }
div.tools input{ background-color:#f4f4f4; border:2px outset #f4f4f4; margin:2px; }
th{ background-color:#003366; color:#FFF; padding:2px; border:1px solid #ccc;text-align: center;}
td{ padding:2px; border-bottom:1px solid #ccc; border-right:1px solid #ccc; text-align:center;}
tr:nth-child(even){background-color: #f2f2f2}

4. Masukkan code dibawah tepat diatas tag </head>

<script src='https://github.com/dokterweb/code/blob/gh-pages/table/actb.js'/>
<script src='https://cdn.rawgit.com/dokterweb/code/gh-pages/table/tablefilter.js'/>

5. Anda bisa masukkan tabel anda di Post ataupun Page, sebagai contoh saya memasukkann tabel list lagu, dan tentu anda bisa sesuikan dengan tabel kebutuhan anda. Jangan lupa anda input coding ini di pilihan HTML

<h3>
Ketikkan pada pencarian dan tekan enter
</h3>
<table class="mytable" id="table1">
<tbody>
	<tr>
		<th>No.</th>
		<th>Judul Lagu</th>
		<th>Penyanyi</th>
	</tr>
	<tr>
		<td>1</td>
		<td>Someone Like You</td>
		<td>Adele</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Price Tag</td>
		<td>Jessie J</td>
	</tr>
	<tr>
		<td>3</td>
		<td>Everything at Once</td>
		<td>Lenka</td>
	</tr>
	<tr>
		<td>4</td>
		<td>I'm Yours</td>
		<td>Jason Mraz</td>
	</tr>
	<tr>
		<td>5</td>
		<td>What's Make You Beautiful</td>
		<td>One Direction</td>
	</tr>
	<tr>
		<td>6</td>
		<td>Back to December</td>
		<td>Taylor Swift</td>
	</tr>
	<tr>
		<td>7</td>
		<td>Breakaway</td>
		<td>Kelly Clarkson</td>
	</tr>
	<tr>
		<td>8</td>
		<td>Trouble is a Friend</td>
		<td>Lenka</td>
	</tr>
	<tr>
		<td>9</td>
		<td>Just the Way You Are</td>
		<td>Bruno Mars</td>
	</tr>
	<tr>
		<td>10</td>
		<td>Firework</td>
		<td>Katy Perry</td>
	</tr>
	<tr>
		<td>11</td>
		<td>Love the Way You Lie</td>
		<td>Rihanna</td>
	</tr>
	<tr>
		<td>12</td>
		<td>I Do</td>
		<td>Colbie Caillat</td>
	</tr>
	<tr>
		<td>13</td>
		<td>The Climb</td>
		<td>Miley Cyrus
		</td>
	</tr>
	<tr>
		<td>14</td>
		<td>A Thousand Year</td>
		<td>Christina Perry</td>
	</tr>
	<tr>
		<td>15</td>
		<td>Breakeven</td>
		<td>The Script
		</td>
	</tr>
	<tr>
		<td>16</td>
		<td>SkyScrapper</td>
		<td>Demi Lovato</td>
	</tr>
	<tr>
		<td>17</td>
		<td>Trouble is a Friend</td>
		<td>Lenka</td>
	</tr>
	<tr>
		<td>18</td>
		<td>Rolling in The Deep</td>
		<td>Adele</td>
	</tr>
	<tr>
		<td>19
		</td>
		<td>Last Friday Night
		</td>
		<td>Katy Perry
		</td>
	</tr>
	<tr>
		<td>20</td>
		<td>Speak Now</td>
		<td>Taylor Swift</td>
	</tr>
	<tr>
		<td>21</td>
		<td>You Raise Me Up</td>
		<td>Josh Groban</td>
	</tr>
	<tr>
		<td>22
		</td>
		<td>I Will Always Love You
		</td>
		<td>Whitney Houston
		</td>
	</tr>
	<tr>
		<td>23</td>
		<td>Jar of Heart</td>
		<td>Christina Perry</td>
	</tr>
	<tr>
		<td>24</td>
		<td>Beyonce</td>
		<td>Irreplaceable</td>
	</tr>
	<tr>
		<td>25</td>
		<td>My Heart Will Go On</td>
		<td>Celine Dion</td>
	</tr>
	<tr>
		<td>26</td>
		<td>Baby</td>
		<td>Justin Bieber</td>
	</tr>
	<tr>
		<td>27</td>
		<td>Umbrella</td>
		<td>Rihanna</td>
	</tr>
	<tr>
		<td>28</td>
		<td>I Have a Dream</td>
		<td>Westlife</td>
	</tr>
</tbody>
</table>
<script language="javascript" type="text/javascript">
//<![CDATA[
 setFilterGrid( "table1" );
//]]>
</script>

Ok Tutorial Cara Membuat Tabe Dinamis di Blogger sudah selesai, anda bisa melihat hasil karya anda sendiri.
Semoga bermanfaat ya

• Next Post
• Prev Post