Navbar escondida com MouseHover

Esconda navbar do seu blog com MouseHover, siga os passos abaixo e veja o resultado. Veja um exemplo no blog de teste (passe o mouse acima do cabeçalho).

1º - Faça login no Blogger, entre em "Layout" -> "Editar HTML".

2º - Procure (Ctrl + f) por ]]></b:skin> e cole o código acima:

#navbar-iframe {
opacity:0.0;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100)
}

Icone diante autor do comentário

Coloque icones ao lado do titulo do comentarista, siga os passos abaixo e você verá o resultado.

OBS: Antes de começarmos, sugiro que faça um back  do seu template.

Entre no HTML do seu blog e marque a caixinha EXPANDIR MODELOS DE WIDGETS.

Procure por:

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>



E substitua por esse:


<b:if cond='data:comment.authorUrl'>
<!-- comentário do autor -->
<img class='comenta-avatar' src='URL DA IMAGEM'/><b:if cond='data:comment.author == &quot;MI_NICK&quot;'>
<b:else/>
<!-- comentários dos visitantes -->
<img class='comenta-avatar' src='URL DA IMAGEM' />
</b:if>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<!-- comentários anônimos -->
<img class='comenta-avatar' src='URL DA IMAGEM'/>
<data:comment.author/>
</b:if>


Troque URL DA IMAGEM pelo o url da sua imagem seguindo o titulo de cada aba.

Sugestões de imagens:

Anônimo: http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SeJp1pMWkLI/AAAAAAAAGmo/ggSsVIrdtms/s320/otros.png


Visitantes:
http://img92.imageshack.us/img92/1896/useruy7.png

Autor do blog: Aconselho que ponha o endereço do icone do site/blog.

Novos Tradutores Para Blogger

Olá hoje eu trago dicas de ótimos tradutores para colocar no seu blog, uns em forma de elementos de página para serem colocados na slide bar lateral do blogger, já outros, no formato widget para colocar no topo da pagina do site ou do blogspot.

Este aqui é um fácil porem não da para fazer nenhuma personalização.

Para adicionar é só copiar e colar como elemento de página:
<script language="JavaScript1.2" src="http://www.altavista.com/static/scripts/translate_engl.js"></script>
Personalizeveis:
Após escolher o tradutor se você quiser mexer no código ou trocar as imagens das bandeirinhas é só localizar o código da imagen e quer fica geralmente [img src="AQUI.png"] e substituir por uma outra imagem aqui do site FamFam Flags que tem ótimas imagens gifs para downloads e você pode hospedar as imagens aqui no novo site imagesharing para linkar diretamente as imagens deles, caso você não tenha onde hospeda-las.

São os melhores hacks Traduzires o blogs que encontrei traduza instantaneamente seu blog do portugues brasil (pt/br), para os idiomas mais falados do mundo (Chinese, Hindi, Spanish, English, Arabic, Portuguese, Bengali, Russian, Japanese, German ...) fazendo seu blog mas acessível e acessado também pelos gringos.


Os Melhores Tradutores que funciona no Blogspot são:

  1. Tuto de tudo: Estilizando um tradutor para o site ou blog
  2. Renatotavares: Tradutor para Blogger
  3. Dicas Blogger: Translator Widget - um novo tradutor para blogs
  4. Templates Blogger: Tradutor no blog
  5. 4shared: Baixar Código para traduzir blogge


Mais Tradutores Widgets

Translator widgets for your language:
From: (Estes você cliqua copia e cola como elementos de páginas widgets javascript e HTML no blogspot)
  1. Todos os Idiomas
  2. Portuguese para English
  3. Spanish para English
  4. Japanese para English
  5. Korean para English
  6. Arabic para English
  7. Chinese para English
  8. Russian para English
  9. Italian para English
  10. German para English e French

Agora é só incluir o código preferido no seu blog ou template, deu erro? não deu certo? comenta!!!

Transforme seu Mozilla Firefox no Google Chrome

Muitos usuários nem sabe da existência dos complemento para firefox e de como o bom uso pode melhorar bastante sua experiência.

Galera, eu não troco meu firefox tão cedo e o motivo é óbvio, o firefox é o navegador que tem mais pessoas customizando e melhorando o que me permite personaliza-lo ao máximo com utilitários que facilitam a vida, e nesta postagem eu irei ensinar a colocar no seu firefox toda a aparência e funcionalidade do navegador cromado do Google.

Qual a vantagem de transformar o firefox no google crome?
Na verdade o objetivo em fazer isso é somar utilidades...
de um lado o firefox que tem milhões de extensões e complementos exclusivos <=> e do outro o google crome com interface gráfica melhorada e fácil de usar.

Não sou contra o google crome só que para mim que ainda não encontro tudo que tenho no firefox e crio em mim esta resistência que talvez seja temporária e recomendo o seguinte:
Quando o Google Chrome tiver todas as funcionalidades do firefox passem para ele, em quanto isso o firefox vai continuar com seu reinado!

Para cromar o seu firefox eu recomendo baixar e instalar a versão Firefox 3.0.10 ou outra compatível.


Transformando o Firefox no Chrome

Chromifox
1 - Depois de instalar o firefox compatível instale o tema Chromifox, este tema já deixa seu firefox com os ícones e cores do Google Chrome.

Baixar e Instalar>>


Chromin Frame
2 - Agora para deixar o firefox com a barra de títulos e abas na mesma posição do Google Chrome instale o Chromi Frame

Baixar e Instalar>>




Speed Dial
3 - Sabe aquelas telinhas iniciais do Google Chrome que permite ver a miniatura dos sites mais acessados na tela? ela já existia para firefox e o nome dela é Speed Dial, recomendo esta porque é melhor customizada mais exitem outras inclusive que mais se parece com a do google crhome que esta é só procurar aqui.

Baixar e Instalar>>




Pronto com isto você já tem a aparência, agora alguns utilitários opcionais "característicos" do crhome!


1 - Hide Menubar

Para esconder os menus de título, (Mesma coisa que um f11 só que fica as abas e a barra de endereço visível)

2 - Download Statusbar ou Extended Statusbar

Preview Image of Download StatusbarPreview Image of Extended Statusbar


Tambem são extensões antigas ao crhome, porem muito utilizada, mostra o andamento do dowload na barra de status do firefox semelhante tambem no opera.

3 - Locationbar² e Locationbar Limit

Preview Image of Locationbar²

Com a primeira você navega pela barra de endereço por exemplo na url http://dicas.dicadedica.com/search/label/Blogger+Tutorial irá aparecer links para a pagina inicial daquela url bem como para as palavras chaves em separado na barra de endereço do navegador e a segunda dá sugestões e transforma o a barra de endereço no campo google pesquisa.

4 - Brief

Você vai encontrar vários leitores de feed rss porem eu recomendo o Brief que é o que melhor me adaptei.

5 - Total ReChrome

Outra opção para transformar o firefox no google crhome e o total rechrome porem ainda em teste mais depois disto será recomendavel a instalação.


Agora 3 utilitários Google que vão além do Chrome e que depois de usar não vai ter volta, Experimente!

1 - GooglePreview

Visualize as miniaturas dos sites pesquisados no google reduza o tempo da sua procura.

2 - Gmail Manager

Veja quando entra mensagens novas no seus emails do google, ele verifica múltiplas contas do gmail e mostra o número de mensagens não lidas bem como resumo delas.

3 - gTranslate

Traduza frases e palavras selecionando-as e clicando com o auxiliar do mouse. Esta extensão usa o próprio google translate para aplicar esta funcionalidade.

e isso foi só para mostra um pouquinho do poder de fogo da raposa...

Agora comente a vontade,
seja para discordar, concordar ou para falar de alguma funcionalidade que não encontramos disponível ainda no crhome que não falta no seu firefox... Vlw.

Barra no topo do blog



Adicione uma TOPBAR ao seu blog, adicione o código abaixo no HTML do seu blog e depois siga as instruções. Veja um exemplo em meu blog - www.ufo-nordeste.blogspot.com

Procure por:

</body>
</html>

Pegue o código aqui e cole o código acima de </body>. Pode abrir o link sem medo.

Você irá ver que ao rolar a página, a barra desce. Mas se você preferir deixar a barra parada, retire do código a parte abaixo e cole o código da barra abaixo de <body> :

display:scroll; position:fixed; bottom:547px; right:1px; z-index:99;

-----------------------------------------------------------------
Imagem de fundo:

Para mudar a imagem de fundo da barra, procure por:

http://urldaimagem.gif

Em http://urldaimagem.gif coloque o endereço da imagem que você quer.

-----------------------------------------------------------------
Icone da barra:

Para mudar a imagem de fundo da barra, procure por:

<a href='http://www.MEUBLOG.blogspot.com' target='_top'><img alt='MEU BLOG' height='27' src='http://urldaimagem.png' width='29'/></a>

Em MEUBLOG.blogspot.com coloque o endereço do seu blog e em MEU BLOG o nome do seu blog, em http://urldaimagem.png, coloque o endereço da imagem que você quer.

-----------------------------------------------------------------
Link´s da barra:

Procure por:

<li><a href='http://www.MEUBLOG.blogspot.com' target='_top'>MEU BLOG</a></li>
<li><a href='http://www.MEUBLOG.blogspot.com' target='_top'>Parceria</a></li>
<li><a href='http://www.MEUBLOG.blogspot.com' target='_top'>Contato</a></li>


No 1º MEUBLOG.blogspot.com, coloque o endereço do seu blog e em MEU Blog, o titulo dele. Nos outros endereços coloque o endereço que você quiser, também pode mudar o titulo da url.

-------------------------------------------------------------------
Menu expansivel:

Procure por:

<option value='http://www.link1'>LINK1</option>
<option value='http://www.link2.com.br/'>LINK2</option>
<option value='http://www.link3.com.br/'>LINK3</option>


Mude o que você quiser.

Data com hora no site


Adicione uma data com hora no seu site, cópie o codigo abaixo e cole no seu blog em um elemento HTML/JAVASCRIPT :

<iframe src="http://free.timeanddate.com/clock/i1kbug2c/n45/tlbr5/tt0" frameborder="0" width="324" height="18"></iframe>



Exemplo



Free Cloks
http://www.timeanddate.com/clocks/free.html

Titulo diferente a cada atualização da página

Para ver um titulo diferente em seu blog a cada carregamento da página, ponha o código abaixo depois de <head>.

<SCRIPT language=JavaScript>
<!--
var numb = 9
title_text = new Array();
title_text[0] = "título 1";
title_text[1] = "título 2";
title_text[2] = "título 3";
title_text[3] = "título 4";
title_text[4] = "título 5";
title_text[5] = "título 6";
title_text[6] = "título 7";
title_text[7] = "título 8";
title_text[8] = "título 9";
title_text[9] = "título 10";
var doit = title_text[Math.round(Math.random()*numb)];
document.write("<title>TITULO DO SEU BLOG - "+doit+"</title>");
// End -->
</SCRIPT>

Em TITULO DO SEU BLOG coloque o nome do seu blog.

Rodapé no blogger - 3 colunas

 
Colunas que nos sustentam!
Para colocar um rodapé ou footer no seu blog, basta seguir o tutorial abaixo e está pronto.

Atenção: Antes de comerçarmos, sugiro que salve uma cópia de seu template.

1º - Configurar o CSS:

1º - Faça login no Blogger, entre em "Layout" -> "Editar HTML".

2º - Procure (Ctrl + f) por:

/* Footer
----------------------------------------------- */
#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

3º - Substitua esse código por o código do link -  /rodapé.txt :


2º - Configurar HTML:

2º - Procure (Ctrl + f) por:

    <div id='footer-wrapper'>
      <b:section class='footer' id='footer'>
    </div>

2º - Substitua esse código por :

<div id='rodape-wrapper'>
<div class='rodape1' style='float: left;'>
<b:section id='rodape1' preferred='yes'/>
</div>
<div class='rodape2' style='float: right;'>
<b:section id='rodape2' preferred='yes'/>
</div>
<div class='rodape3' style='float: right;'>
<b:section id='rodape3' preferred='yes'/>
</div>
<div style='clear:both;'/>
<div class='rodape4'>
<b:section id='rodape4' preferred='yes'/>
</div>
</div> <!-- end rodape-wrapper -->

3º - Visualize para ver se tudo ocorreu corretamente... Salve!

Caixinha link-me para divulgar os banners do seu blog

Caixinha link-me é o nome dado ao widget usado na divulgação dos banners de um blog. Eu conheço dois modelos:

No primeiro, podemos gerar o código em sites como o Mais Blog. Para tanto, é preciso já ter um banner hospedado e seguir as instruções do site. O código gerado, deverá ser colado nos gadgets do Blogger, em HTML/Javascript.


Para utilizar o segundo modelo, basta copiar o código abaixo, fazendo as seguintes alterações:
  • inserir o endereço (url) do banner e do blog, nos campos indicados em vermelho.
  • inserir o nome do blog nos locais indicados em verde
<div
style="border: 1px dotted rgb(204, 204, 204); padding: 5px; margin-top: 10px; margin-bottom: 10px; text-align: center;">
<img style="border: 1px solid rgb(0, 0, 0);" src="URL_DO_BANNER" /><br/>
Divulgue o (nome do blog)<br/>
<input onfocus="this.select()" value="&lt;a target=&quot;_blank&quot; href=&quot;URL_DO_BLOG&quot; title=&quot;NOME_DO_BLOG&quot;alt=&quot;NOME_DO_BLOG&quot;&gt;&lt;img src=&quot;URL_DO_ BANNER&quot; style=&quot;border: 1px solid #000000&quot; /&gt;&lt;/a&gt;" type="text" onmouseover="this.focus()" style="color: rgb(153, 153, 153); margin-top: 0.5em;" size="20"
name="Banner"/></div>

Troque o nome do autor do post por link ou imagem

Aprenda com esse tutorial a transformar o nome do autor das postagens em link ou imagem.
É bem simples, siga passo a passo e você não vai encontrar dificuldades:

1º- Transformar em link:

1º - Faça login no Blogger, entre em "Layout" -> "Editar HTML". E ative a caixa: "Expandir modelos de widgets".

2º - Procure (Ctrl + f) por:
<data:post.author/>
3º - Substitua esse código por:
<a href='URL DO SITE DESEJADO' target="_blank"><data:post.author/></a>
Agora coloque no lugar de "URL DO SITE DESEJADO" o link em que vai ser direcionado à pessoa que clicar em seu nome.

4º - Teste, se tudo ficou como deveria... Salve!

Créditos ao Paulo Estevão

2º- Transformar em imagem:

1º - Faça login no Blogger, entre em "Layout" -> "Editar HTML". E ative a caixa: "Expandir modelos de widgets".

2º - Procure (Ctrl + f) por:

<data:post.author/>

3º - Substitua esse código por:
<a href='URL do site desejado' title='Sobre'><img src='URL da imagem'/></a>
Agora coloque no lugar de "URL DO SITE DESEJADO" o link em que vai ser direcionado à pessoa que clicar e em URL DA IMAGEM coloque o endereço da sua imagem .

4º - Teste e salve!

Adicione uma CAIXA DE TEXTO em seu blog


Com esta caixinha de texto é possível também publicar códigos ou mesmo dar um destaque em um post.

<textarea style="COLOR: rgb(0,0,0); BACKGROUND-COLOR: #ffffff" rows="5" cols="40">ESCREVA AQUI O SEU TEXTO</textarea>

Exemplo:

Como baixar vídeos de sites, como YouTube


O tutorial abaixo lhe ensinará a baixar vídeos de sites como YouTube, Metacafe, DailyMotion e outros sites de vídeos on-line.

Ás vezes achamos vídeos legais e gostaríamos de gravá-los em DVD ou apenas tê-los em nossos computadores. Mas o site não oferece o download dos vídeos. Como fazer para baixá-lo em nosso computador?

Atenção: Esse método é extremamente legal e não infringe nenhuma lei.

Usando programas:

Há vários programas que podem baixar e converter vídeos do YouTube. Um deles é o aTube Catcher. Um dos melhores: Suporta centenas de sites de vídeo on-line. Basta baixá-lo, instalá-lo e colocar o link do vídeo onde for solicitado. Depois é só escolher o formato de saída. Muito bom mesmo.


Um dos melhores no ramo, não devendo nada ao aTube, é o TubeTilla. Muito leve, converte automaticamente seus vídeos do YouTube. Salva todos os arquivos numa pasta padrão, que pode ser alterada. Uma alternativa e tanto. Para baixá-lo, vá ao fim do artigo e clique no link em vermelho.

Usando sites:

Sites que baixam vídeos de outros sites? Sim! Se você tem uma conexão boa e não deseja instalar programas para baixar vídeos, use os sites, eles fazem como os programas e não devem nada em questão de recursos.

Um dos melhores na minha opnião é o KeepVid. Muito fácil de usar e rápido. Basta inserir o link no campo indicado e escolher entre um dos tipos de arquivo disponíveis. Depois disso, basta aguardar o término do download (como se fosse um arquivo comum!) e use seu player preferido para ver seu vídeo.

Outro site muito bom é o VConversion. Tem muitos recursos (podendo salvar em vários formatos de arquivo) além de salvar apenas o áudio em MP3 do vídeo original (ideal para ringtones e músicas sem vídeo ou para gravar CDs).


Uso Firefox. Existe algum plug-in especializado nisso para mim?

Sim, existe! É o plug-in Fast Video Download. Com o vídeo aberto, basta clicar no ícone do plug-in e iniciar o download. Baixa até vídeos do Globo.com!

Para instalar, clique no link usando o Firefox e clique em "Baixar agora". Depois siga as instruções.



Como você viu, existe muitas alternativas para sites de vídeos on-line. Comece a testar agora mesmo e tenha em seu computador os melhores vídeos da Internet!


Downloads relacionados
(Clique nos links em vermelho para fazer os downloads)
Os links para os sites estão no meio do artigo.

Empresa: Diego Uscanga
Licença: Gratuito
Tamanho: 7,3 MB
Sistemas: Windows 98/ME/2000/XP/Vista/7

Empresa: Tubetilla
Licença: Gratuito
Tamanho: 4 MB
Sistemas: Windows 2000/XP/Vista/7

Para acessar os sites de download de vídeos, basta clicar no nome deles no meio do artigo.

Para mais artigos sobre informática, visite:
Banner 3

RSS >> Icones Feeds Coleção Definitiva em PNG!

rss_by_sniffels

Hoje estava procurando na internte icones gratúitos e chamativos para divulgar o rss do dicadedica, e achei várias páginas interessantes, e tambem um site que continha a união de todas as coleções dos ícones rss de feeds gratúitas para colocar no seu site ou blog.
Gif, PNG, Rar.


BittBox
8 different colors - various sizes and formats. Illustrator, EPS, SVG, PNG, and JPG formats.

BittBox

UtomBox
Available in PNG format. Part of a larger set.
UtomBox

snap2objects
30 free icons in PDF vector format.
snap2objects

Vikiworks
Part of a Social Bookmark Iconset.
Vikiworks

Fasticon
Fasticon

Part of a set of Social Bookmark Icons.
Fasticon

Fasticon

zeus box
A whole set using PNG format.
zeus box

WebFruits
From (max)Icone Blog - Set 1
WebFruits Icons 1

From (max)Icone Blog - Set 2
WebFruits Icons 2

GoSquared
Available in Illustrator or JPEG versions.
GoSquared

Vector icons available in 5 different colors and in Illustrator, SVG, and JPEG formats.
GoSquared 2

PhotoshopCandy
Layered PSD available.
PhotoshopCandy

Perishable Press
In PNG format.
Perishable Press

Bartelme Design
Available in PNG and Illustrator formats.
Bartelme Design

Kapowaz
Available in PNG format as well as the original PSD.
Kapowaz

FreeIconsWeb
16 icons set in PNG, ICO, and ICNS formats.
FreeIconsWeb

Play Like A Girl
My personal favorite. Available in PNG format and the original PSD.
Play Like a Girl

Arzo Icons
Available in PNG format.
Arzo Icons

Randa Clay Design
Available in PNG and EPS formats.
Randa Clay Design

Ps graphiX
Available in PNG format as well as the original PSD.
Ps graphiX

Abdussamad Abdurrazzaq
Available as an animated gif.
Abdussamad Abdurrazzaq

Spheres Graphics
Available in PNG format.
Spheres Graphics

Spheres Graphics 2

Subtraction
Available in PNG format an in original PSD.
Subtraction

Dr. Web
Original PSD available and samples of lots of variations as gifs.
Dr. Web

DevilCry
Available in PNG format.
DevilCry 1

DevilCry 2

DevilCry 3

SimDes
Available in PNG format.
SimDes

Valentina Olini
Available in PNG format.
Valentina Olini

From deviantArt:

~nam0
namo1

namo2

carlnewton
Carl Newton

leoparn
Available in PNG format.
leoparn

jb55
jb55

petemh
petemh

Feeling inspired now? Want to make your own?

Feed Icons
Featuring a devlopers kit with AI, EPS, SVG, PSD, PDF, PNG, JPG, and GIF formats included.
Feed Icons

Want to start from scratch? Check out these tutorials:

Photoshoplovr.com
The original PSD is available as well as a tutorial on how to make them.
Photoshoplovr.com

Pixel Hive Design
A Photoshop tutorial.
Pixel Hive

PhotoshopCandy
The PSD is available upon request.
Photoshop Candy Tutorial

Spoon Graphics
Illustrator Tutorial.
Spoon

CMXtraneous
A Fireworks tutorial plus a PNG file.
CMXtraneous


Similar Posts:


This post is tagged



Explore Recent



Comic Book Conventions.com - The Web's Best Convention Calendar
Happy Catholics - Catholic Gifts, Art, and More!
Advertise on Design Bliss




Acesse os sites das coleções!!!
Vai ser difícil encontrar uma galeria maior do que está.

De uma olhada nesta Lista

Paper feed icons

paper_feed_icons_by_narjisnaqvi2

Hat RSS Icon

hat_rss_icon_by_loafninja

Wax Seals

wax-seals

RSS Bot

rss-bot

345 Free RSS Icons

345_free_rss__icons_by_studiom6

RSS

rss_by_sniffels

RSS icons

rss_icons_by_sniffels

Rss Icons Orb v2

shiny-iconsi

Feedicons 2

feed-icons

RSS Icons

illustation-rssjpg

Circle Feeds Icons

circle-feed-icons

RSS NEWS

rss-news-icons

RSS Icons

rss_icons_by_curtivearticide

Toast Feed Icon

toast

Rss icons - namo

namo

RSS 2008

3drssicon

RSS Feeds Icons - Shirt

rss-tshirts

RSS Block

rss-feed-block

3D Rss Feeds Icon

rss-feed-3d-icons

Free web 2.0 RSS icons

ice-joy

Rss icons by ~jinsona

icon-set

40 Vector Translucent 3D Look RSS Icons

vector-icons

Color RSS icons

color-icons

Feed Me Animals: A Free RSS Feed Icon Set

animal-rss-icon

30 Free Vector RSS Icons

vector-icons-square

RSS Feed Icons - Glossy Balls

cirle-glssy-icons

RSS feed button pack

rss-feed-buttons

RSS feed 17 icons-sign v1.0

multi-color-icon

RSS Icons by *lansworxph

shiny-glossy-icons

RSS Icons by ~serega

rss-icons-seanga

RSS ICON by ~blogeeks

blog-eeks

StickerFeed by ~bati1975

rss-sticker-icons

RSS Icons by ~mata-mhari

black-icons

Free Download: RSS Feed Badges / Icons

rss-feed-badge-buttons

RSS READER Icon by ~twinware

rss-reader

RSS Icons set by ~mata-mhari

circle-rss-icons

Web 2.0 RSS Icon 2

data-mouse

Free Glass Style RSS/Feed Icons

reflected-feed

NewsFire

news-fire

devi.RSS

devi

RSS Icons - PNG

black-rss-icon

RSS Pack

rss-pack

Wood RSS Feed Icons

wood-rss-feed-icon

Gold RSS Icon

gold-icon

Rss icon (png) freebie!

rss-show-off



The following icons were designed from members of Deviant Art.