18 de jul de 2011

Colocar o novo Blogger em estilo revista


A organização, o layout podem facilitar muito a navegação de seus leitores. Dê a eles um presente, organizando seu blog, deixando-o mais leve e fácil de ler, com essa dica: deixar o novo Blogger com as postagens resumidas na página de entrada.(Essa dica foi feita em cima do templa Simple)

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;
float: right;
font-size: 20px;}

#showlink a:hover{
padding: 2px;
background: #fff;
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;'/>


Se você quiser esconder a parte do footer como link para comentários, menu social, marcadores, copie o próximo código e cole-o abaixo de:

]]></b:skin> 



<!-- Estilo revista-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.post-footer{display:none;}
.post-footer {display: none;}
.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>


10 comentários:

  1. Parabéns pelas dicas, camarada!!! Foram muito úteis para o meu blog! Abraços!!!

    ResponderExcluir
  2. como faço se em determinadas postagens nao quiser usar o leia mais

    ResponderExcluir
  3. Muito bom :) Obrigado pela excelente dica :)

    ResponderExcluir
  4. o meu é template simples e não deu certo

    ResponderExcluir
  5. elke, uma dúvida: com os códigos, podemos determinar na pagina inicial o tamanho da imagem e a quantidade de caracteres do post. Tem algum código para ser inserido que determina a quantidade de caracteres do título do post na pagina inicial? bjs

    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