..."  blog em estilo revista"  ...
Autor: Edilene brandao da silva | Publicado: 2012-10-02T06:12:00-07:00


&nbsp;..."&nbsp; blog em estilo revista"&nbsp; ...


Em primeiro lugar,&nbsp;

esse tutorial,&nbsp;

está composto "diversas partes", explicativas...

...por&nbsp;

conseguinte, estude-o &nbsp;

antes de aplicá-lo , &nbsp;

pois ,

cada caso é um caso,&nbsp;

leia e releia,&nbsp;

para ver quais partes

possa lhe interessar! 













..."&nbsp; blog em estilo revista"&nbsp; ...&nbsp;



..." neste caso... "..."&nbsp;&nbsp;


as medidas do template Mínima original&nbsp; (foram consideradas),&nbsp;portanto se for necessário, aumente a largura.&nbsp;(onde está na cor verde)


Então:


▼


.Logado no painel

blogger;

...vá até


o HTML do seu blog,&nbsp;



&nbsp;procure pelo código:

▼

&nbsp;]]&gt;&lt;/b:skin&gt;





e, ao encontrá-lo,



..."depois dele&nbsp;
cole o código :
▼

&lt;!-- Estilo revista--&gt;&lt;b:if cond='data:blog.pageType != &amp;quot;item&amp;quot;'&gt;&lt;b:if cond='data:blog.pageType != &amp;quot;static_page&amp;quot;'&gt;&lt;style&gt;.post {width:&nbsp;188px;height:330px;margin: 8px 4px 3px 4px;padding:2px 1px 2px 1px;background: #fff;border: 3px groove #ccc;overflow:hidden;float: left;}.post h3 {font-size: 12px;background: #ccc;text-shadow: #ccc 1px 1px 1px;font-weight:bold;padding:10px 0;height: 60px;}.post-body {height: 190px;overflow:hidden;}.post-body img {width:100px;height: 80px;float: left;overflow:hidden;margin: 3px;padding: 2px;border: 1px solid;}.post-footer {overflow:hidden;margin: 10px 0 -1px 0;padding: 10px 0 -2px 0;background:&nbsp;#ccc;}.post-footer-line-2 {display: none;}.post-footer-line-3 {display: none;}.date-header {display: none;}&lt;/style&gt;&lt;/b:if&gt;&lt;/b:if&gt;&lt;!-- fim Estilo revista--&gt;





" Salve".&nbsp;&nbsp;&nbsp;


Em seguida,


procure por:



&lt;b:includable id='nextprev'&gt;



e,&nbsp;
ao encontrá-lo,






cole&nbsp;
depois dele
o seguinte código:

▼



&lt;div style='clear: both;'/&gt;

visualize,&nbsp;
estando tudo certinho, &nbsp;
salve!








&nbsp;..." se "   : &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;



(caso queira ) &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;



&nbsp;..." colocar o código"... &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;





&nbsp;..."  Leia mais" ... &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
















"&nbsp; Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo."















Este hack coloca resumo das postagens em 


&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;seu blog&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; automaticamente&nbsp;e


reduz as imagens dos posts.&nbsp;



Mas atenção, ele invalida o



"&nbsp;&nbsp;Leia mais"&nbsp;&nbsp; (jump break) nativo do Blogger.








Então:


No HTML de seu blog,&nbsp;
ao encontrar&nbsp;

o código abaixo
▼&nbsp;





&lt;div class='post-body entry-content'&gt;

&lt;data:post.body/&gt;

&nbsp;&lt;div style='clear: both;'/&gt; &lt;!-- clear for photos floats --&gt;

&lt;/div&gt;

&lt;b:if cond='data:post.hasJumpLink'&gt;

&lt;div class='jump-link'&gt;

&lt;a expr:href='data:post.url + &amp;quot;#more&amp;quot;' expr:title='data:post.title'&gt;&lt;data:post.jumpText/&gt;&lt;/a&gt; &nbsp;

&lt;/div&gt;

&nbsp;&nbsp; &nbsp;&lt;/b:if&gt;





&nbsp;Substitua por este:
▼&nbsp;



&lt;div class='post-body entry-content'&gt;&lt;b:if cond='data:blog.pageType != &amp;quot;item&amp;quot;'&gt;&lt;b:if cond='data:blog.pageType != &amp;quot;static_page&amp;quot;'&gt;&lt;div expr:id='&amp;quot;summary&amp;quot; + data:post.id'&gt;&lt;data:post.body/&gt;&lt;/div&gt;&lt;script type='text/javascript'&gt;createSummaryAndThumb(&amp;quot;summary&lt;data:post.id/&gt;&amp;quot;);&lt;/script&gt;&lt;span id='showlink'&gt;&lt;a expr:href='data:post.url'&gt;Leia Mais &amp;#9658;&lt;/a&gt;&lt;/span&gt;&lt;/b:if&gt;&lt;/b:if&gt;&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;&lt;data:post.body/&gt;&lt;/b:if&gt;&lt;b:if cond='data:blog.pageType == &amp;quot;static_page&amp;quot;'&gt;&lt;data:post.body/&gt;&lt;/b:if&gt;&lt;div style='clear: both;'/&gt; &lt;!-- clear for photos floats --&gt;&lt;/div&gt;





Então ,
ficará assim o código:



&lt;div class='post-header'&gt;&nbsp;&nbsp;&nbsp; &lt;div class='post-header-line-1'/&gt;&nbsp;&nbsp;&nbsp; &lt;/div&gt;&nbsp;&nbsp;&nbsp; &lt;div class='post-body entry-content'&gt;&lt;b:if cond='data:blog.pageType != &amp;quot;item&amp;quot;'&gt;&lt;b:if cond='data:blog.pageType != &amp;quot;static_page&amp;quot;'&gt;&lt;div expr:id='&amp;quot;summary&amp;quot; + data:post.id'&gt;&lt;data:post.body/&gt;&lt;/div&gt;&lt;script type='text/javascript'&gt;createSummaryAndThumb(&amp;quot;summary&lt;data:post.id/&gt;&amp;quot;);&lt;/script&gt;&lt;span id='showlink'&gt;&lt;a expr:href='data:post.url'&gt;Leia Mais &amp;#9658;&lt;/a&gt;&lt;/span&gt;&lt;/b:if&gt;&lt;/b:if&gt;&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;&lt;data:post.body/&gt;&lt;/b:if&gt;&lt;b:if cond='data:blog.pageType == &amp;quot;static_page&amp;quot;'&gt;&lt;data:post.body/&gt;&lt;/b:if&gt;&lt;div style='clear: both;'/&gt; &lt;!-- clear for photos floats --&gt;&lt;/div&gt;&nbsp;&nbsp;&nbsp; &lt;div class='post-footer'&gt;&nbsp;&nbsp;&nbsp; &lt;div class='post-footer-line post-footer-line-1'&gt;





Atenção, no código acima, o que está na cor vermelha já existia&nbsp; 











Depois:

Novamente,
&nbsp;procure por:
▼



]]&gt;&lt;/b:skin&gt;



&nbsp;..E depois dele&nbsp;


cole&nbsp;
o próximo código:&nbsp;
&nbsp;▼



&lt;script type='text/javascript'&gt;var thumbnail_mode = &amp;quot;float&amp;quot; ;summary_noimg = 450;summary_img =&nbsp;400;img_thumb_height =&nbsp;100;img_thumb_width =&nbsp;100;&lt;/script&gt;&lt;script type='text/javascript'&gt;//&lt;![CDATA[function removeHtmlTag(strx,chop){if(strx.indexOf("&lt;")!=-1){var s = strx.split("&lt;");for(var i=0;i&lt;s.length;i++){if(s[i].indexOf("&gt;")!=-1){s[i] = s[i].substring(s[i].indexOf("&gt;")+1,s[i].length);} }strx = s.join(""); }chop = (chop &lt; strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' &amp;&amp; strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...'; }function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(img.length&gt;=1) {if(thumbnail_mode == "float") {imgtag = '&lt;span style="float:left; padding:0px 10px 5px 0px;"&gt;&lt;img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/&gt;&lt;/span&gt;';summ = summary_img;} else {imgtag = '&lt;div style="padding:5px" align="center"&gt;&lt;img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /&gt;&lt;/div&gt;';summ = summary_img;}}var summary = imgtag + '&lt;div&gt;' + removeHtmlTag(div.innerHTML,summ) + '&lt;/div&gt;';div.innerHTML = summary;}//]]&gt;&lt;/script&gt;












...VISUALIZE...



&nbsp;...Salve...









"ATENÇÃO:&nbsp;

Este tutorial serve também ao novo Blogger, implementado em junho de 2010"




nota:
"Códigos na cor verde tamanho da imagem ""Código em rosa quantidade de letras"




pesquisa realizada em:
templateseacessorios


&nbsp;ADENDO:




&nbsp; "&nbsp; A palavra&nbsp;&nbsp;"&nbsp;Leia Mais"&nbsp;&nbsp;&nbsp;


se refere ao texto do link 


que aparecerá no post,&nbsp;


na sua página inicial,&nbsp;


é onde o leitor ao clicar,&nbsp;


é direcionado 


à página do post completo.


É neste espaço que você 


coloca o texto que preferir"&nbsp;...





(Ex.:&nbsp;Continue Lendo,

Ler Todo Artigo,&nbsp;

Leia Mais,

Ver Conteúdo etc)."



..."&nbsp;pode-se também&nbsp;

personalizar o link&nbsp;"&nbsp; &nbsp;
"leia mais", &nbsp;
de diversas maneiras,&nbsp;
substituindo o texto por&nbsp;
uma imagem, ou&nbsp;
acrescentar &nbsp;
uma imagem&nbsp;
ao texto do link,&nbsp;
como uma seta,&nbsp;
por exemplo."













...veja como :... &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 















..."Personalizando o Link"...&nbsp;&nbsp;''Leia Mais'':

" Para substituir o texto por uma imagem, procure pelo código: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 


&lt;span id='showlink'&gt;                               
&lt;a expr:href='data:post.url'&gt;Leia Mais ►



E substitua o texto&nbsp;'Leia Mais' por:
&lt;span id='showlink'&gt;&lt;a expr:href='data:post.url'&gt;&lt;img src="URL-DA-SUA-IMAGEM" /&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;







Para incluir uma imagem ao texto 'Leia Mais',&nbsp;



acrescente logo em seguida a ele:

&lt;img src='ENDEREÇO-DA-SUA-IMAGEM'/&gt;





..."&nbsp; aplicar estilos CSS: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 



&nbsp;... "poderá também&nbsp;
personalizar estilos&nbsp;
para o link 'Leia Mais',&nbsp;
para isto,&nbsp;
basta incluir&nbsp;
logo&nbsp;
ACIMA&nbsp;
da tag

&nbsp;]]&gt;&lt;/b:skin&gt;:
o seguinte código&nbsp;
▼

#showlink {
font-size: 11px; /* escolha o tamanho da fonte para o link */
float: right; /* escolha se quer link flutuando à esquerda ou direita */
margin-right: 30px; /* aplique margens para posicionar link */
margin-top: -8px; /*a margem negativa para o topo aproxima o link do texto do post */
font-weight: bold;
}

#showlink a {
color: #ffffff;  /* escolha a cor de seu link */
}

#showlink a:visited {
color: #cccccc;  /* escolha a cor de seu link quando visitado */
}

#showlink a:hover {
color: #000000;  /* escolha a cor de seu link quando passa o mouse em cima */
}





"&nbsp;&nbsp; Confira o artigo:Criando estilos para o Hack 'Leia Mais' de postagem resumida&nbsp;e veja como aplicar estilos para os resumos e como personalizar os posts apenas na página inicial."







fonte e créditos da pesquisa acima: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;



mundodarkness&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
















|||||||||||||||||||||||||||||||||||||||||







e.t.: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;



Caso queira: &nbsp; &nbsp; &nbsp; &nbsp;



ao invéz de "&nbsp;leia mais",



substituir por uma "gif "...



...é o seguinte: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 



..."Personalize o Link ' &nbsp;'' Leia Mais'':

..."&nbsp; substitundo o texto &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;
por uma imagem, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

procure por:



&lt;span id='showlink'&gt;
&lt;a expr:href='data:post.url'&gt;Leia Mais ►



E, substitua o texto&nbsp;'Leia Mais' por:

&lt;span id='showlink'&gt;&lt;a expr:href='data:post.url'&gt;&lt;img src="URL-DA-SUA-IMAGEM" /&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;







Para incluir uma imagem ao texto&nbsp;'Leia Mais',&nbsp;&nbsp;

acrescente logo em seguida a ele: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 



&lt;img src='ENDEREÇO-DA-SUA-IMAGEM'/&gt;







&nbsp;:::

Agora:

No NOVO BLOGGER:
&nbsp;&nbsp;

O "LEIA MAIS"&nbsp;

...

...será
assim, colocado :







&nbsp;&nbsp;..." se " :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

(caso queira )&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

&nbsp;..." colocar o código"...

&nbsp;..."&nbsp;Leia mais" ...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

no novo modelo blogger&nbsp;&nbsp;&nbsp; 













"&nbsp; Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo."













&nbsp; Este hack coloca resumo das postagens em seu blog automaticamente e reduz as imagens dos posts. Mas atenção, ele invalida o "&nbsp;&nbsp;Leia mais"&nbsp;&nbsp; (jump break) nativo do Blogger.









Vá até o HTML de seu blog,&nbsp;
... ao encontrar
o código: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp;▼





&nbsp;&lt;b:if cond='data:blog.metaDescription == &amp;quot;&amp;quot;'&gt;
&nbsp; &nbsp; &nbsp; &lt;!-- Then use the post body as the schema.org description,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for good G+/FB snippeting. --&gt;
&nbsp; &nbsp; &nbsp; &lt;div class='post-body entry-content' expr:id='&amp;quot;post-body-&amp;quot; + data:post.id' itemprop='description articleBody'&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;data:post.body/&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;div style='clear: both;'/&gt; &lt;!-- clear for photos floats --&gt;
&nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;b:else/&gt;
&nbsp; &nbsp; &nbsp; &lt;div class='post-body entry-content' expr:id='&amp;quot;post-body-&amp;quot; + data:post.id' itemprop='articleBody'&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;data:post.body/&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;div style='clear: both;'/&gt; &lt;!-- clear for photos floats --&gt;
&nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;/b:if&gt;

&nbsp; &nbsp; &lt;b:if cond='data:post.hasJumpLink'&gt;
&nbsp; &nbsp; &nbsp; &lt;div class='jump-link'&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;a expr:href='data:post.url + &amp;quot;#more&amp;quot;' expr:title='data:post.title'&gt;&lt;data:post.jumpText/&gt;&lt;/a&gt;
&nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;/b:if&gt;



&nbsp;Substitua por este:
&nbsp;&nbsp;&nbsp;▼



&lt;div class='post-body entry-content'&gt;&lt;b:if cond='data:blog.pageType != &amp;quot;item&amp;quot;'&gt;&lt;b:if cond='data:blog.pageType != &amp;quot;static_page&amp;quot;'&gt;&lt;div expr:id='&amp;quot;summary&amp;quot; + data:post.id'&gt;&lt;data:post.body/&gt;&lt;/div&gt;&lt;script type='text/javascript'&gt;createSummaryAndThumb(&amp;quot;summary&lt;data:post.id/&gt;&amp;quot;);&lt;/script&gt;&lt;span id='showlink'&gt;&lt;a expr:href='data:post.url'&gt;Leia Mais &amp;#9658;&lt;/a&gt;&lt;/span&gt;&lt;/b:if&gt;&lt;/b:if&gt;&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;&lt;data:post.body/&gt;&lt;/b:if&gt;&lt;b:if cond='data:blog.pageType == &amp;quot;static_page&amp;quot;'&gt;&lt;data:post.body/&gt;&lt;/b:if&gt;&lt;div style='clear: both;'/&gt; &lt;!-- clear for photos floats --&gt;&lt;/div&gt;





Agora procure por:



]]&gt;&lt;/b:skin&gt;



&nbsp;..E depois dele&nbsp;


cole&nbsp;
o próximo código:&nbsp;
&nbsp;▼



&lt;script type='text/javascript'&gt;var thumbnail_mode = &amp;quot;float&amp;quot; ;summary_noimg = 450;summary_img =&nbsp;400;img_thumb_height =&nbsp;100;img_thumb_width =&nbsp;100;&lt;/script&gt;&lt;script type='text/javascript'&gt;//&lt;![CDATA[function removeHtmlTag(strx,chop){if(strx.indexOf("&lt;")!=-1){var s = strx.split("&lt;");for(var i=0;i&lt;s.length;i++){if(s[i].indexOf("&gt;")!=-1){s[i] = s[i].substring(s[i].indexOf("&gt;")+1,s[i].length);} }strx = s.join(""); }chop = (chop &lt; strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' &amp;&amp; strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...'; }function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(img.length&gt;=1) {if(thumbnail_mode == "float") {imgtag = '&lt;span style="float:left; padding:0px 10px 5px 0px;"&gt;&lt;img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/&gt;&lt;/span&gt;';summ = summary_img;} else {imgtag = '&lt;div style="padding:5px" align="center"&gt;&lt;img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /&gt;&lt;/div&gt;';summ = summary_img;}}var summary = imgtag + '&lt;div&gt;' + removeHtmlTag(div.innerHTML,summ) + '&lt;/div&gt;';div.innerHTML = summary;}//]]&gt;&lt;/script&gt;












...VISUALIZE...



&nbsp;...Salve...








ATENÇÃO:&nbsp;Este tutorial serve também ao novo Blogger, implementado em junho de 2010


Códigos na cor verde tamanho da imagem&nbsp;Código em rosa quantidade de letras


Nota:

Atenção!

No modelo do antigo blogger :

Procedimento, para que funcionecom o&nbsp;
código "Leia Mais" ,
será assim, ou seja, no final ficará assim o trecho:


&nbsp;&lt;div class='post-header'&gt;&nbsp;&nbsp;&nbsp; &lt;div class='post-header-line-1'/&gt;&nbsp;&nbsp;&nbsp; &lt;/div&gt;&nbsp;&nbsp; &lt;div class='post-body entry-content'&gt;&lt;b:if cond='data:blog.pageType != &amp;quot;item&amp;quot;'&gt;&lt;b:if cond='data:blog.pageType != &amp;quot;static_page&amp;quot;'&gt;&lt;div expr:id='&amp;quot;summary&amp;quot; + data:post.id'&gt;&lt;data:post.body/&gt;&lt;/div&gt;&lt;script type='text/javascript'&gt;createSummaryAndThumb(&amp;quot;summary&lt;data:post.id/&gt;&amp;quot;);&lt;/script&gt;&lt;span id='showlink'&gt;&lt;a expr:href='data:post.url'&gt;&lt;img src='AQUI VOCE ESCREVE O ENDEREÇO DA IMAGEM LEIA MAIS'/&gt;&lt;/a&gt;&lt;/span&gt;&lt;/b:if&gt;&lt;/b:if&gt;&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;&lt;data:post.body/&gt;&lt;/b:if&gt;&lt;b:if cond='data:blog.pageType == &amp;quot;static_page&amp;quot;'&gt;&lt;data:post.body/&gt;&lt;/b:if&gt;&lt;div style='clear: both;'/&gt; &lt;!-- clear for photos floats --&gt;&lt;/div&gt;&nbsp;&nbsp;&nbsp; &lt;b:if cond='data:post.hasJumpLink'&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class='jump-link'&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a expr:href='data:post.url + &amp;quot;#more&amp;quot;' expr:title='data:post.title'&gt;&lt;data:post.jumpText/&gt;&lt;/a&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;&nbsp;&nbsp;&nbsp; &lt;/b:if&gt;&lt;div class='singleinfo'&gt;&nbsp;&nbsp;&nbsp; &lt;div class='post-footer-line post-footer-line-1'&gt;



No código acima, o que está na cor vermelha já existe &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 


clica aqui e veja um&nbsp; modelo












<!-- AddThis Button BEGIN -->











<!-- AddThis Button END -->