Formulário de Contato para Blog/Site

Há algum tempo, encontrei este site incrível que é o JotForm, ele oferece ferramentas para a criação de formulários cheios de ferramentas e super profissionais que dispensam a necessidade do conhecimento em HTML.
Utilizo um formulário deste aqui no blog (Contato), você pode ver que tem a opção de enviar um arquivo depois de fazer o upload. La você terá diversas opções de formulários, contato, pagamento, questionário, upload e etc.

Neste site é preciso fazer um cadastro mas não se preocupe! é gratuito e muito simples! Na página inicial do site JotForm clique na aba REGISTRE-SE e irá aparecer uma janela para a criação da conta (como mostra a imagem abaixo).

 

Depois de preencher os campos (Nome de Usuário, Email, Senha e confirmação) clique em Create My Account (Criar Minha Conta) e Pronto.

Agora, para a criação dos seus formulários, é só utilizar as ferramentas que estão nas abas a esquerda, clique na ferramenta que deseja usar em seu formulário e arraste para a área em branco como mostra a imagem abaixo.

 

Adicione nomes as ferramentas, Exemplo: no campo de texto (onde os visitantes deverão escrever algo) pode dar o nome: sua mensagem.

Você pode tornar o campo texto ou qualquer outro "Requerido" ou seja, o visitante só poderá enviar o formulário se aquele campo estiver preenchido.

para isto clique no botão ferramenta ao lado do ícone vermelho para acessar as configurações. lá você pode torna-lo " Requerido" e alterar diversas coisas como numero máximo de caracteres em um campo de texto.

Depois de usar toda as ferramentas que deseja, é só inserir o formulário em seu site ou blog, para isto o próprio site disponibiliza o código fonte do seu formulário grátis sem nenhuma propaganda

Para isto acesse a guia Setup & Embed e encontre outras configurações, estas são importantes.

Alertas de email: é bem importante pois toda vez que o formulário é preenchido o site envia um email com os dados do visitante para o dono do formulário, ou seja você, para isto clicando neste ícone você pode configurar os alertas de email.

Obrigado: aqui você pode criar uma mensagem de agradecimento que é exibida depois que o visitante envia o formulário

Código-fonte: clicando aqui você terá acesso ao código de incorporação do seu formulário, é só copiar o código e colar no local que você quiser em seu site, no caso do blog, pode criar uma página ou postagem com o nome "Contato" e na edição HTML inserir o código.

OBS. Não se esqueça de dar um nome ao seu formulário para que você mesmo possa identifica-lo e adicione a ferramenta "botão de envio", sem ele não é possível o envio do formulário.

Continue

Proteger Trechos de HTML e Postagens de Blogs com Senha

Encontrei uma coisa muito interessante, um site que da a opção de colocar senha em trechos HTML e até em postagens de blog! é uma coisa simples e muito útil pra qualquer um.
Veja um exemplo aqui





Primeiramente você vai precisar do script abaixo

<script type="text/javascript" src="http://www.vincentcheung.ca/jsencryption/jsencryption.js"></script>

Para usar em seu site ou blog, pode cola-lo antes da tag </head>

Proteger HTML ou Postagem do blog

1) Entre neste site e faça as configurações de acordo com a imagem abaixo:

Coloque a sua senha no campo Key e no campo Plain Text o seu HTML ou trecho da postagem que quer proteger (se quiser proteger a postagem inteira, cole todo o código HTML dela). Após fazer isso, clique no botão Encrypt.

2) Após isso, o botão Encrypt irá gerar o seu código, como mostra na imagem abaixo:

Agora é só colocar este trecho HTML no lugar que ficava o trecho que você queria proteger, pode fazer o mesmo com as postagens de blogs, mas o editor deve estar no modo HTML.

Para alterar o texto do link, procure pelo código Show encrypted text e escreva o que desejar.

Obs: Não se esqueça de colocar o javascript do inicio da postagem! sem ele nada funciona.

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

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

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

Contador de Caracteres

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

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

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

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

Tabela de Tags HTML

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

Borda personalizada

Para quem gosta de adicionar bordas em vários lugares, principalmente imagens. Trouxe  um efeito bastante interessante. É um efeito de bordas que aprendi aqui.

Pois é, Vamos aprender a colocar imagens nas bordas. vou utilizar o código CSS, sozinho e  “embutido” no HTML da imagem.

Para fazer o efeito da imagem cima, vamos fazer o seguinte;

código CSS:

img{
border: 1px solid #d5d5cb;
background::url(IMAGEM AQUI);
padding:12px;
}

Onde esta em verde, é o tipo, cor e estilo da primeira borda, que é uma bem fininha que se você prestar bastante atenção, conseguira ver

Em vermelho é o URL da imagem do fundo, no exemplo da imagem com a flor, usei esta imagem como fundo:

que também encontrei neste site.

Para usar o CSS embutido no HTML é assim: 

<img style="border:2px solid #d5d5cb; background:url(IMAGEM AQUI);
padding:12px; " src="http://www.significados.com.br/foto/flor-de-lotus_dt.jpg">

Repare que á um URL_{(não destaquei para não ficar muito confuso)}, este é o URL da imagem com a flor, que usei no inicio do post, sempre que você for inserir uma imagem no HTML de algum site é só colocar este código <img…> é a única coisa necessária para formar uma imagem.
então é isso. Vou colocar alguns exemplos de bordas aqui, qualquer dúvida, comente.



 

 
Para usar os exemplos de bordas (como já disse antes, é a fininha que fica na parte de fora) é só colocar o mouse sobre uma das imagem e ver o seu valor citado.

Continue

Tabela de Fontes

Aqui esta uma tabela de fontes, todas essas fontes eu tinha no meu computador, você pode usa-las em qualquer lugar, em títulos, textos, etc. É só copia-las

Bauhaus 93	goon spectre TBS
Calibri	Arial
Comic Sans MS	Kranky
Coming Soon	BeanTown
A Charming Font	Gil Sans MT
GiGi	Baskerville Old Face
Kristen ITC	Arial Rounded MT Bold
Candara	Georgia
Arial Black	BonBon
permanent Marker	Fredericka The Great
Lavi	LCD
Sunshiney	Crafty Girls
Times New Roman	Verdana

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

Menu com Efeito Hover

Uma das  coisa que a maioria dos novos blogueiros quer ter no seu blog e um menu diferente e legal. Já fiquei muito tempo atras de alguem que encinasse a fazer um menu com efeito hover, agora já vejo em alguns blogs.  Esse é um menu pode ser adicionado em blogs e em sites também

É bem simples de instalar no seu blog ou site, e você pode colocar imagens de diferentes cores e diferentes estilos. Veja como o seu menu hover ficará depois de pronto:EXEM

Inserindo o Menu

1) Entre no painel do blog ► layolt ►Adicionar um Gadget

Clique em HTML/JavaScript.

2) Irá aparecer uma página para adicionar o Gadget.

O campo “Titulo” é o nome do Gadget, se você for utilizar o menu para definir as categorias do seus posts você pode colocar o nome de “Categorias”. Mas isso e você quem escolhe…

(se quiser adicionar em um site, basta colar o seguinte código no local desejado)

No campo “Conteúdo” você ira colocar o HTML do menu

Coloque este código abaixo:

<div class="menu"><a href="URL"><font color="#fff" face="calibri" size="3">TEXTO DO LINK</font></a></div>

Onde está destacado… você pode modificar!

★ = É o URL (link para a página que o menu irá levar).

★ = É a cor do link do menu (no exemplo do menu hover deixei em branco).

★ = Fonte (Tipo da letra) do link.

★ = Texto que aparecerá no Menu.

ATENÇÃO: Para adicionar um menu, basta você copiar duplicar este código no gadget e trocar apenas o URL e o TEXTO DO LINK.

Estilos:

Agora vamos aplicar modelos a este menu:

1) Entre no painel do blog ► Modelo ► Editar HTML_{(Clique em Prosseguir)}

Procure por ]]></b:skin>_{(Aperte ctrl+F para procurar!)}

Cole o código seguinte ACIMA dele

/*Menu com Efeito Hover*
---------------------------------------------*/
.menu {
background:url(http://3.bp.blogspot.com/-TLXmFev8280/UHYwq43_5vI/AAAAAAAAFJM/cseLUL2ilM4/s1600/Menu+1.png) no-repeat;
float:center;
width:190px;
text-align: center;
margin:1px;
line-height:42px;
margin-bottom:2px;
margin-top:-1px;
}
.menu:hover {
background: url(http://1.bp.blogspot.com/-TMtgfI1cSas/UHYwsGSa-yI/AAAAAAAAFJU/746hYqBOwCw/s1600/Menu+2.png)no-repeat;
float:center;
}

★ = é o URL da imagem do menu

★ = É o URL da imagem do menu com oefeito hover (quando o mouse estiver sobre ele)

Agora visualize, se ocorreu tudo certo, salve! Agora é so aproveita o seu novo menu.

Continue

Seletor de Cores

Aqui está um seletor de cores, selecione a cor desejada e copie o código do campo Hex

a sua cor é um código de 6 dígitos, ex: #xxxxxx (hexadecimal).

Eu sei que parece uma imagem! Mas é só clicar em sima e verá que não é.

Continue