sexta-feira, 16 de dezembro de 2016

Tabela Widget Para Blogger post

widget tabela de descrição para blogger post


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
Facebook 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:

Widget table post blogger


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.