Templates e Acessórios

Jogo online interativo

2012-01-11T00:14:00.000-02:00

Pra quem curte jogos de MMO e RPG, tenho uma dica quente: o site Cabal Vision. O site é feito por uma equipe aficionada por jogos online. Facilidade de navegação, interação entre players, design agradável e muita adrenalina. Vamos lá galera, confiram a dica e se divirtam.

Template Papai Noel

2011-12-09T10:59:00.001-02:00

DEMO/PEGAR CÓDIGO

Template em 3 colunas, cursor animado, leia mais e páginas internas maiores.

Template Bonequinhos de Natal Azuis

2011-12-08T15:35:00.000-02:00

Template para o novo Blogger com 3 colunas, imagem de fundo animada, leia mais, postagens internas maiores, cursor animado.

DEMO/PEGAR CÓDIGO

Com instalar os meus templates

2011-12-06T15:41:00.000-02:00

Tenho notado que com as novas mudanças no Blogger, os códigos de meus templates não estão mais sendo aceitos simplesmente copiando e colando como fazia antigamente. Por isso, refaço essa tutorial.

A primeira coisa a fazer é aceitar a nova interface do Blogger.

Clique AQUI e aprenda como fazer.(Se você já usa a nova interface do Blogger, implementada em agosto de 2011, pode pular esta etapa)

Entre em um dos links abaixo e escolha o modelo de template que você quer instalar em seu blog.

Templates modelo novo Templates modelo antigo

Perceba que há nos posts um link escrito: "PEGAR CÓDIGO"clique então para pegar o código

Você será direcionado para uma página como essa abaixo:

Copie então todo esse código. Mas atenção, é um código enorme, copie-o até o fim ou não dará certo.

Agora abra o bloco de notas que temem seu computador. Para isso, clique no botão INICIAR, que está do lado esquerdo de sua tela, em baixo no monitor.

Agora clique em PROGRAMAS, depois em ACESSÓRIOS e então em BLOCO DE NOTAS.

Pronto, com o bloco de notas aberto, cole então o código do template que você escolheu.

Assim que tiver colado o código, clique em ARQUIVO e depois em SALVAR COMO...

Abrirá uma janela, escreva então o nome do template, em letra minúscula e tudo junto, depois coloque .xml (ponto xml) no final da inscrição. Vai ficar assim:

templateespace.xml

Observe o modelo, as configurações devem ficar assim: DOCUMENTO DE TEXTO(*.TXT) e ANSI

Pronto, agora vamos subir o código para seu Blogger

Ao entrar no painel do Blogger, clique na pequena seta ao lado do ícone que parece duas folhinhas.

Abrirá uma janela, clique então em "modelo"

Na próxima página, observe que você verá o modelo original de seu template. Role a página, e clique em APLICAR AO BLOG, no modelo Simples

Prontinho, agora vamos fazer o upload do template.
Clique em FAZER BACKUP/RESTAURAR

Vai abrir uma janela, clique então em ESCOLHER ARQUIVO

Abrirá então uma janela no browser do seu computador, procure o código do template e depois clique sobre o código do template e em abrir.

Você verá então o nome do template, clique em FAZER UPLOAD e aguarde um instante

Pronto, o template já está instalado em seu blog

Entenda que a partir de agosto de 2011 todos os modelos de template que fiz são baseados no Simples, modelo novo do Blogger.

Lâmpadas coloridas de Natal no Blogger

2011-12-05T16:40:00.001-02:00

Mas uma dica para enfeitar seu blog com tema natalino. Que tal colocar luzinhas como esta acima ?

Vá até o Modelo de seu blog, 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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Agora procure por:

]]></b:skin>

Substitua então pelo código abaixo:

.lampada-natal {
background-image: url(http://3.bp.blogspot.com/-yEFQsUw1xM0/Tt0ViCuRd6I/AAAAAAAAGV4/tB3Toj6ELmE/s1600/lampadas-elke.gif);
background-repeat:repeat-x;
height:33px;
width:100%;
position:absolute;
top:0px;
left:0;
}
]]></b:skin>

Procure agora por:

<div class='header-outer'>

Troque-o então pelo código abaixo:

Enfeitar o blog para o Natal

2011-12-05T12:07:00.000-02:00

Quer fazer mudanças em seu blog para o Natal mas não quer mexer no template ? Então coloque scripts para fazer algumas mudanças. Copie os códigos abaixo e cole em HTML/Javascript.

Clique em "Modelo" depois em "Adicionar um elemento de página" . Clique então em HTML/Javascript e cole um dos códigos abaixo.

Código Papai Noel

<marquee><img src="http://petimage.bunnyherolabs.com/santa/sleigh/santapull.gif"/></marquee>

Crédito: Bunny Hero

Código Cursores

Árvore de natal 1

Árvore de Natal 2

Bola de Natal

Boneco de neve

Estrela

Floco neve

Papai Noel

Caixa de presente

Sininho

Código Neve

Vá até o HTML de seu blog e procure por:

</body>

Acima dele cole o código abaixo:

*Se quiser outra imagemde neve, substitua o código em vermelho pelo endereço de sua image. AQUI mais imagens

Slide flip-page com atualizações automáticas de seu blog

2011-12-01T21:21:00.001-02:00

DEMO

Mais um slide adaptado por Abu Farhan, esse modelo tem um efeito de página foleada e é super-mega,power-fácil de instalar.

Vá até layout

Clique em Adicionar um Gadegt

Ao abrir, clique em HTML/Javascript

Cole então o próximo código colocando o endereço de seu blog no local indicado, arrastando o widget para o local que você quer que apareça o slide.

Código em rosa comprimento de cada imagem

Código em azul largura de cada imagem

Slide com as últimas atualizações automaticas. Modelo Nivo

2011-12-01T21:10:00.001-02:00

DEMO

Mais um slide de Abu Farhan.

Vá até o Modelo de seu blog, 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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Agora procure por:

]]></b:skin>

Acima dele cole o código abaixo:

/* START
--------------------------------------------------------------------
Automatic Content Slider for Blogger using Nivo Slider
By http://www.abu-farhan.com
--------------------------------------------------------------------
Nivo Slider
*/
/*-----START Default Theme ----------------------------------------*/
.theme-default .nivoSlider {
position:relative;
background:#fff url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/loading.gif) no-repeat 50% 50%;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
position:absolute;top:0px;left:0px;display:none;
}
.theme-default .nivoSlider a {
border:0;display:block;
}
.theme-default .nivo-controlNav {
position:absolute;left:50%;bottom:-42px;
margin-left:-20px; /* Tweak this to center bullets */
}
.theme-default .nivo-controlNav a {
display:block;width:22px;height:22px;
background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/bullets.png) no-repeat;
text-indent:-9999px;border:0;margin-right:3px;float:left;
}
.theme-default .nivo-controlNav a.active {
background-position:0 -22px;
}
.theme-default .nivo-directionNav a {
display:block;width:30px;height:30px;
background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/arrows.png) no-repeat;
text-indent:-9999px;border:0;
}
.theme-default a.nivo-nextNav {
background-position:-30px 0;right:15px;
}
.theme-default a.nivo-prevNav {
left:15px;
}
.theme-default .nivo-caption {
font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
color:#fff;
border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
color:#fff;
}
/*----- END Default Theme ----------------------------------------*/
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;top:0px;left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;border:0;
padding:0;margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
font-size: 22px;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:8;
}
.nivo-caption p {
padding:18px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
.theme-default #slider {
margin: 2px 3px 44px -19px;
width:688px; /* Make sure your images are the same size */
height:246px; /* Make sure your images are the same size */
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
margin-top:150px;
}
.clear {
clear:both;
}
/* END
--------------------------------------------------------------------
Automatic Content Slider for Blogger using Nivo Slider
By http://www.abu-farhan.com
--------------------------------------------------------------------
Nivo Slider
*/

Procure agora por:

</body>

E acima dele cole o próximo código

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='http://catur-at-abu-farhan.googlecode.com/svn/trunk/nivo-slider-modified.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>

Salve. Agora clique em Layout

Clique em Adicionar um Gadegt

Ao abrir, clique em HTML/Javascript

Cole então o próximo código colocando o endereço de seu blog no local indicado, arrastando o widget para o local que você quer que apareça o slide.

<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-nivo-slider.js"></script>
<script style="text/javascript">
var numposts_gal = 6; //number of posts
var image_height = 246; //image height
var image_width = 618; //image width
</script>
<script src="AQUI O ENDEREÇO DE SEU BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>

Slide com as últimas postagens

2011-12-01T15:43:00.001-02:00

DEMO

Vá até o Modelo de seu blog, 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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Agora procure por:

]]></b:skin>

Acima dele cole o código abaixo:

/* START
--------------------------------------------------------------------
Roundabout Content Slider using jQuery for blogger
By http://www.abu-farhan.com
--------------------------------------------------------------------
Roundabout
*/
#featured   {
margin:0px 0px 20px 0px;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius:0 8px 8px 0;
-moz-box-shadow: 0px 10px 10px -7px #888;
-webkit-box-shadow:0px 10px 10px -7px #888;
}
#folio_scroller_container {
margin-top:35px;
margin-bottom:40px;
height:auto;
}
#folio_scroller_container .roundabout-holder {
list-style:none;
height:400px;
margin:0px auto 20px auto;
}
.roundabout-holder {
list-style:none;
width:940px; /*Comprimento do slide*/
height:350px;/*largura do slide*/
margin:0px auto;
}

.roundabout-moveable-item   {
height:290px;/*comprimento da imagem*/
width:350px;/*largura da imagem*/
background:#f9f9f9;
font-size:14px!important;
cursor:pointer;
padding:5px 9px 20px 5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-webkit-box-shadow:0px 0px 20px #787878;
-moz-box-shadow:0px 0px 20px #787878;
}
.roundabout-moveable-item img {
height:90%; width:100%;
background-color:#fff;
margin:0;
}
.roundabout-in-focus {
cursor:auto;
}
.roundabout-in-focus:hover {
-webkit-box-shadow:0px 0px 20px #000;
-moz-box-shadow:0px 0px 20px #000;
font-size : 18px;/*Tamanho da fonte*/
border:1px solid #aaaaaa;
}
.roundabout-holder span {
display:none; font-size:12px;
}
.roundabout-in-focus:hover span   {
display:inline; position:absolute;
bottom:5px; right:5px; padding:8px 20px;
background:#f9f9f9; color:#000000; z-index:999;
-moz-border-radius: 0 8px 8px 0; border-top:1px solid #ccc;
}
.roundabout a:active, .roundabout a:focus, .roundabout a:visited {
outline:none; text-decoration:none;
}
.roundabou li   {margin:0
}
a img   {
border:none; outline:0;
}

Procure agora por:

</body>

E acima dele cole o próximo código

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script charset='utf-8' src='http://catur-at-abu-farhan.googlecode.com/svn/trunk/jquery.roundabout-1.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($) {
var interval;
$('#featured ul')
.roundabout({
duration: 600 }
)
.hover(
function() {
// oh no, it's the cops!
clearInterval(interval);
},
function() {
// false alarm: PARTY!
interval = startAutoPlay();
}
);
// let's get this party started
interval = startAutoPlay();
});
function startAutoPlay() {
return setInterval(function() {
jQuery('#featured ul').roundabout_animateToNextChild();
}, 5000);
}
</script>

Salve. Agora clique em Layout

Clique em Adicionar um Gadegt

Ao abrir, clique em HTML/Javascript

Cole então o próximo código fazendo as modificações necessárias, arrastando o widget para o local que você quer que apareça o slide.

Postagem popular em forma de slide animado

2011-12-01T15:06:00.001-02:00

DEMO

Mais um modelo de slide para usar nas postagens mais vistas em seu blog, e mais um dos modelos adaptada por Abu Farha.

É necessário é que você tenha em seu blog o widget com as postagens populares e que cole o código em um widget HTML/Javascript. Estando implementado, deixe como mostra o exemplo.

Clique em Adicionar um Gadegt

Ao abrir, clique em HTML/Javascript

Cole então o próximo código fazendo as modificações necessárias.

Postagens populares em forma de slide-cubo

2011-12-01T14:38:00.001-02:00

DEMO

Mais um modelo de slide para usar nas postagens mais vistas em seu blog. adaptada por Abu Farhan esse modelo o slide fica em forma de cubo.

O que é necessário é que você tenha em seu blog o widget com as postagens populares e que cole o código em um widget HTML/Javascript. Estando implementado, deixe como mostra o exemplo.

Clique em Adicionar um Gadegt

Ao abrir, clique em HTML/Javascript

Cole então o próximo código fazendo as modificações necessárias.

Postagens populares em forma de slide com efeito accordeon

2011-11-30T04:31:00.001-02:00

DEMO

Mais um modelo de slide para usar nas postagens mais vistas em seu blog. adaptada por Abu Farhan.

O que é necessário é que você tenha em seu blog o widget com as postagens populares e que cole o código em um widget HTML/Javascript. Estando implementado, deixe como mostra o exemplo.

Clique em Adicionar um Gadegt

Ao abrir, clique em HTML/Javascript

Cole então o próximo código fazendo as modificações necessárias.

Postagens populares em forma de slide com setas

2011-11-30T04:06:00.001-02:00

DEMO

Há um tempo devendo essa postagem, onde é possível colocar os posts mais vistos de seu blog em forma slide com setas, trago agora para vocês. Quem adaptou para o Blogger foi Abu Farhan, portanto, todos os aplausos e agradecimentos a ele.

O que é necessário é que você tenha em seu blog o widget com as postagens populares e que cole o código em um widget HTML/Javascript. Estando implementado, deixe como mostra o exemplo.

Clique em Adicionar um Gadegt

Ao abrir, clique em HTML/Javascript

Cole então o próximo código fazendo as modificações necessárias.

Os números do código em cor vermelha correspondem ao comprimento do slide. Ao trocar um, troque todos pelo menos número (valor).

Em azul correspondem a largura, ao trocar um, troque todos pelo mesmo número (valor)

O número em rosa corresponde a seta direita, ela deve ter um valor (número) maior que os demais para não ficar dentro do slide.

Colocar o novo Blogger com fundo transparente

2011-11-30T03:12:00.001-02:00

DEMO

Esta dica é baseada em cima do template Simple, um dos templates do novo modelo, implementado a partir de agosto de 2010, portanto, observe se há este código em seu blog para implementar a dica :-)

Vá até o Modelo de seu blog, 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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Agora procure por:

.main-outer {

Substitua então pelo código abaixo, trocando a cor de fundo onde está destacado na cor rosa.:

.content-outer{
background: #fff;
opacity:0.7;
margin:0 auto;
padding:10px;
}

.main-outer {

Para o antigo blog, teste ESTE código

Votar no bebê hipoglós com ajuda do Imacro

2011-11-26T12:58:00.001-02:00

A primeira coisa que quero deixar bem claro é que, o Imacro NÃO vota sozinho, não é colocar o código e ir ao shopping passear, você precisa votar, o que ele faz é adiantar o serviço, fazendo com que não seja preciso dar refresh a página, mas a captcha tem que ser digitada. Então, é isso, estamos entendidos ?

.

A primeira coisa a fazer é abrir o Mozilla Firefox.

Se você não tem, clique AQUI e baixe o navegador pois o Imacro só pode ser baixado no Mozzila Firefox.

Agora com o Firefox aberto, clique AQUIe baixe o programinha Imacro.

Vai abrir uma janela como esta abaixo, clique em "Instalar agora"

Agora clique em "Reiniciar o sistema"

Pronto, o programa já está instalado

Agora reinicie o Firefox e vá até a página de votação do Bebê Hipoglós e abra na página de seu bebê.

Com a página de votação aberta, clique na tecla F8 em seu teclado.

Note que abriu uma janela do lado esquerdo.

1-Clique então em "Favoritos"

2-Ao abrir o menu procure por: Demo-ArchivePage.iim

3-Clique então sobre ele com o botão direito do mouse.

4-Ao abrir uma pequena janela, clique em "Editar Macro"

Nessa janela que abriu, apague tudo que la estiver e cole o código que está em destaque.

Clique então em "Save e close"

Perceba que há neste código abaixo, um número na cor vermelha.
Ele representa o número correspondente ao bebê, o que vc tem a fazer é mudar o número "281967" pelo número correspondente ao seu bebê antes de colar no Imacro.

Copie este código abaixo, troque o número em vermelho pelo número de seu bebê e cole no local indicado.

VERSION BUILD=7401004 RECORDER=FX
TAB T=1
URL GOTO=http://bebehipoglos2011.com.br/281967
URL GOTO=bebehipoglos2011.com.br/281967
TAG POS=1 TYPE=IMG ATTR=SRC:http://media.bebehipoglos2011.com.br/templates/images/voter-btnNEW.jpg
FRAME F=2
PROMPT digiteaimagemaqui: !VAR1
TAG POS=1 TYPE=INPUT:TEXT FORM=ACTION:# ATTR=ID:recaptcha_response_field CONTENT={{!VAR1}}
TAG POS=1 TYPE=INPUT:IMAGE FORM=ACTION:# ATTR=SRC:http://media.bebehipoglos2011.com.br/templates/images/voter.jpg
TAG POS=1 TYPE=IMG ATTR=SRC:http://media.bebehipoglos2011.com.br/templates/images/ok.gif
URL GOTO=bebehipoglos2011.com.br/281967

Para conseguir o número de seu bebê, abra a página de votação e copie o número que estiver na barra do navegador

1- Clique em "usar"

2- Coloque um número onde está "MAX", coloque por exemplo o número 100, é a quantidade de votos

3- Clique em "Usar Loop"

Veja que abrirá uma janela. Copie então o código (Captcha) que o site da Globo fornece e escreva aí. Clique em "Enter" no seu teclado e bom divertimento.

Visitante troca imagem de fundo do seu blog

2011-11-15T20:41:00.001-02:00

DEMO

Mude o back do blog clicando nas imagens

Me pediram este script através do Twitter. Serve para que o visitante de seu blog tenha o poder de modificar a imagem de fundo (background) de seu blog. Já aproveitei que é Natal, estão todos no clima de Papai Noel, vendo vitrines, enfeitando suas casas e fiz o script com imagens para a ocasião.
Para você, que usa o novo Blogger, com templates disponibilizados a partir de julho de 2010, a primeira coisa a fazer é trocar, todo este código abaixo.

Vá até o Modelo de seu blog, 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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}

html body $(page.width.selector) {
min-width: 0;
max-width: 100%;
width: $(page.width);
}

a:link {
text-decoration:none;
color: $(link.color);
}

a:visited {
text-decoration:none;
color: $(link.visited.color);
}

a:hover {
text-decoration:underline;
color: $(link.hover.color);
}

.body-fauxcolumn-outer .fauxcolumn-inner {
background: transparent $(body.background.gradient.tile) repeat scroll top left;
_background-image: none;
}

.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 400px;
width: 100%;
background: $(body.background);
$(body.background.override)
}

.body-fauxcolumn-outer .cap-top .cap-left {
width: 100%;
background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
_background-image: none;
}

.content-outer {
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

margin-bottom: 1px;
}

.content-inner {
padding: $(content.padding) $(content.padding.horizontal);
}

$(content.background.color.selector) {
background-color: $(content.background.color);
}

Substitua-o então por este:

/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
}

html body $(page.width.selector) {
min-width: 0;
max-width: 100%;
width: $(page.width);
}

a:link {
text-decoration:none;
color: $(link.color);
}

a:visited {
text-decoration:none;
color: $(link.visited.color);
}

a:hover {
text-decoration:underline;
color: $(link.hover.color);
}
.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 400px;
width: 100%;

}
.content-outer {
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

margin-bottom: 1px;
}

$(content.background.color.selector) {
background: #eee;/*Cor da página*/}

(Código em rosa pode ser modificado pela cor que quiser como funda da página do blog)

Salve.

Agora clique em Layout

Clique em Adicionar um Gadegt

Ao abrir, clique em HTML/Javascript

Cole então o próximo código fazendo as modificações necessárias, onde estão os códigos com cores diferente. Cada imagem deve ser colocada

ATENÇÃO: os códigos estão em cores diferentes para que você perceba que é necessário repetir cada imagem 2 vezes.

Menu social embutido com efeito j.query

2011-11-07T02:33:00.001-02:00

DEMO

Que tal ter em seu blog os links em forma de botão para suas páginas sociais, mas de uma forma bem discreta, sem tomar espaço em seu blog e ainda, com um efeito deslizante ? Esse menu social existe, foi projetado pelo blog Codrops, e trago agora para vocês. Basta seguir o exemplo, ter bastante atenção e em 2 simples passos, instala-lo em seu blog.

Vá até o Modelo de seu blog, 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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Agora procure por: ]]></b:skin>

Substitua então pelo código abaixo:

/*Menu List----------------------------------------*/
.rp_list {
   position:fixed;
   right:136px;
   bottom:-50px;
   margin:0;
   padding:0;
}
.rp_list a img{
   width:40px;
   border:none;
   -moz-box-shadow:0px 0px 4px #ccc;
   -webkit-box-shadow:0px 0px 4px #ccc;
   box-shadow:0px 0px 4px #ccc;
   margin-left:8px;
   line-height:40px;
}
h3#relatedPosts{
   position:fixed;
   right:0px;
   bottom:23px;
   cursor:pointer;
   font-size:13px;
   background:#000;
   color:#fff;
   padding:3px 10px 5px 10px;
   margin:0;
   font-weight:normal;
   text-transform:uppercase;
   text-shadow:0px 0px 1px #fff;
   opacity:0.8;}
span.reference{font-family:Arial;position:fixed;left:10px;bottom:10px;font-size:14px;}
span.reference a{color:#aaa;text-decoration:none;margin-right:20px;}
span.reference a:hover{color:#ddd;}

]]></b:skin>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
            $(function() {
               //the loading image
               var $loader       = $('#st_loading');
               //the ul element
               var $list       = $('#st_nav');
               //the current image being shown
               var $currImage    = $('#st_main').children('img:first');

               //let's load the current image
               //and just then display the navigation menu
               $('<img>').load(function(){
                   $loader.hide();
                   $currImage.fadeIn(3000);
                   //slide out the menu
                   setTimeout(function(){
                       $list.animate({'left':'0px'},500);
                   },
                   1000);
               }).attr('src',$currImage.attr('src'));

               //calculates the width of the div element
               //where the thumbs are going to be displayed
               buildThumbs();

               function buildThumbs(){
                   $list.children('li.album').each(function(){
                       var $elem            = $(this);
                       var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
                       var $thumbs        = $thumbs_wrapper.children(':first');
                       //each thumb has 180px and we add 3 of margin
                       var finalW            = $thumbs.find('img').length * 183;
                       $thumbs.css('width',finalW + 'px');
                       //make this element scrollable
                       makeScrollable($thumbs_wrapper,$thumbs);
                   });
               }

               //clicking on the menu items (up and down arrow)
               //makes the thumbs div appear, and hides the current
               //opened menu (if any)
               $list.find('.st_arrow_down').live('click',function(){
                   var $this = $(this);
                   hideThumbs();
                   $this.addClass('st_arrow_up').removeClass('st_arrow_down');
                   var $elem = $this.closest('li');
                   $elem.addClass('current').animate({'height':'170px'},200);
                   var $thumbs_wrapper = $this.parent().next();
                   $thumbs_wrapper.show(200);
               });
               $list.find('.st_arrow_up').live('click',function(){
                   var $this = $(this);
                   $this.addClass('st_arrow_down').removeClass('st_arrow_up');
                   hideThumbs();
               });

               //clicking on a thumb, replaces the large image
               $list.find('.st_thumbs img').bind('click',function(){
                   var $this = $(this);
                   $loader.show();
                   $('<img class="st_preview"/>').load(function(){
                       var $this = $(this);
                       var $currImage = $('#st_main').children('img:first');
                       $this.insertBefore($currImage);
                       $loader.hide();
                       $currImage.fadeOut(2000,function(){
                           $(this).remove();
                       });
                   }).attr('src',$this.attr('alt'));
               }).bind('mouseenter',function(){
                   $(this).stop().animate({'opacity':'1'});
               }).bind('mouseleave',function(){
                   $(this).stop().animate({'opacity':'0.7'});
               });

               //function to hide the current opened menu
               function hideThumbs(){
                   $list.find('li.current')
                   .animate({'height':'50px'},400,function(){
                       $(this).removeClass('current');
                   })
                   .find('.st_thumbs_wrapper')
                   .hide(200)
                   .andSelf()
                   .find('.st_link span')
                   .addClass('st_arrow_down')
                   .removeClass('st_arrow_up');
               }

               //makes the thumbs div scrollable
               //on mouse move the div scrolls automatically
               function makeScrollable($outer, $inner){
                   var extra            = 800;
                   //Get menu width
                   var divWidth = $outer.width();
                   //Remove scrollbars
                   $outer.css({
                       overflow: 'hidden'
                   });
                   //Find last image in container
                   var lastElem = $inner.find('img:last');
                   $outer.scrollLeft(0);
                   //When user move mouse over menu
                   $outer.unbind('mousemove').bind('mousemove',function(e){
                       var containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2*extra;
                       var left = (e.pageX - $outer.offset().left) * (containerWidth-divWidth) / divWidth - extra;
                       $outer.scrollLeft(left);
                   });
               }
               $('#relatedPosts').toggle(
                   function(){
                       $('#rp_list').animate({'bottom':'10px'},500);
                   },
                   function(){
                       $('#rp_list').animate({'bottom':'-50px'},500);
                   }
               );
               $('#rp_list a').tipsy({gravity: 's'});
            });
        //]]>
</script>

Salve. Procure por:

<div class='main-cap-bottom cap-bottom'>

Se não encontrar, procure por:

<div id='content-wrapper'>

E acima do código cole este trecho abaixo, inserindo onde se pede o endereço de suas páginas.

<h3 id='relatedPosts'>Rede social</h3>
<div class='rp_list' id='rp_list'>
<a href='#' target='_blank' title='Blogger'>
<img alt='' src='https://lh4.googleusercontent.com/-PzPYn4AJVFE/TXMWwfNf8XI/AAAAAAAAAEk/l0cfAZxi1wQ/s1600/blogger.png'/></a>

<a href='ENDEREÇO FLICKER' target='_blank' title='Flickr Galeria'>
<img alt='' src='https://lh6.googleusercontent.com/-BAp0PG1aj-k/TXMXC7azhHI/AAAAAAAAAEw/niDawt-cHeU/s1600/flickr.png'/></a>

<a href='ENDEREÇO YOUTUBE' target='_blank' title='Meu canal '>
<img alt='' src='https://lh4.googleusercontent.com/-OZwEYt1C6cc/TXMXQqK67oI/AAAAAAAAAE4/r3Q-PRUND2Y/s1600/youtube.png'/></a>

<a href='ENDEREÇO FACEBOOK' target='_blank' title='Encontre-me no Facebook'>
<img alt='' src='https://lh3.googleusercontent.com/-ZjccS-wE7cs/TXMWxee6j8I/AAAAAAAAAEo/gLevgnoUF5Q/s1600/facebook.png'/></a>

<a href='ENDEREÇO TWITTER' target='_blank' title='Siga-me Twitter'>
<img alt='' src='https://lh4.googleusercontent.com/-kIAJTQLDmok/TXMXGPBwGBI/AAAAAAAAAE0/bGwKwxRgcA0/s1600/twitter.png'/></a>

<a href='ENDEREÇO DO FEED' target='_blank' title='Leia-me Feed'><img alt='' src='https://lh5.googleusercontent.com/-9IY_gttQI_o/TXMXB_sGcBI/AAAAAAAAAEs/rZRunztQ-Kk/s1600/rss.png'/></a>

</div>

Prontino. Está feito !

Campanha Teima Lula, em solidariedade ao nosso eterno presidente

2011-11-03T22:20:00.001-02:00

SOMOS 80% #TEIMALULA

Para quem como eu, reconhece os avanços deste país durante a gestão do companheiro Lula, há na net uma campanha, encabeçada pelo ator Bemvindo Sequeira, em apoio ao ex-presidente que neste momento está passando por um momento delicado. Se quer participar, basta gravar um vídeo em apoio a Lula com o tema "Teima Lula" Faça seu vídeo em solidariedade, e envie-me para que eu o integre a campanha Teima Lula através do You Tube e da Rede Liberdade.

#TeimaLula. no Twitter

Você pode também, caso prefira, fazer uma foto com um cartaz, como o exemplo e postar em seu blog ou usa-lo como avatar em uma de suas páginas sociais. Vamos apoiar o barba.

Colocar apresentação de power point no Blogger

2011-11-03T09:37:00.001-02:00

Hoje vou ensinar como colocar uma apresentação de Power Point nas páginas do Blogger. É necessário que hospede o dito cujo em um site que aceite esse formato. Indico o site Slide Share

A aparência será como esta abaixo

O melhor presente

View more presentations from elainebucci

A primeira coisa a fazer, é obvio, é entrar no site. Clique AQUI para entrar.
Agor é necessário fazer um cadastro, gratuito.

Preencha o formulário conforme o modelo abaixo.

Clique agora em UPLOAD

Abrirá uma janela com o browser de seu computador. Procure onde está seu arquivo PPS

Agora aguarde até fazer o upload

Pronto ! Agora clique no botão SHARE, copie o código e...

Cole em seu editor de postagem no modo HTML. Dê um título e publique.

Posts relacionados colorido

2011-10-25T09:40:00.001-02:00

DEMO

Mais um site oferece essa opção para colocar posts relacionados ao pé da página. É o 2leep.

É muito simples, entre no site, clique no botão

Escreva então o endereço de seu blog

Na próxima página você poderá escolher o modelo de posts relacionado.

Agora insira seu email, a senha e clique próximo.

Copie o código

Agora vá até o HTML de seu blog e clique em "Expandir modelos de widgets"

Procure então por:

<div class='post-footer-line post-footer-line-3'>

Abaixo dele cole o código.

ATENÇÃO: Se preferir que os posts relacionados não apareçam na primeira página, cole o código entre:

<b:if cond='data:blog.pageType == "item"'>
COLE O CÓDIGO AQUI
</b:if>

Desabilitar o ligthbox no Blogger

2011-10-20T01:50:00.003-02:00

Se você não gosta, desabilite o ligthbox

Se você não gosta dessa maneira de mostrar as imagens em seu blog, é bem fácil desabilitar o lightbox, sem necessidade de códigos.
Veja a imagem abaixo e siga o exemplo.

Vá em "Configurações" clique em "Postagens e comentários". Clique então na setinha de "SIM" que está a frente de "Showcase images with Lightbox", selecione "Não e salve.

Menu horizontal com efeito jquery

2011-10-09T23:08:00.002-03:00

Ví esse menu no excelente blog Tympanus e trouxe o código adaptado para o Blogger para vocês. Veja AQUI o DEMO e AQUI ele instalado no footer de um blog hospedado no Blogger. Não há muito segredo, o que haverá necessidade é de atenção absoluta para implementa-lo no blog.

Vá até o Modelo de seu blog, 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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Agora procure por: ]]></b:skin>

Substitua então pelo código abaixo:

/* Slide Menú desplegable con jQuery y CSS 3
----------------------------------------------- */
ul.sdt_menu{
margin:3px 10px 10px -30px;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width:1020px;
}
ul.sdt_menu a{
text-decoration:none;
outline:none;
}
ul.sdt_menu li{
background: -webkit-linear-gradient(#042746, #fff);
background: -moz-linear-gradient(#042746, #fff);
background: -o-linear-gradient(#042746, #fff);
float:left;
width:170px;
height:77px;
position:relative;
cursor:pointer;
}
ul.sdt_menu li > a{
position:absolute;
top:0px;
left:0px;
width:170px;
height:85px;
z-index:12;
background:transparent url(http://lh6.ggpht.com/_NLOc3R4Yqfs/TN7g7VT6viI/AAAAAAAAB6I/ASvXrGS3N-c/overlay.png) no-repeat bottom right;
-moz-box-shadow:0px 0px 2px #000 inset;
-webkit-box-shadow:0px 0px 2px #000 inset;
box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img{
border:none;
position:absolute;
width:0px;
height:0px;
bottom:0px;
left:85px;
z-index:100;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
position:absolute;
top:25px;
left:0px;
width:170px;
height:60px;
z-index:15;
}
ul.sdt_menu li span.sdt_active{
position:absolute;
background:#E7EAED;
top:85px;
width:170px;
height:0px;
left:0px;
z-index:14;
-moz-box-shadow:0px 0px 4px #000 inset;
-webkit-box-shadow:0px 0px 4px #000 inset;
box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
margin-left:15px;
text-transform:uppercase;
text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link{
color:#fff;
font-size:24px;
float:left;
clear:both;
}
ul.sdt_menu li span span.sdt_descr{
color:#0B75AF;
float:left;
clear:both;
width:155px; /*For dumbass IE7*/
font-size:12px;
letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
display:block;
position:absolute;
width:170px;
overflow:hidden;
height:170px;
top:85px;
left:0px;
display:none;
background:#E7EAED;
}
ul.sdt_menu li div.sdt_box a{
float:left;
clear:both;
line-height:30px;
color:#000;
}
ul.sdt_menu li div.sdt_box a:first-child{
margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
color:#fff;
}
]]></b:skin>

Procure agora por:

</head>

E substitua por este código abaixo

Salve. Agora clique em Layout

Clique em Adicionar um Gadegt

Ao abrir, clique em HTML/Javascript

Cole então o próximo código fazendo as modificações necessárias, arrastando o widget para onde você quer mostrar o menu. (códigos na cor azul representam as imagens)

Agora...

conteudo.

Template Night and Day

2011-09-30T11:03:00.001-03:00

Template em 2 colunas, leia mais, slide,header dividida...

DEMO/PEGAR CÓDIGO

HABILITAR SLIDE

Copie o código abaixo, cole no HTML/Javascript acima da header, coloque o endereço de seu blog e salve.

<div class="slider-wrapper theme-orman">
<div class="ribbon"></div>
<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-nivo-slider.js"></script>
<script style="text/javascript">
var numposts_gal = 6; //number of posts
var image_height = 270; //image height
var image_width = 930; //image width
</script>
<script src="ENDEREÇO DE SEU BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>

ARQUIVO EM FORMA DE MENU SUSPENSO

QUANTIDADE DE POSTAGENS

Template Espaces

2011-09-30T10:47:00.001-03:00

Este template possui sidebar dentro de scroller, menu com efeito jquery, 3 colunas abaixo da header.

DEMO/PEGAR CÓDIGO

HABILITAR MENU

Copie o código abaixo, cole no bloco de notas. Coloque os links nos locais onde se pede. Depois, cole no HTML/Javavascript que fica ao pé do blog. (códigos em vermelho sáo onde você deverá colar os endereços dos links, em azul, endereço das imagens caso queira trocar. Em laranja, título dos links e em verde, inscrição do menu.

ARQUIVOS EM FORMA DE MENU SUSPENSO:

6 POSTAGENS

Malware no Blogger

2011-09-29T19:59:00.000-03:00

Nossos blogs, hospedados no Blogger desde a semana passada tem sofrido com ataques de Malware afastando leitores, passando susto em todos, deixando até os donos do blog sem poder acessa-los. Mas por que isso está acontecendo ?

Isso pode acontecer simplesmente por termos o link em nosso blog de algum blog contaminado, ou termos em nosso blog algum código contaminado como por exemplo, caixinhas com contadores, reloginhos, algum chat, enfim, códigos e gadgets que não sejam provenientes do Blogger.

Este aviso é típico do blog infectado por ter um link para um blog com problemas. Basta deletar o link

Mas o que é o tal de "malware" ? Segundo o Wikipedia, "O termo malware é proveniente do inglês malicious software; é um software destinado a se infiltrar em um sistema de computador alheio de forma ilícita, com o intuito de causar algum dano ou roubo de informações (confidenciais ou não). Vírus de computador, worms, trojan horses (cavalos de troia) e spywares são considerados malware. Também pode ser considerada malware uma aplicação legal que por uma falha de programação (intencional ou não) execute funções que se enquadrem na definição supra citada."

Para tentar resolver seu problema, primeiro veja o que está escrito na mensagem ao tentar abrir o blog. Veja se o que está havendo com o seu blog não é simplesmente o link de algum blog, se for isso, basta deletar o link e aguardar que dentro de 24 horas seu blog voltará ao normal.
Se não houver nenhuma mensagem, vamos ver o que há em seus gadgets, ou seja, retire contadores externos, relóginhos, chats, enfim, tudo que tenha colocado nas colunas do blog. Retire T U D O pois é por aí que seu blog está sendo invadido.

Tendo feito isso, entre neste endereço

http://www.google.com/support/webmasters/bin/answer.py?answer=35843

Clique em "Pedido de reconsideração do seu site"

Você verá uma caixa. Clique para aparecer o menu. Depois basta clicar no endereço do blog que estiver com problema.

Selecione o blog, deixe a caixa que envia a solicitação selecionada, escreva um pequeno texto e envie o pedido.

Se tiver dado tudo certo, você verá uma página como essa. Agora é ter paciência e aguardar.