Type Here to Get Search Results !

Tutorial membuat table dinamis di bloger

        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. Berikut contoh hasil akhir dari script yang akan kami berikan.


No. Judul Lagu Penyanyi
1 Someone Like You Adele
2 Price Tag Jessie J
3 Everything at Once Lenka
4 I'm Yours Jason Mraz
5 What's Make You Beautiful One Direction
6 Back to December Taylor Swift
7 Breakaway Kelly Clarkson
8 Trouble is a Friend Lenka
9 Just the Way You Are Bruno Mars
10 Firework Katy Perry
11 Love the Way You Lie Rihanna
12 I Do Colbie Caillat

Yuk silahkan ikuti tutorialnya
1. Login ke user blogger anda
2. Masuk ke Menu Template > Edit HTML
edit-template
3. Masukkan kode css berikut tepat sebelum tag ]]></b:skin> atau tag </style> tergantung dari template yang anda gunakan

1
2
3
4
5
6
7
8
9
10
11
@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>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<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

Sumber : www.dokterweb.com

Tag : table, table dinamis

Tags

Lihat semua

Posting Komentar

0 Komentar