July 7, 2009

Posted by: admin

Category: Blog, Efeitos, Iniciantes, Tutoriais

Tags:

Personalizando link postagens "Anterior", "Próxima", "Início"

Encontrei este tutorial super legal no blog Blog Fácil, ensinando a trocar os links que ficam no fim da página, que possibilita a navegação entre os posts por imagens.

Já estou vamos colocar aqui no blog e agora vou ensinar a vocês a fazer isso também, a diferença é que vou fazer tudo, passo por passo para você fazer também no seu template.

1º - Salve o template como sempre, caso tenha problemas você tem o template salvo;

2º – Entre no blogger, e siga: “Layout”, “Editar HTML”, marque a janela: “Expandir modelos de widgets”;

3º - Procure (Ctrl + F):

<data:newerPageTitle/>

 Substitua por:

<img alt=’Página Anterior’ border=’0′ src=’http://img169.imageshack.us/img169/9415/anteriorhi3.gif’/>

4º - Procure (Ctrl +F):

<data:olderPageTitle/>

  Substitua por:

<img alt=’Próxima Página’ border=’0′ src=’http://img153.imageshack.us/img153/2761/proximapj1.jpg’/>

 5º -  Procure (Ctrl +F):

 <data:homeMsg/> 

 Substitua por:

<img alt=’Home’ border=’0′ src=’http://img524.imageshack.us/img524/8104/iniciocf8.gif’/>

6º - Teste, se tudo está como deveria, salve!

Pronto! Se quiser usar imagens diferentes, faça a sua, hospede e substitua os links das imagens pelas novas.

July 3, 2009

Posted by: admin

Category: Efeitos

Tags:

Js Banner rolante

Baner Rolante
<marquee heigth=”300″ direction=”up” behavior=”scroll widht=” onmouseover=”this.stop() ” onmouseout=”this.start()” scrollamount=”1″>coloque o texto ou banner parceiro aqui!!!</marquee></div>

July 3, 2009

Posted by: admin

Category: Efeitos

Tags:

Texto Deslizante

Para colocar um texto deslizante no seu Blog basta copiar o código abaixo:

<marquee behavior=”alternate” width=”400″ height=”50″>Coloque aqui<br />seu texto! ! !</marquee></p> <div style=’clear: both;’></div> </div> <div class=’post-footer’> <p class=’post-footer-line post-footer-line-1′> <div align=’left’> Hotmail:<a href=’mailto:k6filmes@hotmail.com’></a><a href=’mailto:k6filmes@hotmail.com’ rel=’alternate’ type=’Avise-nos’> Link quebrado? Avise-nos por favor</a> | Xat: <a href=’http://xat.com/chat/room/46267547/’ target=’_blank’>K6filmes</a></div> <span class=’post-backlinks post-comment-link’> </span> <span class=’post-icons’> <span class=’item-control blog-admin pid-1252983450′> <a href=’http://www.blogger.com/post-edit.g?blogID=1801399375047121055&postID=8327921092796703495′ title=’Editar postagem’> <span class=’quick-edit-icon’> </span> </a> </span> </span> </p> <p class=’post-footer-line post-footer-line-2′></p> <p class=’post-footer-line post-footer-line-3′></p> </div> </div> <div class=’post uncustomized-post-template’> <a name=’996522121776673056′></a> <h3 class=’post-title’> <a href=’http://www.dicasbr.co.cc/2009/06/retirar-assinar-postagens-atom.html’>Retirar : Assinar: Postagens (Atom)</a> </h3> <div class=’post-header-line-1′></div> <div class=’post-body’> <p><div style=”text-align: center;”>Para retirar este link padrão do Blogger que fica sob as postagens, procure no código do seu template este trecho:<br /><br />.feed-links {<br />clear: both;<br />line-height: 2.5em;<br /><b>display: none;</b><br />}<br /><br />e <u>acrescente</u> o que está em negrito.</div></p> <div style=’clear: both;’></div> </div> <div class=’post-footer’> <p class=’post-footer-line post-footer-line-1′> <div align=’left’> Hotmail:<a href=’mailto:k6filmes@hotmail.com’></a><a href=’mailto:k6filmes@hotmail.com’ rel=’alternate’ type=’Avise-nos’> Link quebrado? Avise-nos por favor</a> | Xat: <a href=’http://xat.com/chat/room/46267547/’ target=’_blank’>K6filmes</a></div> <span class=’post-backlinks post-comment-link’> </span> <span class=’post-icons’> <span class=’item-control blog-admin pid-1252983450′> <a href=’http://www.blogger.com/post-edit.g?blogID=1801399375047121055&postID=996522121776673056′ title=’Editar postagem’> <span class=’quick-edit-icon’> </span> </a> </span> </span> </p> <p class=’post-footer-line post-footer-line-2′></p> <p class=’post-footer-line post-footer-line-3′></p> </div> </div> <div class=’post uncustomized-post-template’> <a name=’7702113617095079631′></a> <h3 class=’post-title’> <a href=’http://www.dicasbr.co.cc/2009/06/programas-gratuitos-para-edicao-de.html’>Programas Gratuitos para Edição de Imagens</a> </h3> <div class=’post-header-line-1′></div> <div class=’post-body’> <p><p style=”text-align: center;”>Encontramos no Blog Vista Experience, essa lista de programas grátis para fazer e editar imagens, por achar que seria bem úteis para os blogueiros resolvemos publica-la aqui. Esperamos que algum desses programas sejam úteis na hora de crirar banners, templates e outras coisas para colocar nos blogs.</p><p style=”text-align: center;”>GIMP: O GNU Image Manipulation Program é um poderoso e gratuito software que pode lidar com todas as tarefas básicas de edição de imagens e muito mais. O fato de ser um programa de código aberto e disponível para plataformas Unix, <span style=”border-bottom: 1px dotted; color: rgb(204, 0, 0); text-decoration: underline;”>Mac</span> e Windows o torna extremamente flexível.</p><div style=”text-align: center;”><br /></div><p style=”text-align: center;”>Paint.NET: Este é provavelmente o mais poderoso software editor de imagens gratuito do mercado. Ele pode executar tarefas simples como correção de olhos vermelhos, redimensionamento, recorte e também suporta camadas. O programa possui o código aberto e uma grande coleção de plug-ins disponível em sua comunidade online.</p><div style=”text-align: center;”><br /></div><p style=”text-align: center;”>Autostitch: Esta é a ferramenta perfeita para criação de imagens panorâmicas a partir de uma série de fotos. Ele trabalha automaticamente e não requer intervenção do <span style=”border-bottom: 1px dotted; color: rgb(204, 0, 0); text-decoration: underline;”>usuário</span>. A versão demo é totalmente funcional e gratuita.</p><div style=”text-align: center;”><br /></div><p style=”text-align: center;”>Microsoft Reserach Group Shot: Se você precisa tirar uma foto de um grande grupo de pessoas, as chances são de que não importa quantas fotos você tire, não terá uma que deixará todos satisfeitos. Aqui é onde entra o Microsoft Group Shot. Com este software você pode selecionar suas partes favoritas em cada foto da série e o programa irá fundir todas ela sem uma imagem composta.</p><div style=”text-align: center;”><br /></div><p style=”text-align: center;”>TKexe Kalender: Já é o ano novo e talvez você precise de um calendário de papel. Para criar uma edição pessoal e única, experimente usar este software gratuito e fácil.</p><div style=”text-align: center;”><br /></div><p style=”text-align: center;”>Opanda PhotoFilter: Filtros podem tornar uma foto muito interessante e especial. Mas é cansativo carregar por aí filtros para sua câmera ou lidar com as configurações da câmera ou software para obter os resultados desejados. Muito mais fácil é usar o Opanda PhotoFilter para fazer o pós-processamento de suas imagens. O programa vem equipado com mais de 100 diferentes configurações simulando os filtros da Kodak, Cokin e Hoya.</p><div style=”text-align: center;”><br /></div><p style=”text-align: center;”>Foto Mosaik: Crie um mosaico a partir de centenas ou milhares de fotos. Veja o exemplo abaixo. A imagem do mosaico é a águia exibida no canto superior esquerdo, o resto da imagem é um zoom em diversas miniaturas indicado pela moldura vermelha.</p><div style=”text-align: center;”><br /></div><p style=”text-align: center;”>Win Morph: Transforme e distorça imagens de forma profissional e com <span style=”border-bottom: 1px dotted; color: rgb(204, 0, 0); text-decoration: underline;”>alta qualidade</span>. Este programa dá a você toda a liberdade que você precisa e em um programa gratuito. Ele trabalha como um aplicativo independente ou como plug-in para vários editores de vídeo.</p><div style=”text-align: center;”><br /></div><p style=”text-align: center;”>Free Digital Camera Enhancer: Esta é uma ferramenta para os toques finais em suas fotos digitais. Reduza o ruído causado por pouca luz, corrija os tons, adicione saturação e suavize a pele. Naturalmente, isto irá trabalhar melhor em imagens ruins</p><div style=”text-align: center;”><br /></div><p style=”text-align: center;”>JPEG Lossless Rotator: Com a maioria dos programas, o simples ato de rotacionar sua foto JPEG na orientação correta e salvá-la causa perda de qualidade. O JPEG Lossless Rotator faz este trabalho sem recodificar sua foto. Ele executa uma transformação especial sem perdas, deixando a qualidade da sua foto intocada.</p></p> <div style=’clear: both;’></div> </div> <div class=’post-footer’> <p cla
ss=’post-footer-line post-footer-line-1′> <div align=’left’> Hotmail:<a href=’mailto:k6filmes@hotmail.com’></a><a href=’mailto:k6filmes@hotmail.com’ rel=’alternate’ type=’Avise-nos’> Link quebrado? Avise-nos por favor</a> | Xat: <a href=’http://xat.com/chat/room/46267547/’ target=’_blank’>K6filmes</a></div> <span class=’post-backlinks post-comment-link’> </span> <span class=’post-icons’> <span class=’item-control blog-admin pid-1252983450′> <a href=’http://www.blogger.com/post-edit.g?blogID=1801399375047121055&postID=7702113617095079631′ title=’Editar postagem’> <span class=’quick-edit-icon’> </span> </a> </span> </span> </p> <p class=’post-footer-line post-footer-line-2′></p> <p class=’post-footer-line post-footer-line-3′></p> </div> </div> <div class=’post uncustomized-post-template’> <a name=’6925501030997333672′></a> <h3 class=’post-title’> <a href=’http://www.dicasbr.co.cc/2009/06/contador-de-usuarios-online.html’>Contador De Usuários Online</a> </h3> <div class=’post-header-line-1′></div> <div class=’post-body’> <p><p align=”center”><img src=”http://whosread.com/counter/whosre.gif” vspace=”5″ hspace=”2″ /><br /><br /><textarea rows=”3″ cols=”10″ onfocus=”this.select()” onmouseover=”this.focus()” style=”border: 1px solid rgb(0, 0, 0); font-family: verdana; font-size: 8pt; background-color: rgb(255, 255, 255);” name=”textarea”><a href=”http://whosread.com/show/28183g” title=”online counter”><img src=”http://whosread.com/counter/28183g.gif” alt=”online counter” width=”80″ height=”15″ border=”0″ /></a></p> <div style=’clear: both;’></div> </div> <div class=’post-footer’> <p class=’post-footer-line post-footer-line-1′> <div align=’left’> Hotmail:<a href=’mailto:k6filmes@hotmail.com’></a><a href=’mailto:k6filmes@hotmail.com’ rel=’alternate’ type=’Avise-nos’> Link quebrado? Avise-nos por favor</a> | Xat: <a href=’http://xat.com/chat/room/46267547/’ target=’_blank’>K6filmes</a></div> <span class=’post-backlinks post-comment-link’> </span> <span class=’post-icons’> <span class=’item-control blog-admin pid-1252983450′> <a href=’http://www.blogger.com/post-edit.g?blogID=1801399375047121055&postID=6925501030997333672′ title=’Editar postagem’> <span class=’quick-edit-icon’> </span> </a> </span> </span> </p> <p class=’post-footer-line post-footer-line-2′></p> <p class=’post-footer-line post-footer-line-3′></p> </div> </div> <!– google_ad_section_end –> </div> <div class=’blog-pager’ id=’blog-pager’> <span id=’blog-pager-older-link’> <a class=’blog-pager-older-link’ href=’http://www.dicasbr.co.cc/search?updated-max=2009-06-20T13%3A47%3A00-07%3A00&max-results=7′ id=’Blog1_blog-pager-older-link’ title=’Postagens mais antigas’>Postagens mais antigas</a> </span> </div> <div class=’clear’></div> <div class=’blog-feeds’> <div class=’feed-links’> </div> </div> </div></div> <div id=’footer-wrapper’> </div> </div> <div id=’sidebar-wrapper’> <div class=’sidebar section’ id=’sidebar’><div class=’widget HTML’ id=’HTML22′> <h2 class=’title’>Link-Me</h2> <div class=’widget-content’> <center><p align=”center”><span class=”font2″><b></b></span></p><span style=”font-weight: bold; color: rgb(255, 0, 0);”>Para Ser Parceiro Add Nosso Banner E Deixe Um Recado No Mural De Pedidos </span></center><p align=”center”><img vspace=”5″ hspace=”2″ style=”width: 116px; height: 61px;” src=”http://www.lineofpics.com/images/51fojwinwjix1u8w7kre.gif”/> <textarea rows=”3″ cols=”10″ onfocus=”this.select()” onmouseover=”this.focus()” style=”border: 1px solid rgb(0, 0, 0); font-family: verdana; font-size: 8pt; background-color: rgb(255, 255, 255);” name=”textarea”><a onmouseover=”parent.location=’http://www.dicasbr.co.cc/’” href=”http://www.dicasbr.co.cc/” target=”_blank”><img border=”0″ style=”width: 120px; height: 60px;” src=”http://www.lineofpics.com/images/51fojwinwjix1u8w7kre.gif”/></a>

June 24, 2009

Posted by: admin

Category: Efeitos

Tags:

Barra de rolagem nos marcadores

Para modificar a aparência (cor da letra, itálico, cor de fundo ou colocar uma barra de rolagem) somente dos marcadores do blog precisamos criar um novo estilo CSS e aplicar aos marcadores somente. Isso é feito em duas partes, primeiro entre na pagina editar HTML e clique para Expandir modelos de widgets, então procure os marcadores do seu blog.
Marcadores
No caso deste blog (imagem acima) o nome dos nossos marcadores é guia rápido, então encontre os marcadores do seu blog na pagina editar HTML, é claro será com o nome (titulo) que você usa nos marcadores. Quando achar umas linhas abaixo tem <ul>, modifique para ficar igual dessa imagem <ul class=’guiarapido’>, a palavra guiarapido será o novo estilo CSS que vamos criar então pode ser qualquer palavra, mas cuidado para não apagar os sinais ao lado ‘ porque sem eles não vai funcionar.

Depois que fizer isso vá até o começo do html, onde estão os estilos do seu blog (body, main, sidebar…) e coloque isso aqui:

.guiarapido { font-style: italic;
height: 200px;
overflow: auto;
}

A parte fonte-style: italic; é o efeito itálico, as outras linhas são a barra de rolagem, o valor 200 é a altura, isso você pode modificar como quiser. Se quiser colocar estilos diferentes para quando o mouse está sobre os links, faça desse jeito:

.guiarapido {height: 200px;
overflow: auto;
}

.guiarapido a{font-weight: bold;
}

.guiarapido a:hover{ font-style: italic;
}

Se não quiser a barra de rolagem nos marcadores é só não colocar a primeira parte do código. Nas duas partes seguintes coloque os estilos que desejar: tipo de letra, tamanho… (lembrando que a parte que tem o “a” são os links e “a:hover” é quando colocamos o mouse sobre o link, assim podemos editar somente os marcadores do blog sem alterar o restante dos links ou textos. Vamos lembrar mais uma vez que fizemos tudo isso usando o estilo com o nome de guiarapido apenas como exemplo, você pode usar qualquer palavra, mas tem que ser exatamente igual em todas as partes do código.

Fonte:Dicas para Blogs

June 24, 2009

Posted by: admin

Category: Efeitos

Tags:

Imagem no fundo do blog

Colocar imagens como plano de fundo nos sites é uma coisa simples de fazer, basta colocar o código background-image: url(Url da Imagem); onde você deseja colocar a imagem de fundo, lembre-se qualquer parte do CSS pode ter sua imagem de fundo e não somente a tag body onde é geralmente usada. Todas essas alterações de imagens de fundo são feitas através da página editar HTML.

Mas além de colocar a imagem ainda podemos escolher onde ela aparecerá e se irá ou não se repetir. Então vamos por partes, primeiro sobre a imagem se repetir, aqui temos algumas opções, embaixo da linha background-image: url(Url da Imagem); colocamos:

background-repeat: no-repeat; – imagem aparece somente uma vez
background-repeat: repeat-x; – imagem repete horizontalmente(lado a lado)
background-repeat: repeat-y; – imagem repete verticalmente(uma embaixo da outra)

Um detalhe é que o ponto e virgula faz parte do código portanto não esqueça dele.
Além de repetir ou não podemos escolher a posição que a imagem de fundo irá aparecer, com o seguinte código:
background-position: right top;

Isto somente fará diferença no blog caso você coloque uma das linhas que controla a repetição, afinal se a imagem se repetir pela pagina toda ela não usará posicionamento. Para colocar a imagem no lugar que você deseja basta trocar as palavras right e top, assim você mudará o lugar que a imagem de fundo irá aparecer para fazer isto no lugar de right(direita), você pode usar center(imagem centralizada horizontalmente) ou left(imagem à esquerda). E no lugar de top(imagem no alto da tela), pode usar center(imagem centralizada verticalmente) ou bottom(imagem embaixo da tela).

Esses códigos para controlar a repetição e onde a imagem de fundo aparecerá são muito bons para usar quando deixamos a imagem de fundo fixa, acrescentando essa linha:
background-attachment: fixed;

Isto faz que a imagem de fundo fique parada na tela e o conteúdo do site deslize sobre ela. Todos esses códigos mencionados nesta publicação são usados para controlar a imagem no fundo da pagina e portanto devem ser usados juntos, deste jeito:
body {background-image: url(Url da Imagem);
background-position: left center;
background-repeat: repeat-x;
background-attachment: fixed}

Pronto,agora e só aproveitar.

 

Free Web Hosting