Aprenda Como se faz:..." blog em estilo revista"  ...
Autor: Edilene brandao da silva | Publicado: 2014-02-02T10:53:00-08:00

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





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

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



 &nbsp;







Vá até o HTML do seu blog, procure pelo código:


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







"&nbsp; Agora cole depois dele o código abaixo."  



&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:  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: #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; 


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

"&nbsp; Agora clique em "&nbsp;&nbsp;&nbsp; Expandir modelos de widget"  
Procure por:

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


Depois dele cole o seguinte código:



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


visualize, e se tudo estiver certo, &nbsp;salve





&nbsp;..." se "&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; &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; Leia mais" ... &nbsp; &nbsp; &nbsp; &nbsp; &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."




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



Vá até o HTML de seu blog, clique em&nbsp;&nbsp;&nbsp;&nbsp; "&nbsp;&nbsp; Expandir modelo de widget" e ao  encontrar o trecho abaixo:


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

  

 &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; 





/\...E depois dele cole o próximo código: \/



&lt;script type='text/javascript'&gt;
var thumbnail_mode = &amp;quot;float&amp;quot; ;
summary_noimg = 450;
summary_img = 400;
img_thumb_height = 100;
img_thumb_width = 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: 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    


fonte e créditos:

templateseacessorios






ADENDO:

&nbsp; "&nbsp; A palavra "&nbsp;&nbsp; Leia Mais"&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.&nbsp;

É 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;&nbsp; pode também personalizar o link&nbsp;"&nbsp;&nbsp; leia mais",&nbsp; de diversas maneiras,&nbsp;substituindo o texto por uma imagem, ou&nbsp;acrescentar uma imagem ao texto do link,&nbsp;com uma seta,&nbsp;por exemplo."







veja como logo abaixo: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;



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


"&nbsp; Para substituir o texto por uma imagem, procure por : &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;


&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;                  






 
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;



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


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

#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: &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; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;



&nbsp;http://www.mundodarkness.com/2009/08/postagem-resumida-na-pagina-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; inicial_12.html#ixzz0xMUCiJJz&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;















e.t.:


Caso queira:



ao invéz de " 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; &nbsp;&nbsp;



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


..."&nbsp; substitundo o texto por uma imagem, &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;







Para incluir uma imagem ao texto 'Leia Mais', &nbsp;
acrescente logo em seguida &nbsp; &nbsp; a &nbsp; &nbsp; &nbsp; &nbsp; ele: &nbsp;
 


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