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

Bloquear Conteúdo no Blogger

Para quem quer proteger o seu blog, irei postar aqui ótimos códigos para bloquear o conteúdo do blog. São códigos muito bons, já usei em um blog meu, é bem eficaz e funciona em todos os navegadores. não é muito difícil colocar estes códigos, para isso vamos alterar o HTML do blog

Bloqueando a Seleção de Textos

1) Entre em Modelo ► Editar HTML

procure^{(ctrl + F)} por </head> e acima dela cole o seguinte código:

<script language='JavaScript'>
function bloquear(e){return false}
function desbloquear(){return true}
document.onselectstart=new Function (&quot;return false&quot;)
if (window.sidebar){document.onmousedown=bloquear
document.onclick=desbloquear}
</script>

2) Agora procure por Body.

Em seu blog ela estará assim: <body>. Dentro dela cole isto:

onselectstart='return false'

Deverá ficar desta forma: <body onselectstart='return false'>


Bloqueando o botão Direito do Mouse

Agora vamos bloquear o botão direito do mouse. assim, diminui mais os riscos de copiarem o seu conteúdo.

Na mesma página, com a tag <body> coloque dentro dela o seguinte código

oncontextmenu='return false'

Se você colocou o código para bloquear a seleção de textos, ficará da seguinte forma:

<body onselectstart='return false' oncontextmenu='return false'>

Agora salve o modelo. Pronto, vá para a pagina inicial do seu blog e veja se funcionou. Agora os riscos de copiarem o conteúdo do seu blog são mínimos, mas ainda é possível, por isso você pode proteger o seu conteúdo contra Plágio com ferramentas online como myfreecopyright, que é o meu preferido, mas existem outras ferramentas como esta.

Continue

Como Remover a Navbar do Blogger

Uma coisa que atrapalha o layout dos blogs e o Navbar do Blogger. Muita gente quer saber como remover a "barrinha do blog", agora o blogger da a opção de oculta-la no seu blog, mas se você for usar o layout em outro blog, isso não vai adiantar, você pode usar outros métodos para remover a Navbar do blog usando CSS, alterando o HTML do seu blog, e utilizando até JavaScript.

Se você ainda não sabe como oculta-la em seu blog vá na guia Layout ► procure o Gadget Navbar e clique em editar, alem de poder mudar o estilo dela, você também pode oculta-la

Mas para Remove-la do seu template é assim:

Removendo a Navbar do blog

Removendo com CSS:

1) Entre em Modelo ► Editar HTML

2) Na pagina que abrir procure^{(Ctrl + F)} por ]]></b:skin> e acima deste trecho coloque o seguinte código CSS:

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

Acho este método mais simples e mais eficiente, mas também há outro método, removendo o gadget diretamente no HTML. Descobri isso fazendo experiências com alguns dos meus Templates.

Removendo o gadget diretamente no HTML:

1) Entre em Modelo ► Editar HTML

2) Na pagina que abrir procure por:

<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>

 Remova-o e clique em Visualizar, se está tudo certo clique em salvar, Irá aparecer esta mensagem:

Clique em Excluir Widgets

Acho este Método mais complicado e perigoso, mas ainda não sei se este método vale para outros blogs (se você faz Templates para download não aconselho muito).

Também conheço outro método, usando JavaScript.

Removendo com JavaScript:


1) Entre em Modelo ► Editar HTML

2) Na pagina que abrir procure por:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

3) Acima deste trecho cole o seguinte código JavaScript.

<!-- Navbar--><script type='text/javascript'>
<![CDATA[
<!--
/*<body>*/
-->
]]>
</script>

Clique em Salvar.

De todos estes três métodos de remover o Navbar do Blogger, acho o primeiro (com CSS) mais fácil, prático e rápido, mas você pode usar qual quer um destes acima, pois se você fizer tudo certo, com certeza o Navbar irá desaparecer.

Continue

Data dos Posts Personalizada

Hoje vou ensinar como personalizar a data das postagens do blog e deixa-la empilhada  em forma de um calendário, mas ela pode ficar do jeito que você quiser!! É preciso que você fique atento as explicações, pois qualquer coisa que estiver errado, ela não vai funcionar.

Alterando configurações

1) Vá em Configurações ► Formatação ► Formato de data. Deixe a data do blog neste Formato:  24 novembro 2012 (XX mes XXXX).

Alterando HTML

2) Agora vá em Modelo ► Editar HTML, e procure ^{(Ctrl + F)} Por </head> e cole o seguinte código abaixo dela.

<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<div class='fecha_dia'>"+da[0]+"</div>";
mes = "<div class='fecha_mes'>"+da[1].slice(0,3)+"</div>";
anio = "<div class='fecha_anio'>"+da[2]+"</div>";
document.write(dia+mes+anio);
}
</script>

Clique em Salvar Modelo.

3) Agora marque a caixa Expandir Modelos de Widgets.

Procure por

<b:if cond='data:post.dateHeader'><h2 class='date-header'><data:post.dateHeader/></h2></b:if>

Você pode encontrar mais de um trecho igual a este em seu template.

Abaixo de todos que você encontrar coloque o seguinte código:

<a expr:name='data:post.id'/>

Agora procure Por:

<h2 class='date-header'><data:post.dateHeader/></h2>

(Também pode ter mais de um igual a este) 

Substitua por:

<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>

Aplicando Estilos

Procure por ]]></b:skin> e acima dele cole o seguinte código:

#fecha {
color: #464646; /*Edite a cor da data*/
padding: 0px 0px 0px 0px; /*Altere as margens internas da data*/
margin-right:-8px; /*Margem externa direita*/
float:right;
text-align:center;
list-style:none;
display: block;
}
.fecha_dia {
display:block;
font-size:18px; /*Tamanho da fonte*/
line-height:16px;
font-family:'Tahoma';
letter-spacing:-1px
}
.fecha_mes {
font-size:10px; /*Tamanho da fonte*/
line-height:11px;
text-transform:uppercase;
display:block;
}
.fecha_anio {
font-size:9px; /*Tamanho da fonte*/
line-height:15px;
display:block;
}

Pronto, agora é só visualizar e salvar! 

Continue

Marcadores Personalizados no Blogger

Encontrei um método de personalizar os Marcadores do blogger, com certeza, você já viu algum blog com esses marcadores que estão na moda. eu também já quis muito um desses, resolvi postar aqui pra você!

Encontrei os códigos em um site em inglês, (este aqui) lá tem 3 tipos de estilos.

É muito simples, iremos usar apenas CSS

Configurando o Gadget

Deixe as configurações do seu gadget igual a imagem acima, somente o nome é uma escolha livre.

Aplicando Modelos

Procure por </head> e cole o seguinte código Acima dela.

<style type="text/css">
/*<![CDATA[*/
.label-size{
 margin:0;
 padding:0;
 position:relative;
 }
 .label-size a{
 float:left;
 height:24px;
 line-height:24px;
 position:relative;
 font-size:12px;
 margin-bottom: 9px;
 margin-left:20px;
 padding:0 10px 0 12px;
 background:#0089e0;
 color:#fff;
 text-decoration:none;
 -moz-border-radius-bottomright:4px;
 -webkit-border-bottom-right-radius:4px;
 border-bottom-right-radius:4px;
 -moz-border-radius-topright:4px;
 -webkit-border-top-right-radius:4px;
 border-top-right-radius:4px;
 }
.label-size a:before{
 content:"";
 float:left;
 position:absolute;
 top:0;
 left:-12px;
 width:0;
 height:0;
 border-color:transparent #0089e0 transparent transparent;
 border-style:solid;
 border-width:12px 12px 12px 0;
 }
.label-size a:after{
 content:"";
 position:absolute;
 top:10px;
 left:0;
 float:left;
 width:4px;
 height:4px;
 -moz-border-radius:2px;
 -webkit-border-radius:2px;
 border-radius:2px;
 background:#fff;
 -moz-box-shadow:-1px -1px 2px #004977;
 -webkit-box-shadow:-1px -1px 2px #004977;
 box-shadow:-1px -1px 2px #004977;
 }
.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555 transparent transparent;}
/*]]>*/
</style>
<a href="http://tur-quesa.blogspot.com" ><img src="http://img1.blogblog.com/img/blank.gif" /></a>

Onde está em vermelho, é a cor das etiquetas, repare que há dois lugares, você deve colocar as duas cores iguais.

Pronto, Visualize o seu blog e salve, veja que os marcadores já mudaram, isso é bem simples. Aqui tem mais alguns modelos que encontrei no site em inglês, se gostar de algum, é só substituir o código anterior e fazer o mesmo passo.

Código

Código

Obs: este modelo da imagem acima deve conter os números de postagens por marcador.

Continue

Arquivo em Forma de Calendário

Para personalizar mais o seu blog, irei postar agora um modo de personalizar o gadget Arquivo do Blog e deixa-lo em forma de calendário, veja um exemplo aqui. Isso é bem útil, pois o arquivo fica mais organizado bonito.

Inserindo os Códigos

Primeireiro você ja deve ter o gadget no seu blog.

1) Entre em layolt ► Adicionar um Gadget ► Arquivo do Blog. Deixe-o neste formato:

É importante fazer isso, configure o gadget de acordo com a imagem.

2)  Procure pelo seguinte Código ^{Deixe a opção "Expandir modelos de widgets" desativada}

<b:widget id='BlogArchive1' locked='false' title='Arquivo do Blog' type='BlogArchive'/>

Substitua o código acima por:

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='toggle' var='interval'>
<!-- Toggle not needed for Calendar -->
</b:includable>
<b:includable id='flat' var='data'>
<div id='bloggerCalendarList'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</div>
<div id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption id='bcaption'>
</caption>
<!-- Table Header -->
<thead id='bcHead'></thead>
<!-- Table Footer -->
<!-- Table Body -->
<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr>
</tbody>
</table>
<table id='bcNavigation'><tr>
<td id='bcFootPrev'></td>
<td id='bcFootAll'></td>
<td id='bcFootNext'></td>
</tr></table>

<div id='calLoadingStatus' style='display:none; text-align:center;'>
<script type='text/javascript'>bcLoadStatus();</script>
</div>
<div id='calendarDisplay'/>
</div>
<script type='text/javascript'> initCal();</script>
</b:includable>
<b:includable id='posts' var='posts'>
<!-- posts not needed for Calendar -->
</b:includable>
<b:includable id='menu' var='data'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
<b:includable id='interval' var='intervalData'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
</b:widget>

3) Agora vamos aplicar estilos. Procure por ]]></b:skin> e Acima dele cole o seguinte código CSS:

/* Arquivo Calendario*/
#blogger_calendar{
margin:5px 0 0 0;
width:100%;
}
#bcaption {
border:1px solid #000;
padding:2px;
margin:10px 0 0;
background:#1F1FFF;
}
#bcaption select{
border:0px;
background:#1F1FFF;
color:#fff;
font-weight:bold;
}
table#bcalendar thead{
background:#000;
}
table#bcalendar thead tr th{
width:20px;text-align:center;
padding:2px; border:1px solid #000;
font-family:Tahoma;
font-weight:bold;color:#fff;
}
table#bcalendar{
border:1px solid #000;
border-top:0; margin:0px 0 0px;
width:95%;
background:#fff;
}
table#bcalendar tbody tr td{
text-align:center;
padding:2px;
border:1px solid #000;
color:#1F1FFF;
}
table#bcalendar tbody tr td a{
font-weight:bold;
color:#000;
}
td.firstCell {visibility: visible;
}
td.filledCell{
background: #fff;
}
td.emptyCell{
visibility: hidden;
}
td.highlightCell{
background:#ddd;
border:1px outset #000
}
table#bcNavigation{
width:95%;
background:#1F1FFF;
border:1px solid #000;
border-top:0;
}
table#bcNavigation a{
ext-decoration:none;
color:#fff;
}
td#bcFootPrev{
width:10px;
}
td#bcFootAll{
text-align:center;
}

Agora visualize o modelo e clique em Salvar Modelo

4) Agora procure por </head> e cole o seguinte código acima dele.

<script src='http://static.tumblr.com/726xof9/M1tmhz78n/arquivo_calendario.js' type='text/javascript'/>
<script src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=timezoneSet'/>

Visualize o modelo, se está tudo certo, clique em Salvar Modelo.

Você pode alterar os estilos da forma que quiser.

Continue

Publicar Postagens no Blogger

Uma duvida comum dos usuários novatos do Blogger é como publicar as postagens (artigos) no blog. É uma coisa muito simples, não é preciso intender de HTML, o blogger tem um sistema de formatação de textos bem legal e simples.


Publicar Postagens no Blog

1) Acesse a sua lista de blogs entrando no link: http://www.blogger.com/home.
Abrirá uma pagina assim:

Essa é a minha lista, mostra todos os meus blogs, eu tenho vários blogs, tanto que  no final da pagina esta escrito “Visualizar mais”.

Na sua lista, mostrara os seus blogs, se você tiver apenas um, aparecerá apenas ele na lista, você pode criar vários blogs.

2) Ao lado do titulo do seu blog (que aparece na lista) tem um botão laranja com um lápis. Clique nele para criar uma postagem.

3) Abrirá uma pagina assim:

☁ Clique para Ampliar

Nesta página é onde você ira criar a sua postagem, neste campo campo você pode escrever o que quiser, acima dele, terá várias opções de formatação de texto: Fonte, Cor da Fonte, Links, etc. Na parte de cima, tem um campo escrito “titulo da postagem” onde obviamente será o titulo que você dará a seu texto/post.

Onde a seta esta apontando, é uma configuração importante.

➜ = Marcadores: são como categorias para os seus posts, é importante que você defina categorias para os seus posts, pois seu blog irá aparecer em pesquisas do Google com mais facilidade e ajudara os leitores a encontrar uma postagem especifica.

4) Agora é só clicar em Publicar (ao lado do campo “titulo da postagem”)

Depois abrira uma página que mostrará todas as suas postagens, coloque o mouse sobre o titulo da sua postagem que acabou de publicar e clique no link que aparecera em baixo Visualizar  e irá abrir uma nova guia do seu navegador.

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