domingo, 31 de julho de 2011

Barra G1 no seu blog – 2

G1Já foi postado aqui no cblogger um tutorial de como colocar uma barra igual ao do g1.globo.com, o portal de notícias da globo. Porém o código que disponibilizamos é muito extenso, e neste artigo vamos mostrar uma outra maneira de adquirir esta barra usando um código menor.

O código foi sugerido por Mateus Rodrigues dono do Blog do Mateus Honorio, um de nossos visitantes, espero que possa ser um de nossos seguidores também.

G1 - O portal de notícias da GloboEntão para colocar a barra do portal de notícias da globo usando este segundo método, apenas sigas os passos abaixo:

1. Faça o login no blogger e acesse o menu principal do seu blog;

2. Clique no na guia “Modelo” –> “Editar Modelo”;

3. Aperte CTRL + F e procure por:

</body>

4. Antes dessa tag cole o código abaixo:

<link href='http://barra.globo.com/nova/css/barra-globocom.min.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
var glb = glb || {};
glb.barra = {
exibeAssineJa: true,
exibeCentral: true
};
(function() {
var s = document.createElement("script"); s.type = "text/javascript"; s.async = true;
s.src = "http://barra.globo.com/nova/js/barra-globocom.min.js";
var ss = document.getElementsByTagName("script")[0]; ss.parentNode.insertBefore(s, ss);
})();
</script>

5. Salve o modelo.

Se você fez tudo certinho, não tenha dúvidas que funcionará. Até mais!

Marcadores: , , , ,

barra de navegação no blog

Neste tutorial irei ensinar como colocar uma barra de navegação do seu blog.
Trata-se de um menu com os mesmo botões contidos nos navegadores, sendo eles: ‘voltar’, ‘avançar’, ‘atualizar’, ‘Início’. Mas essa barra vai além, nela também tem os botões ‘Topo da página’ e ‘Fim da página’. Vale lembra também que a barra é fixa, ou seja, ela fica no mesmo lugar quando a página é rolada.

Barra de navegação Clique aqui e veja uma demonstração.

Para adicionar em seu blog apenas sigas os passos abaixo:

1. Faça o login no blogger e acesse o painel principal do seu blog;

2. Clique em “Layout”, e depois em “Adicionar um gadget”;

3. Cole o seguinte código:

<style type='text/css'>
<!--
#navegacaocblogger
{
display:scroll;
position:fixed;
bottom:1px;
right:1px;
z-index:99;
}
#navegacaocblogger a
{
filter:alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
border:0;
}
#navegacaocblogger img
{
border:0;
}
#navegacaocblogger a:hover
{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
-->
</style>
<div id='navegacaocblogger'>
<div style="background: #dcdcdc; padding:5px; margin: 10px; border:1px solid #888; border-radius:10px;">
<a onClick='window.history.go(-1)' title='Voltar'><img src='http://codigosblogger.webs.com/Gadgets/Barra%20de%20navegacao/Button-Previous-icon.png'/></a>
<a onClick='window.history.go(1)' title='Avançar'><img src='http://codigosblogger.webs.com/Gadgets/Barra%20de%20navegacao/Button-Next-icon.png'/></a>
<a href='#' onClick='window.location.reload()' title='Atualizar página'><img src='http://codigosblogger.webs.com/Gadgets/Barra%20de%20navegacao/Atualizar.png'/></a><a href='http://URL_do_seu_blog.blogspot.com/'title='Página principal'><img src='http://codigosblogger.webs.com/Gadgets/Barra%20de%20navegacao/Home.png'/></a><a
href='#' title='Ir para o topo da página'><img
src='http://codigosblogger.webs.com/Gadgets/Barra%20de%20navegacao/Topo.png'/></a><a
href='#finalpg' title='Ir para o final da
página'><img
src='http://codigosblogger.webs.com/Gadgets/Barra%20de%20navegacao/Fim%20da%20pag.png'/></a></div></div>
<a name='finalpg'/>

4. Depois salve e veja como ficou.

As partes linkadas no código são as imagens contidas na barra, bem como o botão avançar, voltar e etc… Se quiser, você pode estar substituindo essas imagens por outras.

A parte em vermelho é a cor do fundo da barra.
A parte em azul é a cor da borda da barra.

Créditos: www.iconarchive.com

Marcadores: , , ,