.
.
Hoje vamos apresentar como criar uma tabela na postagem do Blogger isso tem um papel fundamental quando desejamos dividir por exemplo um conteúdo informativo, em forma de tabela na postagem do Blog veja abaixo como fica o exemplo
| Detalhes: | Mybloggerseo |
|---|---|
| Dicas | tudo sob blogger |
| SEO | Otimização |
| Adsense Dicas | CPM, CPC, CPA |
| Trafego | as melhores dicas |
| Youtube | Iframe loading |
| Defer loading | 100% |
| responsive | todos dispositivos |
| Dicas e truques | |
| Truques dicas | Aplicação |
| Ad Mobile | Yes |
| Ad custom format | Yes |
| High CTR | Yes |
| Virus Remoção tutorial | Yes |
| Templates | Yes |
| widget | Os melhores |
Como adicionar no Template do Blogger
Faça login no Blogger então va no menu modelo editar HTML com as teclas
combinadas CTRL+F busque por ]]></b:skin> ou </style> e adicione o seguinte código antes disso:
/* Table Post */
table,caption,tbody{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
table{border-collapse:collapse;border-spacing:0;}
.post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table tr th {border:1px solid #457fdf;font-weight:bold;color:#fff;padding:15px 10px;text-align:left;vertical-align:top;font-size:14px}
.post-body table th {background:#4285f4;}
.post-body table.tr-caption-container {border:1px solid #f1f1f1;}
.post-body table caption{border:none;font-style:italic;}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body table tr:nth-child(even) > td {background-color:#f9f9f9;}
.post-body table tr:nth-child(even) > td:hover {background-color:#fbfbfb;}
.post-body td a{color:#768187;padding:0 6px;font-size:85%;float:right;display:inline-block;border-radius:3px}
.post-body td a:hover {color:#7f9bdf;border-color:#adbce0;}
.post-body td a[target="_blank"]:after {margin-left:5px;}
.post-body table.tr-caption-container td {border:none;padding:8px;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}
table {max-width:100%;width:100%;margin:1.5em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:33.33%}
table.columns-4 td.columns-cell{width:25%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}
Salve isso vamos a segunda parte agora:
Crie uma postagem normal va na aba HTML AO LADO de escrever como mostra a figura abaixo:
Então copie e cole o seguinte código:
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Detalhes:</th> <th>Mybloggerseo</th> </tr>
<tr> <td>Dicas</td> <td>tudo sob blogger</td> </tr>
<tr> <td>SEO</td> <td>Otimização</td> </tr>
<tr> <td>Adsense Dicas</td> <td>CPM, CPC, CPA</td> </tr>
<tr> <td>Trafego</td> <td>as melhores dicas</td> </tr>
<tr> <td>Youtube</td> <td>Iframe loading</td> </tr>
<tr> <td>Defer loading</td> <td>100%</td> </tr>
<tr> <td>responsive</td> <td>todos dispositivos</td> </tr>
<tr> <td>Facebook</td> <td>Dicas e truques</td> </tr>
<tr> <td>Truques dicas</td> <td>Aplicação</td> </tr>
<tr> <td>Ad Mobile</td> <td>Yes</td> </tr>
<tr> <td>Ad custom format</td> <td>Yes</td> </tr>
<tr> <td>High CTR</td> <td>Yes</td> </tr>
<tr> <td>Virus Remoção tutorial</td> <td>Yes</td> </tr>
<tr> <td>Templates</td> <td>Yes</td> </tr>
<tr> <td>widget</td> <td>Os melhores</td> </tr>
</tbody> </table>
<br />
<div>
<br />
<br />
Edite então a área de texto conforme a necessidade publique e veja o resultado.
