"Guarde somente as coisas que você gosta, materiais, emocionais e espirituais."



Mostrando postagens com marcador Tutorial Blogger. Mostrar todas as postagens
Mostrando postagens com marcador Tutorial Blogger. Mostrar todas as postagens

Como retirar a nave-bar

Com o blog logado clique em “Editar HTML”.
Localize a seguinte sentença:
/** Page structure tweaks for layout editor wireframe */
Logo após o código abaixo, insira uma linha e cole a frase em negrito:
body#layout #main;
body#layout #sidebar {
padding: 0;
}
#navbar-iframe { height: 0px; visibility: hidden; display: none; }
Clique em salvar e pronto.

Retirar a borda das imagens

Para retirar a borda das imagens, padrão no Blogger, procure este trecho do código:

. post img {
padding:2px;
border:1px solid $bordercolor;
}

E apague o que está em negrito.

Modifique também esta borda, alterando a largura dela ou seu tipo.

Tipos de borda:
* dotted: borda pontilhada
* dashed: borda tracejada
* solid: borda contínua
* double: borda dupla
* groove: borda entalhada
* ridge: borda em ressalto
* inset: borda em baixo relevo
* outset: borda em alto relevo

Criando um menu horizontal

Menu horizontal
Para colocar um menu horizontal no site precisamos colocar o código em duas partes distintas. Primeiro vamos colocar o CSS, no blogspot isso é feito através da pagina editar html, colocando o código abaixo junto com os demais códigos CSS do seu blog (body, main, sidebar, etc...), basta colocar o trecho abaixo junto com o restante dos códigos. Para outros blogs a regra é a mesma junto com os demais estilos CSS.
Código CSS do menu horizontal:
#menu{padding: 0px;
font: bold 12px Verdana;
margin: 0px;
width: 650px;}
#menu li{list-style: none;
display: inline;
margin: 0;
}
#menu li a:link, #menu li a:visited{
color: #0000FF;
text-decoration: none;
margin-right: 3px;
border: 2px solid #000000;
padding-top: 4px;
padding-bottom: 4px;
width: 150px;
display: block;
float: left;
text-align: center;
background-color: #FFFFCC;
}
#menu li a:hover{
color: #FFFFFF;
background-color: #FF9933;
border: 2px solid #0099FF;
}
Aqui existem algumas coisas que podemos mudar para deixar esse menu com uma aparência melhor para nosso site. Começando pela largura de cada item, isso é alterado nessa parte: width: 150px; basta trocar esse valor e pronto, contudo modificando isto mudaremos também a largura total do menu que precisará ser corrigida aqui: width: 650px. Quando colocar isso no seu site os itens do menu devem ficar um do lado do lado se isso não ocorrer modifique um destes dois valores que resolverá o problema.
Nesse exemplo o menu não está todo junto existe um pequeno espaço entre os itens para remover ou aumentar esse espaço altere o 3 nesta parte: margin-right: 3px. Finalmente as bordas:
border: 2px solid #000000;
border: 2px solid #0099FF;
Você pode mudar a largura ou a cor da borda (clique aqui e veja o código das cores), ou se preferir sem bordas basta apagar essas duas linhas.
Agora vamos para a segunda parte colocar o menu propriamente dito. Na página editar layout clique para adicionar um elemento de pagina e escolha a opção html/javascript, então coloque o código do menu, fizemos esse exemplo com nossos sites, mas para alterar é somente trocar os links:
<ul id="menu">
<li><a href="http://jornaljd.blogspot.com" target="_blank">Meu Jornal</a></li>
<li><a href="http://frasecurta.blogspot.com" target="_blank">Frases Curtas</a></li>
<li><a href="http://mensagens.110mb.com" target="_blank">Frases e Mensagens</a></li>
<li><a href="http://cidadeweb.110mb.com" target="_blank">Cidade Web</a></li>
</ul>
Postado por Fabiano Roberto

Caixa rolante

<!--Começo --->
<!--Scripts...http://www.cristinyonline.com.br--->
<center><marquee direction="up" style="Border:#ffffff 1px ridge" onmouseover="this.stop()" width="185" scrollamount="1" onmouseout="this.start()" height="150">Aqui você coloca sua<br/>imagem ou texto.<br/>você pode usar <br/>com <br/>borda ou sem borda.</marquee></center>
<!—Fim -—>



ANTES DE PEGAR O CÓDIGO LEIA O TEXTO ABAIXO

Todas as divisórias você pode aumentar ou diminuir
mexendo em  WIDTH (largura) e HEIGTH (comprimento)
E pode também trocar a direção de rolagem
mexendo em DIRECTION  >>> UP (para cima)
LEFT (esquerda) ;  RIGHT (Direita)
e para você aumentar ou diminuir a velocidade
troque o número no item  SCROLLAMOUNT.
Para você dar espaço entre imagens na opção
UP ( rolando pra cima) use o código  <br>  para
pular uma linha entre uma imagem e outra.
EX: Pular 2 linhas
<br> <br>
Para dar espaço entre imagens na opção LEFT ou RIGHT
(rolando pra direita ou esquerda) use o código  &nbsp;
Criação Cristiny Online

Caixinha "link-me"

<p align="center"><b></b></p>
<p align="center"><img vspace="2" hspace="2" src=""/><br/>
<textarea rows="3"
cols="12" onfocus="this.select()" onmouseover="this.focus()" name="textarea"><a href="ENDEREÇO DO SEU BLOGGER">
<img border="0" src="ENDEREÇO DA SUA IMAGEM"/></a>
</textarea>
</p>

Mural de avisos

<div align="center">
<div style="BORDER-RIGHT: rgb(102,153,204) 5px double; BORDER-TOP: rgb(102,153,204) 5px double; OVERFLOW: scroll; BORDER-LEFT: rgb(102,153,204) 5px double; WIDTH: 584px; COLOR: rgb(0,0,0); BORDER-BOTTOM: rgb(102,153,204) 5px double; HEIGHT: 380px" align="left">
<blockquote>
<br/>
<div align="center">
<b>AVISOS:</b></div>
<br/>
<b>COMPROMISSOS PAROQUIAIS</b>
<p></p>
COLOCAR AQUI OS TEXTOS
<p></p>
</blockquote></div></div>

Dicas rápidas de HTML

PARA PULAR LINHA:
<br />
PARA ESCREVER EM NEGRITO:
<b>tudo o que for colocado aqui fica em negrito</b>
PARA ESCREVER EM TAMANHO MAIOR
<h1> (Título) </h1>
<h1> trata-se de "heading" (cabeçalho)
h1 maior tamanho
h2 subtexto (um pouco menor e assim secessivamente)
PARA CENTRALIZAR
Nesse exemplo da palavra “avisos” trocar esse HTML:
<span style="font-weight: bold; center;">AVISOS:</span>
Por esse=
<div align="center"><strong>AVISOS:</strong></div>

Retirar o link Assinar: Postagens (Atom)

Para retirar este link padrão do Blogger que fica sob as postagens, procure no código do seu template este trecho (clique em Expandir Modelo de Widget) :
<!-- feed links -->
<b:include name='feedLinks'/>
</b:includable>
</b:widget>
</b:section>
</div>>
Basta apagar o que está em negrito.

Abrindo o link em outra janela

Para abrir o link em outra janela, adicionar :
target="_blank"
depois da primeira url da foto (pra onde ela vai)
ou entao assim: quando for link
As minhas <a href="http://pagina pra onde vai direcionar o link">frase que será o link</...
A tag usada é assim: <a href=" "> </a>
Caso deseja abrir o site em uma nova janela coloque assim:
As minhas <a href="http://endereço da pagina pra onde vai direcionar o link" target="_blank">frase que será o link</a>...
Para abrir todos os links em novas janelas, ao invés de adicionar um target="_blank" em cada link que quiser abrir em nova janela é só inserir a linha
<base target='_blank' />
logo após a tag <head> no código HTML do seu template, conforme o exemplo:
<head>
<base target='_blank' />
OU SEJA:
Para abrir um link em nova janela basta definir target="_blank" na tag <a>. Por exemplo:
<a href="http://www.mephost.com" target="_blank">Mep Host</a>
Se você colocar o nome de um frame que não existe na seção atual, o link deverá se abrir numa nova janela também.
Esse recurso é útil em especial para links externos: o visitante abre o outro site, mas o seu não fecha.
Para fazer com que todos os links do seu blog abram em uma nova página, sem ter que acrescentar target="_blank" em cada link, basta ir no código do seu template e entre as tags <head> e </head>, colocar este código:
<base target="blank"></base>

Menu horizontal

Para colocar um menu horizontal no site precisamos colocar o código em duas partes distintas. Primeiro vamos colocar o CSS, no blogspot isso é feito através da pagina editar html, colocando o código abaixo junto com os demais códigos CSS do seu blog ( body, main, sidebar, etc...), basta colocar o trecho abaixo junto com o restante dos códigos. Para outros blogs a regra é a mesma junto com os demais estilos CSS.
Código CSS do menu horizontal:
#menu{padding: 0px;
font: bold 12px Verdana;
margin: 0px;
width: 650px;}
#menu li{list-style: none;
display: inline;
margin: 0;
}
#menu li a:link, #menu li a:visited{
color: #0000FF;
text-decoration: none;
margin-right: 3px;
border: 2px solid #000000;
padding-top: 4px;
padding-bottom: 4px;
width: 150px;
display: block;
float: left;
text-align: center;
background-color: #FFFFCC;
}
#menu li a:hover{
color: #FFFFFF;
background-color: #FF9933;
border: 2px solid #0099FF;
}
Aqui existem algumas coisas que podemos mudar para deixar esse menu com uma aparência melhor para nosso site. Começando pela largura de cada item, isso é alterado nessa parte: width: 150px; basta trocar esse valor e pronto, contudo modificando isto mudaremos também a largura total do menu que precisará ser corrigida aqui: width: 650px. Quando colocar isso no seu site os itens do menu devem ficar um do lado do lado se isso não ocorrer modifique um destes dois valores que resolverá o problema.
Nesse exemplo o menu não está todo junto existe um pequeno espaço entre os itens para remover ou aumentar esse espaço altere o 3 nesta parte: margin-right: 3px. Finalmente as bordas:
border: 2px solid #000000;
border: 2px solid #0099FF;
Você pode mudar a largura ou a cor da borda (clique aqui e veja o código das cores), ou se preferir sem bordas basta apagar essas duas linhas.
Agora vamos para a segunda parte colocar o menu propriamente dito. Na página editar layout clique para adicionar um gadget e escolha a opção html/javascript, então coloque o código do menu, fizemos esse exemplo com nossos sites, mas para alterar é somente trocar os links:
<ul id="menu">
<li><a href="http://jornaljd.blogspot.com" target="_blank">Meu Jornal</a></li>
<li><a href="http://frasecurta.blogspot.com" target="_blank">Frases Curtas</a></li>
<li><a href="http://mensagens.110mb.com" target="_blank">Frases e Mensagens</a></li>
<li><a href="http://cidadeweb.110mb.com" target="_blank">Cidade Web</a></li>
</ul>
Boa sorte!

Como publicar cifras de músicas

Eu estava tentando publicar uma música cifrada e quando visualizei a postagem as cifras ficaram todas agrupadas do lado esquerdo da postagem, assim:
F Bb D7 G- C7
Ao Espírito de amor/ Canto agora esta canção/
A- Bb F G7 C7
Que e tão simples como a flor/ Mas brotou do coração.

Então depois de algumas pesquisas sem sucesso na internet procurei o meu ajudante-mor, meu filho, e ele encontrou a solução:
Para que as cifras fiquem no lugar certo, ou seja com os devidos espaços, basta colocar <pre> no começo da frase e </pre> no final. Isso faz com que o texto original seja mantido depois de publicado.
Ex:
 F                Bb  D7      G-                              C7  
Ao Espírito de amor/ Canto agora esta canção/
            A-     Bb                  F                              G7      C7
Que e tão simples como a flor/ Mas brotou do coração. 

Como redimensionar imagens

Fácil, extremamente fácil.
O link da minha imagem é esse:
<*img *src*="http://3.bp.blogspot.com/_
9xybQMeh5aU/TBDGIU-flEI/AAAAAAAAEyI/bXu2UCyfXAA/s400/gatim.jpg">
Ele tem 400 px de largura.

Eu quero diminuir de 400 px para 200 px de largura.
É só adicionar widht="200" depois de .jpg" e antes do sinal >
Ficará assim:


Poréééémmm, como o blogger já vem com o widht e o height definidos, é só ir no Editar Html e mudar os números, onde widht é a largura e height é a altura. Ou então clicar na própria imagem e ela te dará a opção pequena, média ou grande. Ehhhhh!

Gostou? Ainda não acabou...

Gostou? Ainda não acabou...
 
Powered By Blogger | Portal Design By Trik-tips Blog © 2009 | Resolution: 1024x768px | Best View: Firefox | Top
BlogBlogs.Com.Br Web Statistics