26 de fev. de 2013

Colocar Ícones nos Marcadores, Autor do post e Comentários

26 de fev. de 2013  ,  

Aqui está mais uma dica para personalizar o seu blog, colocando ícones nos marcadores do post, autor e comentários.
É muito simples e você só vai utilizar CSS

Aplicando os Códigos
1) Vá em modelo ▶ Editar HTML

2) Procure por ]]></b:skin>  e Acima dela cole o seguinte código CSS

/* Ícones Autor, Marcador e Comentários - tur-quesa.blogspot.com */
.post-author {/* Ícone do Autor do post*/
background:url(http://static.tumblr.com/726xof9/ESImisbtt/user.png) no-repeat left center;
padding-left:20px;
}
.post-labels { /* Ícone das categorias do post*/
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg352nyvhpLJ_LO6XMP5GCNGggkRlcULahQNyZjdkj8IM-gbEKliLhnfIWMdJffXqn0qA62tCbTGHR7ufs2QmBb9cHZhICCONMX0uNd-3pwddSGEfbXteZ2KBTqONSYmE2Jc_mXVJxoYFIj/s0/pink-label.png) no-repeat left center;
padding-left:20px;
}
.comment-link {/* Ícone do numero de comentários do post*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMYx5m2XfNS2xFLMtZ_hKVmTJ5bAmHPaZRpJc73xNKdq9B-m5A6lafylo8uVlIah4EXPB4Xgc_gXgkrxDB-utltidFQ2r6AuR09bOnY9lP2AhaHYgxQZzQ4nZoapr0Ejei6quSZB0q3HFF/s0/comment.png) no-repeat center left;
padding-left: 20px;
height: 20px;
float: right;
}

O que está em cinza  é o url das imagens, se quiser alterar alguma, pode encontrar ícones neste site(em inglês), boa sorte!!

Continue

23 de fev. de 2013

Contador de Caracteres

23 de fev. de 2013  ,  


Aqui está um contador de caracteres, ele é muito útil para muitas coisas, então fiz um para postar aqui!!




Contador de Caracteres

Texto:
Caracteres:


Continue

Caracteres Especiais

23 de fev. de 2013  ,  

Aqui está uma lista com mais de Mil caracteres especiais para serem utilizados em chats e redes sociais, para utilizar os símbolos basta copiar (Ctrl + C) e colar(Ctrl + V) no local desejado!!




♥ ⊗ Ω ♦ ♠ ♥ ♣ ☼

☻ ☺ ۩  ♪ ♫ ∞ ♂♀

▲ ▼ △ ▽ ◆ ◇ ◕

◔ ʊ ϟ ღ ₪ ™ ©®

¿¡ №⇨∃ ⊥ ∀ Ξ

∞ Σ Π ஜ ๏ ⋆√ ‼ ‽

☺ ☻ ت Ü ϡ ﭢ

€ £ ¥ ¢ ƒ ₩ $

ℂ ℍ ℕ ℙ ℚ ℝ ℤ

ℬ ℰ ℯ ℱ ℊ ℋ ℎ ℐ ℒ ℓ ℳ ℴ ℘ ℛ

ℭ ℮ ℌ ℑ ℜ ℨ

☼ ⊙ ℃ ℉ ° ϟ

† √ ™ ℠ © ® ℗

▲◣◢ ◥▼△▽ ⊿◤◥ △ ▴ ▵ ▶ ▷ ▸ ▹

► ▻ ▼ ▽ ▾ ▿ ◀ ◁ ◂ ◃ ◄ ◅

⅟ ½ ⅓ ¾ ⅔ ⅕ ⅖ ⅗ ⅘ ⅙ ⅚ ⅛ ⅜ ⅝ ⅞

≂ ≃ ≄ ≅ ≆ ≇ ≈ ≉ ≊ ≋ ≌

≍ ≎ ≏ ≐ ≑ ≒ ≓ ≔ ≕ ≖ ≗

≘ ≙ ≚ ≛ ≜ ≝ ≞ ≟ ≠ ≡ ≢ ≣

≤ ≥ ≦ ≧ ≨ ≩ ⊰ ⊱ ⋛ ⋚

∫ ∬ ∭ ∮ ∯ ∰ ∱ ∲ ∳

⁰ ² ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁺ ⁻ ⁼ ⁽ ⁾ ⁿ ₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈ ₉ ₊ ₋ ₌ ₍ ₎

ಐ ಓ ಔ ಕ ಖ ಗ ಘ ಙ ಝ ಞ ಲ

ಶ ಹ ೀ ಾ ಿ ಧಿ ೈ ೋ

ೌ ೬ ೂ ೄ

ભ મ ય ર લ ળ વ શ

ષ સ હ ઼ ઽ ા િ ી ુ ૂ ૃ ૄ ૅ ે ૈ ૉ

ો ૌ ્ড ঢ ণ ত থ দ ধ ন প ফ ব ভ ম য র ল

শ ষ স ঁ ং ঃ অ আ ই ঈ উ ঊ ঋ ঌ এ ঐ ও ঔ ক খ গহ

╰☆╮-‘๑’- ♪ ♫  ♭ ♮ ♯

% ℅ ‰ ‱

␛ ␡ ␚

␟ ␘ ␠ ␤ ␋ ␌ ␍ ␎ ␏ ␐ ␑ ␒ ␓ ␔ ␕ ␖ ␗ ␙ ␜ ␝ ␞

┌ ┍ ┎ ┏ ┐ ┑ ┒ ┓ └ ┕ ┖ ┗ ┘ ┙

┚ ┛ ├ ┝ ┞ ┟ ┠ ┡ ┢ ┣ ┤ ┥ ┦

┧ ┨ ┩ ┪ ┫ ┬ ┭ ┮ ┯ ┰ ┱ ┲ ┳

┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┼ ┽ ┾ ┿ ╀ ╁

╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎

╏ ═ ║ ╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞ ╟

╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬

▀ ▁ ▂ ▃ ▄ ▅ ▆ ▇ ▉ ▊ ▋ █ ▌ ▍ ▎ ▏ ▐ ░ ▒ ▓ ▔ ▕

■ □ ▢ ▣ ▤ ▥ ▦ ▧ ▨ ▩ ▪ ▫ ▬ ▭ ▮ ▯ ☰ ☲ ☱ ☴ ☵ ☶ ☳ ☷   

«» ‶ ‷‴ ‹ › 〈 〉 ‸^ ′ ″ ‵ ‘ ’ ‚ ‛ “ ” „ ‟

○ ◎ ●  ◕ ◔ ◐ ◑ ⊗ ⊙ ◘ ◙ ◍

‼ ‽ ! ← ↑ →

↓ ↔ ↕ ↖ ↗ ↘ ↙ ↚ ↛ ↜ ↝ ↞ ↟ ↠↡ ↢

↣ ↤ ↥ ↦ ↧ ↨ ↩ ↪ ↫ ↬ ↭ ↮

⇉ ⇊ ⇋ ⇌ ⇍ ⇎ ⇏ ⇐ ⇑ ⇒ ⇓ ⇔

⇕ ⇖ ⇗ ⇘ ⇙ ⇚ ⇛ ⇜ ⇝ ⇞ ⇟ ⇠ ⇡ ⇢ ⇣

↯ ↰ ↱ ↲ ↳ ↴ ↵ ↶ ↷ ↸ ↹ ↺ ↻ ↼ ↽

↾ ↿ ⇀ ⇁ ⇂ ⇃ ⇄ ⇅ ⇆ ⇇ ⇈

⇉ ⇊ ⇋ ⇌ ⇍ ⇎ ⇏ ⇐ ⇑ ⇒ ⇓ ⇔

⇕ ⇖ ⇗ ⇘ ⇙ ⇚ ⇛ ⇜ ⇝ ⇞ ⇟ ⇠ ⇡ ⇢ ⇣

⇤ ⇥ ⇦ ⇧ ⇨ ⇩ ⇪

Continue

Bloquear Conteúdo no Blogger

23 de fev. de 2013  , ,  

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

23 de fev. de 2013  ,  

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

17 de fev. de 2013

Template - Caixa Rosa

17 de fev. de 2013    


 Template Caixa Rosa

Template Para blogger
Por Nathali L. Corsi
Funciona em Todos os Navegadores
Layolt Feminino

Caixa rosa é um Modelo Simples e
bem chamativo, contem gadgets 
personalizados e diferentes.


Visualizar


Baixar

Continue

Data dos Posts Personalizada

17 de fev. de 2013  ,  


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

12 de fev. de 2013

Marcadores Personalizados no Blogger

12 de fev. de 2013  , ,  

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

11 de fev. de 2013

CSS - Sombras em Textos e Objetos

11 de fev. de 2013  ,  

Para aplicar mais estilos a um texto e um objeto, vamos aprender sobre a propriedade Shadow   do CSS.
Primeiramente, vamos ver como ela se aplica a textos.

Sombra em Textos
Aqui esta um exemplo de como usar um texto com sombra

<p style="font-size:30px;color:000;text-shadow:2px 2px 5px #000;">Teste</p>

Teste
     
Este é o resultado. Em vermelho é a propriedade que da o sombreado ao texto, se você perceber, há três números (2px 2px 5px) os dois primeiros números ajusta a posição da sombra, Ex:

<p style="font-size:30px;color:000;text-shadow:-3px -3px 5px #000;">Teste</p>
O resultado será:

Teste

repare que ela mudou de posição, como se a luz batesse de outro angulo. Agora, vamos ver o terceiro numero, ele refere-se a intensidade da sombra, Ex:

text-shadow:-3px -3px 9px #000;

 Teste

Onde esta em vermelho é o que mudei, como coloquei um numero maior, a sombra ficou mais borrada, se colocar um numero menor, ele irá ficar diferente.

Você pode testar estes exemplos no editor HTMl aqui

Para usar Sombra em objetos não é muito diferente...

Sombra em Objetos
Vamos usar um exemplo de um cubo.

<div style="background:#6210b0;width:50px;height:50px;border-radius: 5px;box-shadow: 4px 4px 6px #000;">
</div>


Aqui esta o cubo com sombra. Para objetos só ira mudar a regra CSS, antes era text-shadow, Agora é Box-shadow. Para tudo que você quiser aplicar sombra, deve ser esta regra  agora para textos, somente a que ensinei anteriormente.

Pratique estas regras no editor HTML e faça os seus testes!

Continue

9 de fev. de 2013

Tabela de Tags HTML

9 de fev. de 2013  , ,  

Aqui esta uma tabela simples com algumas tags principais de HTML e seus fechamentos e finalidades.  Espero que seja útil para você!!





1 - DOCUMENTO
Abertura Fechamento Finalidade
<html> </html> Abertura e fechamento do documento HTML.
<head> </head> Abertura e fechamento do cabeçalho do documento
<title> </title> Abertura e fechamento do título do documento
<body> </body> Abertura e fechamento do corpo do documento
<!-- --> Abertura e fechamento de comentários
2 - TEXTO
Abertura Fechamento Finalidade
<h1>...<h6> </h1>...</h6> Abertura e fechamento de um cabeçalho. São 6 níveis: h1 (o maior) até h6 (o menor).
<p> </p>

Dispensável		 Inicia um parágrafo pulando uma linha.
<br> Não há Vai para outra linha sem pular nenhuma.
<b> </b> Coloca o texto em negrito
<i> </i> Coloca o texto em itálico
<tt> </tt> Coloca o texto em fonte monoespaçada
<sup> </sup> Coloca o texto sobrescrito
<sub> </sub> Coloca o texto subscrito
<font> </font> Estabelece o tipo de fonte, o tamanho e a cor.
<hr> Não há Cria uma linha divisória horizontal.
<div> </div> Abertura e fechamento de uma divisão de página cujos elementos que estão dentro dela obedecerão
às mesmas definições.
3 - LISTAS
Abertura Fechamento Finalidade
<ol> </ol> Abertura e fechamento de uma lista ordenada.
<ul> </ul> Abertura e fechamento de uma lista não ordenada.
<li> </li>

Dispensável		 Inicia um item de lista ordenada ou não ordenada.
<dl> </dl> Abertura e fechamento de uma lista de definições.
<dt> </dt>

Dispensável		 Inicia o termo a ser definido.
<dd> <dd>

Dispensável		 Inicia a definição do termo.
4 - LINKS
Abertura Fechamento Finalidade
<a> </a> Estabelece um texto ou imagem como link.
5 - IMAGENS
Abertura Fechamento Finalidade
<img> Não há Inserção de imagem
6 - MAPAS DE IMAGENS
Abertura Fechamento Finalidade
<map> </map> Abertura e fechamento de um mapa de imagens processado no cliente.
<area> Não há Define uma área clicável que funcionará como link dentro do mapa de imagens.
7 - TABELAS
Abertura Fechamento Finalidade
<table> </table> Abertura e fechamento de uma tabela.
<tr> </tr> Abertura e fechamento de uma linha da tabela.
<td> </td> Abertura e fechamento de uma célula dentro de uma linha da tabela.
<th> </th> Abertura e fechamento de uma célula dentro de uma linha da tabela. Funciona como <td>, mas
o texto que contém aparece em negrito e centralizado (uma espécie de cabeçalho ou título).

Continue

Arquivo em Forma de Calendário

9 de fev. de 2013  ,  

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

Assinar: Postagens (Atom)

Seguidores e Fãs