-->
English French German Spain Italian Dutch
Russian Portuguese Japanese Korean Arabic Chinese Simplified
By Ferramentas Blog
RSS
Related Posts with Thumbnails

quarta-feira, 7 de abril de 2010

Dicas blogs - Como Criar links Image Hosted by ImageShack.us

 Outro dos passatempos com que me ocupo muito frequentemente,é a informática.
Tudo o que sei, a mim o devo. Não tirei qualquer curso na vida do que quer que fosse.
O meu interesse pelas novas tecnologias sempre foram muito grandes. É por este manifesto interesse que gosto de experimentar constantemente novas funcionalidades e os mais diferentes softwares. Com algum trabalho,  persistência, e muitas pesquisas, tenho conseguido resolver sozinha alguns dos problemas que vou encontrando. Quando algumas dessas experiências me correm mal, recorro a  todas as sugestões que consigo encontrar em sites e blogs, que muitos dos crânios espalhados neste universo cibernauta colocam . Não descanso enquanto não encontro a solução . Acredito que sem eles, já teria dado a ganhar algum dinheiro aos "clínicos de PC´s", mas o que é certo é que lá vou resolvendo as minhas questões e tenho aprendido muito.
Confesso que também sou daquelas que de vez em quando gosta de fazer downloads de  "piratices" no entanto, existem muitos sites onde podemos fazer downloads de coisas muito interessantes, e que são freewares. Deixo-vos para quem estiver interessado, alguns link's na barra lateral "LINKS".  

Tenho pesquisado muito em sites e blogues, na procura de ideias para tornar também o meu blog, mais dinâmico e activo. Encontram-se efectivamente muitas paginas que nos ensinam a fazer coisas muito interessantes.  Mas talvez o mais importante na minha opinião para se fazer num blog, é aprender a fazer LINKS. Aprendi que, para podermos fazer uma quebra na pagina, criar uma lista de postagens,  links internos e externos, criação de banners, etc., é preciso entender um pouco da linguagem que o possibilita, o HTML , que não são mais que um conjunto de instruções escritas, chamados scripts.
Assim quero aqui partilhar um pouco do que penso ter aprendido.
Com a criação deste blog e tal como já referi, fazer um link é talvez o mais importante que devemos aprender a fazer.

Os Links podem ser externos ou internos (dentro das nossas próprias páginas). Os Link externos são muito fáceis de fazer até porque, o blogger disponibiliza um icon na criação das postagens, onde apenas teremos de colocar o endereço do site que queremos linkar/mostrar.
Image Hosted by ImageShack.us


Um pouco mais complicado pelo menos para mim foi, são os Links internos dentro no nosso blog. Assim podemos:
1-  Criar Links entre as nossas páginas
2-  Criar links para um determinado ponto nas nossas paginas


1 - Começo por ensinar como aprendi a criar um link para uma das nossas paginas do blog, publicação ou postagem, o que lhe quiserem chamar. Depois de termos uma pagina feita e publicada, acedemos ao nosso blog e no cabeçalho que contem o titulo da publicação, com o botão do rato do lado direito, copiamos o código do endereço da ligação HTML. Conforme a imagem.
Image Hosted by ImageShack.us
Bastará depois seleccionar a palavra, frase ou imagem e, colar o link utilizando o icon do blogger

Image Hosted by ImageShack.us

Como se vê, a frase "Criar links entre as nossas paginas" passou a ser um link. Ao clicar nela, faz-nos saltar para a pagina que escolhi, neste caso, a pagina "Como colocar as paginas do blog numeradas"
Fácil...

2 - Para criamos um link para um determinado ponto numa pagina, é um pouco mais complicado.
Para fazermos isto, temos primeiro que criar no sítio para onde queremos saltar, o que se chama, âncora.
Então numa frase, palavra ou imagem para onde queremos ir quando fizermos a ligação, vamos escrever o seguinte.


A palavra escolhida vai ficar como se fosse um link. Coloquei essa ancora, na palavra a vermelho em baixo.

Para  depois podermos saltar para esta ancora, devemos escrever também em HTML na palavra que será realmente o link(neste caso a frase-Criar links para um determinado ponto nas nossas paginas), o seguinte script:


Ou seja, se clicarem na frase link em cima,"Criar links para um determinado ponto nas nossas paginas", podem verificar que saltam na mesma pagina para onde se encontra a palavra ancora.

Image Hosted by ImageShack.us

terça-feira, 6 de abril de 2010

Dicas blogs - apresentação rotativa de postagens (tipo slide) Image Hosted by ImageShack.us

Este tipo de apresentação ao conteúdo do nosso blog produz um efeito muito bonito, tanto mais se as nossas postagens tiverem imagens.

Devo dizer que não me foi fácil colocar a funcionar este scipt. Não consegui entender porquê mas o script não funciona correctamente na barra lateral dos meus blogs.

Verifiquei que o código também funciona se o colocarmos junto às postagens, colando o script no modo de criação de mensagens do blogger, tal como tenho no "Os Passatempos da Carracita". No entanto, se navegarmos pagina por pagina o efeito parece não estar certinho, mas vizualizando postagem a postagem o efeito deslizar, aparece correctamente. Penso que deve ter a ver com o próprio template. Vi este efeito em outros blogs e este código funciona perfeitamente.


Nota:No código em home page, deverá ser colocada a URL do nosso próprio Blog.
Pode-se ainda ajustar a altura e a largura das spylist, height e width, tendo em atenção as definições dos espaços do nosso template.

Este script foi retirado do Noticiaeblog que se deve visitar pois tem óptimas dicas para nos ajudar com o nosso blog.
O efeito deste script está na barra lateral.

Podemos também optar por outro efeito com a ajuda de um site que tenho visto ser muito usado por imensos outros blogs. O "LinkWithin" que coloca no fim de cada uma das nossas postagens,(poderá também gostar de:)links para outras das nossas paginas, criando um efeito igualmente bonito, ajudando também o visitante a conhecer mais facilmente os conteúdos do nosso blog.

sábado, 3 de abril de 2010

Dicas blogs - Como colocar as páginas do blog numeradas Image Hosted by ImageShack.us


Colocar as nossas postagens divididas em paginas, é mais uma forma de percorrermos o nosso blog e de melhorarmos o seu aspecto.
É preciso ter alguma atenção para colocarmos os códigos. Assim, vamos até Layout > Editar HTML , não se precisa de marcar "Expandir modelos de widgets" e procura-se pela tag:
</body>

e ACIMA dela, cola-se o seguinte código:
<script style="text/javascript">
var pageCount=5;var displayPageNum=5;var upPageWord="Voltar";var downPageWord="Próxima";</script>
<script style="text/javascript" src="http://dl.dropbox.com/u/3173073/HacksBlogger/page-nav.js">
</script>
De seguida procuramos ainda no html do template por:
'data:label.Url' ou  'data:blog.homepageUrl + &quot:,feeds/posts/default&quot;' e vamos substituir todo ou parte, conforme estiver o template por:
'data:label.url +&quot;?&amp;max-results=5&quot;'ou
'data:blog.homepageUrl + &quot;?&amp;max-results=5&quot;'

Para o mesmo modelo da caixa de numeração que aqui tenho, vamos a colocar o seguinte codigo em baixo antes da tag: ]]></b:skin>
*/ PageNav
---------------------------*
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;  }

.showpageArea a {
color: #000;
text-shadow:0 1px 2px #fff;
font-weight: 700;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -50px repeat-x;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -25px repeat-x;
}
.showpageOf{
margin:0 8px 0 0;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 0 repeat-x;
text-decoration: none;
}
Exitem mais apresentações de caixas de mumeração de paginas, tendo para isso outros códigos. Podem encontrar mais codigos no "Gothic Darkness"

Dicas blogs - Como criar o nosso Favicon Image Hosted by ImageShack.us

Favicon é aquela pequenina imagem que aparece junto ao titulo do nosso blog. Para o Outros passatempos da Carracita podem ver uma pequena borboleta vermelha.
Como personalizamos então o nome do nosso blog.

1º temos de arranjar a nossa imagem que pode ser em formato png, ico, gif, tiff, bmp e jpg, mas que tenham de tamanho maximo 32px por 32px ou menos de 1MB. Podem arranjar algumas no site da INCOSPEDIA. Devem guardar-se no nosso pc .

2º Em layout - editar html, fazemos uma cópia do nosso template para não termos surpresas e depois, procuramos por ]]/b:skin>.
Colamos entre esta tag e a tag </head> o seguinte código:
<!-- favicon  -->
<link href='http://endereço-da-imagem' rel='shortcut icon' type='image/x-icon'/>
<link href='http://endereço-da-imagem' rel='icon' type='image/x-icon'/>
<!--   fim favicon -->
Como o icon tem de ser em formato ICO, se quisermos utilizar outra imagem com outro formato temos de converte-la,  para isso eu usei o "The FavIcon labs" .

Vamos agora procurar no nosso pc a imagem que guardamos e fazemos upload it para que obtenhamos o endereço.


 Copiamos o código assinalado e assim com este resultado, devemos substituir as duas a linhas de
<link href='http://endereço-da-imagem' rel='shortcut icon' type='image/x-icon'/>pelo código obtido.

sexta-feira, 2 de abril de 2010

Dicas blogs - Como criar a nossa lista de marcadores Image Hosted by ImageShack.us

Para criarmos a nossa caixa de marcadores, temos que acrescentar primeiro no nosso template o código abaixo.
Para isso vamos a layout - Editar HTML e colamos o primeiro código, imediatamente acima da tag,
]/b:skin

 .nuvem-html {
    border: 1px solid #333;
    background: url('http://endereço da imagem para o fundo do marcador') repeat; (fundo da cx dos marcadores)
    margin: 10px 0 10px 0;
    line-height: 30px;
    text-align: center;
    padding: 2px;
    padding-top: 10px;
    }
    .nuvem-html a {
    text-decoration: none;
    }
    .nuvem-html a:hover {
    border-bottom: 1px dashed #ccc;
    }
 Poderá ser colocada uma imagem de fundo na nossa caixa pelo que, devemos ter essa imagem alojada (por ex: ImageShack )e em background: url colocamos a url da imagem escolhida.

Depois é ainda necessário em, adicionar GADGET, colocar o código abaixo em html/java script.

<div class="nuvem-html">

<a style="color:#000000; font-size: 20px;" href="url do marcador">nome a mostrar do marcador</a>

<a style="color:#940f04; font-size: 10px;" href="url do marcador">nome a mostrar do marcador</a>

<a style="color:#9b2230; font-size: 16px;" href="url do marcador">nome a mostrar do marcador</a>

</div>


Deverá acrescentar-se sempre mais um destes scripts por marcador, a partir de "Style="color...".
Para sabermos qual é a URL dos nossos marcadores temos de os ter criado.
Este processo faz-se na edição das nossas postagens.
Image Hosted by ImageShack.us

Depois, inserimos um gadget html/java "Marcadores", que automaticamente identifica todas as postagens agrupadas nos marcadores que criamos.
Visualizamos o nosso blog. Em cima da caixa/lista que aparece com os nomes dos marcadores, como botão do rato do lado direito, copiamos o endereço da url. Colamos então no 2º script em, URL DO MARCADOR.
Depois de copiadas todas as url podemos eliminar o gadjet de onde retiramos todos os endereços.

Aprender a colocar um icon em comentários Image Hosted by ImageShack.us

Cliquem em comentários, vêm a pequena imagem(ICON)que aqui coloquei? Pois eu vou ensinar como Fiz. Claro que tive de pesquisar um pouco e deduzir outro tanto.
Bom, então para isso temos de ir a LAYOUT-EDITAR HTML e clicar em expandir Mod.Widgets.
Utilizando a pesquisa(CTRL+F)no firefox procuramos por:
Image Hosted by ImageShack.us
A seguir a este script vamos colocar o icone escolhido. Existem muitos e engraçados em Iconspedia.
Para isso, devemos ter esse ícone alojado num site de imagens(por ex: o imageshak)que nos fornece o script Image Hosted by ImageShack.us
Atenção, os icons têm que ter a extensão png.
Salvamos e já está. Importante não esquecer de fazer sempre primeiro uma cópia do nosso template em "Baixar Modelo", não vá a coisa dar errado.



Aproveitem e deixem o vosso comentário...

Dicas blogs - Colocar radio no blog Image Hosted by ImageShack.us

Image Hosted by ImageShack.us


Como eu pessoalmente gosto de ouvir um bom som enquanto trabalho, lembrei-me de colocar no meu blog a minha radio favorita.Porque não?
Muito se comenta se devemos ou não, colocar musica em blogs ou sites.
Pois eu não acho muita "piada" quando automaticamente essa musica começa a tocar assim que se entra nos sites ou blogs, muito menos quando ela é sempre a mesma e repetitiva.
A opção de radio, embora seja ela também de escolha pessoal, não sendo colocada a tocar de forma automática onde o visitante pode sempre escolher se a quer ouvir ou não, não acho que seja uma má escolha.
Assim sendo, pesquisei um pouco e lá encontrei estes scripts, que tive no entanto de "ajeitar", de maneira a que pudesse funcionar quer no Firefox quer em IE. E cá está, pelo menos comigo funciona, e está mais que testado.


Querendo colocar de forma automática o player a tocar assim que se entrar, é só alterar para "true" onde está a palavra "autostart". Por alguma razão no Firefox o radio começa logo a tocar mesmo que em autostart esteja a indicação False. Ainda não consegui resolver este pormenor.
Podem aqui em baixo encontrar alguns códigos de rádios