11 de mai de 2009

Colocando o blog em estilo revista

Para quem gosta do blog em estilo revista é bem facinho fazer. Entenda que neste caso eu considerei as medidas do template Minima original, portanto se for necessário, aumente a largura. (onde está na cor verde)

Vá até o HTML do seu blog, procure pelo código:
]]></b:skin>



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 cole depois dele o código abaixo.



<!-- Estilo revista-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.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;}
</style>
</b:if>
</b:if>
<!-- fim Estilo revista-->
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 450;
summary_img = 400;
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:

<b:includable id='nextprev'>

Depois dele cole o seguinte código:

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


Agora vamos colocar o código "Leia mais" para que fique certinho...



Agora procure por:

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

e substitua por este abaixo:

<div class='post-body entry-content'>
<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>
</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>

Procure pelo seguinte código:

<div class='post-footer'>

Abaixo dele cole:

 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<span id='showlink'><a expr:href='data:post.url'>Leia Mais &#9658;</a></span>
</b:if></b:if>


Se o template que você usa for o Simple, aberto depois de julho de 2010, veja AQUI como implementar o hack

22 comentários:

  1. eu queria um template com posts dividos em colunas a tempo. Obrigado pela dica. um abraço

    ResponderExcluir
  2. Está aparecendo> Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The content of elements must consist of well-formed character data or markup.

    Antes funcionava certinho!

    ResponderExcluir
  3. "Se você quer que os comentários e a data apareçam na primeira página, apague os códigos que estão na cor azul."

    Oi? Cor azul?

    ResponderExcluir
  4. Ótima dica Elke, estava procurando por esse hack ha tempos para colocar em meu blog.
    Obrigada por compartilhar seu conhecimento conosco!

    ResponderExcluir
  5. Quando tento colocar abaixo de ]]> da esse erro *Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The element type "head" must be terminated by the matching end-tag "".* porque Elke

    ResponderExcluir
  6. Não sei o que está acontecendo. Vou tentar reinstalar. Um beijos e aguarde.

    ResponderExcluir
  7. Pessoal, obrigada pelo toque. Agora está tudo certo. Havia colocado o código do HOT Words, para ver se tirava algum troquinho no blog mas o danado além de não me dar nem uma moedinha ainda estava interferindo nos códigos do blog. Retirei. Agora está tudo certo. Beijos

    ResponderExcluir
  8. Tive que refazer a dica devido as mudanças no Blogger. Agora está tudo certinho ;-)

    ResponderExcluir
  9. Gostei muito.

    Vou tentar!

    Abraço a todos


    Mariza

    ResponderExcluir
  10. Elke, se eu quiser deixar cada fila com 3 postagens, de modo em que fiquem 3 na horizontal e 4 na vertical e totalize 12 posts, como faz no codigo?

    ResponderExcluir
  11. JÁ ACOMPANHO SEU BLOGGER HÁ ALGUM TEMPINHO, E TIVE OBSERVANDO QUE A APARÊNCIA DO SEU TEMPLATE DE UMA FORMA EVOLUIU NO SENTIDO DE VELOCIDADE QUE AS PAGINAS SÃO CARREGADAS, ENFIM A MINHA PERGUNTA É PORQUE VOCÊ CHEGOU A CONCLUSÃO QUE ESSE ATUAL QUE VOCÊ ESTÁ USANDO É BEM MAIS RÁPIDO QUE OS OUTROS E MAIS DINÂMICO DE MANEIRA QUE EXISTE UM COMPLEMENTO QUE TODOS OS SITES DE TOTORIAIS DE BLOGGER DEVERIAM TER, ''O MAPA DO SITE''. COM O MAPA AS COISAS FICAM MAIS PRÁTICAS, O INTER NAUTA NÃO TEM DE FICAR PROCURANDO PELAS CATEGORIAS OU PASSANDO PAGINAS, O MATA É UMA ESPÉCIE DE CARDÁPIO, VOCÊ CHEGA EM UM RESTAURANTE E IMEDIATAMENTE O GARÇOM DE DAR O CARDÁPIO ENTÃO VOCÊ FICA A PAR DE TODO O CONTEÚDO DO ESTABELECIMENTO, QUE EM NOSSO CASO O ESTABELECIMENTO É O SEU SITE, ENTÃO ME DIZ PORQUE RESOLVEU TROCAR E TEMPLATE ?

    ResponderExcluir
  12. Sr Weeb, ah, veja bem, eu sou uma pessoa meio louca, vou sempre trocando o template do blog, é só começar a tomar abuso aí, pá, vou e troco. Quanto ao mapa, bem, temos que ter mesmo o dando, não é ? Ainda mais eu que troco de modelo igual atriz de marido. Se não tiver o tal mapa, pobre dos meus visitantes. Beijos e obrigada.

    ResponderExcluir
  13. Olá Elke! Eu sou um fiel leitor já a alguns anos. O comentário do Sr Weeb me chamou a atenção. Realmente este seu novo template está um bocado confuso. Os textos não aparecem e este fundo escuro é um tanto feio. Me desculpe pela sinceridade, mas um template mais limpo e mais leve seria muito bem, vindo.

    Para completar os textos das postagens não aparecem. Não dá pra ler a postagem, eu uso IE.

    ResponderExcluir
  14. tem como aparecer só as imagens das postagens?

    ResponderExcluir
  15. para ser mais direto, como retirar o texto da pagina inicial do estilo revista e exibir somente as imagens????

    ResponderExcluir
  16. olá, parabéns pelo blog. Muito útil mesmo.
    Implementei este sistema de estilo magazine no meu blog de teste (http://gilson-moura.blogspot.com/).

    Perfeito no Firefox e Chrome.

    No IE9 não. Os quadradinhos 1 e 2 estão alinhados. O 3 também. Mas, daí em diante ficam desalinhados.

    Alguma sugestão?

    Gilson

    ResponderExcluir
  17. Não consegui resolver. Abandonei este hack - Não funciona!

    Gilson

    ResponderExcluir
  18. Oi meu blog tem esse estilo mas eu quero tirar ! Como que eu tiro ?

    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