Ocultar/Exibir Elementos em Páginas Específicas no Blog

Você já quis ocultar um Gadget em determinada postagem ou página do seu blog? isso é possível e muito fácil, apenas utilizando Tags HTML dentro do seu template.

Enquanto navegava no template/HTML do seu blog você já deve ter visto algo assim: <b:if>. é essa a tag que fará os elementos aparecerem nas páginas desejadas, mas ela será diferente, depende das páginas que você queira que o elemento apareça.

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Cole o código do gadget ou html aqui!

</b:if>

O trecho acima é um exemplo de como você vai deixar o elemento dentro da tag.
Veja outro exemplo na imagem abaixo:

 

Ocultando e Exibindo Elementos

1) Para Ocultar um elemento somente na página inicial:

<b:if cond='data:blog.homepageUrl != data:blog.url'>

2) Para Ocultar um elemento somente nas páginas internas (de postagens):

<b:if cond='data:blog.pageType != "item"'>

3) Para Exibir um elemento somente nas páginas internas:

<b:if cond='data:blog.pageType == "item"'>

4) Para Ocultar um elemento somente nas páginas estáticas: ^?

<b:if cond='data:blog.pageType != "static_page"'>

5) Para Exibir um elemento somente na página inicial:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

6)  Para Exibir um elemento somente nas páginas de arquivos:

<b:if cond='data:blog.pageType == "archive"'>

7)  Para Exibir um elemento somente nas páginas estáticas:

<b:if cond='data:blog.pageType == "static_page"'>

8) Para Exibir um elemento em uma página específica:

<b:if cond='data:blog.url == "URL-DA-PÁGINA"'>

9) Para Ocultar um elemento em uma página específica:

<b:if cond='data:blog.url != "URL-DA-PÁGINA"'>

10) Para Exibir um elemento somente na Página de um Marcador Específico:

<b:if cond='data:blog.url == "URL-DO-BLOG/search/label/NOME-DO-MARCADOR"'>

11) Para Ocultar um elemento somente na página de um marcador específico:

<b:if cond='data:blog.homepageUrl != "URL-DO-BLOG/search/label/NOME-DO-MARCADOR"'>

OBS: Não se esqueça de usar a tag de fechamento </b:if>

Continue

Instalar Breadcrumbs no blogger

Uma coisa muito útil e que facilita a os leitores a navegar em seu blog são os Breadcrumbs, eles mostram o caminho que o leitor fez para chegar a certa página do seu blog, ele mostra do Inicio/Home até a postagem em que ele está.

 

Instalando os breadcrumbs

1) Entre no painel do blog  ▶ Modelo ▶ Editar HTML e procure^{(Ctrl + F)} por:

<b:include data='top' name='status-message'/>

2) Substitua este trecho por:

<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
»
<a expr:href='data:label.url' rel='tag'>
<data:label.name/></a>
<b:if cond='data:label.isLast != "true"'/>
</b:loop>
»
<span class='post-title entry-title'>
<data:post.title/>
</span>
</b:if>
</b:loop>
</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'><a expr:href='data:blog.homepageUrl'>Início</a> » Arquivos de <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'><a expr:href='data:blog.homepageUrl'>
Início</a> » Posts do Marcador: <a expr:href='data:label.url' rel='tag'><data:blog.pageName/></a>
</div>
</b:if>
</b:if>

3) Se desejar, pode aplicar etilos. procure por ]]></b:skin> e acima dele cole este trecho:

#breadcrumbs {
font-size: 92%;
padding:5px;
line-height: 1.4em;
}

Os breadcrumbs não aparecerão na pagina inicial do blog, ou seja, não dá para visualiza-los, salve o modelo, se tudo ocorreu certo, os breadcrumbs aparecerão nas páginas de postagens, marcadores e outras páginas internas.

Continue

Resumo de Postagens Automático no Blog

Para deixar a página inicial do seu blog mais organizada, encontrei este código para resumir as postagens do blog automaticamente e deixar uma miniatura da imagem ao lado. É muito útil e deixa o blog mais personalizado e organizado!!

Aplicando os Códigos

1) Vá em modelo ▶ Editar HTML

2) Marque a opção "Expandir Modelos de Widgets" e procure^{(Ctrl + F)} por </head> e cole o seguinte código Acima dela

<!-- Resumo automático -->
<script type='text/javascript'>
summary_noimg = 330;
summary_img = 300;
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) {
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;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!-- Fim resumo automático -->

Agora você pode mudar algumas coisas no código, o que está em Vermelho pode ser alterado

summary_noimg = Número de caracteres do resumo sem imagem;
summary_img = Número de caracteres do resumo com imagem;
img_thumb_height = Altura da imagem em px.
img_thumb_width = Largura da imagem em px.

3) Agora procure^{(Ctrl + F)} por  <data:post.body/> e substitua-o por:

<!-- Resumo automático -->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<p><b:if cond='data:blog.pageType != &quot;item&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 class='rmlink' style='float:right'><a expr:href='data:post.url'>Leia mais...</a>
</span></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></p>
</b:if>
<!-- Fim resumo automático -->

Aplicando Estilos

Agora vamos aplicar estilos ao botão Leia Mais...

4) Procure^{(Ctrl + F)} por ]]></b:skin> e Acima dele cole o seguinte código CSS

.rmlink a {
background: #6210b0; /* Cor do fundo*/
color: white; /* cor da fonte*/
padding: 3px;
}
.rmlink a:hover {
background: #2E0754; /* Cor do fundo selecionado */
} 

Clique em Visualizar e se estiver tudo certo, clique em Salvar. 

Continue

Numerar as Paginas do Blog

Aqui vou mostrar como numerar as paginas do blog, sempre que alguém ir a página inicial do seu blog vai aparecer a numeração de todas as paginas que existem em seu blog!

Neste caso, o blog da imagem acima só tem quatro páginas.
Você pode alterar as cores, estilos de borda e o que mais quiser...
Recomendo que você faça um backup do seu blog

Inserindo a Numeração de Páginas

1) Entre no painel do blog ► Modelo ► Editar HTML.

 Procure Por </body>

^{(Aperte ctrl+F para procurar!)}

  Assim que encontrar, cole o código seguinte ACIMA dela

<!--INÍCIO NUMERAÇÃO DE PÁGINAS-->
<script type='text/javascript'> var pageCount=3; var displayPageNum=3;
var upPageWord =&#39;Anterior&#39;; var downPageWord =&#39;Próximo&#39;; </script> <script src='http://static.tumblr.com/726xof9/6k9mjqj8d/paginacao_1.js' type='text/javascript'/> <script src='http://static.tumblr.com/726xof9/qRXmjqj9a/paginacao_2.js' type='text/javascript'/> <!--FIM -->

 Onde está em Vermelho ★  é o numero de postagens que aparece na pagina inicial do seu blog. Agora iremos aplicar os estilos  a numeração

2) Procure por ]]></b:skin>

(faça a mesma coisa com ctrl+F)

Cole o código seguinte ACIMA dela

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
color: #518FFF;
text-decoration: none;
background: #F2F2F2;
}
.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
background: #518FFF;
color: #fff;
}
.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
background:#518FFF;
text-decoration: none;
}

Visualize, se deu tudo certo,  clique em Salvar Modelos.

Continue