Imagem ao lado do texto ou link
Alguns blogs tem uma pequena imagem ao lado dos links ou titulos, clique aqui para ver um exemplo, para colocar um seta ou qualquer outra imagem ao lado de um texto ou link o código é:.seta a{background-image: url(URL DA IMAGEM);
background-repeat: no-repeat;
background-position: left center;
padding-left: 40px;
}
Isso pode ser usado em qualquer tipo de texto sendo um link ou não, apenas tenha o cuidado de quando usar isso num link colocar o código da outra imagem para quando o mouse estiver sobre o link, desse jeito:
.seta a:hover{background-image: url(URL DA IMAGEM);
}
O nome .seta é apenas um exemplo no caso do Blogspot para colocar isso nos links da sidebar, você deve colocar esse código nessa parte:
.sidebar ul li {.....
Mas caso o seu blog não tenha especificado o link(a, a:hover) da sidebar precisamos colocar e o código com a imagem ficará assim:
.sidebar ul li a{background-image: url(URL DA IMAGEM);
background-repeat: no-repeat;
background-position: left center;
padding-left: 40px;
}
.sidebar ul li a:hover{background-image: url(URL DA IMAGEM);
}
Isso porque se colocar no começo do código onde tem: a:link, a:visited isso colocará essa imagem ao lado de todos os links do seu site.
Colocar ou alterar as bordas
Existem vários modos de mudar o visual do blog somente utilizando o estilo CSS um deles é colocar ou alterar as bordas. Esse código é bem simples e pode se usado em qualquer lugar, serve inclusive para fazer botões quando combinados com uma cor de fundo, além disso podemos usar para colocar bordas nas postagens, menus e qualquer outra coisa no blog. O código das bordas deve ser moficado pela página editar HTML, agora vamos entender melhor esse código:
border: 1px solid #0000FF
1px é a largura
solid é o estilo
#0000FF é a cor
Por exemplo para colocar bordas nos link procure por:
a:link, a:visited {
color:#0000ff;
text-decoration:none;
}
e coloque border: 1px solid #0000FF, dentro das chaves, deixando o código assim:
a:link, a:visited {
border: 1px solid #0000FF;
color:#0000ff;
text-decoration:none;
}
Logo abaixo você pode ver outros exemplos de bordas e alterar como quiser a largura, estilo, cor e se precisa aqui tem o código das cores.
border: 2px dotted #000000
border: 2px dashed #000000
border: 1px solid #0000FF
border: 4px double #FF0000
border: 3px groove #6666FF
border: 4px ridge #FFFFCC
border: 3px inset #FFFF99
border: 2px outset #6699FF
Voltar ao topo da Página
Para voltar ao topo da página é bem simples, faça da seguinte forma:Inserir o link: Entre na página layout, clique para adicionar um gadget, escolha a opção HTML/JavaScript, e coloque esse código (esse será o lugar onde aparecerá o link para voltar do topo da página):
Topo da Página
Clique para salvar e está parte está pronta.
Inserir o Marcador: agora vamos marcar para onde o link deve levar, na pagina editar HTML, procure por e logo depois dela coloque esse código:
E já está tudo pronto é só salvar e ver o resultado. Esse mesmo sistema funciona para linkar qualquer outra parte do seu blog. Por exemplo, você quer colocar no inicio da página um link que leve para o seu banner ou setor de parcerias, coloque o link no inicio do jeito que explicamos acima (inserir link) e em vez de inserir o marcador pela pagina HTML vamos colocar junto com os parceiros, por exemplo, então coloque o código junto com o código dos seus parceiros e pronto. Mas lembrem-se quando for usar mais de uma vez esse código troque a palavra topo que está nele, pois se usar duas vezes a com a mesma palavra não funciona, pode ser qualquer palavra (parceiros, banner, imagem...) e quando for modificar o código cuidado para não pagar nenhum outro sinal “por engano.
Após publicamos esse código encontramos um jeito melhor e mais fácil que essa para colocar um link ou imagem com a função de voltar ao topo da página.
Dia do mês e da semana
Para mostrar o dia do mês e da semana no seu blog coloque o código abaixo. Entre na pagina editar layout, adicionar gadget, html/javascript, e cole esse código:Para escolher a cor, tipo e tamanho que a data aparecerá no seu blog, troque a linha document.write(day+", "+myweekday+" de "+month+" de 2008"); por essa aqui:
document.write(""
+day+", "+myweekday+" de "+month+" de 2008");
E altere como desejar: 30pt é o tamanho, Comic Sans é o tipo de letra e #CC0066 é a cor, não esqueça de alterar o ano pois esse código estava dando uma falha no Firefox por isso não foi possível colocar o ano para atualizar automaticamente, se precisar aqui tem uma tabela com o código das cores.
Teclas de atalho do Windows
Para quem gosta de ficar com uma mão o mouse e outra no teclado e assim ganhar tempos, aqui está uma lista com diversas teclas de atalho do Windows:CTRL+C (Copiar)
CTRL+X (Cortar)
CTRL+V (Colar)
CTRL+Z (Desfazer)
DELETE (Excluir)
SHIFT+DELETE (Excluir o item selecionado permanentemente sem colocá-lo na Lixeira)
CTRL enquanto arrasta um item (Copiar o item selecionado)
CTRL+SHIFT enquanto arrasta um item (Criar um atalho para o item selecionado)
Tecla F2 (Renomear o item selecionado)
CTRL+RIGHT ARROW (Mover o ponto de inserção para o início da próxima palavra)
CTRL+RIGHT ARROW (Mover o ponto de inserção para o início da palavra anterior)
CTRL+RIGHT ARROW (Mover o ponto de inserção para o início do próximo parágrafo)
CTRL+RIGHT ARROW (Mover o ponto de inserção para o início do parágrafo anterior)
CTRL+SHIFT com qualquer tecla de seta (Destacar um bloco de texto)
SHIFT com qualquer tecla de seta (Selecionar mais de um item em uma janela ou no desktop, ou selecionar o texto em um documento)
CTRL+A (Selecionar tudo)
Tecla F3 (Pesquisar um arquivo ou pasta)
ALT+ENTER (Exibir as propriedades para o item selecionado)
ALT+F4 (Fechar o item ativo, ou encerrar o programa ativo)
ALT+ENTER (Exibir as propriedades do objeto selecionado)
ALT+SPACEBAR (Abrir o menu de atalho da janela ativa)
CTRL+F4 (Fechar o documento ativo em programas que permitem que você tenha vários documentos abertos simultaneamente)
ALT+TAB (Alternar entre itens abertos)
ALT+ESC (Circular através de itens na ordem em que eles foram abertos)
Tecla F6 (Circular através de elementos da tela em uma janela ou no desktop)
Tecla F4 (Exibir a barra de Endereços em Meu Computador ou no Windows Explorer)
SHIFT+F10 (Exibir o menu de atalho do item selecionado)
ALT+SPACEBAR (Exibir o menu de Sistema da janela ativa)
CTRL+ESC (Exibir o menu Iniciar)
ALT+a letra grifada em um nome de menu (Exibir o menu correspondente)
Letra grifada em um nome de comando em um menu aberto (Executar o comando correspondente)
Tecla F10 (Ativar a barra de menu no programa ativo)
RIGHT ARROW (Abrir o próximo menu da direita, ou abrir um submenu)
LEFT ARROW (Abrir o próximo menu da esquerda, ou fechar um submenu)
Tecla F5 (Atualizar a janela ativa)
BACKSPACE (Exibir a pasta em um nível acima em Meu Computador ou no Windows Explorer)
ESC (Cancelar a tarefa atual)
SHIFT quando você insere um CD-ROM na unidade de CD-ROM (Impedir que o CD-ROM execute automaticamente)
CTRL+SHIFT+ESC (Abre o Gerenciador de tarefas).
win+e: abri o windows explorer( meu computador)
win+d: minimiza as janelas abertas para a barra de ferramentas ou maximiza as que já se encontrarem minimizadas
win+f: abre a ferramenta de pesquisa
win+r: abre a ferramenta executar
win+f1: abre o centro de ajuda e suporte do windows
win+u: abre central de facilidade de acesso( gerenciador de utilitários)
win+pause/break: abre as propriedades do sistema
win+tab: navegar entre as janelas abertas, essa opção funciona para o windows vista ou pra quem usa o vista Mizer 2.2.1.0
win+m: minimiza as janelas todas as janelas
win+shift+m: maximiza as janelas minimizadas com o win+m
Arquivo do blog
Para retirar o numero de postagens feitas que aparece ao lado dos meses no arquivo do blog, entre na página editar HTML clique para Expandir modelos de widgets e procure por arquivo do blog (caso você use esse texto para mostrar seu arquivo, senão procure pelas palavras que estão no seu blog), você vai encontrar algo mais ou menos assim:Clique para salvar e pronto, agora só aparecerá o nome do mês (caso seu arquivo seja feito por meses) sem o numero de postagens feitas. Ainda queremos dizer que outros lugares onde aparece o numero de postagem no blog pode ser removido da mesma maneira, procurando o marcador ou alguma outra coisa e apagando esse mesmo trecho que citamos aqui.
Copiar Postagem
Estava vendo que em alguns blogs existe a opção "Copiar postagem para seu blog" abaixo de cada postagem.
Fiquei curioso e resolvi correr atrás do código fonte desta opção. Acabei achando um que muitos blogs utilizam.
Eis o código abaixo. Acho que não tem muita necessidade pra quem tem blogs comuns, mas é ideal pra blogs que servem downloads, dicas e outras finalidades.
1 - Vá até seu tema e marque a caixinha "Expandir modelos de widgets"
2 - Pressione CTRL+F para localizar mais rápido e Digite: data:post.body
3 - em seguida cole o código logo abaixo.
4 - Pronto Agora de um "Visualizar" e se ficar legal Salve
Alguns valores podem ser modificados, como cols='30' e rows='3' que é a largura e altura da caixa do texto, e no final altere o link dizendo de onde foi retiro o texto:Postagem retida do Dicas para Blogs
Que naturalmente você colocará o link do seu blog e o texto que desejar. Viste o Meu Jornal e veja esse código funcionando.
Adicionar aos favoritos
Esse é mais código para adicionar aos favoritos, mas este você pode usar imagens nele e funciona no Internet Explorer e Firefox. Copie o código abaixo e coloque pela pagina layout, adicionar gadget, html/javascript. Você pode alterar as imagens para qualquer outra que goste mais ou um banner de seu blog. Não esqueça de modificar a url e nome do blog pois o código abaixo está feito para adicionar esse blog aos favoritos./ />
border="0"/ />
O blogspot está pode gerar alguma falha no código, então se tiver problemas você pode copiar esse código para adicionar aos favoritos dessa página.
Banner Rotativo
Para fazer aparecer banners diferentes cada vez que o blog é exibido, você terá um pouco de trabalho, não com o código pois esse é simples mas para ocultar o titulo do blog exibido normalmente e caso no seu modelo não apareça adicionar gadget entre o cabeçalho e as postagens.Primeiro passo precisamos ocultar o título do blog. Então procure na página editar HTML por algo parecido com o trecho abaixo, não será igual porque cada blog tem a próprio estilo do titulo, mas o importante é #header h1:
#header h1 {
text-align: left;
font-size: 200%;
color: $pageHeaderColor;
margin: 0;
padding: 15px 20px 0 20px;
}
E coloque isso display: none; (inclusive o ponto e vírgula) entre as chaves { }, não importa em qual linha, mas tem que ser dentro das chaves. E clique para salvar.
Isso faz ocultar o título do blog, você não precisa mudar mais nada, ele só vai ocultar, caso resolva mostrar novamente o título basta retirar essa linha que colocamos agora.
Agora veja na pagina layout se aparece o quadro adicionar gadget entre o cabeçalho e as postagens, pois será lá que iremos colocar o código do banner rotativo caso não esteja visível, veja nossa explicação de como fazer isso aparecer essa postagem fala em adicionar elemento de página, pois quando fui publicada era assim que os gadgets eram chamados no blogspot, mas a explicação funciona normalmente. Outra coisa se usar uma imagem no titulo precisa tirar clicando para editar o cabeçalho. Depois disso clique para adicionar um gadget embaixo do cabeçalho, na página que aparece escolha a opção HTML/javascritp e cole o código abaixo:
E já está pronto, mas não se esqueça de colocar os endereços corretos das imagens no código, para alterar esse código aqui tem explicado como alterar o código e adicionar imagens, nessa explicação está dizendo sobre colocar frases, mas o código é idêntico a este que usamos aqui para imagens.
Mensagem conforme a hora do dia
Para mostrar no seu blog uma frase ou imagem dependendo da hora do dia, use o código abaixo:Agora vamos aprender a modificar esse script para você colocar as mensagens que desejar nele conforme o horário. O trecho que vamos alterar se resume em apenas uma linha:
if ((hr==13)
|| ((hr==14) || (hr==15) || (hr==16)) || (hr==17)) document.write("Boa Tarde")
Se você observar notará que os números (13, 14, 15, 16, 17) são as horas do dia e caso seja uma dessas horas a mensagem será Boa tarde, então precisamos deixar cada hora com a mensagem que desejamos e claro no caso de usar a mesma coisa para varias horas pode ser feito com o código como está acima, veja o trecho || ((hr==14), ele se repete cada vez que adicionamos mais uma hora para a mesma mensagem. Para deixar uma mensagem somente em uma hora usamos o como está na linha com a mensagem vamos almoçar que aparece apenas quando a hora for 12, e seguindo esses exemplos podemos modificar o código colocando nossas mensagens. Trocar as frases é bem simples é só apagar e escrever outra no lugar, mas cuidado para não apagar as aspas “”, pois sem elas o código não funciona.
Além disso, é possível usar esse script para mostrar imagens apenas trocando as frases pelo código das imagens, porém nesse caso apagamos as aspas. E o código fica assim:
if ((hr==20) || (hr==21) || (hr==22)) document.write('
Imagem na barra de endereço
Algum tempo atrás já publicamos a explicação de como colocar uma imagem na barra de endereços do blog e quando seu site é adicionado nos favoritos essa imagem aparece como ícone no menu favoritos ao lado do nome do seu blog. Entretanto com algumas mudanças recentes no blogspot fizeram aquela explicação dar alguns problemas então aqui vai o procedimento atualizado.Entre na página editar layout e procure por ]]>
, clique ctrl+F isso abre uma janela para procurar o texto na página assim é bem mais fácil do que ler tudo e coloque esse código logo após o trecho acima:
Quanto ao formato da imagem deve ser .ico, tem programas que fazem esse tipo de imagem. Mas versões mais novas dos navegadores Firefox, Internet Explorer, Opera já aceitam o formato .jpg ou .gif que funcionam normalmente e são bem mais fáceis de fazer e hospedar.
Para hospedar imagens use o ImageShack ou Photobucket, são dois bons sites grátis de hospedagem de imagem.
Site abrindo sozinho
Alguma vez quando estava num site sem saber o porquê abriu outra pagina sem que você tivesse clicado em nada? Ou acontece isso no seu blog, então procure por esse código nos banners ou link que adicionou nele:Acho que as pessoas estão fazendo links usando este código a fim de forçar visitas afinal ninguém sabe que somente ao passar o mouse sobre uma imagem abrirá outra pagina. E claro isso prejudica o seu blog, pois tira as pessoas dele sem que elas imaginem o que aconteceu e ninguém quer voltar num site que faz coisas aparentemente sem explicação.
Portanto tenha cuidado com os códigos que adiciona no seu blog e verifique se algum deles tem a parte onmouseover="parent.location='URL DO SITE'", se encontrar isso você já sabe que ao passar o mouse sobre essa imagem irá para outro site, então cabe a cada um decidir se vale à pena usar ou deixar esse tipo de coisa no blog ou não. Queremos dizer que não aconselhamos o uso disso pois apenas irrita as pessoas e quando abre uma pagina inesperadamente a reação mais natural é simplesmente fechar tudo.
Clique para ver esse código de redirecionamento funcionando, mas você já sabe que ao passar o mouse sobre um dos banners vai mudar de site.
Redirecionamento
As pessoas que tem mais de um blog às vezes depois de algum tempo querem parar de postar em um dos blogs, mas não querem deixar seus leitores abandonados, então alguns fazem uma postagem de despedida e deixam o link de seu novo blog, com isso alguns dos visitantes vão para esse novo blog, mas certamente perdemos visitas com isso. Tem um código de redirecionamento que transfere todas as visitas desse blog antigo para o novo blog. Você só precisa colocar o endereço da sua página onde está escrito seu site no código abaixo:Para usar é só colocar o código pela página layout, adicionar gadget, html/javascript, e colocar em qualquer parte da página. E já está pronto, quando você entrar no blog será enviado automaticamente para o endereço que especificou no script acima. Uma sugestão se for usar essa idéia é modificar seu blog antigo para mostrar apenas uma postagem e retirar tudo mais que tiver nele, pois o código só funciona depois que for carregado e quando mais coisas tiverem no blog mais tempo irá demorar o redirecionamento.
Essa foi uma sugestão sobre o que fazer com esse código que envia os visitantes para outra página, mas é claro que você pode usar para outras coisas que imagine.
Contagem de tempo
Esse mostra quandos dias passaram entre a data que você colocou nele e o dia atual, podemos encontrar varias utilidades, mas a acredito que a principal delas seja mostrar a quando tempo seu blog ou site está em funcionamento. Você só precisa alterar a data e o texto que está no final do código:document.write("Já tem "+difference+" desde que o meu site entrou no ar.")
countup(2008,11,10)
Essa data é no formato ano/dia/mes, portanto o numero 10 é o dia, depois que fizer as alterações é só colocar no seu blog através da página layout, adicionar gadget, html/javascript, então é só colar o código abaixo.
Navegar Dentro da Página
Quando temos uma pagina com muitas coisas ela acaba ficando longa demais e alguns usuários se atrapalham na hora de encontrar alguma coisa, uma solução para isso é colocar links que facilitem a navegação dentro de nosso blog.Para fazer isso é bem simples você pode colocar um link no começo do blog que levará até o código do seu banner (caixinha link-me), então faça da seguinte forma: vá até a pagina layout, adicionar gadget, html/javascript e coloque esse código:
Caixinha Link-me
Deixe isso no começo do blog, pois esse é o link que aparecerá para clicar e ir até a caixinha link-me do seu blog. Depois clique para editar onde colocou a caixinha link-me e coloque esse código no começo:
Pois quando alguém clicar essa linha que irá para o topo da página e não se preocupe esse código não aparece no blog. Agora é só salvar e testar.
Para fazer outros links apenas altere no código o texto e nome dos links: a palavra banner deve ser troca por qualquer outra, mas nas duas partes do código e Caixinha Link-me é o texto que vai aparecer no topo da sua pagina onde está montando uma espécie de guia de rápido acesso para facilitar a navegação. Quando colocar mais de um link acrescente no final de cada um
isso faz mudar de linha assim cada link ficará numa linha sozinho, então para vários links fica assim a primeira parte do código:
Caixinha Link-me
Caixinha Link-me
Caixinha Link-me
E não se esqueça de colocar a segunda parte do código em cada um dos destinos que criar.
Mensagem ao entrar no blog
Embora não seja recomendável algumas pessoas gostam e procuram como colocar uma mensagem ao entrar no blog, aquela caixinha de texto escrito bem vindo ou algo parecido com isso.O código para fazer isso é:
Primeiro altere o texto da mensagem(texto do alerta) para o que deseja depois entre na página editar HTML e coloque esse código antes de , e já está pronto é só clicar para salvar.
Mostrar data com o dia da semana
Já publicamos alguns códigos que mostram a data no blog, porém eles eram grandes e complicados, este é o principal motivo de mostrar esse código porque ele é simples, fácil de usar e mostra a data completa até com o dia da semana.
Antes de colocar no blog veja como alterar a formatação desse código:
align="center" isso é o alinhamento do texto agora está centralizado se quiser pode trocar por left(esquerda) ou right(direita)
font-family:'Comic Sans MS'; é o tipo de letra basta trocar comic sans ms pela fonte que gostar mais, porém use fontes mais comuns daquelas que todo computador tem porque quando alguém entra no site se o computador dele não tiver a fonte que você escolheu ele vai trocar por outra.
color:#0000ff; aqui é a cor das letras, se precisar aqui tem uma lista com o código de muitas outras cores.
font-size:18px; o valor 18 é o tamanho da letra altere do jeito que achar melhor.
text-transform: uppercase; isso faz todas as letras ficarem maiúsculas se não quiser assim é só pagar esse trecho.
Para colocar no seu blog entre na pagina layout, adicionar gadget, html/javascript e cole o código e já está pronto.
Colocar uma barra de rolagem na lista de blogs
Às vezes queremos adicionar muitos blogs na lista de atualizações que mostramos(lista de blogs) e fica ocupando espaço demais em nossa pagina, uma boa solução para esse problema é colocar uma barra de rolagem em nossa lista de blogs. Para fazer isso é bem simples:Entre na pagina editar HTML e clique para expandir os modelos de widgets, então procure pelo inicio de sua lista de blogs, um jeito fácil de achar é procurando pelo titulo que usa na sua lista em nosso caso usamos o nome Meus outros Blogs, mas no seu blog estará o titulo que usa na sua lista, vejo o código:
Cuidado para não se confundir e achar que já tem uma div fechada, essa que já estava no blog pertencia ao código original, então precisamos adicionar mais uma(essa que está em negrito, não estava no modelo original do blog). Feito isso é só clicar para visualizar e depois salvar se estiver tudo correto. Essa é uma boa maneira de poupar espaço e ainda dá um novo visual com a barra de rolagem na lista de blogs.
Abrir Menu Jump em nova janela
Como abrir um menu de salto em uma nova janela? Já procurei tantas vezes a resposta e achei cada explicação e códigos complicados, sem contar a infinidade de nomes que usam menu jump, menu suspenso, menu com setinha no canto e outros nomes estranhos, faça o teste no menu ao abaixo.
Mas acabei encontrando a resposta e por incrível que pareça é bem simples, basta trocar duas palavras no código, esse é o código normal do menu de suspenso:
Para fazer abrir em uma nova janela não tem nada a ver com trocar a palavra parent por blank, pois isso não funciona. Agora logo abaixo está o código modificado que abre os links em uma nova janela:
A única diferença entre eles é que para abrir os link do menu de salto em uma nova janela trocamos o trecho MM_jumpMenu('parent',this,0) do primeiro código por onchange="window.open(this.value)” no segundo. Depois disso é só colocar quantos links quiser nas opções, repetindo a linha:
Quantas vezes forem necessárias. Para colocar esse código no seu blog entre na pagina layout, adicionar gadget, html/javascript, coloque o código e clique em salvar e já está pronto.
Imagem na Barra de Endereço
0 comentários:
Postar um comentário