#blogdicasblogueiros ...bdb... blog dicas blogueiros

gif

2017-05-27T15:35:00.002-07:00

►blogdicasblogueiros ...bdb... blog dicas blogueiros

twitter

2017-05-27T09:27:00.003-07:00

♥ Twitter

sandália, artesanal, personalizada com : fios, pedras, (pedrinhas), decoupagem...

2017-05-26T11:52:00.000-07:00

►blogdicasblogueiros ...bdb... blog dicas blogueiros

///

Seja nosso parceiro!!!

2017-05-26T07:37:00.001-07:00

Parcerias:
banner
120x60

▼nosso banner:

clicar
selecionar
copiar
colar
e
divulgar-nos

►blogdicasblogueiros ...bdb... blog dicas blogueiros

aprenda como é feito: "Paginação Numerada para Blog"

2014-09-02T14:47:00.000-07:00

...fonte e créditos deste presente post:
ferramentasblog

..." para ajudar você a customizar seu template no Blogger, agora mudando os links de navegação de página padrões do Blogger, numerando cada página. Tudo o que você puder fazer para facilitar a navegabilidade de seu blog é importante e uma dessas formas e permitir que o visitante percorra suas páginas uma por uma, passando pelo conteúdo que deseja."

..."o modelo "..."mostrar é como ilustra a imagem."

"Paginação Numerada para Blog"

"... já mostramos outras formas de mudar o link de navegação das páginas"...

"Personalizar Links de Navegação do Blogger"

..." lembrar também que, antes de fazer qualquer modificação em seu blog principal, teste em um blog preparado para isso e faça um backup completo do seu blog original para não passar sustos e poder reverter as mudanças caso algo não saia como desejado."

"Inserindo paginação numerada no Blogger."

"O modelo "...

..."abaixo ...

..." no blog Blogger Widgets (em inglês). Veja o artigo original caso tenha alguma dúvida: Numbered Page Navigation For Blogger."

"Proceda da seguinte forma"

1. Abra o painel do Blogger em sua conta e clique no menu “Layout” ...

“Editar HTML”.

No código fonte de seu blog procure pela seguinte linha:

]]></b:skin>

2. Imediatamente ACIMA dela cole o seguinte código no CSS (que determina as caracteríticas dos elementos que serão usados):

.showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #cccccc; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #cccccc; background-color:#cccccc; } .showpagePoint { color:#333; text-decoration:none; border: 1px solid #cccccc; background: #cccccc; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #cccccc; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#333333; }

..." Não altere nada aí e agora procure por </body>que estará bem no final do código-fonte. Também, imediatamente ACIMA dele, cole o trecho que segue:

 <b:if cond='data:blog.pageType != &quot;item&quot;'> <script type='text/javascript'> var pageCount=5; var displayPageNum=5; var upPageWord =&#39;Anterior&#39;; var downPageWord =&#39;Próximo&#39;; </script> <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/> </b:if> 

"Repare que o número na linha marcada de vermelho determina quantos artigos serão exibidos por página, então coloque o número adequado para o padrão do seu blog (já tratamos sobre a quantidade de artigos por página aqui: Quantidade e tamanho das Postagens na primeira página).

Já o número na linha rosa é a quantidade de números que aparecerá nos links de navegação."

"Escolha a quantidade de acordo com a estética e largura da área de postagem."

"...Salve e veja o resultado em seu blog."

OBS.:

Ao invez do do código indicado no

item 2 (dois) , citado acima,

se preferir,

pode-se usar o código a seguir:

/* 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;
}

.:.

"Personalizar seu Blogger Template"..."margens e padding"

2014-06-16T14:34:00.001-07:00

Ajustando as

margens

padding

no seu blog modelo

( Modelo do Blogger Design Series)

Margens e padding
são aspectos importantes do projeto Blogger: adicionar espaço entre eles e dentro de cada elemento do seu blog , assegurando o seu conteúdo é bem elegante e fácil de ler.

" Nesta edição da série Blogger Modelo de Design ," ..." compartilhar o método que...
..." uso para alterar as margens e padding

no Blogger templates para garantir uma distribuição coesa. Este post vem na sequência da parcela anterior que explica como alterar o layout do seu blog.

Blog margens definem o espaço de cada elemento em relação uns aos outros, Enquanto padding define o espaço dentro de cada elemento.

No seu estado actual, o demonstração blog para explicar os tutoriais nesta série é visivelmente coerente , apesar de que ainda não alteraram o preenchimento e margens. No entanto, quando começamos a alterar cada elemento do modelo do blog ( as laterais , cabeçalho e coluna posts principal) , vamos observar esses elementos podem ser comprimidas em conjunto, já que não existe espaço definido entre ou dentro elas.

A maneira mais fácil de ver como o estofamento e as margens vão afectar o seu modelo

Aqui está um método que eu quase sempre uso quando ajustes das margens e enchimento dos meus modelos do Blogger : adicionar bordas a cada um dos elementos do layout .
Quando transformamos o modelo desta :

Para isso:

Ele se torna muito mais fácil de ver como o estofamento e as margens vão melhorar a aparência geral do modelo !

Adicionando bordas a elementos de seu layout

Quando aprimorando meus modelos , acho que é melhor para adicionar bordas para as seguintes áreas:

A capa exterior

A seção de cabeçalho

A Sidebar (s)

Os postos principais coluna

O Rodapé

Para fazer isso, só precisamos adicionar uma única linha de código para o estilo de cada uma dessas seções:

border: 1px solid # 000000;

Copie esta linha de código para a área de transferência , em seguida, encontrar cada uma das seguintes linhas no seu modelo. Colar a linha que você tenha copiado diretamente abaixo de cada uma das seguintes linhas no yout modelo de código HTML:

# wrapper { exterior
# header -wrapper {
# wrapper { principal
# Sidebar -wrapper {
# footer {

Se você tem um layout de três colunas , você também vai precisar adicionar esse no estilo da capa nova barra lateral :

# nova sidebar -wrapper

Antes de salvar isso, você deve visualizar o seu modelo para assegurar a cada uma das fronteiras está no lugar. Você pode muito bem detectar um problema com a disposição após a adição dessas fronteiras : a sua barra lateral (s) podem agora ser empurrados para fora do lugar !

É assim que o problema parece na demonstração de três colunas modelo.

Mas não se preocupe : isso é facilmente resolvido tirando alguns pixels de distância da largura da coluna principal postsNa demonstração modelo , a largura da coluna de posts principal é 450px :

# wrapper { principal
border: 1px solid # 000000;
width: 450px ;
float: $ startSide ;
word-wrap : break- palavra ; / * correção para o texto longo quebra sidebar float no IE * /
overflow: hidden ; correção * / para o conteúdo não-texto longo quebra IE sidebar float * /
}

Ao tomar seis pixels a partir deste valor (deixando este em vez 444px ), podemos garantir as laterais estão devidamente alinhados :

Como definir as margens

Como já referi anteriormente neste post, margens de definir o espaço entre cada elemento no layout. Na imagem acima , podemos ver que não há espaço entre a coluna de posts principal ou uma das laterais . Nós podemos usar as margens de criar um espaço entre cada um desses elementos .
No entanto, devemos estar conscientes de que as margens de adicionar um elemento de layout é quase como a adição de largura extra para eles. A menos que tomemos alguns pixels de distância de um elemento , corremos o risco de empurrar o layout fora do lugar !
Com isto em mente , vamos dar uma olhada na demonstração modelo novo:

Podemos ver que já existe algum espaço à esquerda da coluna principal, à direita da barra lateral direita ( criado por padding na embalagem externa). No entanto, não há espaço entre a coluna principal e cada uma das laterais .
Para criar esse espaço , vamos adicionar uma margem para a direita da capa principal, e uma margem à direita da barra lateral em primeiro lugar.

A adição de uma margem à direita do invólucro principal

No modelo de demonstração , estou indo para adicionar uma margem de 10 pixels para o lado direito, que vai criar algum espaço entre a capa principal e na barra lateral vizinhos.
Para fazer isso , eu preciso adicionar uma linha de código para as declarações de estilo para a capa principal, que é destacada em vermelho abaixo :

# wrapper { principal
border: 1px solid # 000000;
margin-right: 10px;
width: 444px ;
float: $ startSide ;
word-wrap : break- palavra ; / * correção para o texto longo quebra sidebar float no IE * /
overflow: hidden ; correção * / para o conteúdo não-texto longo quebra IE sidebar float * /
}

Como eu ainda não deduziu qualquer parte da largura de outros elementos , isto faz agora empurra uma barra lateral abaixo do outro .
Mas se eu tomar 10px de distância da largura atual do invólucro principal ( fazer este 434px ) , a barra lateral deve cair de volta no lugar :

# wrapper { principal
border: 1px solid # 000000;
width: 434px ;
margin-right: 10px;
float: $ startSide ;
word-wrap : break- palavra ; / * correção para o texto longo quebra sidebar float no IE * /
overflow: hidden ; correção * / para o conteúdo não-texto longo quebra IE sidebar float * /
}

Fazendo o layout aparecer assim:

A adição de uma margem à direita da barra lateral

Vou usar as mesmas técnicas para adicionar um espaço entre as barras laterais ( que também é aplicável para aqueles que têm a sua barra lateral alinhado à esquerda da coluna principal).
Primeiro, vou adicionar a declaração de margem para o estilo para o sidebar -wrapper :

# Sidebar -wrapper {
border: 1px solid # 000000;
width: 250px ;
margin-right: 10px;
float: $ endSide ;
word-wrap : break- palavra ; / * correção para o texto longo quebra sidebar float no IE * /
overflow: hidden ; correção * / para o conteúdo não-texto longo quebra IE sidebar float * /
}

Mas desde que eu prefiro a largura da barra lateral para permanecer em 250px , eu vou deduzir outra 10px do invólucro principal em vez disso, deixar a largura da seção de 424px :

# wrapper { principal
border: 1px solid # 000000;
width: 424px ;
margin-right: 10px;
float: $ startSide ;
word-wrap : break- palavra ; / * correção para o texto longo quebra sidebar float no IE * /
overflow: hidden ; correção * / para o conteúdo não-texto longo quebra IE sidebar float * /
}

Agora não há espaço entre as duas seções principal e lateral, proporcionando uma melhor aparência para a apresentação do modelo de blog:

Em seus próprios modelos , você pode aumentar ou diminuir o tamanho das margens como quiser, contanto que você lembre-se deduzir a mesma quantidade de pixels de uma área diferente do layout !

Agora que nós arranjamos as margens entre os elementos do layout , vamos nos concentrar em garantir o conteúdo de cada seção não correr muito perto das fronteiras .

Como definir padding

Padding define o espaço entre as bordas externas de um elemento eo conteúdo dentro.
Porque eu tenho limites definidos no modelo de demonstração , é fácil ver que não há atualmente nenhum preenchimento entre as bordas eo conteúdo das sidebars e posts coluna principal ( apesar de já há algum espaço acima e abaixo do conteúdo).
Quero adicionar 5 pixels de padding em cada lado da coluna principal e cada uma das laterais do meu modelo de demonstração . Isto irá diminuir o espaço disponível em cada um desses elementos, dez pixels de largura ( 5 pixels de cada lado).
Por isso, eu posso usar a mesma declaração para cada um dos elementos:

padding: 0 5px 5px 0 ;

Esta declaração é diferente no estilo que usamos para definir as margens . Ao invés de definir o preenchimento para cada lado do elemento , podemos definir o preenchimento de todos os quatro lados (superior, direita, baixo e da esquerda ), em uma declaração. No exemplo acima , os zeros referem-se ao preenchimento acima e abaixo do índice, enquanto o 5px se referem ao preenchimento para as áreas direita e esquerda.
Para adicionar esta declaração preenchimento do invólucro principal e cada uma das sidebars, só precisamos copiar esta linha:

padding: 0 5px 5px 0 ;

E este colar logo abaixo as seguintes linhas no template do blog:

# wrapper { principal
# Sidebar -wrapper {
# nova sidebar -wrapper {

Infelizmente, estas declarações de preenchimento , uma vez mais fazer com que o layout seja desalinhado. Isso significa que eu preciso deduzir largura de barras laterais de modo a alinhá-los novamente .
No meu modelo de demonstração , tomei 25px de largura a partir da largura de ambas as laterais , reduzindo-as a 235 pixels cada um:

# Sidebar -wrapper {
padding: 0 5px 5px 0 ;
border: 1px solid # 000000;
width: 235px ;
margin-right: 10px;
float: $ endSide ;
word-wrap : break- palavra ; / * correção para o texto longo quebra sidebar float no IE * /
overflow: hidden ; correção * / para o conteúdo não-texto longo quebra IE sidebar float * /
}
# nova sidebar -wrapper {
padding: 0 5px 5px 0 ;
border: 1px solid # 000000;
width: 235px ;
float: $ endSide ;
word-wrap : break- palavra ; / * correção para o texto longo quebra sidebar float no IE * /
overflow: hidden ; correção * / para o conteúdo não-texto longo quebra IE sidebar float * /
}

Em teoria , este desalinhamento não deve ocorrer ( isto certamente não acontece quando a codificação páginas web regular! ), e não consigo encontrar uma explicação ou uma solução alternativa para isso, então se alguém pudesse lançar alguma luz eu ficaria muito feliz em ouvir você!Com estas declarações padding no lugar e os ajustes nescessary ter sido feita, o modelo de demonstração agora parecido com este:

" A largura disponível para o conteúdo da seção principal é agora 414px enquanto que as barras laterais de 225px é por causa do padding dentro desses elementos. Precisamos tomar nota destas larguras para mais tarde denominando propósitos, e para garantir todas as imagens que carregar vai caber no espaço disponível."

Palavras finais

Este post tem se tornado bastante longa e complexa , embora eu espero que minhas explicações oferecer instruções detalhadas e compreensíveis para ajudá-lo a alterar as margens e padding para seus próprios modelos personalizados .

" Progresso da manifestação blog"

No momento , eu deixei as fronteiras do lugar em minha três demonstração coluna modelo como ainda temos de fazer ajustes para a seções de cabeçalho e rodapé."

Fonte e créditos:

http://www.bloggerbuster.com/2008/01/adjusting-margins-and-padding-in-your.html

- Melhores Notícias Aqui -
-MNA -
...
-Aqui é você quem faz a diferença do sucesso deste espaço...!...

envie aqui sua notícia e/ou

sua

URL/link

Indique sua matéria aqui e receba tráfego em seu blog

...intensedebate...Mensagens / Recados/ Comentários...

Comments

Logging you in...

Close Login with your OpenID Or create an account using OpenID

Back

Cancel 7)%20document.getElementById('frmHeadLoginOpenID').submit();%20else%20showMsgBox('Invalid%20OpenID%20url.',%20' Please%20put%20in%20your%20OpenID%20URL%20and%20try%20to%20login%20again! ',%200,%20this);">Login

Dashboard Edit profile Logout

Logged in as

There are no comments posted yet. Be the first one!

Post a new comment

Comment as a Guest, or login:

Tweet this comment

Connected as (Logout)

Email (optional)

Not displayed publicly.

Submit Comment

Subscribe to

volte sempre

Comments by IntenseDebate

Como Fazer Um Template Ensinando detalhadamente ...???...

2014-06-16T14:33:00.000-07:00

"Como Fazer Um Template Ensinando detalhadamente"

...???...

Pesquisa

rebuscada

na net,

fonte + créditos,

merecidamente para:

http://forum.wmonline.com.br/

topic/66199-

tutorial-de-como-fazer-um-template/

" Tutorial De Como Fazer Um Template Ensinando detalhadamente"

" Um

template é composto por 2 partes...

a parte do DESIGN

e a

parte do

CODIGO...

vou começa ensinado a parte do design que é mais facil... "

" PARTE 1 - PARTE DO DESIGN"

" A parte do design surgi a parti da sua criatividade e talento... para vc poder fazer um template com imagens legais é necessario q saiba mecher em alguns programas de design... como o Corel Draw, PhotoShop, Fireworks( o mais facil de mecher e o mais usado)"

..."mais pra vc poder aprender a fazer o template mais rapido e sem nenhuma necessidade de fikar se preocupando com imagens eu coloquei duas imagens na internet"

Imagem 01

" Essa Imagem ela é a figura principal, aquela imagem que fika bem em cima"

Imagem 02

"    Essa Imagem será o fundo, todo template precisa de um fundo"...

"   Certo agora que a parte do design está feita, vamos para a parte mais "   CHATA " de um template, o CODIGO FONTE "

" PARTE 2 - CODIGO FONTE"

"   O Codigo fonte é a parte principal de um site, blog, etc... é não é dificil aprender o CODIGO FONTE, ele é chamado de HTML... todos devem ter ouvidos já... certo... vou tentar explicar rapido e facil de aprender... vamos lá "

" O codigo fonte é compostos por tags, são elas:

HTML,

HEAD,

TITLE

e

BODY,

todas as

tags

é

necessário
que se fechem,

ex: <HTML> xxxxxxxxx </HTML>

"HTML é a tag principal
HEAD é a tags que poucas vezes é usado... é mais usado em alguns SCRIPT
TITLE como o nome mesmo diz, é a parte que ficará o titulo do seu site

BODY é o corpo do site... nele que colocaremos todo o codigo..."

" ai galera eu vou colocar o codigo inteiro aqui e depois vou explicando parte por parte certo"...

" CODIGO INTEIRO "

<html>
<head>

                                           <!-- NÃO MUDE NADA ATÈ ALI EM BAIXO-->
             
<STYLE type="text/css">
<!--
BODY {
scrollbar-face-color: FFFFFF;
scrollbar-highlight-color: 000000;
scrollbar-3dlight-color: 000000;
scrollbar-darkshadow-color: FFFFFF;
scrollbar-shadow-color: FFFFFF;
scrollbar-arrow-color: 000000;
scrollbar-track-color: 000000;
}
-->
</STYLE>FIM  DO SEU PERFIL -->
       
    
     </p>
        <br> <p align="center">Template by<br>
          So_Templates</p></td>
    </tr>
  </table>
</div>
<div id="Layer2" style="position:absolute; left:252px; top:610px; width:488px; height:46px; z-index:2"> <div align="center"> 

        </p>

        <br>
        <p align="center">


                  <!--INICIO -  CODIGO DA HOSPEDAGEM -->







                 <!-- COLOQUE O CODIGO DA HOSPEDAGEM AQUI -->
                           
        






                           <!--FIM -  CODIGO DA HOSPEDAGEM-->

<meta http-equiv="Content-Language" content="pt-br">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script language="Javascript1.2" src="http://blig.ig.com.br/js/funcoes_templates.js"></script>

<STYLE type="text/css">
P, body, td, tr, div {
        font-style: normal;
        font-weight: normal;
        font-size: 10px;
        color: #FFFFFF;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        line-height: 12px;
}
A, A:link{color:#FFFFFF;text-decoration:none}
A:visited{color:#FFFFFF}
A:active{color:#FFFFFF}
a:hover {text-decoration: none; filter: shadow(Color=#666666, strength=1);      height:0px;     cursor: hand;   font-family: Verdana, Arial, Helvetica, sans-serif;     color: #FFFFFF}
hr{width:100%;color:#4FC7FB;height:5;border:1px solid #1A348B; text-align:center>}
</STYLE>

                                                          <!-- FIM DA ONDE NÂO È PRA MUDAR -->
                
                                                      <title>"COLOQUE O SEU TITULO AQUI"</title>
</head>

                                              <!-- AQUI QUE FICA O ENDEREÇO DA FIGURA (ESSE É O FUNDO O SITE) -->
<body background="http://sr.kremer.vila.bol.com.br/gorillaz_02.gif">
<table width="669" border="0" cellspacing="0" cellpadding="0" height="0">
   
           <!--  AQUI FICA O ENDEREÇO DA FIGURA PRINCIPAL -->
  <img src="http://sr.kremer.vila.bol.com.br/gorillaz_01.gif"></table>


<!--              INICIO DO SEU PERFIL                    -->
<div id="Layer1" style="position:absolute; left:20px; top:567px; width:161px; height:68px; z-index:1"> 
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr> 
      <td valign="top"> <p align="left"><b><font color="#FFFFFF" size="2"> Perfil</font></b><br>
          <br>
          <b>Nome</b>: Seu Nome<br>
          <b>Idade</b>: Sua Idade<br>
          <b> Icq</b>: Seu Icq<b> <br>
          Email</b>: Seu Email<br>
          <strong>Signo</strong>: Seu Signo<br>
          <b>Coisas que adoro</b>: "Coisas que você adora fazer"<br>
          <b> Coisas que odeio</b>: "Coisas que você odeia"<br>
        <p></p>
        <p> <font color="#FFFFFF"><b><font size="2">Blogs Amigos</font></b></font><br>
          <br>
          <a href="http://www.so_templates.blig.com.br" target="_blank">Blog do 
          So_Templates </a><br>
        </p>
        <p> <b><font color="#FFFFFF" size="2">Links</font></b><br>
          <br>
          <a href="http://www.so_templates.blig.com.br" target="_blank"> So_Templates</a><br>
          <a href="http://www.blig.com.br">Blig</a></p>
        <p> <b><font color="#FFFFFF" size="2">Arquivo</font></b><br>
          <br>
                                   <!--
         

 


            


</body>
</html>

" ai ta o codigo certo... agora vou explica as partes mais importantes...

tem uma parte que não é aconselhavel mudar pra quem esta aprendendo agora..."

no comeco aonde ta escrito "COLOQUE AQUI SEU TITULO" é aonde você vai colocar o titulo é claro, é dentro da tags <title> </title>

"depois vem aonde fika o endereço das imagens, pra vc poder colocar o fundo e a imagem principal, ela precisa estar na internet...

depois vem o PERFIL... ai todos sabem né... coloca o nome...

ai vem a parte importante de um blog... o codigo que mandara as mensagens para o template... cada lugar q vc coloca o seu blog tem um... eles nunca são iguais... existem o blogger, blig, uol, weblogger... no codigo la em cima tem uma parte q ta escrito "COLOQUE O CODIGO DA HOSPEDAGEM AQUI" então la que vc vai colocar o codigo de qual vc vai usar...
aqui vou colocar os codigos do blogger, blig e do weblogger certo"

BLOGGER

<!--INICIO -  tags do Blogger -->
        <blogger> 
                
              <p class="mensagem"><small><b><$BlogItemDateTime$><
/font></b></small><br><br>
                <font size="1"><$BlogItemBody$></font><br><br>
                <small>Enviado por <b><$BlogItemAuthorNickname$></b></small></font>
</p>
              </blogger> 
<br>
<br>
                <div align="center"><br>
    <br>
    <br>
    *Template Exclusivo do So_Templates</div>
</div>
  <tr>
    <td>

        <!--FIM -  tags do Blogger --></p>
        </a></td>
    </tr>
  </table>
</div>
<div id="Layer2" style="position:absolute; left:252px; top:610px; width:488px; height:46px; z-index:2"> 
  <div align="center">

Blig

<!--INICIO -  tags do Blogger -->
<p class="mensagem" align="justify">[#LISTAGEM#]</p>  
<br>
<br>
                <p> </p>
                <p><div align="center">*Template exclusivo do So_Template</font> </div></p>
              </div>

        <!--FIM -  tags do Blogger -->

...

Weblogger

<!--INICIO -  tags do Blogger -->
<weblogger> 
                 <font size="1">
         <weblogcabecalhodata> 
    </font> 
        <tr align="left"> 
          <td width="520">
            <p align="center">
            <#weblogDataCabecalho#>
            <br>
            <br>
            </p>
          </td>
        </tr>
        </weblogcabecalhodata> 
        <tr> 
          <td width="520"> 
            <p align="justify"><#weblogMensagem#></p>
            <p align="left">
            :: Enviado por
 <a href="mailto:<#weblogEmail#>">
            <#weblogApelido#>
            </a>
            - <#weblogHora#> ::<br>
            <a href="javascript:wb_comentario(<#weblogcodigo#>)">
            <#weblogTotalComentarios#> 
              comentários.</a>
            <br>
            </p>
          </td>
        </tr>
      </table>
    <p align="left">
      </weblogger> 
<br>
<br>
                <p> </p>
                <p>*Template exclusivo do So_Templates</font> </div></p>
              </div>

        <!--FIM -  tags do Blogger -->

...

Pessoal se alguns desses ter problema é pq eu nao testei certo... so testei o codigo do blogger... ele ta funcionando

" O Template ta pronto... espero ter ensinado... aqueles que tiverem alguma dúvida é só mandar um email para mim sr.kremer@bol.com.br

eu fiz alguns outros templates... mais eu ainda tenho q arrumar os codigos dele... mais se vcs quiserem ver ta ai... se alguem quiser usar alguns dos templates q esta ai é so mandar um email q eu passo o codigo por inteiro... certo"

" TEMPLATE 01 - GORILLAZ

TEMPLATE 02 - IRON MAIDEN

TEMPLATE 03 - DIABLO "

Smiley

2014-05-05T09:14:00.000-07:00

#	Código do Smiley	Smiley	Categoria	X
41	:bball:	Basketball	Smilies 1
42	:cheers:	cheers	Smilies 1
43	:bom:	bom	Smilies 1
44	:drunken:	drunken	Smilies 1
45	:sleep:	Sleep	Smilies 1
46	:sunny:	sunny	Smilies 1
47	:albino:	albino	Smilies 1
48	:cherry:	cherry	Smilies 1
49	:santa:	santa	Smilies 1
50	:rendeer:	rendeer	Smilies 1
51	:farao:	farao	Smilies 1
52	:king:	king	Smilies 1
53	:queen:	queen	Smilies 1
54	:joker:	jocolor	Smilies 1
55	:geek:	geek	Smilies 1
56	:scratch:	scratch	Smilies 1
57	:study:	study	Smilies 1
58	:elephant:	elephant	Smilies 1
59	:flower:	flower	Smilies 1
60	:afro:	afro	Smilies 1	http://aparaisodostemplates.blogspot.com

#	Código do Smiley	Smiley	Categoria
21	:face:	What a Face	Smilies 1
22	:star:	Like a Star @ heaven	Smilies 1
23	:suspect:	Suspect	Smilies 1
24	:heart:	I love you	Smilies 1
25	:no:	No	Smilies 1
26	:@:	@	Smilies 1
27	:cyclops:	cyclops	Smilies 1
28	:clown:	clown	Smilies 1
29	:pirat:	pirat	Smilies 1
30	:tongue:	tongue	Smilies 1
31	:silent:	silent	Smilies 1
32	:pale:	pale	Smilies 1
33	:alien:	alien	Smilies 1
34	:cat:	cat	Smilies 1
35	:monkey:	monkey	Smilies 1
36	:pig:	pig	Smilies 1
37	:rabbit:	rabbit	Smilies 1
38	:bounce:	bounce	Smilies 1
39	:confused:	confused	Smilies 1
40	:affraid:	affraid	Smilies 1

#	Código do Smiley	Smiley	Categoria
1	:D	Very Happy	Smilies 1
2	:)	Smile	Smilies 1
3	:(	Sad	Smilies 1
4	:o	Surprised	Smilies 1
5	:shock:	Shocked	Smilies 1
6	8)	Cool	Smilies 1
7	:lol:	Laughing	Smilies 1
8	:x	Mad	Smilies 1
9	:P	Razz	Smilies 1
10	:oops:	Embarassed	Smilies 1
11	:cry:	Crying or Very sad	Smilies 1
12	:evil:	Evil or Very Mad	Smilies 1
13	:twisted:	Twisted Evil	Smilies 1
14	:roll:	Rolling Eyes	Smilies 1
15	;)	Wink	Smilies 1
16	:!:	Exclamation	Smilies 1
17	:?:	Question	Smilies 1
18	:idea:	Idea	Smilies 1
19	:arrow:	Arrow	Smilies 1
20	:\|	Neutral	Smilies 1

#	Código do Smiley	Emoticon	Smiley	Categoria	Ação		X
61	:lol!:		lol!	Smilies 1			http://aparaisodostemplates.blogspot.com

fonte e créditos:

http://aaamorrr.livreforum.com

modelo de blog/Blogger

2013-03-16T21:38:00.000-07:00

Shopping Girl Blogger Template

Aqui está um novo modelo de Blogger - Blogger Girl Comercial Modelo.

Características:

3 colunas layout

Lateral direita

Caixa de pesquisa pronto

Barra de navegação superior

Largura fixa

Fundo rosa.

Fonte e Designer : Deluxetemplates.

Se você quiser melhorar ainda mais e torná-lo mais Search Engine amigável , então veja estas Blogger dicas e truques

=> Modelos Download Mais Aqui <=

World Traveler Blogger Template

Aqui está um novo modelo de Blogger - Blogger Template World Traveler .

Características:

layout duas colunas

Lateral direita

Caixa de pesquisa pronto

Barra de navegação superior

Largura fixa

Fundo cinza .

Fonte e Designer : DeluxeTemplates.

Se você quiser melhorar ainda mais e torná-lo mais Search Engine amigável , então veja estas Blogger dicas e truques

=> Modelos Download Mais Aqui <=

Nicol Blogger Template

Aqui está um novo modelo do Blogger - Nicol Blogger Template com Ads Ready, ler mais e mais .

Este modelo do Blogger é muito profissional blogger modelo que é convertido a partir de tema a palavra imprensa blogger com grande esforço . Tem todas as coisas que você está procurando , como Limpeza Leia mais postagem , caixa Procurar e, RSS , Twitter, Widgets , Ad Banner e muito mais ..

Informações Template :

Modelo Tipo: Blogger Template
Nome do modelo : Blogger Template Novel
Licença : Free Template + Licença Creative Common
Converter: BloggerTheme
WP Designer : NewWpThemes
Características:

3 colunas layout

Barra lateral esquerda e direita

Header Banner (468 * 60)

Banners Sidebar (125 * 125)

RSS, Widgets Twitter

Gravatar nos comentários

Pronto para o Google Analytics, AdSense e Ferramentas Webmaster

Read More Post

Dois menu de navegação

Menu de Navegação Superior

Caixa de pesquisa Ready

largura fixa

Widget Ready

Grey cor de fundo branco.

Como instalar este modelo:

Primeiro você tem que instalar esse modelo na sua blogger consideração.

Vá para o seu blogger layout e clique em Editar HTML guia.

Agora é só baixar o modelo anterior, e enviar este novo modelo a ela.

Como editar barra de navegação do n º 1:

Basta ficar na página html e encontrar esses códigos com Ctrl + F.

Basta pesquisar

id='pagemenucontainer'> <div

Troca da ligação com o # e título com o título

Como editar barra de navegação no 2:

Basta ficar na página html e encontrar esses códigos com Ctrl + F.

Basta pesquisar

class='navcontainer'> <div

Troca da ligação com o # e título com o título

Como editar o banner superior:

Ir para layout e clique na guia Editar HTML

Agora , procure por esses códigos

<div class='span-13 last' style='padding-top: 15px; text-align:right;'>

Mude o seu banner com link patrocinadores imagem e url.

Como editar o banner da barra lateral:

Ir para layout e clique na guia Editar HTML

Agora , procure por esses códigos

class='sidebaradbox'> <div

Mude o seu banner com link patrocinadores imagem e url.

Como editar o widget Twitter Social:

Ir para layout e clique na guia Editar HTML

Agora , procure por esses códigos com Ctrl + F.

http://twitter.com/Twitter Nome de Usuário

Substituir Twitter Nome de Usuário com o seu username conta twitter.

Se você quiser melhorar ainda mais e torná-lo mais Search Engine amigável , então veja estas Blogger dicas e truques

=> Modelos Download Mais Aqui <=

Extreme Blogger Template

Aqui está um novo modelo de Blogger - Blogger Template Extreme .

Este modelo do Blogger é muito profissional blogger modelo que é convertido a partir do tema CSS para blogger com grande esforço .

Informações Template :

Modelo Tipo: Blogger Template
Nome do Modelo : Extreme Blogger Template
Licença : Free Template + Licença Creative Common
Converter: BloggerTheme
Designer CSS: Templatemo
Características:

Um layout colunas

Nenhum Sidebar

Menu de Navegação Superior

3 Footer Columns

Slider Posts em Destaque

Leia Mais Ready Hack

largura fixa

Widget Ready

Cor marrom.

Como instalar este modelo:

Como editar barra de navegação :

Basta ficar na página html e encontrar esses códigos com Ctrl + F.

Basta pesquisar

id='templatemo_menu'> <div

Troca da ligação com o seu # eo título com o título

Como editar o controle deslizante em destaque:

Primeiro, vá para layout e clique em editar html

Agora , procure por

id='templatemo_slider'> <div

Agora olhe para estes códigos

class='left'> <div <h2>Lorem ipsum dolor sit amet</ H2> <p>Aliquam leo lectus , hendrerit ac em tempor , laoreet nibh et . Phasellus consequat velit ac aliquam mi vulputate . </ P> class='button'> <div <a href='#'> </ a > < / div> </ Div> class='right'> <div <A href = "# seus links para os posts aqui> 'target = _parent ' < img alt = " Modelo 1 " src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSBx_1hhAAbYSyujE617Vwmyj-LE0j14zeXG8fnSrhT5CLfkDlqimtsh0tP7bMPwVRMrTZtQlGmu07WP95hMOMu2c2_epMIPSMPULwkBYj59SMk7iHo5PEqr1fDGzMLBnJjJKoY66EomY/s1600/1.jpg'/> </ A> </ Div>

Substituir Vermelho Link com cor seu link post

Substituir Azul cor com o seu Título da mensagem e Descrição Post

Substituir Verde Link com cor sua ligação direta da imagem.

Se você quiser melhorar ainda mais e torná-lo mais Search Engine amigável , então veja estas Blogger dicas e truques

=> Modelos Download Mais Aqui <=

Passando Template Blogger Green

Aqui está um novo Blogger Template - Turning Green Blogger Template.

fonte e créditos:
bloggerthemenet

"Política de Privacidade - Google AdSense"

2013-03-16T19:18:00.000-07:00

boa tarde...

2011-05-21T09:53:00.000-07:00

http://www.arqblog.com.br

Aprenda a deliciosa receita:Cupcakes ...

2011-05-20T21:31:00.000-07:00

fonte e creditos:

.arqblog/culinaria/

“Cupcakes de morango com chocolate branco da geada”

Cupcakes de morango com chocolate

branco da geada

Bolinhos deliciosos…

Morango e Chocolate Branco …

Cupcakes de morango com chocolate branco da

geada     Rendimento: 34 cupcakes
    Ingredientes:
    BOLO:
    2 3 / 4 xícaras de farinha de trigo
    1 / 2 xícara de farinha para bolos (não auto-aumento)
    1 colher de sopa de fermento em pó
    1 colher de chá de sal
    8 onças (2 varas) manteiga sem sal, amolecida
    2 1 / 4 xícaras de açúcar
    3 ovos grandes, mais 1 ovo grande branco
    1 xícara de leite integral
    1 1 / 2 colheres de chá de extrato de baunilha
    2 xícaras de morango picado, mais morangos pequenos para enfeite
    Cobertura:
    10 oz de chocolate branco
    1 1 / 2 sticks de manteiga
    1 1 / 2 colher de chá de baunilha
    cerca de 4 xícaras de açúcar em pó
    cerca de xícara de leite 1 / 4 (com base na consistência desejada)
    Instruções:
    BOLO:
    Pré-aqueça o forno a 350F. Linha padrão forminhas de papel com linhas.
    Peneire juntos a farinha, o fermento eo sal. Ponha de lado.
    Coloque a manteiga, o açúcar ea baunilha na tigela da batedeira. Creme de médio-alto até ficar fofo. Adicione os ovos inteiros e clara de ovo, um de cada vez, batendo até que cada um está totalmente incorporada. Raspe as laterais da tigela quando necessário. Mude a velocidade para baixo, adicione a mistura de farinha em 2 lotes, alternando com o leite. Bata até misturar bem. Dobre os morangos picados com a mão.
    Encha cada liner de papel com massa 3 / 4 cheio. Leve ao forno, girando a meio caminho através de panelas, até dourar e um palito inserido no meio saia limpo, 20-30 minutos. Transfira para uma gradinha para esfriar por 15 minutos, depois vire cupcakes para fora em rack para esfriar completamente.
    Cobertura:
    Derreta o chocolate branco em banho-maria (ou no microondas), mexendo sempre. Não cozinhe demais! Uma vez derretido removido do fogo e deixe esfriar um pouco. Enquanto isso, bata a manteiga. Adicione o chocolate à manteiga. Continue a misturar em baixa a velocidade média durante a adição da baunilha. Aos poucos, adicione o açúcar no leite e até geada atinge a consistência desejada.
    Cupcakes de livro de Martha Stewart Cupcakes
    Geada, como visto… no ErinsFoodFiles

fonte:

http://www.erinsfoodfiles.com

"Política de Privacidade - Google AdSense"

2011-05-20T18:06:00.000-07:00

Saiba Como é feito:..."Menu horizontal com buscador e setas para deslizar o blog"

2011-05-16T21:36:00.000-07:00

esta postagem, foi pesquisada em:
templateseacessorios.

... há tempos queria aprendê-la , e, aqui está:

"Menu horizontal com buscador e setas para deslizar o blog"

Menu com efeito hover nos botões, seta para subir e descer o blog e buscador.

Para instalá-lo vá até o HTML de seu blog e procure por:

]]></b:skin>

... /\ ... encontrando o código ,
cole o código abaixo, acima dele ( ]]></b:skin>)
...\/...

/*Menu horizontal-----------------------------------*/
#nav{height:42px;border-bottom:1px solid #ddd;position:fixed;top:0px;left:0px;right:0px;background:#fff url(http://1.bp.blogspot.com/_BaCxSD9NFn8/TGIsV_8BGlI/AAAAAAAAB9k/GRL5MvDGjeY/s1600/nav.png) repeat-x center left;border-bottom: 1px dashed #cc0000;}
#nav ul{height:25px;list-style:none;margin:6px auto 0px auto;width:980px;}
#nav ul li{display:inline;float:left;margin:0 2px;}
#nav a{font-size:11px;font-weight:bold;float:left;padding: 3px 6px;color:#999;text-decoration: none;border:1px solid #ccc;cursor: pointer;background:transparent;height:18px;line-height:18px;}
#nav a:hover{background:#D9D9DA none;color: #fff;}
#nav a.top span, #nav a.footer span{float:left;width:16px;height:16px;}
#nav a.top span{background:transparent url(http://4.bp.blogspot.com/_BaCxSD9NFn8/TGIrY6X8fxI/AAAAAAAAB9c/k3x_mq8A79I/s1600/001_24.png) no-repeat center center;}
#nav a.footer span{background:transparent url(http://2.bp.blogspot.com/_BaCxSD9NFn8/TGIrXfqMxLI/AAAAAAAAB9U/lAGmfD1AWW4/s1600/001_22.png) no-repeat center center;}
#back {font-size:11px;font-weight:bold;background:#fff;border: 1px solid #ddd;float:left;color:#999;
height:14px;margin-right:8px;width:218px;padding:5px}
#proc {margin-top:3px;float:left;width:23px;height:19px}

Agora procure por:

<div id='header-wrapper'>

E cole o próximo código acima dele fazendo as modificações necessárias.

<div id='nav'>
<ul>
  <li><a class='top' href='#header'><span/></a></li>
  <li><a class='footer' href='#footer'><span/></a></li>
  <li><a href='#'>Home</a></li>
  <li><a href='ENDEREÇO DO FACEBOOK'>Facebook</a></li>
  <li><a href='ENDEREÇO DO TWITTER'>Twitter</a></li>
  <li><a href='ENDEREÇO DO GOOGLE BUZZ'>Buzz</a></li>
  <li><a href='ENDEREÇO DO FEED'>Feed</a></li>
  <li class='search'>
   <span>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='back' maxlength='255' name='back' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' title='search' type='text' value='Procurar...'/>
<input alt='' id='proc' name='proc' src='http://3.bp.blogspot.com/_FXIne2ZDJII/TO75Wg730FI/AAAAAAAAEDw/N9DXDDBylwY/s1600/zoom.png' type='image'/>
</form></span></li></ul></div>

fonte/créditos:

Templates & Acessórios

Aqui neste espaço... Apenas divulgo e indico... Posts, notícias, dicas etc. com devidas fontes e créditos:

você está em: http://noticiashoje3x.blogspot.com

aprenda como é feito:... " Um menu minimalista"

2011-01-26T22:29:00.000-08:00

Aqui neste espaço...

Apenas divulgo e indico...

Posts, notícias, dicas etc.

com devidas fontes e créditos:

você está em:http://noticiashoje3x.blogspot.com

fonte e créditos:
http://vagabundia.blogspot.com
/2011/01/un-menu-minimalista.html

" Un menú minimalista"

La idea de tutorialzine.com no es sólo minimalista proque así llaman a este tipo de menú sino porque permite entender cómo funcionan determinadas propiedades CSS y cómo podemos combinarlas.

El HTML es sencillo y no tiene diferencias con tantos otros; es una lista a la que identificamos con un ID y en la que en cada item incluimos un enlace cuyo texto está dentro de otra etiqueta:

<ul id="navigationMenu">
  <li>
    <a class="home" href="#">
      <span>Home</span>
    </a>
  </li>
  .......
</ul>

¿Por qué usar la etiqueta SPAN y no poner directamente el texto? Justamente para poder combinar propiedades.

Necesitamos una imagen que usaremos de fondo y que será un sprite es decir, una serie de botoncitos todos iguales que se unen en una sola imagen; de esa manera, la carga será más rápida, usamos una sola imagen en lugar de varias. Para aplicarles un fondo a cada item de la lista, estos deben estar dimensionados y se deben tener la propiedad overflow:hidden

En este caso, de izquierda a derecha, el primer botón estará en la posición 0, el segundo comienza en el pixel 38, el tercero en el 76, el cuarto en el 114 y el último en el 152; para calcular eso, simplemente vamos sumando anchos. Lo mismo ocurre cono los de abajo así que podemos usar background-position para posicionar el fondo y de ese modo, mostrar solo un pedacito de la imagen, basta usar esos valores colocándolos como negativos lo que desplazará la imagen original:

Empezamos entonces con las definiciones básicas; a los items de la lista se les da un tamaño fijo y se los separa un poco entres si; como las etiquetas LI son etiquetas de bloque, se verán una debajo de la otra:

#navigationMenu li {
  height: 39px;
  list-style: none;
  padding: 2px;
  width: 38px;
}

Cada item contiene un enlace que siempre usa la misma imagen y al que transformamos en bloque para poder dimensionarlo :

#navigationMenu a {
  background:url(URL_imagen) no-repeat;
  display:block;
  height:39px;
  position:relative;
  width:38px;
}

Ahora, definiremos el SPAN es decir el texto en si mismo al que posicionaremos de manera absoluta dentro del enlace y usando left, lo pondremos justo donde termina el botón pero, lo mantendremos oculto colocándole cero a su ancho:

#navigationMenu span {
  left: 38px;
  overflow: hidden;
  position: absolute;
  width: 0;
  /* le agregamos cualquier propiedad para las fuentes */
  color: #FFF;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 39px;
  text-shadow: 2px 2px 1px #000;
}

Y ahora los efectos hover que funcionarán cuando ponemos el cursor encima:

#navigationMenu a:hover {
  text-decoration:none;
}

Le indicamos que, cuando pones el cursor sobre la etiqueta A, se muestre el contenido del SPAN que está adentro de ella:

#navigationMenu a:hover span {
  overflow: visible;
  padding: 0 20px;
  width:auto;
}

Sólo falta ubicar los botones de cada item que hemos identificado con clases así que:

#navigationMenu .home { background-position:0 0; }
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span { background-color:#7DA315; }

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{ background-color:#1E8BB4; }

#navigationMenu .services { background-position:-76px 0; }
#navigationMenu .services:hover { background-position:-76px -39px; }
#navigationMenu .services span{  background-color:#C86C1F; }

#navigationMenu .portfolio { background-position:-114px 0; }
#navigationMenu .portfolio:hover{ background-position:-114px -39px; }
#navigationMenu .portfolio span{ background-color:#D0A525; }

#navigationMenu .contact { background-position:-152px 0; }
#navigationMenu .contact:hover { background-position:-152px -39px; }
#navigationMenu .contact span{ background-color:#AF1E83; }

En el ejemplo original puede verse que también hay alguna propeidad de animación que sólo funcioanrá en Chrome/Safari así que por ahora, hasta que algunos otros navegadores comiencen a utilizarla, me abstengo de ella pero, puede agregarse sin problemas.

traduzido

" Um menu minimalista"

A idéia de tutorialzine.com ProQuad não é apenas o mínimo e chamar este tipo de menu, mas ajuda a entender como certas propriedades CSS e como podemos combiná-los.

HTML é simples e não difere de muitos outros, é uma lista que identifica com uma identificação e na qual cada item incluído um link cujo texto está dentro de um tag:

id="navigationMenu"> <ul
  <li>
    <a class="home" href="#">
      <span> Home </ span>
    </ A>
  </ Li>
  .......
</ Ul>

Por que usar a tag SPAN e não colocar o texto diretamente? Só para ser capaz de combinar as propriedades.

Precisamos de uma imagem de fundo de usar e será duende ou seja, uma série de botões no mesmo para se unirem em uma única imagem, dessa forma, a carga será mais rápida, usamos uma única imagem em vez de vários. Para aplicar um background de cada item na lista, devem ser dimensionados e deve ter a propriedade overflow: hidden

Neste caso, da esquerda para a direita, o primeiro botão está na posição 0, a segunda começa no 38 pixels, o terceiro em 76, a quarta nos 114 e os últimos no 152, para calcular que, apenas deixe acrescentando largura. O mesmo é verdadeiro do cone abaixo para que possamos usar background-posição a posição do fundo e, portanto, mostram apenas um pouco da imagem, basta usar os valores como negativa, colocando o que move a imagem original:

Em seguida, começou com as definições básicas, uma lista de itens é dado um tamanho fixo e são separados um pouco se você vem, e as tags são tags LI bloco, será um acima do outro:

NavigationMenu li # {
  height: 39px;
  list-style: none;
  padding: 2px;
  width: 38px;
}

Cada item contém um link que sempre usa a mesma imagem e transformamos quadra de dimensão:

NavigationMenu # um {
  url (URL_imagen) no-repeat;: fundo
  display: block;
  height: 39px;
  position: relative;
  width: 38px;
}

Agora, vamos definir a extensão é o texto que vai posicionar-se como uma necessidade absoluta para o loop e utilizando esquerda, direita, onde vai colocar o botão, mas mantê-lo escondido, colocando zero a sua largura:

# NavigationMenu span {
  left: 38px;
  overflow: hidden;
  position: absolute;
  width: 0;
  / * Nós adicionamos qualquer propriedade para o * Fontes /
  color: # FFF;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 39px;
  text-shadow: 2px 2px 1px # 000;
}

E agora os efeitos funcionará quando passar o mouse sobre:

# NavigationMenu a: hover {
  text-decoration: none;
}

Ele indicou que, quando você colocar o cursor na marca A, exibir o conteúdo de SPAN está dentro dele:

# NavigationMenu a: hover {span
  overflow: visible;
  padding: 0 20px;
  width: auto;
}

Resta apenas a colocação dos botões para cada item que temos identificado com as classes da seguinte forma:

#. NavigationMenu Home {background-position: 0 0;}
#. NavigationMenu Home: hover {background-position: 0-39px;}
# NavigationMenu Home span {background-color: # 7DA315;}.

# NavigationMenu Sobre {background-position:-38px 0;}.
# NavigationMenu Sobre: hover {background-position:-38px-39px;}.
# NavigationMenu Sobre span {background-color: # 1E8BB4;}.

#. NavigationMenu Serviços {background-position:-76px 0;}
#. NavigationMenu Serviços: hover {background-position:-76px-39px;}
#. NavigationMenu Serviços span {background-color: # C86C1F;}

#. NavigationMenu Carteira {background-position:-114px 0;}
#. NavigationMenu portfólio: hover {background-position:-114px-39px;}
# NavigationMenu Carteira span. {Background-color: # D0A525;}

#. NavigationMenu Contato {background-position:-152px 0;}
# NavigationMenu Contato: hover {background-position:-152px-39px;}.
#. NavigationMenu span Contato {background-color: # AF1E83;}
Início
Perfil
Redes
Carteira
Contato

No exemplo original pode ser visto que há alguma animação propeidad funcioanrá só no Chrome / Safari então, por enquanto, até que alguns outros navegadores começam a usá-lo, abstenho-me de ele, mas podem ser adicionados sem problemas.

Código para colocar fundo em seu blog

2011-01-14T00:46:00.000-08:00

Código para colocar fundo em seu blog

fonte e créditos:

http://templateseacessorios.blogspot.com/2009/04/codigo-para-colocar-fundo-em-seu-blog.html

Código para colocar fundo em seu blog

"Vá até "Elementos de página", e abra um HTML/Javascript. Cole lá o código e insira o endereço da imagem. Salve e pronto.

Para a imagem se repetir:

<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3E%0Abody%20%7B background-image %3A%20url%28%22 AQUI O ENDEREÇO DA IMAGEM %22%29%3B%20background-position%3A%20center%3B%20background-repeat%3A%20repeat%3B%20 background-attachment %3A%20fixed%3B%20%7D%0A%3C/style%3E%0A%3Cdiv%20id%3D%22tag%22%20 style%3D%22position%3Aabsolute %3B%20left%3A0px%3B%20top%3A30px%3B%20z-index%3A50%3B%20 width%3A150px%3B%20height%3A45px%3B%22%3E%0A%3Ca%20href%3D%22 %22%20border%3D%220%22/ %3E%0A%3C/a%3E%3C/div%3E%20"));</script>

Para a imagem não se repetir, o código é este:

<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3E%0Abody%20%7B background-image %3A%20url%28%22 AQUI O ENDEREÇO DA IMAGEM %22%29%3B%20background-position%3A%20center%3B%20background-repeat%3A%20no-repeat%3B%20 background-attachment %3A%20fixed%3B%20%7D%0A%3C/style%3E%0A%3Cdiv%20id%3D%22tag%22%20 style%3D%22position%3Aabsolute %3B%20left%3A0px%3B%20top%3A30px%3B%20z-index%3A50%3B%20 width%3A150px%3B%20height%3A45px%3B%22%3E%0A%3Ca%20href%3D%22 %22%20border%3D%220%22/ %3E%0A%3C/a%3E%3C/div%3E%20"));</script>

Aprenda como se faz:..."Menu em abas para widget no Blogger"

2011-01-12T22:22:00.000-08:00

Aqui neste espaço...

Apenas divulgo e indico... :

Posts, notícias, dicas etc.

com devidas fontes e créditos:

você está em:http://noticiashoje3x.blogspot.com

fonte e créditos:

http://templateseacessorios.blogspot.com

"Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI"

DEMO

Vá até o HTML de seu blog e troque:

]]></b:skin>

pelo código abaixo(ajuste a largura indicado na

cor vermelha)

/* Tabs
----------------------------------------------- */
#tabs {
   width: 370px !important;
   height: auto !important;
        margin: 2px 0px 6px 8px;
   padding: 5px 9px 5px -2px;
   border: 1px solid #ddd;
   float: left;
   display: block;
   background: #eee;
}
#tabs h2 {
   display: none;
}
.inside {
   width: 348px !important;
   padding: 5px 5px 10px 5px!important;
   border: 1px solid #ddd !important;
   margin: 5px 4px 10px !important;
   background: #FFF;
}
ul.wooTabs {
   width: 100%;
   padding: 0 0 20px 6px;
}
ul.wooTabs li {
   float: left;
   display: inline;
   font-size: 11px;
   line-height: 14px;
   background: #fff;
   color: #000;
   border: 1px solid #ddd;
   font-weight: bold;
   margin: 0 2px 0 0px !important;
   cursor: pointer;
}
ul.wooTabs li a {
   line-height: 31px;
   color: #000 !important;
   display: block;
   float: left;
   padding: 0 6px;
}
ul.wooTabs li a.selected, ul.wooTabs li a:hover {
   text-decoration: none;
   color: #fff !important;
   background: #C00;
}
#tagcloud {
   padding: 10px;
}
#sub img {
   float: right;
   margin: 0 0 8px 8px;
}
.inside li {
   background: ;
   border-bottom: 1px solid #EEE;
   padding: 8px 0 0 2px;
   margin: 0 0 0 -30px;
        list-style-type: none;
}
.inside li img.avatar, .inside li img.thumbnail {
   border: 1px solid #ddd;
   padding: 3px;
   float: left;
   margin: 0 8px 0 0;
   background: #fff;
}

]]></b:skin>


<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2-vsdoc2.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){

        // UL = .wooTabs
        // Tab contents = .inside

       var tag_cloud_class = '#tagcloud';

              //Fix for tag clouds - unexpected height before .hide()
            var tag_cloud_height = jQuery('#tagcloud').height();

       jQuery('.inside ul li:last-child').css('border-bottom','0px') // remove last border-bottom from list in tab conten
       jQuery('.wooTabs').each(function(){
           jQuery(this).children('li').children('a:first').addClass('selected'); // Add .selected class to first tab on load
       });
       jQuery('.inside > *').hide();
       jQuery('.inside > *:first-child').show();
       jQuery('.wooTabs li a').click(function(evt){ // Init Click funtion on Tabs
        var clicked_tab_ref = jQuery(this).attr('href'); // Strore Href value    jQuery(this).parent().parent().children('li').children('a').removeClass('selected'); //Remove selected from all tabs
            jQuery(this).addClass('selected');
            jQuery(this).parent().parent().parent().children('.inside').children('*').hide();

            /*
            if(clicked_tab_ref === tag_cloud_class) // Initiate tab fix (+20 for padding fix)
            {
                clicked_tab_ref_height = tag_cloud_height + 20;
            }
            else // Other height calculations
            {
                clicked_tab_ref_height = jQuery('.inside ' + clicked_tab_ref).height();
            }
            */
             //jQuery('.inside').stop().animate({
            //    height: clicked_tab_ref_height
            // },400,"linear",function(){
                    //Callback after new tab content's height animation
                    jQuery('.inside ' + clicked_tab_ref).fadeIn(500);
            // })

             evt.preventDefault();
})
    })
//]]>
</script>

Agora acima de:
<div id='sidebar-wrapper'>

Cole o código abaixo. (Note que para as abas

funcionarem os elementos precisam corresponder

a

grafia no endereço, no id e no class.

"Fiz esse

esqueminha de cores para vc entender)"

<div id='tabs'>
<ul class='wooTabs tabs'>
<li><a href='#pop'>Popular </a></li>
<li><a href='#perfil'>Perfil </a></li>
<li><a href='#feed'>Feed </a></li>
<li><a href='#marcadores'>Marcadores </a></li>
<li><a href='#seguidores'>Seguir </a></li>
</ul>

<div class='fix'/>
<div class='inside'>

<div id='pop'>
<b:section class='pop' id='pop' maxwidgets='1'>
<b:widget id='PopularPosts2' locked='true' title='Postagens populares' type='PopularPosts'/>
</b:section></div>

<div id='perfil'>
<b:section class='perfil' id='perfil' maxwidgets='1'>
<b:widget id='Profile1' locked='true' title='Quem sou eu' type='Profile'/>
</b:section></div>

<div id='feed'>
<b:section class='feed' id='feed' maxwidgets='1'>
<b:widget id='Subscribe1' locked='true' title='Inscrever-se' type='Subscribe'/>
</b:section></div>

<div id='marcadores'>
<b:section class='marcadores' id='marcadores' maxwidgets='1'>
<b:widget id='Label1' locked='true' title='Labels' type='Label'/>
</b:section></div>

<div id='seguidores'>
<b:section class='seguidores' id='seguidores' maxwidgets='1'>
<b:widget id='Followers1' locked='true' title='Seguir' type='Followers'/>
</b:section>
</div>

</div></div>
<div class='fix' style='height:15px !important;'/>

Aqui neste espaço...

Apenas divulgo e indico...

Posts, notícias, dicas etc.

com devidas fontes e créditos:

você está em:http://noticiashoje3x.blogspot.com

Mobile...Novo Blogger / Blogspot Template...

2010-12-25T12:56:00.000-08:00

Aqui neste espaço...

Apenas divulgo e indico...

Posts, notícias, dicas etc.

com devidas fontes e créditos:

você está em:http://noticiashoje3x.blogspot.com

fonte e créditos:

http://www.ipietoon.com/

2010/12/new-bloggerblogspot-mobile-template.html

New Blogger/Blogspot Mobile Template Feature

25 Dec, 2010

Filed Under: Blogger News, Blogger Trick, Blogging Tips |

Last Friday, Blogger has announced a new Blogger feature, Mobile View Feature. Many of us use mobile phone to access blog. It difficult to view desktop version on mobile phone screen size. Some of us ask about how to set mobile view for our blog? Now, we can set mobile view on our blog because Blogger has created mobile template feature.

Initially available as opt-in functionality on Blogger in Draft, mobile templates will re-format your blogs for smartphones to enhance your readers’ viewing experience. In order to activate mobile templates, simply go to Dashboard > Settings > Email & Mobile tab, enable the mobile template option and then save settings. For now, this is beta feature so you can access it through http://draft.blogger.com

Feature highlights

Preview: Get a glimpse of what your blog will look like by clicking on the Mobile Preview button. You can also see it on your smartphone by scanning the QR-code to the right of the options.
Automatic redirection: All opted-in blogs will automatically be redirected to the mobile view when accessed from a smartphone*.
Template support: We are initially supporting 6 variants of the Simple template and 6 variants of the Awesome template. If you have used one of these 12 templates through our Template Designer, your mobile view will be rendered in the same style as your desktop view (other template variants will be rendered as Simple). Some gadgets are also supported**.

Mobile ads: Mobile AdSense ads will be displayed at the top of the post pages and at the bottom of the index page if the blog has an AdSense gadget or inline blog ads.

I have tried it but, the mobile view doesn't redirected yet. You can try it and pick the mobile address http://www.ipietoon.com/?m=1 or http://yourblog.blogspot.com/?m=1

traduzido:

Novo Blogger / Blogspot Template Feature Mobile

25 Dezembro, 2010

..." o Blogger anunciou um novo Blogger recurso, Visão Celular Matéria. Muitos de nós uso móvel telefone para aceder ao blog. É difícil ver desktoptelefone móvel tamanho da tela. Alguns de nós perguntar sobre como definir a exibição móvel para o nosso blog? Agora, podemos definir a exibição móvel em nosso blog porque o Blogger criou modelo de celular recurso.

Inicialmente disponível como opt-in funcionalidade no Blogger in Draft, Modelos de móveis re-formatar seus blogs para smartphones para melhorar a experiência dos seus leitores de visualização. Para ativar celular modelos, basta ir à Configurações Painel>> aba Email & Mobile, Ative a opção modelo de celular e, em seguida, salvar as configurações. Por agora, este é beta recurso assim você pode acessá-lo através http://draft.blogger.com
versão em

Matéria destaca
Preview: Obtenha um vislumbre do que seu blog será semelhante clicando no botão Preview Mobile. Você também pode vê-lo em seu smartphone, digitalizando o QR-code para a direita das opções.
Redirecionamento automático: Todos optaram em blogs será automaticamente redirecionado para a exibição móvel quando acessado a partir de um smartphone *.
Modelo de apoio: Nós estamos apoiando inicialmente seis variantes do modelo de Simples e seis variantes do modelo impressionante. Se você já usou um destes 12 modelos através do nosso design do template, a sua visão móveis serão prestados no mesmo estilo como o seu desktop vista (variantes outro modelo será processado como simples). Alguns aparelhos também são compatíveis **.

Os anúncios para telemóvel: Mobile Os anúncios do AdSense será exibido no topo das páginas posto e na parte inferior da página de índice se o blog tem um gadget anúncios do AdSense ou blog inline.
..." tenho tentado, mas a visão celular não é redirecionado ainda."

" Você pode experimentá-lo e pegar o endereço de móveis"

" http://www.ipietoon.com/?m=1 ou http://yourblog.blogspot.com/?m=1"

tags: Blogger , Notícias , Dicas

Aprenda Como se faz:... "Menu Horizontal com Abas para Blogger/Blogspot"

2010-12-25T12:13:00.000-08:00

Aqui neste espaço...

Apenas divulgo e indico...

Posts, notícias, dicas etc.

com devidas fontes e créditos:

Saiba Como se faz:...

"Menu Horizontal com Abas

para

Blogger/Blogspot"

fonte e créditos

http://www.noticiaeblog.com/2010/01/menu-horizontal-com-abas-para.html

Menu Horizontal com Abas para Blogger/Blogspot

" Um menu é uma lista de links que organiza e agrupa os principais links do blog de forma a ajuda o leitor a se orientar e encontrar o que procura.

" Neste menu é interessante concentrarmos links como os da home, contato, conteúdo mais discutidos ou vistos entre outros links. Além destes benefícios ele também da um ar de elegância ao Blog

deixando mais atrativo e convidativo a novas visitas" ...

..."    a instalação "                                                  >>>

1)Acesse o painel do Blogger (blogger.com)
2)Vá em "    Layout"->"   Editar HTML"
3)Procure pelo seguinte código utilize

"   Ctrl e F"   :

</head>

Antes do código acima insira o próximo:

<!--jquery-DD-Menu-Starts-->
<style type="text/css">
/* menu styles */
#jsddm
{ margin: 0;
padding: 0;}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial;}

#jsddm li a
{ display: block;
background: #324143; /*DARK-GREEN*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap;}

#jsddm li a:hover
{ background: #24313C;}

#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;}

#jsddm li ul li
{ float: none;
display: inline;}

#jsddm li ul li a
{ width: auto;
background: #A9C251; /*LIGHT-GREEN*/
color: #24313C;}

#jsddm li ul li a:hover
{ background: #8EA344;}
</style>


<!-- script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"  type="text/javascript"></script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}

$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);});

document.onclick = jsddm_close;
</script>
<!--jquery-DD-Menu-Stops-http://bloggerstop.net-->

4)Salve as alterações

Instalando no template

1)Vá agora em "   Layout"   - >"    Elementos da página"
->" Adicionar um Gadget"   ->Selecione "   HTML/JavaScript"

"   Como conteúdo insira o seguinte código alterando de acordo com a nota"

<!--BODY-CODE-->
<ul id="jsddm">
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">jQuery Plugin</a></li>
<li><a href="#">Ajax Navigation</a></li>
</ul>
</li>
<li><a href="#">Effect</a>
<ul>
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>
</li>
<li><a href="#">Navigation</a></li>
<li><a href="#">HTML/CSS</a></li>
<li><a href="http://noticiaeblog.com/">Ajuda para Blogueiros</a></li>
</ul>

Nota:

" O símbolo "   #"    reference aos links, em azul são os títulos dos links que serão exibidos no menu horizontal, altere de acordo com link escolhido."

2 ) "   Salve as alterações e visualize."

Referência:Bloggerstop.net

" Update: (10/11/2010) Erros corrigidos."

traduzido

tags: Blog, Blogger, CSS, Dicas, Gadget, HTML, Tutoriais

...Saiba Como se Faz:..."Menu em 8 abas"

2010-12-24T16:47:00.000-08:00

Aqui neste espaço...

Apenas divulgo e indico...

Posts, notícias, dicas etc.

com devidas fontes e créditos:

você está em:http://noticiashoje3x.blogspot.com

Aprenda Como se Faz:..."Menu em 8 abas"

... presente tutorial ,
fonte e créditos para:
http://templateseacessorios.blogspot.com/
2009/05/menu-em-8-abas.html

...sendo que,
assim como Eu,

Elke viu em Templates para VOCÊ, blog da Áurea...

... " Áurea tem alguns modelos,
inclusive,
ensina
a colocar
abas nos comentários. "

Elke, desenvolveu,

baseada

no código de Áurea, o Menu com 08 (oito) abas,
pois no

blog da

Áurea,

( http://www.templatesparavoce.com)
o Menu tem 04 (quatro) abas,

...e,

..." para facilitar ...

...colocou no blog,

http://templateseacessorios.blogspot.com/

..." o código"   ...

"    Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo."

..."   Vá até o HTML do seu blog e
cole
o código abaixo
antes de:

</head>

<script type='text/javascript'>

/*Important Function to blend the tabs in and out*/

function blendoff(idname) {document.getElementById(idname).style.display = 'none';}

function blendon(idname) {document.getElementById(idname).style.display = 'block';}

</script>

<script type='text/javascript'>

/*Function for our Tabmenu with 4 Tabs*/

function swichtabs(wert) {

if (wert=='1'){

</script>

" Copie
este próximo código
(que é o código onde você pode modificar as cores da barra do menu)
cole
acima de:"

]]></b:skin>

/*Example for a Menu Style*/
.menu {background-color:#3D40CB; color:#ffffff; border-bottom:1px solid #d7d7d7; height:23px; font:11px Arial, Helvetica, sans-serif;}
.menu ul {margin:0px; padding:0px; list-style:none; text-align:center;}
.menu li {display:inline; line-height:23px;}
.menu li a {color:#000000; text-decoration:none; padding:4px 5px 6px 5px; border-left:1px solid #ececec; border-right:1px solid #ececec;}
.menu li a.tabactive {border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; background-color:#8083FC; font-weight:bold; position:relative;}

(obs.: o no código acima, o que está na cor verde, pode ser alterado, a seu gosto!)

..." copie
este próximo código,
vá até 'Elementos da página"

e cole
no HTML/Javascript
em seu blog. "

" Faça as modificações e
salve."


<div class="menu">
<ul>
<li><a id="tablink1" onmouseover="blendon('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent3'); blendoff('tabcontent4'); blendoff('tabcontent5'); blendoff('tabcontent6'); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs('1');" href="#" class="tabactive" onclick="return false;" title="">Título 1 </a></li>

<li><a id="tablink2" onmouseover="blendon('tabcontent2'); blendoff('tabcontent1'); blendoff('tabcontent3'); blendoff('tabcontent4'); blendoff('tabcontent5'); blendoff('tabcontent6'); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs('2');" href="#" onclick="return false;" title="">Título 2 </a></li>

<li><a id="tablink3" onmouseover="blendon('tabcontent3'); blendoff('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent4'); blendoff('tabcontent5'); blendoff('tabcontent6'); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs('3');" href="#" onclick="return false;" title="">Título 3 </a></li>

<li><a id="tablink4" onmouseover="blendon('tabcontent4'); blendoff('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent3'); blendoff('tabcontent5'); blendoff('tabcontent6'); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs('4');" href="#" onclick="return false;" title="">Título 4 </a></li>

<li><a id="tablink5" onmouseover="blendon('tabcontent5'); blendoff('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent3'); blendoff('tabcontent4'); blendoff('tabcontent6'); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs('5');" href="#" onclick="return false;" title="">Título 5 </a></li>

<li><a id="tablink6" onmouseover="blendon('tabcontent6'); blendoff('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent3'); blendoff('tabcontent4'); blendoff('tabcontent5'); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs('6');" href="#" onclick="return false;" title="">Título 6 </a></li>

<li><a id="tablink7" onmouseover="blendon('tabcontent7'); blendoff('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent3'); blendoff('tabcontent4'); blendoff('tabcontent5'); blendoff('tabcontent6'); blendoff('tabcontent8'); swichtabs('7');" href="#" onclick="return false;" title="">Título 7 </a></li>

<li><a id="tablink8" onmouseover="blendon('tabcontent8'); blendoff('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent3'); blendoff('tabcontent4'); blendoff('tabcontent5'); blendoff('tabcontent6'); blendoff('tabcontent7'); swichtabs('8');" href="#" onclick="return false;" title="">Título 8 </a></li>

</ul>
</div>


<div id="tabcontent1" style="display:block;">

CONTEÚDO 1
</div>


<div id="tabcontent2" style="display:none;">

CONTEÚDO 2
</div>


<div id="tabcontent3" style="display:none;">

CONTEÚDO 3

</div>


<div id="tabcontent4" style="display:none;">

CONTEÚDO 4

</div>

<div id="tabcontent5" style="display:none;">

CONTEÚDO 5

</div>

<div id="tabcontent6" style="display:none;">

CONTEÚDO 6
</div>

<div id="tabcontent7" style="display:none;">

CONTEÚDO 7
</div>

<div id="tabcontent8" style="display:none;">

CONTEÚDO 8

</div>

Aprenda Como Fazer?..."Menu em abas no Blogger - Organize seus Gadgets"

2010-12-20T17:43:00.000-08:00

Aqui neste espaço...

Apenas divulgo e indico...

Posts, notícias, dicas etc.

com devidas fontes e créditos:

você está em:http://noticiashoje3x.blogspot.com

Menu em abas no Blogger - Organize seus Gadgets

Uma forma fácil de deixar seus Gadgets organizados é colocar um menu em abas, que além do mais diminui um pouco o espaço da sidebar, e deixa seu blog com uma cara mais profissional.

Tem blogs que são cheios de Gadget, é previsão do tempo,músicas,rádios,banners e outros, para organizá-los o menu é muito útil.

Veja abaixo como fazer no seu blog:

1. Acesse seu painel do Blogger

2. Vá em "Layout"->"Editar HTML"

''Faça um backup antes de começar, se não tiver muita experiência tente em um blog de testes."

3. Procure pelo código abaixo "Ctrl e F":</head>

Antes do código acima, adicione o código seguinte:

 <script src='http://noticiaeblog.googlecode.com/files/abas.js' type='text/javascript'/>

4. Agora vamos adicionar CSS, procure código seguinte:

]]></b:skin>

Antes do código acima adicione o código abaixo:

/*--------Tabber ---------------------------------*/ #tabsidebar-wrapper{width:400px;float: right;border: 1px none #CCC;margin-bottom: 15px;} .tabberlive .tabbertabhide {display:none;} .tabber {display:none;} .tabberlive {margin-top:1em;} .tabber h2 {border-bottom:2px solid #5B0;margin-bottom: .3em;padding: 0;line-height:1.2em;} .tabber .widget {margin-bottom: 1em;} .tabber .widget-content {margin: 0 5px;} ul.tabbernav{margin:0;padding: 8px 0;border-bottom: 1px solid #CCC;} ul.tabbernav li{list-style: none;margin: 0;display: inline;} ul.tabbernav li a{padding: 8px 0.5em;margin-right:2px;border: 1px solid #CCC;border-bottom: none;background: #EEE;text-decoration: none;} ul.tabbernav li a:link { color:#369;} ul.tabbernav li a:visited { color: #369;} ul.tabbernav li a:hover{color:#00F; background: #CCC; border-color: #CCC;} ul.tabbernav li.tabberactive a{background-color: #FFF;color: #369;border-bottom: 1px solid #FFF;} ul.tabbernav li.tabberactive a:hover{color: #369;background: #FFF;border-bottom: 1px solid #FFF;} .tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid #CCC;border-top:0;} .tabberlive .tabbertab h2 {display:none;} .tabberlive .tabbertab h3 {display:none;}

O número em vermelho refere-se a largura do menu, ajuste essa largura de acordo com se Layout.

5. Agora vamos adicionar o menu a sidebar, procure pelo código abaixo:

<div id='sidebar-wrapper'>

6. Antes do código acima adicione o seguinte código:

<div id='tabsidebar-wrapper'> <div class='tabber' id='tab1'> <div class='tabbertab'> <b:section class='sidebar' id='tabbertab1' maxwidgets='1' showaddelement='yes'/> </div> <div class='tabbertab'> <b:section class='sidebar' id='tabbertab2' maxwidgets='1' showaddelement='yes'/> </div> <div class='tabbertab'> <b:section class='sidebar' id='tabbertab3' maxwidgets='1' showaddelement='yes'/> </div> </div></div>

7.Salve as alterações e vá para " Layout"->"Elemento da página"

Você deverá ver um menu como esse da imagem

"Adicione os Gadgets desejados e veja o resultado"

fonte e créditos:

http://www.noticiaeblog.com/

2009/11/menu-em-abas-no-blogger-organize-seus.html

aprenda :..."Coloque uma imagem a rótulos ou laber"

2010-12-14T21:39:00.000-08:00

Aqui neste espaço...

Apenas divulgo e indico...

Posts, notícias, dicas etc.

com devidas fontes e créditos:

você está em:http://noticiashoje3x.blogspot.com

Poner una imagen a las etiquetas o laber

En la entrada anterior vimos como personalizar las etiquetas o laber.

Contestando a la pregunta de Toni Teror y un anónimo por correo, "¿cómo puedo poner una imagen así como la que tienes vos del papá noel?"

La imagen se agrega con estilo CSS.

background: url(http://...........);

Hay que agregarle mas estilos para que quede centrada, no se repita, para que se muestre a la derecha o izquierda y con una separación apropiada.

Imagen a la derecha:

padding-right: 24px;background: url(http://........) no-repeat center right;

Imagen a la izquierda: (solo cambiar right por left)

padding-left: 24px;background: url(http://........) no-repeat center left;

El código compreto quedara así:

a[href $='http://TU BLOG.blogspot.com/search/label/NOMBRE DE LA ETIQUETA']{color:#6699FF;font-size:28px;padding-right: 24px;background: url(http://........IMAGEN) no-repeat center right;}

Tener en cuenta:

Link

a:    Es para el link.
a:hover:    Es para el efecto del link a pasar el cursor.
http:// TU BLOG.blogspot.com/search/label/NOMBRE DE LA ETIQUETA:   Url de la etiqueta.
Estilos

color:#6699FF:    Color del texto.
font-size:28px:    Tamaño del texto.
padding-right: 24px:    Separación entre el texto y la imagen hacia la derecha del texto.
padding-left: 24px:    Separación entre el texto y la imagen hacia la izquierda del texto.
background: url(http://........ IMAGEN):   Url de la imagen. (cualquier formato)
no-repeat:   Para que la imagen no salga repetida.
center:    Para centrar la imagen con el texto.
right:    Para que la imagen se muestre a la derecha.
left:    Para que la imagen se muestre a la izquierda.

Elegir las imágenes con un tamaño apropiado y con relación al texto.

Seguro que van a tener que ajustar la distancia entre la imagen y el texto.

Eso lo hacen con el padding.

Si la imagen tiene un ancho de 20px pongan en el padding un ancho mayor, unos 22px o 24px.

Ejemplos con imagen y su código.

Mostrando la imagen a la derecha:

Código:

a[href $='http://loseasi.blogspot.com/search/label/Navidad']{color:red;font-size:24px;padding-right: 30px;background: url(http://........Navidad-Papa-Noel.gif) no-repeat center right;}



a:hover [href $='http://loseasi.blogspot.com/search/label/Navidad']{color:#006633;font-size:24px;}

a[href $='http://loseasi.blogspot.com/search/label/Blogger']{color:#FF6600;font-size:30px;padding-right: 24px;background: url(http://........blogger.gif) no-repeat center right;}

a[href $='http://loseasi.blogspot.com/search/label/Juegos']{color:#006633;font-size:24px;padding-right: 20px;background: url(http://........juegos.gif) no-repeat center right;}

a[href $='http://loseasi.blogspot.com/search/label/Uruguay']{color:#6699FF;font-size:26px;padding-right: 20px;background: url(........uruguay.gif) no-repeat center right;}

a[href $='http://loseasi.blogspot.com/search/label/Humor']{color:#FFFF00;font-size:20px;padding-right: 20px;background: url(........humor.gif) no-repeat center right;}

a[href $='http://loseasi.blogspot.com/search/label/Internet%20Explorer']{color:#000099;font-size:20px;padding-right: 22px;background: url(http://........internet-explorer.jpg) no-repeat center right;}

a[href $='http://loseasi.blogspot.com/search/label/Videos']{color:#333;font-size:28px;padding-right: 20px;background: url(http://........youtube-Video.png) no-repeat center right;}

a[href $='http://loseasi.blogspot.com/search/label/Facebook']{color:blue;font-size:28px;padding-right: 22px;background: url(http://........facebook.png) no-repeat center right;}

a[href $='http://loseasi.blogspot.com/search/label/twitter']{color:#6699FF;font-size:28px;padding-right: 24px;background: url(http://........twitter.png) no-repeat center right;}

Mostrando la imagen a la izquierda:

Código:

a[href $='http://loseasi.blogspot.com/search/label/Navidad']{color:red;font-size:24px;padding-left: 30px;background: url(http://........Navidad-Papa-Noel.gif) no-repeat center left;}



a:hover [href $='http://loseasi.blogspot.com/search/label/Navidad']{color:#006633;font-size:24px;}

a[href $='http://loseasi.blogspot.com/search/label/Blogger']{color:#FF6600;font-size:30px;padding-left: 24px;background: url(http://........blogger.gif) no-repeat center left;}

a[href $='http://loseasi.blogspot.com/search/label/Juegos']{color:#006633;font-size:24px;padding-left: 20px;background: url(http://........juegos.gif) no-repeat center left;}

a[href $='http://loseasi.blogspot.com/search/label/Uruguay']{color:#6699FF;font-size:26px;padding-left: 20px;background: url(........uruguay.gif) no-repeat center left;}

a[href $='http://loseasi.blogspot.com/search/label/Humor']{color:#FFFF00;font-size:20px;padding-left: 20px;background: url(........humor.gif) no-repeat center left;}

a[href $='http://loseasi.blogspot.com/search/label/Internet%20Explorer']{color:#000099;font-size:20px;padding-left: 22px;background: url(http://........internet-explorer.jpg) no-repeat center left;}

a[href $='http://loseasi.blogspot.com/search/label/Videos']{color:#333;font-size:28px;padding-left: 20px;background: url(http://........youtube-Video.png) no-repeat center left;}

a[href $='http://loseasi.blogspot.com/search/label/Facebook']{color:blue;font-size:28px;padding-left: 22px;background: url(http://........facebook.png) no-repeat center left;}

a[href $='http://loseasi.blogspot.com/search/label/twitter']{color:#6699FF;font-size:28px;padding-left: 24px;background: url(http://........twitter.png) no-repeat center left;}

Para los 2 ejemplos cambiar el link por el de su blog, el ling de la imagen y el estilo apropiado a la misma.

Hay muchas formas distintas de personalizar, como puede ser poner un fondo de color o una imagen de fondo, etc..

Eso se los dejo a su imaginación, solo tienen que hacer distintas pruebas y ver como va quedando con "vista previa"

Les dejo unos manuales básicos para saber como personalizar con CSS.

Manual HTML Básico
Guía de referencia CSS

fonte e créditos:

http://loseasi.blogspot.com/

2010/12/poner-una-imagen-las-etiquetas-o-laber.html

traduzido

Coloque uma imagem a rótulos ou laber

No post anterior vimos como etiquetas personalizadas ou laber.

Respondendo a pergunta de Toni Teror

e-mail anônimo, " como eu posso colocar uma imagem e que você tem Papai Noel?"

A imagem é adicionada com CSS.

url (http:// ...........);: fundo

Você tem que adicionar mais estilos por isso é centrada, não se repete, para mostrar para a direita ou esquerda, com a devida separação.

Imagem para a direita:

padding-direito: 24px; background: url (http:// centro ........) não repetir direito;

Imagem à esquerda: (basta alterar direita para a esquerda)

padding-esquerda: 24px; background: url (http:// centro ........) não repetir esquerda;

Compreto olhar código como:

para[Href $ = 'http://SEU BLOG. Pesquisar blogspot.com / label / /TAG NOME']{color: # 6699FF; font-size: 28px; padding-right: 24px; background: url (http:// ........IMAGEM) Centro-direita no-repeat;}

Por favor note:

Link

para: É para o link.
a: hover: É o efeito de qualquer link para mover o cursor.
http:// TU BLOG.blogspot.com / search / label /Crachá:Url do rótulo.

Estilos
color: # 6699FF: Cor do texto.
font-size: 28px: Tamanho do texto.
direito padding: 24px: A separação entre texto e imagem à direita do texto.
padding-left: 24px: A separação entre texto e imagem à esquerda do texto.
url (http:// ........: fundo IMAGEM)Url da imagem. (Qualquer formato)
não repetir: Assim que a imagem não sai repetidamente.
centro: Para centralizar a imagem com texto.
direita: Para exibir a imagem à direita.
esquerda: Para exibir a imagem à esquerda.

Selecione as imagens com um tamanho adequado e com o texto.

Certamente eles terão de se ajustar a distância entre imagem e texto. (padding)

Que eles fazem com o estofamento.(padding)

Se a imagem tem uma largura de 20px estofamento colocar a maior largura, aproximadamente 22px 24px ou.

Exemplos de imagens e código.

Mostrando a imagem da direita:

Código:

a [href $ = "http://loseasi.blogspot.com/search/label/Navidad '] {color: red; font-size: 24px; padding-right: 30px; background: url (http:// .. Natal Papa ...... Noel.gif) centro-direita no-repeat;}

<! - NATAL COM efeito pairar ->

a: hover [Href $ = 'http://loseasi.blogspot.com/search/label/Navidad'] {color: # 006633; font-size: 24px;}

a [href $ = "http://loseasi.blogspot.com/search/label/Blogger '] {color: # FF6600; font-size: 30px; padding-right: 24px; background: url (http://. ....... blogger.gif centro-direita) no-repeat;}

a [href $ = "http://loseasi.blogspot.com/search/label/Juegos '] {color: # 006633; font-size: 24px; padding-right: 20px; background: url (http://. ....... juegos.gif centro-direita) no-repeat;}

a [href $ = "http://loseasi.blogspot.com/search/label/Uruguay '] {color: # 6699FF; font-size: 26px; padding-right: 20px; background: url (..... ... uruguay.gif) centro-direita no-repeat;}

a [href $ = "http://loseasi.blogspot.com/search/label/Humor '] {color: # FFFF00; font-size: 20px; padding-right: 20px; background: url (..... ... humor.gif) centro-direita no-repeat;}

a [href $ = "http://loseasi.blogspot.com/search/label/Internet% 20Explorer '] {color: # 000099; font-size: 20px; padding-right: 22px; background: url (http:/ Internet explorer.jpg /........) centro direita não repetir;}

a [href $ = "http://loseasi.blogspot.com/search/label/Videos '] {color: # 333; font-size: 28px; padding-right: 20px; background: url (http://. ....... youtube-video.png) centro-direita no-repeat;}

a [href $ = "http://loseasi.blogspot.com/search/label/Facebook '] {color: blue; font-size: 28px; padding-right: 22px; background: url (http:// .. ...... facebook.png) centro-direita no-repeat;}

a [href $ = "http://loseasi.blogspot.com/search/label/twitter '] {color: # 6699FF; font-size: 28px; padding-right: 24px; background: url (http://. ....... twitter.png) centro-direita no-repeat;}

Mostrando a imagem da esquerda:

Código:
a [href $ = "http://loseasi.blogspot.com/search/label/Navidad '] {color: red; font-size: 24px; padding-left: 30px; background: url (http:// .. Natal Papa ...... Noel.gif) centro esquerda no-repeat;}

<! - NATAL COM efeito pairar ->

a: hover [Href $ = 'http://loseasi.blogspot.com/search/label/Navidad'] {color: # 006633; font-size: 24px;}

a [href $ = "http://loseasi.blogspot.com/search/label/Blogger '] {color: # FF6600; font-size: 30px; padding-left: 24px; background: url (http://. ....... blogger.gif) centro-esquerda no-repeat;}

a [href $ = "http://loseasi.blogspot.com/search/label/Juegos '] {color: # 006633; font-size: 24px; padding-left: 20px; background: url (http://. ....... juegos.gif) centro-esquerda no-repeat;}

a [href $ = "http://loseasi.blogspot.com/search/label/Uruguay '] {color: # 6699FF; font-size: 26px; padding-left: 20px; background: url (..... ... uruguay.gif) centro-esquerda no-repeat;}

a [href $ = "http://loseasi.blogspot.com/search/label/Humor '] {color: # FFFF00; font-size: 20px; padding-left: 20px; background: url (..... ... humor.gif) centro-esquerda no-repeat;}

a [href $ = "http://loseasi.blogspot.com/search/label/Internet% 20Explorer '] {color: # 000099; font-size: 20px; padding-left: 22px; background: url (http:/ /........) Internet explorer.jpg centro esquerda no-repeat;}

a [href $ = "http://loseasi.blogspot.com/search/label/Videos '] {color: # 333; font-size: 28px; padding-left: 20px; background: url (http://. ....... youtube-video.png) centro esquerda no-repeat;}

a [href $ = "http://loseasi.blogspot.com/search/label/Facebook '] {color: blue; font-size: 28px; padding-left: 22px; background: url (http:// .. ...... facebook.png) centro esquerda no-repeat;}

a [href $ = "http://loseasi.blogspot.com/search/label/twitter '] {color: # 6699FF; font-size: 28px; padding-left: 24px; background: url (http://. ....... twitter.png) centro esquerda no-repeat;}

Para os dois exemplos para alterar o link de seu blog, o ling da imagem e estilo apropriado a ele.

Há muitas maneiras de personalizar, como colocar um fundo colorido ou uma imagem de fundo, etc ..

Isso eu deixo para sua imaginação, você apenas tem que fazer vários testes e ver como ele está se tornando a "previsão"

Deixo-lhe um manual básico de como personalizar com CSS.

Manual Básico de HTML
Referência CSS

Saiba Como se Faz:: » Sidebar »" Expandindo cada widget do blog"

2010-12-08T20:37:00.000-08:00

Aqui neste espaço...

Apenas divulgo e indico...

Posts, notícias, dicas etc.

com devidas fontes e créditos:

você está em:http://noticiashoje3x.blogspot.com

» Sidebar » Expandindo cada widget do blog

Expandindo cada widget do blog

..." ter widget do seu blog expandível

como neste blog,

primeiro copie o título do widetg que você quer expandir."

Agora vá até o HTML do seu blog e

clique em " Expandir modelos de widget".

..." em seu teclado, clique na tecla F3 e cole aí o título do widget

..." Encontrando...

agora um pouco abaixo você verá um código assim:

<b:includable id='main'>

" Cole abaixo dele este código"
\/

<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>

*Preferindo uma imagem, troque o código em roxo por este código abaixo e coloque aí o endereço da imagem.

<img src="ENDEREÇO DA IMAGEM"/>

..." um pouco mais abaixo, procure por este código:

<div class='widget-content'>

" Agora embaixo dele cole este código abaixo"

\/

<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>

..." mais abaixo procure por este outro código"

<b:include name='quickedit'/>

..." cole acima dele este código:"

<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>

..." visualize,

se deu tudo certo,

é só salvar."

" Exemplo de como o código deverá ficar"

" O código em preto é o que deverá ter no HTML do seu blog, e a parte em vermelho é a que você irá inserir."

Deverá ficar assim:

<b:widget id='Text1' locked='false' title='Do coração' type='Text'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<data:content/>
</div>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

fonte e créditos:

http://templateseacessorios.blogspot.com/

2009/04/expandindo-cada-widget-do-blog.html

Obrigada Elke

» Dicas » Fundo transparente no blog

2010-12-08T19:47:00.000-08:00

Aqui neste espaço...

Apenas divulgo e indico...

Posts, notícias, dicas etc.

com devidas fontes e créditos:

você está em:http://noticiashoje3x.blogspot.com

» Dicas » " Fundo transparente no blog"

esta dica, vi em:
http://templateseacessorios.blogspot.com
/2010/08/fundo-transparente-no-blog.html

" Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo."

..." deixar seu blog com efeito de transparência, (quando se consegue enxergar a imagem de fundo)"

Vá até o HTML de seu blog e procure pelo trecho: (Considerendo que você usa o Mínima)

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

/\ Substitua o código acima, pelo código a seguir \/

#outer-wrapper {
width: 660px; opacity:0.9;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

..." só aumentou o código em azul, e que o número na cor vermelha representa a transparência, quanto menor o número mais transparente.

aprenda como é feito:..."Botão de retweet , passaro que voa"

2010-12-03T08:20:00.000-08:00

Botão de retweet que voa

Esta dica vi, em:
http://linkselinksnet.blogspot.com/2010/11/botao-de-retweet-que-voa.html

Botão de retweet que voa

..." o script poderia ser colocado em qualquer parte,
mas o pássaro também é um link para sua conta no Twitter e,
ao mesmo tempo, um botão de retweet, que aparece na parte superior e voa pela sua página, conforme você for movendo-a verticalmente. Então o melhor é colocá-lo no topo das postagens e condicioná-lo para que seja visível somente nas páginas individuais."

..." detalhe é que, ao pousar o mouse sobre o pássaro, ele abrirá duas opções:
Tweet this
e
Follow me"
Pode-se escolher a apção dentre as duas:

. Escolher um somente,
ou
. Pode-se escolher os dois.

Se o pássaro voador atrapalhar a leitura do texto,
é só movimentar o seu mouse sobre ele ,
que se deslocará.

Para inserir o script:

acesse PAINEL >>> DESIGN >>> Editar HTML.

Marque Expandir modelos de widgets e,
procure pelo trecho:

<data:post.body/>
(use CTRL+F)

e imediatamente antes,
cole o código abaixo:

<b:if cond='data:blog.pageType == "item"'>
<script src='http://oloblogger.googlecode.com/files/tripleflap.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
    var birdSprite="http://oloblogger.googlecode.com/files/birdsprite.png";
    var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select",
"ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
    var twitterAccount = "http://twitter.com/SEU PERFIL TWITTER";
    var tweetThisText = "TWEET ME: <data:post.url/>";
    tripleflapInit();
//]]>
</script>
</b:if>

Mude o valor da variável twitterAccount (SEU PERFIL TWITTER) e colocar o seu próprio.

Na segunda variável,

TweetThisText (TWEET ME) você pode colocar o que quiser.

Caso o teu template foi modificado e ,
você não encontrar o trecho acima,

procure por:

<div class='post-body entry-content'>

e insira o código antes dele.
-----------------------------------------------------------------------------------------------------
Créditos:

Oloman – Oloblogger   Cartagena, Espanha

JMiur – Vagabundia Buenos Aires, Argentina
------------------------------------------------------------------------------------------------------

"*Tutoriais originais em espanhol"
------------------------------------------------------------------------------------------------------
créditos e fonte deste presente post:
http://linkselinksnet.blogspot.com/2010/11/botao-de-retweet-que-voa.html
--------------------------------------------------------------------------------------