Templates e Acessórios: setembro 2010

Postagens Recentes

27 de set. de 2010

Template Fotográfico Scrap

Template com página incial diferente, ideal para albuns. Light box incorporado, Twiiter, menu com efeito booble.
DEMO/PEGAR CÓDIGO
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

. Elke di Barros | 13:17 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.
DEMO/PEGAR CÓDIGO
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

. Elke di Barros | 11:00 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

. Elke di Barros | 22:31 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
Templates e Acessórios
Templates e Acessórios

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

. Elke di Barros | 01:33 Nenhum comentário:

»»Leia mais...

4 de set. de 2010

Gerador de slide com últimas postagens

. Elke di Barros | 15:37 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/
Postagens recentes
Grab this! | Powered by feedmap.net

»»Leia mais...

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

. Elke di Barros | 05:02 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1oZ-H-66my3rp5jV2N25VaN3QGv9Avp-e18qiRClwQw-SiNAdWqPfxkFbSkswPZw4bHWZolPI3kn1BGTV19GAy8P5iwsKzF9A5ix324QS-4lkAvRVpOYZcIKe4rfgIN9D7GOnldKRDA0/s1600/rss-basic-webtreatsetc.png"' onmouseover='document.pencilrss.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1oZ-H-66my3rp5jV2N25VaN3QGv9Avp-e18qiRClwQw-SiNAdWqPfxkFbSkswPZw4bHWZolPI3kn1BGTV19GAy8P5iwsKzF9A5ix324QS-4lkAvRVpOYZcIKe4rfgIN9D7GOnldKRDA0/s1600/rss-basic-webtreatsetc.png"'>
<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

. Elke di Barros | 04:27 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

. Elke di Barros | 03:41 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 == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' 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

. Elke di Barros | 02:58 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 == "static_page"'>
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 != "static_page"'>
AQUI DEVERÁ FICAR OCÓDIGO DO QUE VC QUER OCULTAR
</b:if>

»»Leia mais...