Postagens Recentes

30 de nov. de 2010

Slide com menu em forma de números

6 comentários:
DEMO

26 de nov. de 2010

Slide com atualizações automáticas

13 comentários:
A Rô do Bloggersphera deu um jeito, competente que é, de colocar as últimas postagens automaticamente em um dos slides qe acho bem bonito, o slide XXX de criação de Jonh Resig. Eu já havia o ensinado AQUI, mas como acho interessante essa estória de slide automático, vou reproduzir neste post como se faz o danado.

Dividir os marcadores (labels) do Blogger

Nenhum comentário:
Facílimoooooooooooooo...
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
Vá até o HTML de seu blog, procure por
]]></b:skin>
 Cole então acima dele este código abaixo.
#Label1 ul li{
float: left;
width: 45%;
Vi na Mamanunes ;-)

25 de nov. de 2010

Menu horizontal com buscador e setas para deslizar o blog

6 comentários:
Menu com efeito hover nos botões, seta para subir e descer o blog e buscador. Para instala-lo vá até o Modelo e clique em "Editar HTML":
Procure por:
]]></b:skin>
E cole o código abaixo acima dele.
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. Instale esse manu no template Simples. 
/*Menu horizontal-----------------------------------*/
#nav{height:42px;border-bottom:1px solid #ddd;position:fixed;top:0px;left:0px;right:0px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicTMmjBLwOalx9x_Jkj5U1xiS4rZV2tEONYUbXOxbrr6vKjWujSUneM4I-9bUAXRCp96o5Ph6uKE3GMcLN4T9LZB9NsIri6Hc3a2K5TG32iVLvfiBaB0aa-FmNYwVo3lJ9n31s-56zDGQ/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5QItiDUeo8B_7ITdYEpC9mYT0Sc6OAIWpwTPTDFyJ1QdUeu4TZeoAsO_BwFFVSGKlbtdFUBaFx80W0A3fHP_DC-i-lW-M3slitg8aJiO8u-9Piu3SHW6uqHd2ReCoOb79E9L2ZnkRMYA/s1600/001_24.png) no-repeat center center;}
#nav a.footer span{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZlK0mqU2cGyuAwGq-wSqUhGJfFk9e6ntTKoy_CWUTXnQ0jEOlZvUImKl34g8vcpfAVPQVzGldKz0xRAPfoYnMlq3l-uSczKB68s8mRGweBqTmg4qIJ2tmmn290ESThKlV8gJPNdreL6k/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:
<header>
 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 BLOGBLOGS'>BlogBlogs</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 == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' title='search' type='text' value='Procurar...'/>
<input alt='' id='proc' name='proc' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIu0xW_m9nX-kboxvN5PPDynfJji7CaMSnV2Kg8MOQo6EBnGzCXFS2dr7ll6iPB5W4nIYAtqQf665w-j43NLMvgPwT7udJpzcxd59PjpdPekXKlRnSGVR2BCzeNK5eTg1IBzjy0ajbb6g/s1600/zoom.png' type='image'/>
</form></span></li></ul></div>

Template Autuum

Um comentário:
Template estilo revista com vários hacks. Formulário para email, breadcrumbs, menu com botões sociais, leia mais, tables menu...
DEMO/PEGAR CÓDIGO
Para habilitar os botões sociais: (cuidado e atenção redobrada para não apagar aspas, pontos, vírgulas pois dará erro se isso acontecer)
Clique no botão F5 de seu teclado e procure por:
ENDEREÇO DO FACEBOOK e substitua pelo endereço de seu Facebook ENDEREÇO DO TWITTER  e substitua pelo endereço de seu Twitter ENDEREÇO DO ORKUT e substitua pelo endereço de seu Orkut ENDEREÇO DO EMAIL e substitua pelo endereço de seu Email ENDEREÇO DO FEED e substitua pelo endereço de seu Feed
Para habilitar o formulário de email
Clique no botão F5 de seu teclado e procure por: ENDEREÇO DE SEU EMAIL AQUI, coloque então o endereço de seu email.

Código para não deixar a sidebar deslizar pelo blog

Um comentário:
Geralmente quando mexemos nos códigos do template e inserimos mais de uma coluna pode acontecer que quando a postagem é pequena a sidebar se desloque para a parte inferior da área dos posts. Para que isso não aconteça insira um dos códigos em vermelho, (dependendo de que lado esteja sua sidebar) acima da área da sidebar: (no HTML de seu blog)
<div style='clear: right;'/> (direita)
ou
<div style='clear:left;'/> (esquerda)
Visto no Blogersphera

24 de nov. de 2010

Link Feeds e feeds comentários acima da header

Nenhum comentário:
Adicione links para os Feeds de seu blog, o feed de postagem e o feed de comentários. Para coloca-los em seu blog no novo modelo "Simple"  vá até o editor de modelos de seu bloge clique em "Editar modelo"
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
Ao abrir a janela, procure por:
    <div class='header-outer'>
Agora cole o código abaixo acima dele.
<div id='feed-header'>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'><img alt='Subscrever Postagens' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9zCBNa56hWimWUQX_7KZfE4LiBuC814v503LQd-XWMiepAhmfRyTjUMUcMKPoUcNpUsoIPc69IW_37gJEHgOfZ-ydD3VBYqexoMKOQ16uYYomX4EW6l24hfBHcXyjJ0UfyxDu3t3t_chi/s1600/feed.png'/></a> <a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Feed Posts</a>
<a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'><img alt='Subscrever Comentários' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKIVzjuSDM-d033bfTty-zjFQ88PPclKZB0bFIWYQe4NX0P0_u4YA2UL7_tKWfbm0nPwgWBs3Tf-Iz5WPKOzvsXkOyFDLurXc6nnJQ46wkR5s9Sm-sw_yZUo6VdWGO82qAUNgaRa6lLX_N/s1600/feed_ballon.png'/></a> <a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Feed Comentários</a>
</div>
Para customizar basta copiar o código abaixo e colar acima de:  ]]></b:skin>
#feed-header{
margin:0 auto;
clear: both;
line-height: 2.5em;
font-size: 12px;
text-align: right;
#feed-header a{
font-size: 12px;
color: #000;/*cor da letra*/

22 de nov. de 2010

Efeito nas imagens dos posts

Um comentário:
Outro código que dá um belo efeito nas imagens.
Vitória do Brasil
/* en el div contenedor se verá la imagen en forma de miniatura */ .figure { background-color: #FFF; border: 10px solid #FFF; left:40%; /* la posición en la pantalla es la parte engorrosa del asunto */ position: relative; width:120px; /* el tamaño de la miniatura */ -moz-box-shadow: 0 3px 10px #CCC; /* algo de sombra en Mozilla y Chorme */ -webkit-box-shadow: 0 3px 10px #CCC; -moz-transform: rotate(3deg); /* lo rotamos levemente en Mozilla y Chorme */ -webkit-transform: rotate(3deg); } /* la imagen */ .figure img { width:100%; } /* el texto */ .figure span { display: block; text-align: center; /* cualquier otra propeidad, color, tamaño y tipo de fuente, etc */ } /* el efecto al poner el cursor encima */ .figure:hover { z-index: 9999; /* eliminamos la rotación y ampliamos la imagen por ejemplo tres veces */ -webkit-transform: rotate(0deg) scale(3); -moz-transform: rotate(0deg) scale(3); }
Copie o código e cole-o no editor de textos (onde você faz os posts) no modo "Editar HTML". Vc poderá colocar várias imagens, mas basta no entanto repetir o código que está na cor azul
<div class="figure">
<img src="ENDEREÇO DA IMAGEM" /><br />
ESCREVA AQUI</div>
<style>
/* en el div contenedor se verá la imagen en forma de miniatura */
.figure {
background-color: #FFF;
border: 10px solid #FFF;
left:40%; /* la posición en la pantalla es la parte engorrosa del asunto */
position: relative;
width:120px; /* tamanho da miniatura */
-moz-box-shadow: 0 3px 10px #CCC; /* sombra no Mozilla e Chorme */
-webkit-box-shadow:  0 3px 10px #CCC;
-moz-transform: rotate(3deg); /* lo rotamos levemente en Mozilla y Chorme */
-webkit-transform: rotate(3deg);
/* la imagen */
.figure img { width:100%; }
/* el texto */
.figure span {
display: block;
text-align: center;
/* cualquier otra propeidad, color, tamaño y tipo de fuente, etc */
/* el efecto al poner el cursor encima */
.figure:hover {
z-index: 9999;
/* eliminamos la rotación y ampliamos la imagen por ejemplo tres veces */
-webkit-transform: rotate(0deg) scale(3);
-moz-transform: rotate(0deg) scale(3);
</style>
Gracias Vagabundia ;-)
Outros efeitos AQUI

Expandir imagens ao passar o mouse

3 comentários:
 Para quem tem blog e utiliza iamagens eis um bom código para economizar espaço e organizar bem os posts.Super fácil e leve, pode ser usado direto nas páginas de postagem do blog, no modo "Editar HTML" img.expa { cursor: pointer; max-width: 150px; } img.expa:hover { max-width: none; }
<img class="expa" src="AQUI O ENDEREÇO DA IMAGEM" />
<style>
  img.expa {
    cursor: pointer;
    max-width: 150px;
  }
  img.expa:hover {
    max-width: none;
  }
</style>
Vagabundia
 Mas se quer mais praticidade, vá até o HTML de seu blog e depois de   ]]></b:skin> cole o código abaixo
<style>
  img.expa {
    cursor: pointer;
    max-width: 150px;
  }
  img.expa:hover {
    max-width: none;
  }
</style>
Agora vá até Configurações, agora clique em Formatação. Lá em baixo na página vc verá uma área em branco, cole o código abaixo e salve.
<img class="expa" src="AQUI O ENDEREÇO DA IMAGEM" />
Sempre que precisar basta colar o endereço da imagem desejada, se não, basta apagar.

19 de nov. de 2010

Imagens de neve e estrelinha

Nenhum comentário:
Clique sobre a imagem, salve em seu computador, hospede-as e cole no script para a neve cair em seu blog. Pegue o código AQUI.
Todas as imagens tem o fundo transparente.
Page 1 of 403123...403Next »Last

Copyright © 2025 Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube