Template - Blue

Template Para blogger

Por Nathali L. Corsi

Funciona em Todos os Navegadores

Layolt Masculino

Blue é um template com

layolt masculino, serve para 

blogs com temas de

 todo o tipo

Visualizar


Baixar

Continue

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

Aplicando estilos CSS a listas em HTML

Aqui está uma coisa legal, aplicar estilos as listas em em HTML. Se você reparar na imagem a esquerda, é uma lista simples em HTML, formada por: <ul><li>Texto ou Link</li></ul>, e ao lado dela tem umas bolinhas, este é o estilo padrão para listas, mas tem como mudar essas bolinhas e colocar vários outros símbolos e estilos!




1) Lista Ordenada: a lista fica organizada em números. Ex:

• Lorem
• Lorem
• Lorem
• Lorem

Também pode ser:

• Lorem
• Lorem
• Lorem
• Lorem

Para isto o código é: 

li{list-style:decimal;} ou li{list-style:decimal-leading-zero;} para ficar com o zero na frente do numero


2) Podemos organizar também em ordem alfabética. Ex

• Lorem
• Lorem
• Lorem
• Lorem

Para isto o código é li{list-style:lower-alpha;}


3) Podemos transformar estas bolinhas padrões em quadrados. Ex:

• Lorem
• Lorem
• Lorem
• Lorem

Para isto o código é li{list-style:square;}


4) também podemos transformar em circulos. Ex

• Lorem
• Lorem
• Lorem
• Lorem

Para isto o código é li{list-style:circle;}


5) Existem outros estilos de listas ordenadas (organizada em números) só que numerais diferentes como o armênio. Ex

• Lorem
• Lorem
• Lorem
• Lorem

Para isto o código é li{list-style:armenian;}
e o Romano

• Lorem
• Lorem
• Lorem
• Lorem

Para isto o código é li{list-style:lower-roman;}

6) Como há numerais diferentes, existem alfabetos diferentes, como o grego. Ex

• Lorem
• Lorem
• Lorem
• Lorem

Para isto o código é li{list-style:lower-greek;}


7) Aqui esta mais um truque muito interessante, talvez você queira usar algo diferente, então pode colocar sua própria imagem. Ex:

• Lorem
• Lorem
• Lorem
• Lorem

Para isto o código é li{list-style:url(Link-Imagem);}


Existem vários outros estilos.
Aqui está alguns valores de símbolos diferentes que você pode usar:

georgian
hebrew
hiragana
katakana

Continue

Template - Teeny

Template Para blogger

Por Nathali L. Corsi

Funciona em Todos os Navegadores

Layolt Feminino

Teeny é um layolt

destinado a blogs de receitas,

doces ou conteúdo

 relacionado a isto.

Visualizar


Baixar

Continue

Tabela de Códigos de Símbolos

Aqui está uma tabela enorme com vários códigos de símbolos, em algumas situações (já passei por isto) quando utilizamos alguma letra acentuada ou algum caractere como por exemplo simbolo de dinheiro ($) em um código HTML esta não é identificado no código, em alguns casos aparece um simbolo de interrogação (?) e por isso precisamos usar os códigos para os caracteres desejados. Algumas palavras na tabela como nas descrições dos símbolos, algumas estão em inglês e outras em português, não sei por que isto ocorreu.

A Tabela

Símbolos de Dinheiro
símbolo	entidade	decimal	descrição
¤	¤	¤	Generic Currency Symbol
¢	¢	¢	Cent
$	$	$	Dollar
£	£	£	Pound Sterling
¥	¥	¥	Yen / Yuan
€	€	€	euro
₣		₣	Franc
₤		₤	Lira
₧		₧	Peseta Sign

Pontuação
símbolo	entidade	decimal	descrição
¡	¡	¡	ponto de exclamação invertido
«	«	«	left-pointing double angle quotation mark
»	»	»	right-pointing double angle quotation mark
¿	¿	¿	inverted question mark = turned question mark
–	–	–	en dash
—	—	—	em dash
‘	‘	‘	left single quotation mark
’	’	’	right single quotation mark
‚	‚	‚	single low-9 quotation mark
"	"	"	aspas
“	“	“	left double quotation mark
”	”	”	right double quotation mark
„	„	„	double low-9 quotation mark
‹	‹	‹	single left-pointing angle quotation mark
›	›	›	single right-pointing angle quotation mark
′	′	′	Prime = minutes = feet
″	″	″	Double prime = seconds = inches
‾	‾	‾	Overline = spacing overscore

Sinais em Geral
símbolo	entidade	decimal	descrição
	 	 	espaço em branco
&	&	&	ampersand
¦	¦	¦	broken bar = broken vertical bar
§	§	§	section sign
¨	¨	¨	diaeresis = spacing diaeresis
©	©	©	copyright sign
®	®	®	registered sign = registered trade mark sign
™	™	™	trade mark sign
ª	ª	ª	feminine ordinal indicator
º	º	º	masculine ordinal indicator
¯	¯	¯	macron = spacing macron = overline = APL overbar
°	°	°	degree sign
¹	¹	¹	superscript one = superscript digit one
²	²	²	superscript two = superscript digit two = squared
³	³	³	superscript three = superscript digit three = cubed
´	´	´	acute accent = spacing acute
µ	µ	µ	micro sign
¶	¶	¶	pilcrow sign = paragraph sign
·	·	·	middle dot = Georgian comma
¸	¸	¸	cedilla = spacing cedilla
†	†	†	dagger
‡	‡	‡	double dagger
‰	‰	‰	per mille sign
ˆ	ˆ	ˆ	modifier letter circumflex accent
˜	˜	˜	small tilde
•	•	•	bullet = black small circle (bullet is NOT the same as bullet operator)
…	…	…	horizontal ellipsis = three dot leader
◊	◊	◊	Lozenge
♠	♠	♠	Black spade suit
♣	♣	♣	Black club suit = shamrock
♥	♥	♥	Black heart suit = valentine
♦	♦	♦	Black diamond suit

Letras Acentuadas
símbolo	entidade	decimal	descrição
À	À	À	latin capital letter A with grave = latin capital letter A grave
Á	Á	Á	latin capital letter A with acute
Â	Â	Â	latin capital letter A with circumflex
Ã	Ã	Ã	latin capital letter A with tilde
Ä	Ä	Ä	latin capital letter A with diaeresis
Å	Å	Å	latin capital letter A with ring above = latin capital letter A ring
Æ	Æ	Æ	latin capital letter AE = latin capital ligature AE
Ç	Ç	Ç	latin capital letter C with cedilla
È	È	È	latin capital letter E with grave
É	É	É	latin capital letter E with acute
Ê	Ê	Ê	latin capital letter E with circumflex
Ë	Ë	Ë	latin capital letter E with diaeresis
Ì	Ì	Ì	latin capital letter I with grave
Í	Í	Í	latin capital letter I with acute
Î	Î	Î	latin capital letter I with circumflex
Ï	Ï	Ï	latin capital letter I with diaeresis
Ð	Ð	Ð	latin capital letter ETH
Ñ	Ñ	Ñ	latin capital letter N with tilde
Ò	Ò	Ò	latin capital letter O with grave
Ó	Ó	Ó	latin capital letter O with acute
Ô	Ô	Ô	latin capital letter O with circumflex
Õ	Õ	Õ	latin capital letter O with tilde
Ö	Ö	Ö	latin capital letter O with diaeresis
Ø	Ø	Ø	latin capital letter O with stroke = latin capital letter O slash
Œ	Œ	Œ	latin capital ligature OE
Š	Š	Š	latin capital letter S with caron
Ù	Ù	Ù	latin capital letter U with grave
Ú	Ú	Ú	latin capital letter U with acute
Û	Û	Û	latin capital letter U with circumflex
Ü	Ü	Ü	latin capital letter U with diaeresis
Ý	Ý	Ý	latin capital letter Y with acute
Ÿ	Ÿ	Ÿ	latin capital letter Y with diaeresis
Þ	Þ	Þ	latin capital letter THORN
ß	ß	ß	latin small letter sharp s = ess-zed
à	à	à	latin small letter a with grave = latin small letter a grave
á	á	á	latin small letter a with acute
â	â	â	latin small letter a with circumflex
ã	ã	ã	latin small letter a with tilde
ä	ä	ä	latin small letter a with diaeresis
å	å	å	latin small letter a with ring above = latin small letter a ring
æ	æ	æ	latin small letter ae = latin small ligature ae
ç	ç	ç	latin small letter c with cedilla
è	è	è	latin small letter e with grave
é	é	é	latin small letter e with acute
ê	ê	ê	latin small letter e with circumflex
ë	ë	ë	latin small letter e with diaeresis
ì	ì	ì	latin small letter i with grave
í	í	í	latin small letter i with acute
î	î	î	latin small letter i with circumflex
ï	ï	ï	latin small letter i with diaeresis
ð	ð	ð	latin small letter eth
ñ	ñ	ñ	latin small letter n with tilde
ò	ò	ò	latin small letter o with grave
ó	ó	ó	latin small letter o with acute
ô	ô	ô	latin small letter o with circumflex
õ	õ	õ	latin small letter o with tilde
ö	ö	ö	latin small letter o with diaeresis
ø	ø	ø	latin small letter o with stroke, = latin small letter o slash
œ	œ	œ	latin small ligature oe
š	š	š	latin small letter s with caron
ù	ù	ù	latin small letter u with grave
ú	ú	ú	latin small letter u with acute
û	û	û	latin small letter u with circumflex
ü	ü	ü	latin small letter u with diaeresis
ý	ý	ý	latin small letter y with acute
ÿ	ÿ	ÿ	latin small letter y with diaeresis
þ	þ	þ	latin small letter thorn

Flechas
símbolo	entidade	decimal	descrição
←	←	←	flecha para esquerda
↑	↑	↑	flecha para cima
→	→	→	flecha para direita
↓	↓	↓	flecha para baixo
↔	↔	↔	flecha para esquerda/direita
↵	↵	↵	carriage return
⇐	⇐	⇐	flecha dupla para esquerda
⇑	⇑	⇑	flecha dupla para cima
⇒	⇒	⇒	flecha dupla para direita
⇓	⇓	⇓	flecha dupla para baixo
⇔	⇔	⇔	flecha dupla para esquerda/direita

Símbolos Matemáticos
símbolo	entidade	decimal	descrição
¼	¼	¼	Um quarto
½	½	½	Uma metade
¾	¾	¾	Três quartos
²	²	²	Quadrado
³	³	³	Cubo
<	&lt;	&#60;	Menor-que
≤	&le;	&#8804;	Menor-que-ou-igual-a
>	&gt;	&#62;	Maior-que
≥	&ge;	&#8805;	Maior-que-ou-igual-a
¬	&not;	&#172;	Mem
−	&minus;	&#8722;	Minus
+		&#43;	Plus
×	&times;	&#215;	multiplicação
÷	&divide;	&#247;	divisão
=		&#61;	Igual a
≠	&ne;	&#8800;	Não igual a
ƒ	&fnof;	&#402;	Função
±	&plusmn;	&#177;	Plus-minus
√	&radic;	&#8730;	Raiz quadrada
⁄	&frasl;	&#8260;	Barra fração
℘	&weierp;	&#8472;	Script capital P = power set = Weierstrass p
ℑ	&image;	&#8465;	Parte imaginaria
ℜ	&real;	&#8476;	Parte real
ℵ	&alefsym;	&#8501;	Alef = first transfinite cardinal
⌈	&lceil;	&#8968;	Left ceiling = apl upstile
⌉	&rceil;	&#8969;	Right ceiling
⌊	&lfloor;	&#8970;	Left floor = apl downstile
⌋	&rfloor;	&#8971;	Right floor
⟨	&lang;	&#9001;	Left-pointing angle bracket = bra
⟩	&rang;	&#9002;	Right-pointing angle bracket = ket

Operadores Matemáticos e Relações
símbolo	entidade	decimal	descrição
∀	∀	∀	For all
∂	∂	∂	Partial differential
∃	∃	∃	There exists
∅	∅	∅	Empty set = null set = diameter
∇	∇	∇	Nabla = backward difference
∈	∈	∈	Element of
∉	∉	∉	Not an element of
∋	∋	∋	Contains as member = "such that"
∏	∏	∏	N-ary product = product sign
∑	∑	∑	N-ary sumation
∗	∗	∗	Asterisk operator
∝	∝	∝	Proportional to
∞	∞	∞	Infinity
∠	∠	∠	Angle
∧	∧	∧	Logical and = wedge
∨	∨	∨	Logical or = vee
∩	∩	∩	Intersection = cap
∪	∪	∪	Union = cup
∫	∫	∫	Integral
∴	∴	∴	Therefore
∼	∼	∼	Tilde operator = varies with = similar to
≅	≅	≅	Approximately equal to
≈	≈	≈	Almost equal to = asymptotic to
≡	≡	≡	Identical to
≤	≤	≤	Less-than or equal to
≥	≥	≥	Greater-than or equal to
⊂	⊂	⊂	Subset of
⊃	⊃	⊃	Superset of
⊄	⊄	⊄	Not a subset of
⊆	⊆	⊆	Subset of or equal to
⊇	⊇	⊇	Superset of or equal to
⊕	⊕	⊕	Circled plus = direct sum
⊗	⊗	⊗	Circled times = vector product
⊥	⊥	⊥	Up tack = orthogonal to = perpendicular
⋅	⋅	⋅	Dot operator

Letras Gregas
símbolo	entidade	decimal	descrição
Α	Α	Α	alpha maiúscula
Β	Β	Β	beta maiúscula
Γ	Γ	Γ	gamma maiúscula
Δ	Δ	Δ	delta maiúscula
Ε	Ε	Ε	epsilon maiúscula
Ζ	Ζ	Ζ	zeta maiúscula
Η	Η	Η	eta maiúscula
Θ	Θ	Θ	theta maiúscula
Ι	Ι	Ι	iota maiúscula
Κ	Κ	Κ	kappa maiúscula
Λ	Λ	Λ	lambda maiúscula
Μ	Μ	Μ	mu maiúscula
Ν	Ν	Ν	nu maiúscula
Ξ	Ξ	Ξ	xi maiúscula
Ο	Ο	Ο	omicron maiúscula
Π	Π	Π	pi maiúscula
Ρ	Ρ	Ρ	rho maiúscula
Σ	Σ	Σ	sigma maiúscula
Τ	Τ	Τ	tau maiúscula
Υ	Υ	Υ	upsilon maiúscula
Φ	Φ	Φ	phi maiúscula
Χ	Χ	Χ	chi maiúscula
Ψ	Ψ	Ψ	psi maiúscula
Ω	Ω	Ω	omega maiúscula
α	α	α	alpha minúscula
β	β	β	beta minúscula
γ	γ	γ	gamma minúscula
δ	δ	δ	delta minúscula
ε	ε	ε	epsilon minúscula
ζ	ζ	ζ	zeta minúscula
η	η	η	eta minúscula
θ	θ	θ	theta minúscula
ι	ι	ι	iota minúscula
κ	κ	κ	kappa minúscula
λ	λ	λ	lambda minúscula
μ	μ	μ	mu minúscula
ν	ν	ν	nu minúscula
ξ	ξ	ξ	xi minúscula
ο	ο	ο	omicron minúscula
π	π	π	pi minúscula
ρ	ρ	ρ	rho minúscula
ς	ς	ς	final sigma final minúscula
σ	σ	σ	sigma minúscula
τ	τ	τ	tau minúscula
υ	υ	υ	upsilon minúscula
φ	φ	φ	phi minúscula
χ	χ	χ	chi minúscula
ψ	ψ	ψ	psi minúscula
ω	ω	ω	omega minúscula
ϑ	ϑ	ϑ	theta sign
ϒ	ϒ	ϒ	Greek upsilon with hook sign
ϖ	ϖ	ϖ	Greek pi sign

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

CSS Filters - Efeitos em Imagens

Há algum tempo descobri que tem como colocar efeitos de imagens do Photoshop com CSS, são vários efeitos como sépia, preto e branco, saturação, opacidade e outros. Podemos utilizar estes efeitos ao colocar o mouse em cima de uma imagem e dar efeitos nas imagens do seu blog/site.

Primeiramente devemos usar o código de acordo com o navegador:

 -webkit-
 -webkit-
 -moz-
 -ms-
 -o-

Isto serve para que os efeitos funcionem corretamente nos navegadores (se for usar os efeito no template do blog/site deve usar todos os códigos para todos os navegadores)

Os Códigos

   Grayscale

Efeito grayscale, indica o quanto preto e branco queremos que fique a imagem, vai de 0% a 100%

img { -webkit-filter: grayscale(100%); }

   Blur 

O efeito Blur da o efeito de imagem embaçada, seus valores são definidos em pixels.

img { -webkit-filter: blur(3px); }

Sépia

O efeito Sépia da um estilo envelhecido para a imagem. seus valores vão de 0 a 1

img { -webkit-filter: sepia(1); }

Saturação 

O efeito aturação deixa as cores mais vivas. quanto menor o seu valor mais perto do cinza estarão.

img { -webkit-filter: saturate(4); }

Opacidade 

O efeito Opacidade deixa as imagens transparentes. seus valores vão de 0 a 1.0

img { -webkit-filter: opacity(0.5); }

Brightness

O efeito Brightness altera o brilho da imagem. Seu valor padrão e 100%, diminuindo irá ficar mais escuro (0%)

img { -webkit-filter: brightness(0.5); }

Hue Rotate

O efeito Hue Rotate da um tom azulado a imagem (não sei bem como funciona!). seus valores são de 0deg a 180deg

img { -webkit-filter: hue-rotate(180deg); }

Invert 

O efeito Invert irá inverter todas as cores da imagem. Os valores vão de 0% a 100%.

img { -webkit-filter: invert(100%); }

Contrast 

O efeito Contrast deixará as cores da imagem mais vivas. seus valores podem ser: (1, 2, 3,...) ou (0%, 100%, 150%)

img { -webkit-filter: contrast(4); }

Continue

Vetorizar Objetos no Corel Draw

Se você gosta de fazer logos para seu blog, página site ou etc, pode usar esta ótima técnica de Vetorização para editar qualquer imagem e fazer logos, banners e etc.

Vídeo

Continue

Template - Cappuccino

Template Para blogger

Por Nathali L. Corsi

Funciona em Todos os Navegadores

Layolt Unisex

Cappuccino é um template

básico e moderno.

 Não é necessário

 ser tema para blogs de alimentos,

ele fica bem em todos!

Visualizar


Baixar

Continue