31.03.2016.

Napravite CSS tabelu


kako kreirati css tabelu u blog postu

Blogger post editor pruza dosta alata koji pomazu blogerima da urede svoje postove tako da izgledaju sto privlacnije, modernije i profesionalnije. Ali ako zelite da napravite tabelu i da je dodate, u editoru necete naci opciju. Ima dosta nacina kako da napravite tabelu (HTML, WORD,CSS...) i da je dodate. Ja cu vam pokazati najlaksu opciju kako da kreirate i da je dodate u vas post. To je CSS tabela. Tabelu koju cu napraviti ima sjajne efekte, lako se ucitava i ne usporava blog.

Pogledajte demo:

Heading 1 Heading 2 Heading 3
Table A Table B Table C
Blogger Wordpress Joomla
CSS3 HTML5 Javascript
Sylesheet Script Coding

Da bi dodali tabelu, pratite sledece korake:

  • Prvi korak koji trebate da uradite jeste da dodate kod u sablonu koji cu ostaviti dole.
  • Idite na Blogger kontrolnu tablu > Sablon > Izmeni HTML
  • Pritisnite CTRL+F kako biste otvorili traku za pretragu
  • Unutrar trake za pretragu upisite  ]]></b:skin> i pritisnite ENTER.
  • Kada ste pronasli  ]]></b:skin> potrebno je da iznad njega dodate sledeci kod:
table {
color:#333;
font-family:Helvetica,Arial,sans-serif;
width:100%;
border-spacing:1px;
border-collapse:separate;
padding:0 3px;
}

td, th {
height:30px;
transition:all .3s;
text-align:center;
width:auto;
}

th {
background:#B1B6AF;
font-weight:700;
border-radius: 5px;
}

td {
background:#FAFAFA;
}

tr:nth-child(even) td {
background:#F1F1F1;
}

tr:nth-child(odd) td {
background:#E1DDDD;
}

tr td:hover {
background:#666;
color:#FFF
}
  • Sacuvajte sablon.
  • Ovo kodiranje ce raditi tek kada dodate tabelu u postu, a da bije dodali, pratite sledece korake:
  • U post editor prozoru, kliknite na HTML tab (vidi sliku ispod) i dodajte sledeci kod:

<table>
<tbody>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr>
<td>Table A</td>
<td>Table B</td>
<td>Table C</td>
</tr>
<tr>
<td>Blogger</td>
<td>Wordpress</td>
<td>Joomla</td>
</tr>
<tr>
<td>CSS3</td>
<td>HTML5</td>
<td>Javascript</td>
</tr>
<tr>
<td>Sylesheet</td>
<td>Script</td>
<td>Coding</td>
</tr>
</tbody>
</table>

Ako zelite da dodate red, samo ubacite sledeci kod unutar </tbody> tagova.

<tr>
<td>SEO</td>
<td>Search Engine Optimization</td>
<td>Google</td>
</tr>

Ako zelite da dodate novi red u svakoj sekciji za dodavanje sadrzaja, upisite sledeci kod:

<tr>
<td>Sylesheet</td>
<td>Script</td>
<td>Coding</td>
<td>Designing</td>
</tr>

Mozete dodavati ili brisati kolone ili redove na isti nacin.


Podesavanja:

Mozete menjati kombinacije boja tabele (Kodovi oznaceni zelenom bojom)
Kod oznacen plavom bojom oznacava prostor izmedju granica kolona koju mozete isto podesiti kako zelite.
Kod oznacen crvenom bojom eliminise prostom izmedju granice i mozete obrisati ako zelite.

Nadam se da sam vam pomogao da dodate tabelu u blog postu. Ako imate problema oko dodavanja, pisite!

0 komentara:

Постави коментар