Tutorial Basico De HTML

Assim, mesmo usando bons editores, precisamos conhecer alguns códigos HTML para sabermos como modificar os textos e realizar outras funções em nosso Blog. Vejamos alguns desse e os mais comuns


Destaque das palavras:
<textarea
rows="5"
cols="50"
style="background-color: #ffffff; color: rgb(0, 0, 0);"
wrap="soft">

1. <strong>Negrito</strong>
2. <em>Itálico</em>
3. <u>Sublinhado</u>
4. <strike>Tachado</strike>

</textarea>

Posição do texto:
<textarea
rows="5"
cols="50"
style="background-color: #ffffff; color: rgb(0, 0, 0);"
wrap="soft"><p align="left">Alinhado à esquerda</p>

<p align="right">Alinhado à direita</p>

<p align="center">Centralizado</p>

<p align="justify">Justificado (alinhado às duas margens)</p></textarea>

Criar links:

<textarea
rows="5"
cols="50"
style="background-color: #ffffff; color: rgb(0, 0, 0);"
wrap="soft"><a href=”URL de Destino”>Texto do link</a></textarea>

Inserir imagens:

<textarea
rows="5"
cols="50"
style="background-color: #ffffff; color: rgb(0, 0, 0);"
wrap="soft"><img src=”URL da Imagem” /></textarea>




Se Você Ja Aprendeu o Basico Va Para a Nossa Proxima Etapa,Mexendo Com Templete

Leia mais...

Os 10 Melhores Gadgets para um Blog

O tema “melhores gadgets para colocar no blog” é um dos mais votados em meu Skribit. Neste artigo, reúno os 10 gadgets mais interessantes para seu blog, com comentários a respeito de cada um deles. Você perceberá que eles podem trazer diversos benefícios ao seu blog, como aumento no número de visitas, maior tempo do visitante em seu blog e outros.

Introdução

Como sugerido pela imagem que ilustra o início deste artigo, os gadgets – também chamados de widgets – são uma espécie de ferramentas que adicionam funcionalidades ao seu blog. Há hoje uma infinidade deles pela internet, alguns específicos para uma plataforma (como os do Blogger), outros desenvolvidos por grandes empresas (como a Google) e muitos criados por pessoas como você, que tiveram uma ideia interessante e disponibilizaram aos demais. Neste artigo, mostrarei uma seleção dos 10 melhores que encontrei desde que iniciei meus blogs

1. LinkWithin

O LinkWithin é, em minha opinião, um dos melhores gadgets que você pode ter em seu blog. É ele que mostra artigos relacionados no final de cada post do Gerenciando Blog, sob o título “Poderá também gostar de:”. Sua utilidade está justamente em manter o seu visitante em seu blog, chamando sua atenção para outros artigos que ele possa gostar de ler. As instruções detalhadas de instalação estão no artigo LinkWithin: Mostre artigos relacionados.

2. UserVoice

Encontrei o UserVoice como um substituto ao Skribit, após este ter sido descontinuado. Surpreendentemente, descobri logo de cara que o UserVoice era ainda mais poderoso do que o Skribit. Sua função é essencial para mim: é através dele que recebo sugestões dos leitores para novos artigos aqui no Gerenciando Blog. Você pode ver o UserVoice em funcionamento de duas formas aqui: clicando na opção “Sugira” do menu ou no botão “Sugira um artigo”, no canto inferior direito da tela. Para saber como utilizá-lo em seu blog, basta ler o artigo UserVoice: Ouça as Sugestões de seus Visitantes.

3. PostRank

O PostRank é outro gadget interessante para chamar a atenção de seus visitantes para artigos de seu blog. Depois de cadastrar os feeds de seus artigos no serviço, o PostRank passa a analisá-los e determina quais são os seus “Top Posts” com base em uma série de fatores, como links, comentários e visitas. Você vê o PostRank em funcionamento também na barra lateral esquerda, com o título “Top Posts”. O passo a passo para utilização está em PostRank: os Artigos mais Populares do seu Blog.

4. Google Friend Connect

O Google Friend Connect – também conhecido como “Seguidores” – é possivelmente o gadget mais sub-utilizado em blogs: praticamente todos o usam, mas poucos sabem o potencial que ele apresenta. Com ele, você consegue, entre outras coisas, colocar gadgets de enquetes, distribuir newsletters e exibir artigos de acordo com a preferência de seus seguidores. Escrevi uma série de 5 artigos sobre o Google Friend Connect, mostrando como explorá-lo melhor:

5. Últimos comentários

Um gadget com os últimos comentários recebidos no blog é uma forma interessante de destacar os comentários recebidos e incentivar seus visitantes a escrevê-los. No artigo Como conseguir comentários em seu blog eu cito a forma que utilizo aqui noGerenciando Blog: trata-se de um gadget de “Feed”, onde coloco meu RSS de comentários. Outra opção é utilizar o gadget “Recent Comments” disponível na lista do Blogger, específico para mostrar os últimos comentários recebidos.

6. Live Traffic Feed

O Live Traffic Feed é o gadget mais famoso e utilizado do Feedjit. Ele mostra seus últimos visitantes, de onde eles vieram e o que leram em seu blog. Alguns meses atrás, foi lançada uma atualização que permite inclusive saber em quem é o seu visitantes, caso ele esteja cadastrado no Feedjit. As instruções de uso estão em Feedjit: As Novidades do Live Traffic Feed.

7. Divulgação do Banner

Outro gadget muito interessante para seu blog e que você mesmo pode criar é o de divulgação de seu banner. Através desse gadget, visitantes interessados em divulgar o seu blog podem copiar o código de seu banner para publicá-lo em seus próprios blogs. Mostrei como fazer isso em dois artigos:Criando um banner para o seu site, para quem quer um controle maior, e Um banner para seu site de forma fácil, este com instruções mais simples.

8. Caixa de Pesquisa

Uma caixa de pesquisa é indispensável em seu blog, para que seus visitantes possam encontram com facilidade o que desejam. Sem ela, muitos de seus visitantes podem sair de seu blog simplesmente porque não encontraram o artigo que estavam procurando. Há templates que já trazem essa procura incorporada. Caso este não seja o seu caso, há diversas opções:

• Se você utiliza o AdSense, pode gerar uma caixa de procura através do serviço. A vantagem é que os resultados trazem anúncios que podem lhe trazer retorno financeiro.
• No Blogger, existe o gadget “Caixa de Pesquisa”, que permite a você configurar se será feita a busca apenas em seu blog ou em toda a web.
• O Google Web Elements oferece um gadget de busca bastante interessante em http://www.google.com/webelements/customsearch. É este o que utilizo aqui no Gerenciando Blog.

9. Google Web Elements

Além da Caixa de Pesquisa que citei acima, o Google Web Elements oferece outras opções interessantes de gadgets que podem ser instaladas em qualquer blog ou site. Há gadgets interessantes como um calendário para lembrar eventos importantes, um painel para que seus visitantes deixem recados, mapas do Google Maps e muitos outros. No artigo Google Web Elements eu falei sobre o assunto.

10. Twitter Updates

Da mesma forma que é importante divulgar seu blog no Twitter, também ocorre o inverso: divulgar seus tweets em seu blog é uma forma interessante de conquistar novos seguidores. Há diversos gadgets que fornecem essa funcionalidade. O gadget “Twitter Updates” do Blogger é bem simples de se utilizar e cumpre bem sua função.

Conclusão

Esta é uma lista bem pessoal. É importante que você avalie quais deles se aplicam ao seu blog, pois nem tudo o que for interessante para mim trará o mesmo resultado a você. Tenho certeza de que cada um tem os seus gadgets favoritos e que trazem bons benefícios para seu blog.

Faltou citar algum em minha lista? Não gostou de minhas sugestões? Deixe seu comentário!

Leia mais...

Mostrar o Titulo do Post em vez de Postagem mais Recente e mais Antiga

Mudar o texto Postagem mais Recente e Postagem mais Antiga que aparece no final de cada post pelo titulo das postagens pode ajudar a despertar o interesse dos seus visitantes pelos outros textos do seu blog, afinal tem muito mais chances de alguém clicar no titulo de uma postagem onde podemos ter uma idéia de qual assunto é tratado do que alguém clicar num link escrito postagem mais antiga ou mais recente. Se quiser pode ver como Alterar texto postagens mais antigas e mais recentes, mas colocando outro texto ou imagens no lugar dos links.



Para fazer essa alteração no seu blog entre na pagina editar HTML, procure por </ head> e coloque essa linha antes dele:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Clique para salvar e vá até a pagina layout. Clique para adicionar gadget >> html/javascript e cole o código:

<style type="text/css">
#blog-pager-newer-link {width:200px;text-align:left;}
#blog-pager-older-link {width:200px;text-align:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link").text();
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle);//rgt
});
});
</script>

Nos testes que fizemos não importa o lugar que colocamos esse gadget os links com os títulos das postagens aparecem no lugar certo, ou seja, no final da postagem no lugar dos links postagem mais recente e postagem mais antiga, mas caso no seu blog apareça em outra parte é só corrigir o posicionamento do gadget colocando embaixo das postagens do blog e salve a organização da pagina.

Caso deseje formatar esses links é só alterar o estilo CSS que colocamos no gadget, é esse código:
#blog-pager-newer-link {width:200px;text-align:left;}
#blog-pager-older-link {width:200px;text-align:right;}

Caso não funcione verifica na sua pagina editar html se existe algum desses códigos:

.blog-pager {background: transparent none no-repeat scroll top center;}
.blog-pager-older-link, .home-link,.blog-pager-newer-link {background-color: #ffffff;padding: 5px;}

Eles são formatações de texto e podem interferir na formatação do seu link, veja que o nome do estilo é o mesmo (blog-pager-older-link, blog-pager-newer-link), portanto se for usar uma cor de fundo tem que apagar esse que está no exemplo background-color: #ffffff; para não haver conflito de códigos.
A demonstração desse código está em nosso blog você só precisa ir até o final da pagina e verá o link com titulo da postagem. Esperamos que gostem de mais essa dica para personalizar o seu blog e essa alteração traga algum bom resultado para seu site. 

Leia mais...

Fazer Backup ou Colocar Template no Blogger (Novo Painel)

Depois das alterações do painel do blog feitas esse ano muitas coisas ficam com pouco destaque em minha opinião por isso vamos mostrar onde achar algumas coisas úteis no painel atualizado do blogger começando pelo link para fazer backup do blog, ou seja, como salvar uma copia do seu template antes de fazer alterações nele.

Isso é muito simples de fazer você só precisa entrar na pagina modelo e clicar no link no canto da pagina fazer backup / restaurar e abre uma janela para você salvar uma copia do código do seu template atual clicando no botão fazer download do modelo completo, isto abrirá uma janela de download e você só precisa salvar o arquivo.

Agora você já pode editar seu HTML sem preocupações porque se algo der errado você só precisa voltar nesta pagina e clicar no botão selecionar arquivo e enviar novamente o arquivo que acabou de baixar e seu template voltará ao que era antes.

Esse mesmo procedimento serve para instalar templates no blogger que tenha achado em algum site na internet com templates prontos para o blogger. Mas neste caso recomendamos também salvar uma cópia do seu modelo antes de instalar o novo pelo mesmo motivo se der algo errado poderá voltar ao seu modelo atual facilmente.

Leia mais...

Favicon: como criar e hospedar imagens .ico e utilizar

Ao customizar o template do Diário de Bordo me deparei com um problema. O favicon não aparecia em todos os navegadores, somente no Firefox. Eu nunca me preocupei muito com isso pois o Dicas Blogger é hospedado no blogspot e um íconezinho do Blogger não ia fazer diferença. Sem contar que eu achava que todo mundo deveria usar o Firefox. Já com o novo blog, considerei a idéia de fazer diferente, visto que ele tem domínio próprio e ficaria mais elegante com um favicon próprio. Fui ao super blog Compulsivo, peguei o código e…descobri que eu não sabia criar uma imagem no formato .ico – necessário para que o favicon funcionasse nos outros browsers. Pedi um help ao Compulsivo e ao mesmo tempo fui pesquisar no São Google. E aí está a solução que eu encontrei.

Para quem não sabe, favicon, conforme publicado anteriormente, é aquele pequeno ícone que aparece na barra de navegação, do lado esquerdo da url de uma página web.

Nos posts anteriores, ensinei como criá-lo em formato .png. Agora, para que ele seja visualizado em outros navegadores, é preciso transformar a imagem .png em .ico. Uma forma simplificada de se fazer isso é acessando este site:http://www.favicon.ru/en

Devemos clicar em arquivo e procurar a imagem já salva no computador. Depois, iremos clicar em create favicon.ico. Feito isso, aparecerá uma nova janela para o download.

Legal! Mas, neste ponto, apareceu um novo problema: nem Picasa, nem ImageShack, nem Photobucket hospedam imagens no formato .ico. Nova pesquisa no Google e encontrei diversos sites com esta função. Escolhi o Image Boo Hosting.

Para hospedar a imagem, devemos clicar em arquivo, procurar a imagem com formato .ico recém-criada, fazer o upload dela e copiar a url, conforme nos mostra a imagem abaixo:

Agora, vamos adaptar o código e inserir no html do nosso template. Este código é de autoria do Compulsivo, com todos os direitos reservados.

<link href='URL_DA_IMAGEM_FORMATO_ICO.ico' rel='shortcut icon'/>
<link href='URL_DA_IMAGEM_FORMATO_PNG.png' rel='shortcut icon'/>

Na primeira linha colamos a url da imagem .ico e na segunda, a url da mesma imagem em .png. Agora, é só entrar no html, procurar (Crtl+F) por ]]></b:skin> e colar o código logo abaixo, devendo ficar assim:

Vamos visualizar o template e, se tudo estiver bem, salvar. Para criar a imagem em .png, podemos usar o Paint ou o Photshop e hospedar no Picasa. Não tem erro!

Para que funcione também no Google Chrome, visualize um novo código aqui.

Leia mais...