31 de jul. de 2011

Colocar o novo Blogger em estilo revista modelo pequenos quadrados


Conforme já havia ensinado AQUI a colocar o blog em estilo revista para o modelo Minima, portanto o antigo Blogger agora trago para vocês esse hack atualizado. Ao que tudo indica, a série de tutoriais para o novo Blogger, implementado em julho de 2010. É fácil perceber como facilita modelos assim,  a navegação de seu visitante,  deixando o blog mais limpo e harmonioso.(Essa dica foi feita em cima do templa Simple original, sem NENHUMA modificação)

Se você usa outro template, instale este primeiro.

Para isso, vá até o Modelo de seu blog, clique em Editar modelo
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. 
Agora procure por:  

]]></b:skin>  

 
Abaixo dele cole o seguinte código:

Atenção: onde está em azul você controla a quantidade de palavras, e a rosa o tamanho da imagem, na cor verde o local que a sua imagem vai ficar. Se preferir a direita, troque pela palavra right

<!-- Estilo revista-->
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 410;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);} }
strx = s.join(""); }
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && 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>=1) {
if(thumbnail_mode == "float") {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
} else {
imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
summ = summary_img;
}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;}
//]]>
</script>


Salve.

Agora clique em "Expandir modelos de widget" Procure por:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

Troque por este código abaixo:

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



Agora vamos dar estilo ao botão "leia mais"



Cole o próximo código acima de:

]]></b:skin> 


/*Showlink-----------------------------------------------------------*/
#showlink a{
padding: 2px;
background: #000;/*cor de fundo do botão*/
float: right;
font-size: 20px;}

#showlink a:hover{
padding: 2px;
background: #fff;/*cor de fundo do botão ao passar o mouse*/
float: right;
font-size: 20px;}


Agora clique em "Expandir modelo de widget" e procure por:

<b:includable id='nextprev'>


Abaixo dele cole:


<div style='clear:both;'/>



Muito bem, você observou que já está em estilo revista, então vamos fazer com que fique como o modelo, as postagens em quadrados um ao lado do outro.

Procure por:

]]></b:skin>


Abaixo dele cole o seguinte código:

<!-- Estilo revista-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.post {
width: 240px;/*largura do quadrado*/
heigth: 200px;/*comprimento do quadrado*/
margin: 8px 4px 3px 4px;
padding:2px 1px 2px 1px;
background: #fff;/*cor do quadrado*/
border: 3px groove #ccc;/*tipo e cor de borda*/
overflow:hidden;
float: left;
}
.post-body {
background: #cc0000;/*cor de fundo do post*/
}
.post h3 {
font-size: 14px;/*tamanho da letra do título*/
padding: 10px 1px;
background: #ccc;/*cor de fundo do título*/
height: 50px;
}
.post-footer-line-1{display: none;}
.post-footer-line-2 {display: none;}
.post-footer-line-3 {display: none;}
.date-header {display: none;}
</style>
</b:if>
</b:if>


Se quiser que apareça o footer, apague a parte em azul.



Não copie o conteúdo deste blog. Plágio é crime previsto no código civil. 

15 comentários:

  1. muito bom, mas tem dessa mesmo jeito para templates da Minima?????

    ResponderExcluir
  2. aceitou meu comentário e nem respondei, será que a minha dúvida é tão insignificante assim?

    ResponderExcluir
  3. Quase Funciona.

    Implementei no meu futuro template.

    O problema é que não funciona no Internet Explorer, pois, os posts ficam desalinhados a partir do 3°.

    No Firefox, Chrome e Safari funciona perfeitamente.

    ResponderExcluir
  4. Olá. Deu quase tudo certo.
    Apanhei mas consegui colocar um espaço entre o texto e a margem. No seu código elas estavam muito juntas.

    Contudo, a partir da segunda página de posts, aparece apenas 7 postagens, e não 8 como está configurado e aparece na página inicial.

    Alguma sugestão?

    Estou preparando meu template versão beta http://gilson-moura.blogspot.com

    ResponderExcluir
  5. @Missões e Adoração o que pode estar acontecendo é o seguinte, posts pesados, com muitas imagens, vídeos, textos com códigos ou muito extensos pesam e automaticamente o Blogger retira da página principal, sem problemas. O meu blog onde deixo os códigos são tão pesados que mostram apenas 1 postagem. Fazer o que...Beijos

    ResponderExcluir
  6. @sr.weeb tem sim meu querido, e já coloquei o link no post. Beijos

    ResponderExcluir
  7. @Missões e Adoração veja se não há códigos nessa postagem que atrapalha. Se são códigos ou imagens copiadas da web, ode estar aí o segredo da desconfiguração do template.

    ResponderExcluir
  8. Seria muito interessante se vc colocasse uma postagem que mostrasse como dividir os posts da pagina inicial em duas colunas, algo semelhante a isto, mas que não alterasse o designe do modelo. se vc fizer isto por favor me avise "email: rodrigofrcs@hotmail.com".

    ResponderExcluir
  9. preciso de ajuda urgente!!!

    - Os quadrados ficam desalinhados no Explorer, o que fazer?
    - Como colocar data na postagem? Da maneira normal ela não aparece.

    ResponderExcluir
  10. Olá Elke..sou novato por aqui...e estava lendo os comentários..Sabe eu não entendo esse povo o pior navegador que existe na rede é o IE e as pessoas insistem em usá-lo.Povo abram suas mentes a Microsoft bloqueia todo e qualquer tipo de produto que seja da concorrência então?..Usem o Chrome e pronto..acabou os problemas pois a plataforma é do Google e o Blogger tbm está tdo em família e acabam seus problemas.Kiko - Webdesign

    ResponderExcluir
    Respostas
    1. Eurico,

      Só vi seu comentário quase 1 ano após vc ter colocado a sua resposta. :/

      Sabe, eu faço parte do "povo" que usa o Chrome em meu computador, mas que testa os posts nos outros navegadores, pois sabemos que a maioria dos leitores são, ainda, do IE. Se eu escrever só para quem tem Chrome, Firefox ou Opera eu vou perder metade de minhas visitas nos meus blogs. Mas, obviamente, meu navegador já é o Chrome há um tempão! :-)

      Excluir
  11. Por que criticar o IE?

    Alguns programas de Net Banking só funcionam no IE. Vários sistemas de empresas em ASP só funcionam no IE. Não é à toa que até o Google Chrome tem a extensão IETAB, não é mesmo?

    Voltemos ao problema do código. Não funciona no IE e o que podemos fazer?

    Alguma sugestão?

    ResponderExcluir
  12. amigo pode mim dizer como retirar esse leias mais?

    ResponderExcluir
  13. Você poderia postar dicas para outros modelos?

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube