Postagens Recentes
Grade Lista

27 de set. de 2010

Template Fotográfico Scrap

. | 3 comentários:
Template com página incial diferente, ideal para albuns. Light box incorporado, Twiiter, menu com efeito booble.




Para que o light box funcione, copie o código abaixo, vá até configurações e cole-o na janela que há embaixo da página. 




<a href="http://draft.blogger.com/AQUI_O_ENDERE%C3%87O_DA_IMAGEM" rel="lightbox" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"> <img border="0" heigth="260px" src="-AQUI_O_ENDEREÇO_DA_IMAGEM" width="260px" /> </a>


Sempre que for postar vc verá o código na área de postagem, basta clicar em Editar HTML. Cole então o endereço de sua imagem nos locais indicados Pela cor vermelha.



Deixe selecionado para mostrar 12 postagens



Para ativar o Twitter, vá até o HTML de seu blog, clique em "Expandir modelos de widget" e procure por:

COLOQUE_AQUI_O_SEU_NICK_DO_TWITTER


Substitua então pelo seu nick do Twitter.









Para colocar link no menu booble, procure por:

ENDEREÇO DO TWITTER

E substitua pelo endereço de seu Twitter.

Vá repetindo a operaçõa ao que pede.
»»Leia mais...
.:. ,

Template Fotográfico Gray

. | 3 comentários:
Este template é apropriado para albúns. Possui o lightbox, que aumenta as imagens com um clique. Men horizontal com efeito buble, Twitter incorporado, um menu de imagens para links.





Para que o light box funcione, copie o código abaixo, vá até configurações e cole-o na janela que há embaixo da página. 




<a href="http://draft.blogger.com/AQUI_O_ENDERE%C3%87O_DA_IMAGEM" rel="lightbox" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"> <img border="0" heigth="260px" src="-AQUI_O_ENDEREÇO_DA_IMAGEM" width="260px" /> </a>


Sempre que for postar vc verá o código. Cole então o endereço de sua imagem nos locais indicados Pela cor vermelha.



Deixe selecionado para mostrar 10 postagens



Para ativar o Twitter, vá até o HTML de seu blog, clique em "Expandir modelos de widget" e procure por:

COLOQUE_AQUI_O_SEU_NICK_DO_TWITTER


Substitua então pelo seu nick do Twitter.



Para o menu acima do cabeçalho  você deverá procurar por:

ENDEREÇO DO LINK

E vá substituindo pelos seu links.


Para o menu fotográfico, procure por:

#url

E vá substituindo pelos endereços que deseja.

Para o menu do footer, o menu com imagens, procure por:

ENDEREÇO DO TWITTER

E substitua pelo endereço de seu Twitter.

Vá repetindo a operaçõa ao que pede.
»»Leia mais...
.:. ,

14 de set. de 2010

Favicon no Blogger

. | 7 comentários:
 


Coloque uma pequena imagem na barra de endereços de seu navegados, o tal favicon. Para isso é necessário que se faça uma imagem no tamanho de 16 x 16, hospede-a e depois cole-a no código no HTML depois de:


]]></b:skin>
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.





<link href='AQUI O ENDEREÇO DE SUA IMAGEM' rel='icon' type='image/x-icon'/>
<link href='AQUI O ENDEREÇO DE SUA IMAGEM' rel='shortcut icon' type='image/x-icon'/>



Veja no blog da Evelyn, códigos com favicons já prontos.
»»Leia mais...
.:.

13 de set. de 2010

Texto com efeito CSS

. | Nenhum comentário:
Abaixo alguns exemplos de texto CSS. É bom que você saiba que a cor de fundo de onde estiver a letra e a cor da letra irá influenciar diretamenta no tipo de efeito. Não funcionam no Internet Explorer






Templates e Acessórios 

text-shadow: 1px 1px white, -1px -1px #333;
 
 
Templates e Acessórios

 text-shadow: black 0.1em 0.1em 0.2em;



Templates e Acessórios


text-shadow: 0.2em 0.5em 0.1em #F8C301,-0.3em 0.1em 0.1em #cc0000,0.4em -0.3em 0.1em #006;
 
 


 
Templates e Acessórios 
 
text-shadow: 1px 1px white, -1px -1px #333; 
 
 
Templates e Acessórios
 
 text-shadow: -1px 0 black, 0 1px black,1px 0 black, 0 -1px black; 
 
 
Templates e Acessórios
 text-shadow: 0 0 0.2em #cc0000, 0 0 0.2em #87F,0 0 0.2em #87F 





 
Templates e Acessórios 

text-shadow: 0 0 0.2em #40FF40, 0 0 0.2em #40FF40,0 0 0.2em #40FF40;

  



Mas Elke, onde é que vou colar estes códigos ?????? Bom, isso vai depender.

Se você quer o texto com este efeito procure por:

body {
  background: #404040;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
COLE O CÓDIGO DE SUA PREFERÊNCIA
  }


Se você quer os links:

a:link {
  color:$linkcolor;
  text-decoration:none;
COLE O CÓDIGO DE SUA PREFERÊNCIA
  }

Se o que quer são os títulos:

h2 {
  margin:1.5em 0 .75em;
  font:$headerfont;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:$sidebarcolor;
COLE O CÓDIGO DE SUA PREFERÊNCIA
}

Claro que levando em consideração que vc está usando o template Mínima.

»»Leia mais...
.:.

11 de set. de 2010

11 de setembro

. | Nenhum comentário:



e
»»Leia mais...
.:.

4 de set. de 2010

Gerador de slide com últimas postagens

. | 3 comentários:
O site Feed Maps disponibiliza gratuitamente um serviço para widget com as últimas postagens em seu blog. Fácil e rápido.



http://www.feedmap.net/submit/







Grab this!  |  Powered by feedmap.net
»»Leia mais...
.:.

Linkar o Feed de seu blog ao menu de páginas estáticas

. | Um comentário:
No HTML de seu blog clique em "Expandir modelos de widget"

Agora procure pelo seguinte trecho:
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

 <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol'>
<b:widget id='PageList1' locked='false' title='Páginas' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <ul>
      <b:loop values='data:links' var='link'>
        <b:if cond='data:link.isCurrentPage'>
          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
        <b:else/>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>
        </b:if>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
</b:section>
      </div>


Troque-o por este  abaixo. (Onde está na cor verde é o ícone, troque pelo ícone de sua preferência) 




<div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol'>
<b:widget id='PageList1' locked='false' title='Páginas' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <ul>
      <b:loop values='data:links' var='link'>
        <b:if cond='data:link.isCurrentPage'>
          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
        <b:else/>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>
        </b:if>
      </b:loop>
    </ul>
<div id='feed'>

<a href='/feeds/posts/default' onmouseout='document.pencilrss.src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1oZ-H-66my3rp5jV2N25VaN3QGv9Avp-e18qiRClwQw-SiNAdWqPfxkFbSkswPZw4bHWZolPI3kn1BGTV19GAy8P5iwsKzF9A5ix324QS-4lkAvRVpOYZcIKe4rfgIN9D7GOnldKRDA0/s1600/rss-basic-webtreatsetc.png&quot;' onmouseover='document.pencilrss.src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1oZ-H-66my3rp5jV2N25VaN3QGv9Avp-e18qiRClwQw-SiNAdWqPfxkFbSkswPZw4bHWZolPI3kn1BGTV19GAy8P5iwsKzF9A5ix324QS-4lkAvRVpOYZcIKe4rfgIN9D7GOnldKRDA0/s1600/rss-basic-webtreatsetc.png&quot;'>
<img name='pencilrss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1oZ-H-66my3rp5jV2N25VaN3QGv9Avp-e18qiRClwQw-SiNAdWqPfxkFbSkswPZw4bHWZolPI3kn1BGTV19GAy8P5iwsKzF9A5ix324QS-4lkAvRVpOYZcIKe4rfgIN9D7GOnldKRDA0/s1600/rss-basic-webtreatsetc.png' style='width:50px; height:40px;'/>
</a>
</div>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
</b:section>
      </div>


Agora procure por

]]></b:skin>

e acima dele cole:

#feed { float: right;}
»»Leia mais...
.:.

Dando estilo ao menu de páginas estáticas

. | 3 comentários:
Dê estilo a seu menu das páginas estáticas. Para isso copie o código de sua preferência e cole antes de:  ]]></b:skin>
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




Para dar a seu menu essa aparência




Modelo 1
/* Page list----------------------------------------------- */
#PageList1{
background: #DF4E1E url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNoIfld7nbfvI6ywh9rsOb0wXFbWAIFf0S0gSZcizT-mM8h5Qorf-PWnEsPmZIeolmNCbUxHKOSKGRAhhYaj1BTQM2dXqlL2R6T7p3pFBgzSmQHHITLAJIrDnc5WU0-ojqqb64NrCrrWk/s1600/menuq.png) repeat;
border: 2px dashed #63432E;
}
#PageList1 li{
border-right: 2px solid #4F3526;
pading: 10px 6px 10px 6px;
}
#PageList1 li a:hover {
background: #5F3F28;
color: #ffffff;
font-size: 20px;
padding: 20px 8px 20px 8px;
border: 2px dashed #fff;
}



Modelo 2

/* Page list----------------------------------------------- */
#PageList1{
background: #fff;
border: 2px groove #ccc;
}
#PageList1 li{
border-right: 2px solid #ccc;
pading: 10px 6px 10px 6px;
}
#PageList1 li a:hover {
color: #cc0000;
font-size: 20px;
padding: 14px 8px 6px 8px;
border-bottom: 6px solid #cc0000;
}


Claro, são apenas exemplos. Faça o seu como quiser, basta modificar os códigos no local certo e ir experimentando sem medo
»»Leia mais...
.:.

Colocar buscador no menu de páginas estáticas

. | Um comentário:
Coloque um buscador no menu de páginas estáticas em seu Blogger. Faça isso entrando no HTML de seu blog,  clique em "Expandir modelos de widget"



Agora procure pelo trecho:

 <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol'>
<b:widget id='PageList1' locked='false' title='Páginas' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <ul>
      <b:loop values='data:links' var='link'>
        <b:if cond='data:link.isCurrentPage'>
          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
        <b:else/>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>
        </b:if>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
</b:section>
      </div>

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
Substitua-o então por este abaixo.



<div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol'>
<b:widget id='PageList1' locked='false' title='Páginas' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <ul>
      <b:loop values='data:links' var='link'>
        <b:if cond='data:link.isCurrentPage'>
          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
        <b:else/>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>
        </b:if>
      </b:loop>
    </ul>
<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/AVvXsEjqFCsCp3C8mTVFiCAHWZecc7Tn6lLOD61o-acRQym4Zkx4oFhompkBEsUigKrxaINiUAh1vPtxh5KtK3i1zRKYBEOrlXrtyIfvVsyQqvkGleir87mimCzHENMN_D3wd0EzfyJFx__MZPU/s1600/View.png' type='image'/>
</form>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
</b:section>
      </div>


Agora antes de

]]></b:skin>

Cole o código abaixo


#searchform {margin-top:6px;float:right;width:270px;height:22px;}
#back {background:#DECF3F;border: 2px groove #ccc ;float:left;height:14px;margin-right:8px;width:218px;padding:5px;}
#proc {margin-top:3px;float:left;width:23px;height:19px; }
»»Leia mais...
.:.

Mostrando/ocultando elementos nas páginas estáticas do Blogger

. | 5 comentários:
Para que determinados elementos apareçam somente nas páginas estáticas do Blogger como é o caso deste blog basta você copiar o código e no HTML de seu blog, abaixo de <body>  cole-o antes do elemento que você quer ocultar. Note que nos códigos há um elemento para fechar o código.

Suponhamos que você quer esconder a sidebar, entãoo veja na imagem abaixo como fazer.


Se o que você quer é mostrar o elemento apenas nas páginas estáticas o código é este.


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
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
AQUI O CÓDIGO DO QUE VC QUER MOSTRAR
</b:if>












Mas se o que você quer é ocultar, então o código é este abaixo.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
AQUI DEVERÁ FICAR OCÓDIGO DO QUE VC QUER OCULTAR
</b:if>
»»Leia mais...
.:.
Assinar: Postagens (Atom)

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