Criar uma Janela de Divulgação no blog
Vamos mostrar como colocar uma janela de divulgação (estilo pop up) fixa sobre o seu blog e dentro dela você poderá colocar coisas como adicionar ao Twitter, assinar Feed e outras coisas que deseje ter a certeza que seus visitantes vejam.
Esse código é bem fácil de usar basta adicionar um gadget de html
(pagina layout, adicionar gadget, html/javascript) e colar o código
abaixo:
<style type="text/css">
<!--
#popjan {border: 2px solid #000000;
background-color: #ffffff;
width: 320px;
top: 200px;left: 100px;
text-align: center;
z-index: 450;position:fixed;visibility: visible;}
-->
</style>
<div id="popjan">
<a style="float:right" href="#" onclick="document.getElementById('popjan').style.display='none';">[Fechar]</a>
<div style="clear:both"></div>
<div style="width:300px; text-align:center; margin:auto">
<div style="float:right; width:100px">conteudo</div>
<div style="float:right; width:100px">conteudo</div>
<div style="float:right; width:100px">conteudo</div>
</div>
<div style="clear:both"></div>
<br />
<a style="font-size:80%" href="Link do seu site Aqui" target="_blank">Widget Saiba Mais</a></div>
No lugar das linhas onde está escrito conteúdo você poderá colocar
qualquer html que desejar (link do seu feed, Twitter ou qualquer outra
coisa), veja como alterar e configurar corretamente esse novo acessório
para o seu blog para deixá-lo totalmente personalizado para o seu site:
border: 2px solid #000000; isso é a borda
background-color: #ffffff; cor de fundo da janela
width: 320px; isso é a largura da janela, altere como desejar.
top: 200px;left: 100px; isso é a distancia em relação ao topo (200) e
lado esquerdo (100) da pagina, também pode modificar como desejar.
Agora vamos passar as configurações dentro da janela de divulgação, note
que a linha <div style="float:right;
width:100px">conteudo</div> repete-se 3 vezes, ou seja, podemos
ter 3 colunas dentro desta janela, ou seja, banners, textos um do lado
do outro. Se quiser deixar apenas uma apague essas linhas, caso queria
mais divisões é só copiar e repetir o código mais quantas vezes quiser.
Se forem criar mais divisões veja esse código <div style="width:300px; antes da primeira das linhas note que 300 é a soma das 3 colunas, cada uma delas em 100 pixels, então se for modificar a quantidade ou largura delas lembre-se de corrigir o valor total neste trecho.
Pedimos que não retirasse o trecho final do código onde está nosso link assim outros blogueiros que gostem deste acessório possam saber como fazer um no blog também.
Se forem criar mais divisões veja esse código <div style="width:300px; antes da primeira das linhas note que 300 é a soma das 3 colunas, cada uma delas em 100 pixels, então se for modificar a quantidade ou largura delas lembre-se de corrigir o valor total neste trecho.
Pedimos que não retirasse o trecho final do código onde está nosso link assim outros blogueiros que gostem deste acessório possam saber como fazer um no blog também.
Nos modelos novos do Blogger é recomendado colocar esse código num gadget sobre a postagem:
Isso porquê devido aos novos códigos se for colocado em outra parte pode
haver erros e a janela de divulgação aparecer por baixo dos posts do
blog. Fizemos esse teste usando o Firefox e Internet Explorer, usando o
modelo Josh Peterson.
Para Retirar a Barra do Blogger do Topo dos Modelos 2010 ou 2006
Vá em Modelo Editar→ HTML→ Clique em cima do código HTML e digite Ctrl+F → Procure pela linha [ body { ] → Copie este código:▼
#navbar-iframe{height: 0px; visibility: hidden; display: none;}
» Cole este código acima da linha: [body {] Veja as imagens abaixo:
♦ Clique em Visualizar para se certificar que está indo tudo certo.
♦ Clique em Salvar modelo.
»Pronto a barra superior do blogger saiu, seu template ficou mais bonito e com a sua cara! Observação Importante:
» Se o seu blog não tiver a linha [body{] encontre a linha ]]></b:skin> e cole o código:
#navbar-iframe{height: 0px; visibility: hidden; display: none;}
Colocar Barra de Rolagem no blog
Uma maneira de se ganhar um pouco mais de espaço em alguns elementos no blog é inserir uma Barra de Rolagem.
Existe um modo fácil de inserir Barra de Rolagem em qualquer parte do blog, seja apenas em determinados gadgets da sidebar separadamente, fazendo rolar o conteúdo do widget, ou até mesmo na área de postagem.
Requer apenas uma configuração no código CSS referente ao elemento que você quer inserir a Barra de Rolagem.
Barra de Rolagem em determinado widget da Sidebar:
Digamos que em sua sidebar você tem um gadget de Vídeos, e exatamente
nesta única coluna que você quer inserir uma barra de rolagem, para
fazer rolar o conteúdo.
Vá em design >> Editar HTML >> Expandir modelos de widgets e procure pelo código referente a este widget que você tem instalado na sidebar.
Que deve ser assim:
Note que no ínicio do código tem widget id=’VideoBar1′
é para esta ‘id’ que você deverá criar os estilos no código CSS.
Para isso procure pela tag ]]></b:skin>
e cole ANTES dela o código a seguir:
#VideoBar1 .widget -content{height: 160px;overflow: auto;}
Salve as modificações!
height: 160px; é a altura total que terá o gadget.
O comando overflow: auto; faz como que a barra de rolagem apareça automaticamente, apenas se altura do gadget ultrapassar os 160px.
Deste modo somente o conteúdo do widget ‘Vídeo’ terá uma barra de rolagem, deixando o título fixo, assim como está aqui neste blog de teste.
Utilize o mesmo procedimento para cada widget que você queira fazer rolar o conteúdo atráves de uma barra de rolagem, alterando apenas o nome da ‘id’ de cada widget, não esqueça!
Altere o valor de height se preferir.
Barra de Rolagem na área do post:
Vá em design >> Editar HTML >> Expandir modelos de widgets e procure por: .post-bodyE acrescente as linhas:
Devendo ficar mais ou menos assim:
Edite o valor de height para a altura que você preferir e Salve!
