Para retirar a barra do blogspot basta colocar este código:
<style>
#navbar-iframe { height:0px; visibility:hidden; display:none }
</style>
Para fazer isso vá em layout e escolha a guia editar html, quando aparecer o código do seu blog procure por: <head>(isso está bem no começo do html) e cole o código acima depois é só clicar para salvar e pronto a barra na parte superior do blogspot já desapareu.
quarta-feira, 2 de janeiro de 2008
Retirar Barra do Blogspot
Pop Up
O código para fazer uma janela por up, ou seja, abrir uma janela do tamanho que você quer no seu blog é o seguinte:
<a href="javascript:;" onClick="MM_openBrWindow('URL DA PAGINA,'','status=yes,scrollbars=yes,resizable=yes,width=400,height=250')"><img src="URL DA IMAGEM" width="120" height="60" border="0"></a>
Agora para você poder deixar essa janela exatamente do modo que precisa, vamos entender como mudar esse código para adaptar ao seu blog.
URL DA PAGINA endereço da pagina que abrirá na janela
status=yes opção de mostrar a barra de status
scrollbars=yes mostrar barras de rolagens se necessarias
resizable=yes mostrar alças de dimensionamento, ou seja, permite o visitante alterar o tamanho da janela
width=400,height=250 esse é o tamanho da janela que será aberta, olhe os valores para se localizar dentro do código acima, pois as palavras para definir a largura e altura da imagem são as mesmas palavras o importante aqui é a posição dentro do código.
URL DA IMAGEM endereço da imagem que será exibida.
width="120" height="60" border="0" altura, largura da imagem, e sem borda, se quiser pode colocar uma borda de qualquer valor mudando o numero 0
Em varias opções vemos a palavra “yes”, para não exibir essas opções troque pela palavra “no”
Esse é o código padrão para janela pop up e deve ser inserido no local que você deseja que apareça a imagem. Normalmente só esse código já faz que o pop up funcione, pois o blog já tem a outra parte do código, mas caso ele não funcione, a causa disso é a falta dessa parte:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
Coloque isso entre e , mas tente primeiro sem essa parte, pois geralmente os blogs já têm isso automaticamente.
Indique esse site
Um meio de divulgar seu blog e aumentar suas visitas é achar um jeito para que as pessoas possam indicar seu site para um amigo diretamente da sua pagina, existem vários sites que fazem esse serviço grátis, um deles é o Recomenda. Nele você pode pegar o código abaixo:
<!-- Início Código Recomenda -->
<a href="http://www.recomenda.com.br/recomenda.asp?modo=0" target="_blank"><img src="http://www.recomenda.com.br/b.gif" border="0"></a>
<!-- Fim Código Recomenda -->
Esse código é padrão e serve para qualquer pagina, ou seja, você pode colocar em diversos sites sem precisar alterar nada e a imagem também é fornecida pelo site. Mas caso queira usar outra imagem ou fazer um link de texto o importante desse código é:
http://www.recomenda.com.br/recomenda.asp?modo=0
Isso é a url da pagina do Recomenda onde seu visitante irá fornecer o e-mail para quem será enviado um link do seu blog. Para fazer um link de texto faça da seguinte modo:
<a href="http://www.recomenda.com.br/recomenda.asp?modo=0" target="_blank">SEU TEXTO AQUI</a>
Se preferir usar outra imagem, hospede sua imagem em algum lugar(por exemplo: http://www.imageshack.us) e depois coloque a url da imagem no código abaixo:
<a href="http://www.recomenda.com.br/recomenda.asp?modo=0" target="_blank"><img src="URL DA IMAGEM" border="0"></a>
Se quiser fazer um teste clique na imagem que está nesta postagem e recomende essa página para alguém e verá que esse serviço funciona de verdade.
Adicionar Elementos
Em muitos sites encontramos coisas para colocar no blog e estes sites sempre dizem copie o código e coloque no seu blog, mas onde colocar?
É mais fácil do que parece colocar esses códigos no blog. Quando entramos no site do blog depois de fazer login (colocar email e senha), vamos para o painel do blog, então vamos procurar e clicar na palavra layout, isso vai levar até a pagina onde podemos organizar o nosso template, pois depois que colocamos algo nele para mudar de lugar basta clicar e arrastar os quadrados que estão nesta pagina.
Caso você coloque algo e se arrependa depois, tirar uma coisa do blog também é fácil na janela layout, os quadros têm a opção editar (ou edit) no canto, clique nela e quando abrir a janela você encontra perto do botão salvar, outro botão dizendo remover esse elemento, se você clicar nele exclui aquele código do seu blog. Mas tenha cuidado não é possível desfazer, ou seja, se depois de excluir você quiser colocar novamente terá que ir procurar o código. Por isso antes de excluir ou modificar algo salve uma copia do original no seu computador.
Postar Vídeos
Quando o assunto é colocar um vídeo no blog, temos duas possibilidades: uma é usar um vídeo que já esteja na internet e outra é colocar um vídeo que nós fizemos e que por enquanto está somente no nosso computador.
Vamos começar falando sobre um vídeo que está em nosso computador e queremos coloca-lo no blog. O primeiro passo é hospedar esse vídeo na internet, um bom lugar para hospedagem de vídeos é o Youtube, mas antes de hospedar nossos vídeos precisamos fazer o cadastro Youtube(http://www.youtube.com/signup), depois disso você poderá hospedar seus vídeos entre no site do Youtube e clique em upload aparecerá um tela para você escrever o titulo, descrição e outras coisas, depois de preencher clique em upload a vídeo, então aparece um tela para você localizar o vídeo no seu computador(clique no botão browse e ache seu vídeo) depois clique em upload e aguarde carregar seu vídeo(isso pode demorar um pouco dependendo da velocidade da conexão com a internet) no final o site dá uma mensagem dizendo que Thank you! Your upload is complete. Isso termina a parte de hospedar um vídeo. Nessa tela my vídeos tem a url do seu vídeo, entre nessa pagina (copie a url e cole na barra de endereços), lá você encontra o código para colocar este vídeo no seu blog é aquele que está na frente da palavra embed (é um código meio grande mesmo). Após copiar esse código é só colocar no blog e está pronto.
O procedimento para colocar um outro vídeo qualquer que você encontrou na internet é igual quando o vídeo aparecer na tela, copie o código da caixinha embed, para depois colocar no blog.
Mas devemos ter alguns cuidados com o tamanho desse vídeo, o código que você pegou tem a largura do vídeo exemplo width=”425”, isto aparece duas vezes no código, e não pode ser maior que a largura de onde você pretende colocar o vídeo senão irá aparecer somente uma parte da imagem. Se você não tiver certeza da largura de onde colocará o vídeo após colocar visualize seu blog e não parecer igual no site do Youtube é por que o tamanho do vídeo é maior que o espaço disponível no seu blog. Você poderá diminuir esse tamanho, mas tem que ser proporcional além desse valor width="350"(largura) tem também a altura do vídeo: height="280". Portanto se alterar um tem que mudar o outro também senão a imagem ficará distorcia. Para sabe quais valores não distorcem a imagem, multiplique os dois por uma percentagem, exemplo: largura (425 vezes 90% igual a 382.5) e altura (350 vezes 90% igual a 315). Então se o tamanho original do vídeo é 425x350 e você modificar para 382x315, não haverá distorção de imagem. Isso não irá fazer o vídeo carregar mais rápido somente muda o tamanho que ele aparece.
Adicionar aos Favoritos
Alguns códigos para adicionar aos favoritos funcionam apenas no Internet Explorer, mas esse aqui funciona também no Firefox, para usar copie o código abaixo e altere o nome e endereço da sua página.
<script language="JavaScript">
function addFav(){
var url="http://dicas-blogger.blogspot.com";
var title="Dicas-Blogger";
if (window.sidebar) window.sidebar.addPanel(title, url,"");
else if(window.opera && window.print){
var mbm = document.createElement('a');
mbm.setAttribute('rel','sidebar');
mbm.setAttribute('href',url);
mbm.setAttribute('title',title);
mbm.click();
}
else if(document.all){window.external.AddFavorite(url, title);}
}
</script>
<a href="javascript:addFav()">Adicionar aos Favoritos</a>
Outra coisa que pode ser alterada neste código é a frase "Adicionar aos Favoritos", por que você pode escrever o que desejar ou também colocar uma imagem no lugar da frase. Para usar uma imagem apague onde está escrito adicionar aos favoritos e coloque o código da imagem que você quiser. Então o código ficará assim:<a href="javascript:addFav()" title="Adicionar aos Favoritos"><img src="URL DA IMAGEM" border="0"></a>
Adicionar Marcadores
O recurso marcadores deixa muitas duvidas principalmente por que se você acabou de adicionar na pagina de layout, e quando visualizou seu blog não viu mudança alguma. Então vamos explicar isso por partes.
Primeiro vamos fazer a parte de adicionar o elemento marcadores. Isto é feito através da pagina layout onde aparecem varias opções e uma delas é adicionar elemento de página clique nela e na janela que abrir clique em Marcadores para adicionar ao blog, isso vai fazer aparecer outra tela onde você só precisa clicar em salvar alterações nessa parte está pronto.
Porém é possível colocar os marcadores em textos já publicados sem precisar editar um por vez, para fazer isto vá na pagina editar postagens, então selecione as postagens que você quer e clique em ações de marcador IMAGEM e escolha uma das opções (Adicionar marcador, remover rotulo, novo marcador). Esta é uma maneira bem mais rápida de adicionar ou remover marcadores de postagens já feitas.E lembre-se você pode colocar mais de um marcador por texto, por exemplo, se um texto se refere a layout e codigos, você pode incluir essa postagem nos dois marcadores.
Barra de Rolagem
Alguns acham isso de caixa de rolagem e outros pensam que isso é similar a um caixinha tipo link-me, mas na verdade é uma barra de rolagem somente, apenas sua aparência é igual de uma caixa. Para colocar um scroll ou barra de rolagem em alguma parte do blog o código é o seguinte:
<div style="height:100px; width:200px; overflow:auto; background-color:
#FFFFCC; text-align: center;padding: 2px; margin:5px ">
<div style="width:160px">
Conteúdo da caixa de rolagem
</div></div>
Isso é muito útil para economizar espaço no blog sem fazer que o visitante tenha que mover a pagina inteira para ver algo de uma lista especifica. Mas vamos entender como fazer uma barra de rolagem no blog. Neste código você precisa alterar alguns valores para deixar essa “caixa de rolagem” do tamanho certo para seu blog.
No código encontramos as seguintes partes:
height:100px - altura
width:200px - largura
overflow:auto - código da rolagem(não altere)
background-color: #FFFFCC – cor do fundo
text-align: center – alinhamento(center, left ou right)
padding: 2px - espaço entre a borda da caixa e o conteúdo
margin:5px - margem externa, serve para deixar um espaço vazio ao redor da caixa
Todos esses valores podem ser alterados para deixar a caixa de rolagem do jeito que seu blog precisa, porém se quiser você pode retirar alguma dessas partes do código que ele continuará funcionando normalmente, por exemplo, background-color: #FFFFCC somente deixe essa parte se quiser uma cor de fundo diferente para a caixa de rolagem.
Onde está escrito Conteúdo da caixa de rolagem, você pode colocar texto ou imagens e não tem limite para a quantidade de textos ou imagens para esse conteúdo. Porém lembre-se de respeitar a largura da caixa que você criou pois se as imagens tiverem largura maior que a caixa além da barra de rolagem lateral, aparecerá um barra de rolagem em baixo também.
Sobre a linha <div style="width:160px"> isso serve para evitar que apareça a barra de rolagem inferior no caso de textos portanto quando alterar o valor da largura tem que mudar esse também. Existem outros meios de fazer aparecer somente a barra lateral, mas quando testei eles não funcionaram em todos os navegadores, por exemplo o código overflow-x: hidden nao funcionou no Internet Explorer, por isso coloquei mais essa linha de código: <div style="width:160px">.
Imagens Aleatórias
Este código serve para colocar frases ou imagens aleatórias no site ou blog. Ele faz aparecer somente uma das frases por vez. Você só precisa copiar o código e colocar as frases que desejar onde está escrito frase um, frase dois.... e assim por diante. Para mudar a quantidade de frases aleatórias você deve repetir quantas vezes forem necessárias esse trecho do código:
if (numero == 5){
frase = "Frase Seis"
}
Mas não esqueça de continuar a seqüência da numeração, portanto cuidado para não repetir os números senão o script não funcionará corretamente. Outra coisa que precisa ser alterada é o numero 6 nesta linha numero_de_imagens = 6, isto significa que temos 6 opções portanto se adicionar ou remover opções altere esse numero também.
Este código funciona também para imagens aleatórias para fazer isso basta colocar no lugar das frases o código das imagens, e funcionará normalmente, aparecendo uma imagem diferente cada vez que o blog for visitado.
<script language="JavaScript">
hoje = new Date()
numero_de_imagens = 6
segundos = hoje.getSeconds()
numero = segundos % numero_de_imagens
if (numero == 0){
frase = "Frase Um"
}
if (numero == 1){
frase = "Frase Dois"
}
if (numero == 2){
frase = "Frase Três"
}
if (numero == 3){
frase = "Frase Quatro"
}
if (numero == 4){
frase = "Frase Cinco"
}
if (numero == 5){
frase = "Frase Seis"
}
document.write(frase)
</script>
Passar o mouse sobre
<a href="http://jornaljd.blogspot.com"
onmouseover="this.innerHTML = 'Primeiro Blog'"
onmouseout="this.innerHTML = 'Meu Jornal'">Meu Jornal</a>
A finalidade deste código é trocar o texto quando o mouse está sobre ele. O funcionamento é bem simples e fácil de alterar. Você deve colocar a url da pagina que desejar e escolher o texto que aparecerá. Um detalhe que não pode ser esquecido é repetir duas vezes o texto normal (aquele que aparece quando não estava com o mouse sobre ele) no exemplo Meu Jornal, pois se colocar apenas uma vez quando passar o mouse sobre ele o texto mudará mas não voltará ao original quando tirar o mouse.
Outro cuidado que precisamos ter é usar textos com numero parecido de letras pois se o texto que aparece quando o mouse não está sobre ele tiver 10 letras e quando passar o mouse aparecer um texto de 20 letras talvez não tenha espaço na mesma linha então o texto ocupará duas linhas e isto faz todo o layout do blog dar um “pulo”, ou seja quando aparece o texto maior e passa a ocupar duas linhas tudo que estiver abaixo dele vai descer um pouco para dar espaço. Então tenha cuidado de verificar se quando passa o mouse o texto continua ocupando o mesmo numero de linhas.
Assinar:
Postagens (Atom)
