Templates e Acessórios

Efeito hover com CSS- imagens com efeito vintage

2013-05-22T02:46:00.000-03:00

Com esse código é possível fazer um efeito interessante nas imagens dos posts ao se passar o mouse em cima.

Implementar CSS

No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado -------> Adicionar CSS

Copie o código abaixo e cole no local indicado.

.post-body img{
border: 0; /* borda na imagem em zero, não altere */
margin: 0 -30px 0 -30px; /* margem da direita e esquerda, não altere */
padding: 0; /* espaço entre margens e imagem, não altere */
max-width: 480px; /* tamanho máximo da imagem, pode e deve ser alterado */
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
.post-body img:hover{
-webkit-filter: sepia(1) blur(1px);
-moz-filter: sepia(1) blur(1px);
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;}

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

Menu horizontal lavalamp com CSS

2013-05-21T17:12:00.000-03:00

DEMO

Um menu podee ser muito útil para seu blog, conforme já afirmei aqui inúmeras vezes. Mas além de útil é necessário empregar a ele outras qualidades como beleza, facilidade de navegação, integração com o layout de seu blog e leveza. É possível fazer um menu com um bonito efeito hover somente com CSS.

Vá até o "Modelo de seu blog", clique em "Editar HTML"

Hack para o template do Blogger, implementado em abril de 2013.

Clique no botão "Editar modelo" e depois nas teclas Ctrl e F. Ao abrir a janela, procure pelo seguinte trecho.

Procure por <header>

Efeito traço

Acima dele, cole o próximo código:

<div class="ph-line-nav nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Gallery</a>
<a href="#">Contact</a>
<div class="effect"></div>
</div>

Efeito bolinha

<div class="ph-dot-nav nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Gallery</a>
<a href="#">Contact</a>
<div class="effect"></div>
</div>

Efeito coração

<div class="ph-heart-nav nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Gallery</a>
<a href="#">Contact</a>
<div class="effect"></div>
</div>

Implementar CSS

No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado -------> Adicionar CSS

Copie o código abaixo e cole no local indicado.

/* --- for all three examples ----*/

.nav {
text-align: center;
overflow: hidden;
margin: 2em auto;
width: 480px;
position: relative; }
.nav a {
display: block;
position: relative;
float: left;
padding: 1em 0 2em;
width: 25%;
text-decoration: none;
color: #393939;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s; }
.nav a:hover {
color: #c6342e; }

.effect {
position: absolute;
left: -12.5%;
-webkit-transition: 0.7s ease-in-out;
-moz-transition: 0.7s ease-in-out;
-o-transition: 0.7s ease-in-out;
-ms-transition: 0.7s ease-in-out;
transition: 0.7s ease-in-out; }

.nav a:nth-child(1):hover ~ .effect {
left: 12.5%; }
.nav a:nth-child(2):hover ~ .effect {
left: 37.5%; }
.nav a:nth-child(3):hover ~ .effect {
left: 62.5%; }
.nav a:nth-child(4):hover ~ .effect {
left: 87.5%; }

/* ----- line example -----*/

.ph-line-nav .effect {
width: 90px;
height: 2px;
bottom: 36px;
background: #c6342e;
box-shadow: 0 1px 0 white;
margin-left:-45px;
}

/* ----- dot example -----*/

.ph-dot-nav:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 1px;
background: #c6342e;
bottom: 40px; }
.ph-dot-nav a:after {
content: "";
position: absolute;
width: 4px;
height: 4px;
bottom: 38px;
left: 50%;
margin-left: -2px;
background: #c6342e;
border-radius: 100%; }
.ph-dot-nav .effect {
width: 10px;
height: 10px;
bottom: 36px;
margin-left: -5px;
background: #c6342e;
border-radius: 100%; }

/* ----- heart example -----*/

.ph-heart-nav .effect, .ph-heart-nav a:after, .ph-heart-nav a:before {
background: url('http://2.bp.blogspot.com/-vNDnhdTUg1w/USZo6Q-P5KI/AAAAAAAAYdk/fMkYbGPjVpY/s1600/heart.png') no-repeat; }
.ph-heart-nav .effect {
position: absolute;
bottom: 26px;
background-position: 0 0;
height: 8px;
width: 62px;
margin-left:-31px; }

.ph-heart-nav a:before {
content: "";
display: block;
position: absolute;
left: 50%;
bottom: 20px;
background-position: -62px 0;
height: 20px;
width: 11px;
margin-left: -11px; }

.ph-heart-nav a:after {
content: "";
display: block;
position: absolute;
left: 50%;
bottom: 20px;
z-index: 1;
background-position: -73px 0;
height: 20px;
width: 11px; }

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

Créditos: CSS Box

Usar os comentários do Facebook e do Blogger no blog

2013-05-20T02:32:00.001-03:00

Depois de tantos comentários e pedidos a respeito desta tutorial, resolvi refazê-la. Sei que deveria ter feito isso antes, mas vou me agarrar naquele velho ditado: "Antes tarde do que nunca"

O Facebook fez alterações em seus códigos, assim como o Blogger na estrutura de seu HTML, por isso o antigo hack já não funcionava mais, mas aí está, toda a tutorial reformulada, em 2013 para o novo editor do Blogger...

É necessário abrir o Facebook e fazer o login. Depois, clique neste link:

https://developers.facebook.com/apps

Você irá criar um aplicativo para seu blog, por isso atenção !

Clique no botão " + Criar Novo Aplicativo"

Agora abrirá uma janela...

Preencha as caixas como no modelo, depois clique em "Continuar". Perceba no entanto, que deverá aparecer a inscrição "Correto" e "Avaliable", ou não dará certo.

Preencha a capitcha conforme o exemplo.

Pronto, agora você será direcionado a uma página onde aparecerá o número do ID de seu aplicativo. Precisaremos dele para instalar os comentários em seu Blogger.

Deixe a página aberta ou anote o número do seu aplicativo, volte até o seu blog, vá em "Modelo". Clique em "Editar HTML"

Ao abrir o editor, dê um clique em cima do painel. Clique então nas teclas CTRL + F. Abrirá uma pequena janelinha. Procure então por

<head>

E abaixo dele cole este próximo código, colocando no local que se pede o número do aplicativo do Facebook.

Salve !

Procure por

Imediatamente abaixo do código cole o este próximo código: (número grifado em rosa representa a largura da área do Facebook, troque-a caso necessário.)

SALVE !!! Esta prontinho, os comentários do Facebook já estão em seu blog.

Substituir comentários do Blogger pelo sistema do Facebook

2013-05-20T01:33:00.000-03:00

Preencha a capitcha conforme o exemplo.

Pronto, agora você será direcionado a uma página onde aparecerá o número do ID de seu aplicativo. Precisaremos dele para instalar os comentários em seu Blogger.

Deixe a página aberta ou anote o número do seu aplicativo, volte até o seu blog, vá em "Modelo". Clique em "Editar HTML"

Salve !

Clique então em Ir para um widget e depois clique em Blog1

Agora clique na setinha que tem ao lado para abrir a tag.

Procure por

<b:includable id='comments' var='post'>

Clique então na pequena setinha que tem ao lado para abrir a tag.

Imediatamente abaixo do código <b:includable id='comments' var='post'> cole o este próximo código: (número grifado em rosa representa a largura da área do Facebook, troque-a caso necessário.)

SALVE !!! Esta prontinho, os comentários do Facebook já estão em seu blog.

Possivelmente você não estará vendo a caixa do Facebook, isso é porque ainda não ocultou os comentários do Blogger. Proceda então da seguinte forma:

Clique em Configurações, depois em Postagens e comentários, clique então na pequena setinha na caixa que está a frente de Local de comentários, ao abrir a janela, clique em Ocultar e depois em Salvar configurações.

Widget de postagens populares personalizada com efeito no título

2013-05-20T01:22:00.000-03:00

Mais uma maneira de personalizar widget de postagens populares. Com este código CSS é possível deixar apenas as imagens do post e colocar os títulos com efeito.

Implementar CSS

No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado -------> Adicionar CSS

Copie o código abaixo e cole no local indicado, modificando se quiser o número grifado em rosa para aumentar ou diminuir o comprimento do widget.

/*Postagens populares----------------------------------------*/
.popular-posts {margin-top:10px;}
.popular-posts ul {width: 340px; margin: 0 auto; text-align:center;}
.popular-posts .item-snippet{display: none;}
.popular-posts ul li {position:relative; float:left; list-style-type: none; padding: 0 0 0 5px ;}
.popular-posts ul li a {text-decoration:none; color: #000;}
.popular-posts li img {background: #666666; padding: 2px; filter:alpha(opacity=100); -moz-opacity:1; -webkit-opacity:1;-o-opacity:1;-ms-opacity:1; opacity:1;
transition: all .5s linear; -o-transition: all .5s linear; -moz-transition: all .5s linear; -webkit-transition: all .5s linear;}
.popular-posts li img:hover {filter:alpha(opacity=60); -moz-opacity:.6; -webkit-opacity:.6; -o-opacity:.6; -ms-opacity:.6; opacity:.6;}
.popular-posts li .item-title a {z-index:1; width: 150px; height: auto; line-height: 16px; padding: 5px; font-style: italic; font-size: 14px; text-decoration:none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 2px solid #D6BF8E; background: #eeeeee; background: rgba(255,255,255,0.8); -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; border-radius: 5px; pointer-events: none; position: absolute; left: 50%; margin-left: -75px; bottom:190px; box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
filter:alpha(opacity=0); -moz-opacity:0; -webkit-opacity:0;-o-opacity:0;-ms-opacity:0; opacity:0;
-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.popular-posts li:hover .item-title a {bottom:80px; filter:alpha(opacity=100); -moz-opacity:1; -webkit-opacity:1;-o-opacity:1;-ms-opacity:1; opacity:1;}

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

Ícone social com comics

2013-05-19T12:10:00.000-03:00

Donwload

Um pacote muito fofo com ícones sociais, ideal para blogs de crianças e adolescentes.

Formulário de contato nativo no Blogger

2013-05-19T01:00:00.001-03:00

Finalmente o Blogger lançou o formulário de contato para o Blogger. Muito fácil de habilitar, vai facilitar bastante para seu leitor/visitante. Para isto, basta ir até o layout de seu blog.

Clique em Adicionar um Gadget

Ao abrir, clique em Mais gadgets

Ao abrir, basta então adicionar o gadget.

Template Candied Fofinho

2013-05-18T04:55:00.000-03:00

DEMO/Pegar código

Template fofinho ideal para blog de bebes ou gestantes. Hacks variados como menu em lista e grade, área de créditos com menu social, códigos em css, colunas extras abaixo da área de postagem, menu de páginas costumizado.

Habilitar o menu social

Procure por:

<div id='creditos'>

Abaixo dele você verá os códigos do menu. Troque então nos locais indicados pelo endereço de suas páginas sociais.

Ícones sociais fofinhos, cute, boninhos

2013-05-18T04:35:00.000-03:00

Download

Personalizando os comentários do blogger

2013-05-17T02:33:00.002-03:00

Mais um código CSS para personalizar a área de comentários do Blogger. Esse é bem cute mas poderá ser modificado livremente por você, bastando fazer alterações nos códigos.

Procure por <b:skin>...</b:skin>

Abaixo dele, cole o próximo código:

Fita de fundo dos títulos dos posts com CSS

2013-05-16T15:14:00.000-03:00

CSS é capaz de uma infinidade de modificações no layout de um blog. Para dar este efeito de fita com a pontinha dobrada nos títulos dos posts, basta seguir a dica do post.

Vá até o "Modelo de seu blog", clique em "Editar HTML"

Hack para o template do Blogger, implementado em abril de 2013.

Implementar CSS

No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado -------> Adicionar CSS

Copie o código abaixo e cole no local indicado.

/*Título dos posts-----------------------------------------------*/

h3.post-title {
position:relative;
display:block;
overflow:hidden;
width: 100%;/*Aqui a comprimento da faixa*/
height: 2em;
margin: 5px 0 0 -28px;
padding:2px 4px 4px 40px;
background: #333;/*Aqui a cor de fundo da faixa*/
border: 1px solid #555;/*Aqui a cor da borda*/
border-radius:10px 10px 0 0;
line-height:1.10em;
}

.trih3 {display: block;
z-index: -1;
height: 0px;
width: 0px;
margin: -12px 0 0 -40px;
border: 12px solid transparent;
border-right: 12px solid #222; /*Aqui a cor de fundo do triangulo*/
}

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

Agora volte na parte do editor de modelos do layout

Clique no botão "Editar modelo" e depois nas teclas Ctrl e F. Ao abrir a janela, procure pelo seguinte trecho.

Agora vamos procurar por

Agora que encontrou, clique na seta ao lado do código.

Pronto. Veja, o código de seu template está todo dividido em partes. Mas para encontrar o código que queremos você precisará abrir a seguinte parte:

<b:includable id='post' var='post'>...</b:includable>

Procure então por:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

O que você precisará fazer é trocar todo este trecho por este abaixo

Salve e está pronto

Créditos: OloBlogger

Slide compostagens automáticas na sidebar do Blogger

2013-05-13T02:49:00.000-03:00

DEMO

Um slide para se usar na sidebar de seu blog. Leve, com efeito, de fácil instalação e personalizável. Basta copiar o código, colar no HTML/Javascript e trocar o código que está destacado em rosa pelo endereço de seu blog. Se quiser, mude a cor da borda pela cor de sua preferência, modificando o código da cor que está destacado em azul.

Salve. Agora clique em Layout...

Clique em Adicionar um Gadget

Ao abrir, clique em HTML/Javascript

Cole então o próximo código colocando o endereço completo de seu blog no local destacado em rosa. Se quiser mudar a cor da borda basta trocar o código destacado em azul pelo código de sua cor favorita..

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

Créditos: All Blogger Tricks

Personalizando o widget de postagens populares

2013-05-13T02:48:00.003-03:00

Outra forma de personalizar o widget de postagens populares, com efeito hover e numeração. Essa dica é do blog All Blogger Trics

A primeira coisa a fazer é modificar o widget de postagens populares, desmarcando a seleção, como mostra a imagem

Depois vamos implementar o código CSS

Implementar CSS

No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado -------> Adicionar CSS

Copie o código abaixo e cole no local indicado.

/* Popular Post Customization by AllBloggerTricks.com */
.popular-posts ul li a {
color: #fff; background: #808080; text-shadow: 0.1em 0.1em 0.05em #333;
background: none repeat scroll 0 0 #DDDDDD;
color: #444444;
display: block;
margin: -8px 0;
padding: 0.4em;
position: relative;
text-decoration: none;
transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:before {
background: none repeat scroll 0 0 #CCCCCC;
font-weight: 600;
height: 2em;
left: -2.5em;
line-height: 2em;
margin-top: -1em;
position: absolute;
text-align: center;
top: 50%;
width: 2em;
}
.popular-posts ul li a:after {
border: 0.5em solid transparent;
content: "";
left: -1em;
margin-top: -0.5em;
position: absolute;
top: 50%;
transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:hover {
background: none repeat scroll 0 0 #CCCCCC;
}
.popular-posts ul li a:hover:after {
border-left-color: #CCCCCC;
left: -0.5em;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before{content:"10"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before{content:"9"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before{content:"8"}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before{content:"7"}
.popular-posts ul li:first-child + li + li + li + li + li a:before{content:"6"}
.popular-posts ul li:first-child + li + li + li + li a:before{content:"5"}
.popular-posts ul li:first-child + li + li + li a:before{content:"4"}
.popular-posts ul li:first-child + li + li a:before{content:"3"}
.popular-posts ul li:first-child + li a:before{content:"2"}
.popular-posts ul li:first-child a:before{content:"1"}
/* Popular Post Customization by AllBloggerTricks.com */

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

Estilo zoom para os marcadores do Blogger

2013-05-12T15:13:00.000-03:00

Para dar um efeito diferente nos marcadores de seu Blogger é necessário primeiramente ter o widget em seu blog e depois deixar selecionado em seu gadget a função label, como mostra a imagem.

Tendo feito a modificação, agora vamos das estilo, personalizar as etiquetas.

Implementar CSS

No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado -------> Adicionar CSS

Copie o código abaixo e cole no local indicado.

/*Marcadores efeit zoom-----------------------------------------------*/

.cloud-label-widget-content {
text-align: center;
}
.label-size a {
float:left;
display: block;
margin: 2px 2px 0 0;
padding: 4px;
text-transform: uppercase;
border: 1px solid #996666;
text-decoration:none;
font-size:12px;
color:#666;
background: #eee;
-moz-border-radius:8px;-webkit-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border-radius:8px;
}
.label-size a:hover {
border: 1px solid #000;
color: #000;
background: #fff;
text-decoration: none;
-moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5);
-moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; -ms-transition: all .5s;transition: all .5s;
}

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

Créditos: OloBlogger

Ocultar/mostrar elementos no Blogger

2013-05-11T03:57:00.001-03:00

O Blogger talvez seja a plataforma gratuita que mais dê possibilidades de personalização do blog. É possível fazer com os templates hospedados no Blogger uma infinidade de modificações e implementações tão variadas que por vezes tenho que conferir o código fonte para ter certeza de se tratar mesmo de um blogger/blogspot. Além do layout, por vezes necessitamos de códigos que ajudtaem a carregar o blog com maior rapidez e uma boa pedida é termos elementos em páginas específicas, deixando o blog mais leve e melhorando assim sua indexação. Esta postagem pretende te dar uma idéia de como ocultar ou mostrar elementos em páginas específicas. Por exemplo, suponhamos que seu blog tenha os posts relacionados e que você deseje que apareça apenas nas páginas internas de seu blog, para isso é necessário usar um código específico ao abrir o código (antes do código em si).

Para implementar esse hack é necessário ter algum conhecimento em HTML, vá então ao editor de seu blog.

Ao encontrar a parte do código que queira ocultar/mostar insira o código abaixo, as partes grifadas em cinza. Note que o código inicia e depois fecha com </b:if>, conforme está grifado. E é desta forma que os códigos sempre deverão ser usados.

ex:

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

OCULTAR ELEMENTOS

Para que o elemento não apareça na página inicial o código será esse:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
código do que não quer que apareça na página inicial
</b:if>

Para que o elemento não apareça nas páginas das postagens

<b:if cond='data:blog.pageType != "item"'>
código do que não quer que apareça nas páginas das postagens
</b:if>

Para que o elemento não apareça nas páginas estáticas

<b:if cond='data:blog.pageType != "static_page"'>
código do que não quer que apareça nas páginas estáticas
</b:if>

Para que o elemento não apareça nas páginas de arquivo, marcadores e página inicial

<b:if cond='data:blog.pageType == "item"'>
código do que não quer que apareça em arquivos, marcadores e página inicial
</b:if>

MOSTRAR ELEMENTOS

Para mostrar o elemento apenas na página inicial, o código será este

<b:if cond='data:blog.url == data:blog.homepageUrl'>
código do que quer mostrar apenas na página inicial
</b:if>

Para mostrar o elemento apenas na página de postagens

<b:if cond='data:blog.pageType == "item"'>
código do que quer mostar apenas nas páginas das postagens
</b:if>

Para mostrar o elemento apenas nas páginas estáticas

<b:if cond='data:blog.pageType == "static_page"'>
código do que quer mostrar apenas nas páginas estáticas
</b:if>

Para mostrar apenas nas páginas de arquivos, marcadores e página inicial

<b:if cond='data:blog.pageType != "item"'>
código do que quer mostrar apenas em arquivos, marcadores e página inicial
</b:if>

Para mostrar apenas na página de um post específico

<b:if cond='data:blog.url == "endereço do post"'>
código do que quer mostrar apenas em uma página específica
</b:if>

Posts aleatórios na sidebar do Blogger mostrando apenas imagens

2013-05-09T15:02:00.000-03:00

Widgets de postagens relacionadas, postagens aleatórias e outros widgets que possam ajudar seus leitores a navegar com facilidade pelo blog e passar mais tempo em seu blog. Este é bem fácil, colocado no HTML/Javascript e modificando apenas uma linha onde deverá ser colocado o endereço de seu blog.

Clique em Layout...

Clique em Adicionar um Gadget

Ao abrir, clique em HTML/Javascript

Cole então o próximo código trocando o endereço em vermelho pelo endereço de seu blog. Se quiser aumentar ou diminuir a quantidade de posts, troque os números que estão em destaque na cor azul.

<div id='bp_recent'></div>
<script style='text/javascript'>var postTitleOriginal,myLink, myDiv, myImage,mySeparator;
var main;
var float_clear=false;
var flag = 0;
function bprecentpostswiththumbnails(json) {
for (var i = 0; i < numberOfPosts; i++) {
if (i == json.feed.entry.length) break;
var s;
var entry = json.feed.entry[i];
var postTitle = entry.title.$t;
postTitleOriginal = postTitle;
if (isNaN(titleLength) || titleLength == 0) {
postTitle = '';
}
else if (postTitle.length > titleLength) postTitle = postTitle.substring(0, titleLength) + "...";
var postUrl="";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
var commentText = entry.link[k].title;
var commentUrl = entry.link[k].href;
}
if (entry.link[k].rel == 'alternate') {
postUrl = entry.link[k].href;
break;
}
}
if (showThumbs == true) {
var thumbUrl = "";
try {
thumbUrl = entry.media$thumbnail.url;
thumbUrl = thumbUrl.replace("/s72-c/","/s"+imgDim+"-c/");
} catch (error) {
if ("content" in entry) s = entry.content.$t; else s="";
if (thumbUrl == "" && mediaThumbsOnly == false) {
regex = /http\:\/\/www\.youtube(-nocookie){0,1}\.com\/(v){0,1}(embed){0,1}\/(([^"&?' ]*))/;
videoIds = s.match(regex);
if (videoIds != null) {
videoId = videoIds[4];
}
if (videoIds != null && videoId != null) thumbUrl = "http://img.youtube.com/vi/" + videoId + "/2.jpg"
}
if (thumbUrl == "" && mediaThumbsOnly == false) {
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 12);
d = s.substr(b + 12, c - b - 12);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) thumbUrl = d;
}
}
if(thumbUrl.indexOf("static.flickr.com")!=-1) {thumbUrl= thumbUrl.replace("_b_t.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_m_t.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_s_t.jpg","_s.jpg");
thumbUrl= thumbUrl.replace("_b.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_m.jpg","_s.jpg");}
if (thumbUrl == "" && showNoImage == true)
{
thumbUrl = "http://2.bp.blogspot.com/-erTXCq61ULM/TmHYAQBZ0GI/AAAAAAAACCs/6cBX54Dn6Gs/s72-c/default.png";
try{if(defaultImage!="") thumbUrl=defaultImage;}catch(error){}
thumbUrl = thumbUrl.replace("/s72-c/","/s"+imgDim+"-c/");
}
}
if (showPostDate == true) {
var postdate = entry.published.$t;
var cdyear = postdate.substring(0, 4);
var cdmonth = postdate.substring(12, 7);
var cdday = postdate.substring(8, 10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
}
code = "";
main = document.getElementById('bp_recent');
myDiv = document.createElement('div');
myDiv.setAttribute("class", "bp_item_title");
myLink = createLink(postUrl,"_top",postTitleOriginal)
if(main.innerHTML!=""){
mySeparator = createDiv("bp_recent_separator");
main.appendChild(mySeparator)
}
if(postTitle != ''){myDiv.appendChild(myLink);}
main.appendChild(myDiv);if(postTitle != '')myLink.innerHTML = postTitle;
if (showThumbs == true && thumbUrl != "") {
myImage = document.createElement('img');
myImage.setAttribute("src", thumbUrl);
if(imgFloat!="none")
{
float_clear=true;
myImage.style.cssFloat=imgFloat;
myImage.style.styleFloat=imgFloat;
}
try{if(myMargin!=0)myImage.style.margin = myMargin+"px";} catch(error){}
myImage.setAttribute("alt", postTitleOriginal);
myImage.setAttribute("width", imgDim);
myImage.setAttribute("height", imgDim);
myLink = document.createElement('a');
myLink.setAttribute("href", postUrl+"?utm_source=bp_recent&utm-medium=gadget&utm_campaign=bp_recent");
myLink.setAttribute("target", "_top");
myLink.setAttribute("title", postTitleOriginal);
myLink.appendChild(myImage);
myDiv = document.createElement('div');
myDiv.setAttribute("class", "bp_item_thumb");
myDiv.appendChild(myLink);
main.appendChild(myDiv);
}
try {
if ("content" in entry) {
var postContent = entry.content.$t;
}
else if ("summary" in entry) {
var postContent = entry.summary.$t;
}
else var postContent = "";
var re = /<\S[^>]*>/g;
postContent = postContent.replace(re, "");
if (showSummary == true) {
myDiv = createDiv("bp_item_summary");
if (postContent.length < summaryLength) {myDiv.appendChild(document.createTextNode(postContent));}
else {
postContent = postContent.substring(0, summaryLength);
var quoteEnd = postContent.lastIndexOf(" ");
postContent = postContent.substring(0, quoteEnd);
myDiv.appendChild(document.createTextNode(postContent + '...'));
}
main.appendChild(myDiv);
}
} //end try
catch (error) {}
myDiv = createDiv("bp_item_meta");
myDiv.style.clear="both";
myDiv.style.marginBottom="4px";
if (showPostDate == true) {
myDiv.appendChild(document.createTextNode(monthnames[parseInt(cdmonth, 10)] + '-' + cdday + '-' + cdyear));
flag = 1;
}
if (showCommentCount == true) {
if (flag == 1) {
myDiv.appendChild(document.createTextNode(" | "));
}
if (commentText == '1 Comments') commentText = '1 Comment';
if (commentText == '0 Comments') commentText = 'No Comments';
var myLink = createLink(commentUrl,"_top",commentText + " on " + postTitleOriginal)
myDiv.appendChild(myLink);
myLink.innerHTML=commentText;
flag = 1;;
}
if (showReadMore == true) {
if (flag == 1) {
myDiv.appendChild(document.createTextNode(" | "));
}
var myLink = createLink(postUrl,"_top",postTitleOriginal)
myDiv.appendChild(myLink);
myLink.innerHTML = readMore+" »";
flag = 1;;
}
if (flag == 1) main.appendChild(myDiv);
}
if(float_clear==true && imgFloat!="none")
{
myDiv = createDiv("bp_clear_float");
myDiv.style.clear=imgFloat;
main.appendChild(myDiv);
}
document.getElementById("bp_recent_link").style.backgroundImage="url('http://3.bp.blogspot.com/-H8WPIh3wjr4/TmHnuo9tnnI/AAAAAAAACDE/_yuVqfb1HAk/blogger-widgets.png')";
document.getElementById("bp_recent_link").style.backgroundRepeat="no-repeat";
try{
if(myMargin!=0 && imgFloat=="left" && flag==0) document.getElementById("bp_recent_link").style.marginLeft = myMargin+"px";
} catch(error){}
}
function createDiv(className)
{
var myDiv = document.createElement('div');
myDiv.setAttribute("class", className);
return myDiv;
}
function createLink(href,target,title)
{
var myLink = document.createElement('a');
if(href.substring(href.length-13,href.length)=="#comment-form") {href= href.substring(0,href.length-13)+"?utm_source=bp_recent&utm-medium=gadget&utm_campaign=bp_recent"+"#comment-form";myLink.setAttribute("href", href);}
else myLink.setAttribute("href", href+"?utm_source=BP_recent&utm-medium=gadget&utm_campaign=bp_recent");
myLink.setAttribute("target", target);
myLink.setAttribute("title", title);
return myLink;
}
var numberOfPosts = 12;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 90;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
hoje = new Date()
var numposts = (12 +(2*(hoje.getSeconds())))
document.write("<script src=\"http://templateseacessorios.blogspot.com.br/feeds/posts/default?start-index="+numposts+"&max-results=12&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails\"><\/script>");
</script>

Marcadores em forma de menu com efeito Jquery

2013-05-03T22:31:00.000-03:00

DEMO

Este modelo de menu de marcadores é diferente dos demais por algumas características

1-Você vai escolher quais os marcadores que farão parte do menu
2-Um bonito efeito Jquery que mostrará não apenas os títulos dos marcadores mas também thumbs e um pequeno resumo
3-Vai valorizar seu layout e ajudar seu visitante a navegar melhor pelo seu blog

Vá até o "Modelo de seu blog", clique em "Editar HTML"

Hack para o template do Blogger, implementado em abril de 2013.

Procure por </head>

Acima dele cole este próximo código.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/ajaxbloggermenu.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#w2bajaxmenu').ajaxBloggerMenu({
numPosts : 4, // Number of Posts to show
defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image
});
});
</script>

Salve. Agora clique em Layout...

Clique em Adicionar um Gadget

Ao abrir, clique em HTML/Javascript

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

<ul id="w2bajaxmenu" class="w2bmenu">
<li>
<a href="#">Home</a>
</li>

<li>

<a href="#">Marcadores 1</a>
<ul>
<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 1-A">MARCADOR 1-A</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 1-B">MARCADOR 1-B</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 1-C">MARCADOR 1-C</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 1-D">MARCADOR 1-D</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 1-E">MARCADOR 1-E</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 1-F">MARCADOR 1-F</a></li>
</ul>
</li>

<li>
<a href="#">Marcadores 2</a>
<ul>
<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 2-A">MARCADOR 2-A</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 2-B">MARCADOR 2-B</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 2-C">MARCADOR 2-C</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 2-D">MARCADOR 2-D</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 2-E">MARCADOR 2-E</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 2-F">MARCADOR 2-F</a></li>
</ul>
</li>

<li>
<a href="#">Marcadores 3</a>
<ul>
<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 3-A">MARCADOR 3-A</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 3-B">MARCADOR 3-B</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 3-C">MARCADOR 3-C</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 3-D">MARCADOR 3-D</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 3-E">MARCADOR 3-E</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 3-F">MARCADOR 3-F</a></li>
</ul>
</li>

<li>
<a href="#">Marcadores 4</a>
<ul>
<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 4-A">MARCADOR 4-A</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 4-B">MARCADOR 4-B</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 4-C">MARCADOR 4-C</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 4-D">MARCADOR 4-D</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 4-E">MARCADOR 4-E</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 4-F">MARCADOR 4-F</a></li>
</ul>
</li>

<li><a href="ENDEREÇO DO SEU FACEBOOK">Facebook</a></li>

<li><a href="ENDEREÇO DO SEU TWITTER">Twiter</a></li>

<li><a href="ENDEREÇO DO SEU FEED">Feed</a></li></ul>

Implementar CSS

No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado -------> Adicionar CSS

Copie o código abaixo e cole no local indicado.

/* Menu Stylings */ .w2bmenu *{margin: 0;padding: 0;} ul.w2bmenu {list-style: none;line-height: 1;overflow: visible !important;} ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;} ul.w2bmenu li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;} ul.w2bmenu li a{margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #6b6b6b !important;text-shadow: 0 1px 0 #fff;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: 0 none !important;} ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #f5f5f5 !important;} ul.w2bmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;} ul.w2bmenu li:hover > ul{display: block;} ul.w2bmenu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;} ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;} ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #fff !important;} ul.w2bmenu ul ul{display: none;left: 100%;top: 0;} /* AJAX Menu Stylings */ ul.w2bajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px solid #cccccc;border-top: 0 none;} ul.w2bajaxmenu li:hover div.submenu {display: block;} ul.w2bajaxmenu ul ,ul.w2bajaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;} ul.w2bajaxmenu ul li{background: none !important;float: none !important;} ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;} ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;} ul.w2bajaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;} ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;} ul.w2bajaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;} ul.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;} ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;} ul.w2bajaxmenu .loader{background:url('http://i.imgur.com/SeivG.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;} ul.w2bajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;} #w2bajaxmenu {background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;}

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

Créditos: Way2blogging

Lista piores sites de compra online segundo o procon

2013-05-03T00:19:00.002-03:00

Gente, post de utilidade pública. O PROCON São Paulo fez uma lista com os piores sites de compras online. Se liguem no link e quando quiser efetuar suas comprinhas, consulte a lista. Evite calotes, dores de cabeça e frustrações desnecessárias. Claro que isso não garante que as outras sejam ótimas, mas ao menos evita as péssimas. :-)

Link dos piores sites de compras online

Vídeo com efeito apagar luz

2013-04-30T01:20:00.000-03:00

DEMO

Para quem usa vídeos com frequencia em seu blog, um bom efeito é este de "apagar luzes". Ao clicar, o vídeo fica em destaque, deixando o resto do blog em segundo plano e todo escuro, conforme puderam constatar na demonstração. Siga as dicas e instale este hack em seu blog.

Vá até o "Modelo de seu blog", clique em "Editar HTML"

Hack para o template do Blogger, implementado em abril de 2013.

Procure por </head>

Acima dele cole este próximo código.

Agora procure por </body>

Acima dele cole este próximo código

Salve.

Agora vamos dar estilo. Vá até o layot de seu blog.

Ao abrir essa janela, vá em Avançado -------> Adicionar CSS

Copie o código abaixo e cole no local indicado.

/* Apagar las luces
----------------------------------------------- */
#videoLuces {
position:relative;
z-index:102;
}
#apagador {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(http://lh6.googleusercontent.com/-azJxijJlWX4/T3vT2giQqkI/AAAAAAAACWk/6wt4sBdcHEY/s16/luces-on.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-image:url(http://lh4.googleusercontent.com/-J0U5xRqb7KU/T3vT2kcmUsI/AAAAAAAACWo/-VTwo42-Nj0/s16/luces-off.png);
}
#oscuridad {
background:#000;
opacity:0.9; /* Opacidade da Tela */
filter:alpha(opacity=90); /* Opacidade da tela */
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

Salve. Agora clique em Layout...

Clique em Adicionar um Gadget

Ao abrir, clique em HTML/Javascript

Cole então o próximo código colando o código do vídeo no local indicado.

<center>
<div id="apagador"><a class="lightSwitcher" href="javascript:void(0);">Apagar as luzes</a></div>
<div id="videoLuces">
COLE AQUI O CÓDIGO DO VÍDEO DO YOU TUBE
</div>
</center>

Menu com efeito Jquery- lavalamp para o Blogger

2013-04-25T20:50:00.000-03:00

DEMO

Vá até o "Modelo de seu blog", clique em "Editar HTML"

Hack para o template do Blogger, implementado em abril de 2013.

Clique no botão "Editar modelo" e depois nas teclas Ctrl e F. Ao abrir a janela, procure pelo seguinte trecho.

Procure por <b:skin>...</b:skin> que está logo acima no código.

Abaixo dele, cole o próximo código:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

    <script type='text/javascript'>
    //<![CDATA[
      $(document).ready(function () {
    var dleft = $('.lavalamp li.active').offset().left - $('.lavalamp').offset().left;
        var dwidth = $('.lavalamp li.active').width() + "px";

    $('.floatr').css({
        "left": dleft+"px",
        "width": dwidth
    });

    $('li').hover(function(){
               var left = $(this).offset().left - ($(this).parents('.lavalamp').offset().left + 15);
        var width = $(this).width() + "px";
        var sictranslate = "translate("+left+"px, 0px)";
        $(this).parent('ul').next('div.floatr').css({
            "width": width,
            "-webkit-transform": sictranslate,
            "-moz-transform": sictranslate
        });

    },

    function(){
        var left = $(this).siblings('li.active').offset().left - ($(this).parents('.lavalamp').offset().left + 15);
        var width = $(this).siblings('li.active').width() + "px";

        var sictranslate = "translate("+left+"px, 0px)";

        $(this).parent('ul').next('div.floatr').css({
            "width": width,
            "-webkit-transform": sictranslate,
            "-moz-transform": sictranslate
        });

    }).click(function(){
        $(this).siblings('li').removeClass('active');
        $(this).addClass('active');
        return false;
    });
});

      //]]>
</script>
    


Procure por: <header> e acim dele, cole o código abaixo, colocando seus links nos locais indicados e, se quiser trocar a cor do meu. troque o código que está grifdo em vermelho por um dos códigos

magenta
yellow
orange
cyan

Implementar CSS

No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado -------> Adicionar CSS

Copie o código abaixo e cole no local indicado.

/*Lavalamp menu------------------------------------------*/

.lavalamp {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
height: 18px;
        font-family: calibri;
}

.magenta {
background : rgb(190,64,120);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
border: 1px solid #841144;

}

.cyan {
background : rgb(64,181,197);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
border: 1px solid #2f8893;

}

.yellow {
background : rgb(255,199,79);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
border: 1px solid #c08c1f;

}

.orange {
background : rgb(255,133,64);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
border: 1px solid #c04f11;

}

.dark {
background : rgb(89,89,89);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
border: 1px solid #272727;

}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.40);

}

.lavalamp a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}

.lavalamp ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}

.lavalamp ul li {
    list-style: none;
    float:left;

    text-align: center;
    }

.lavalamp ul li a {
    padding: 0 20px;
    text-align: center;
    }

.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

Créditos: HelpBlogger

Não à redução da maioridade penal

2013-04-20T16:18:00.002-03:00

São crianças como você...

Sei que este blog trata de assuntos relacionados a hacks e dicas para o Blogger mas, devido ao acalorado debate que se deu nos últimos dias pela redução da maioridade penal depois que um jovem de classe média foi covardemente assassinado por um outro jovem em frente a sua residência, não posso me furtar a deixar minha opinião a respeito deste passo muito importante que a sociedade quer vir a dar.

Na verdade na verdade o que no fundo a sociedade quer não é justiça, é mais segregação. As pessoas não querem punição para os jovens abandonados pelo Estado e velependiados pela sociedade, as pessoas querem é que desapareçam da face da terra esses jovens. Esses jovens negros e pardos, que vigiam carros, cheiram cola, fumam crack, puxam carrinho de feira, fazem malabares nos sinais. A sociedade alienada não quer dividir espaço com pedinte, com morador em situação de rua, com crianças brutalizadas por esse sistema excludente e marginalizante. Não, o que querem é tranca-los, e se possível, que joguem a chave fora ou que aconteça a eles a mesma sorte dos presos do Carandirú. Essa soiciedade hipócrita, vagabunda quer mesmo é que morram, querem mais mesmo é que sejam assassinados por policiais, por traficantes, pela miséria que cresce por causa de um sistema capitalista opressor.

No fundo todos sabemos quem é que vai parar em presídios super-lotados, faculdades de fazer bandidos-fascínoras. Todos sabemos que presídios não regeneram porquê são perversos, são depósitos de seres humanos sem eira nem beira, sem educação, sem cultura. Todos sabemos que a justiça, não só no Brasil mas em todos os lugares, só funcionam para pobres. Jamais farei coro com soluções imediatistas como essas, soluções de fundo silenciadores que desviam o foco, que não mostram o que de fato está por trás. Uma sociedade consumista, egocêntrica, corrupta e corruptivel, maniqueista e intolerante. Que cobrem do Estado o que está na constituição que é saúde, educação e moradia para todos. Que cobrem de seus representantes políticos soluções de fato para toda essa população que existe em situação de risco. Que olhem para um todo com mais amor, caridade, solidariedade e misericórdia. Se você concorda que os presídios não recuperam, ao contrário, só agravam mais a situação, porquê diabos então você ainda quer depositar alí, seres humanos que estão ainda em formação ?

Text-shadow, colocar sombra nos textos

2013-04-15T22:57:00.000-03:00

Alguns códigos para deixar textos com sombras. Estes códigos podem ser aplicados em pequenas partes para dar a seu texto um maior destaque. Pode ser nos títulos das postagens, dos widgets, algum texto que se queira dar uma maior dramaticidade e chamar atenção.

Percebam que coloquei não só o código CSS do efeito da sombra como também a cor do background (fundo) e da font (letra).

Escrevendo assim

color: #000; background: #808080; text-shadow: 0.1em 0.1em 0.05em #333;

Escrevendo assim

color: #fff; background: #808080; text-shadow: 0.1em 0.1em 0.05em #333;

Escrevendo assim

color: #000; background: #808080;text-shadow: 0.1em 0.1em #333;

Escrevendo assim

color: #fff; background: #808080; text-shadow: 0.1em 0.1em 0.05em #cc0000;

Escrevendo assim

color: #fff; background: #eee; text-shadow: black 0.1em 0.1em 0.2em;

Escrevendo assim

   color: #000; background: #808080; text-shadow: 0.2em 0.5em 0.1em #600,
      -0.3em 0.1em 0.1em #060,
      0.4em -0.3em 0.1em #006;

Escrevendo assim

color: #333; background: #808080; text-shadow: -1px -1px white, 1px 1px #333;

Escrevendo assim

color: #808080; background: #808080; text-shadow: 1px 1px white, -1px -1px #444;

Escrevendo assim

color: #808080; background: #808080; text-shadow: -1px -1px white, 1px 1px #333;

Escrevendo assim

color: #fff; background: #808080; text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black;

Escrevendo assim

color: #fff; background: #808080; text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
0 0 0.2em #87F;

Escrevendo assim

color: #000; background: #808080; text-shadow: 0.1em 0.1em 0.05em #333;

Escrevendo assim

color: #fff; background: #808080; text-shadow: 2px 2px 0 #ffd217, 4px 4px 0 #5ac7ff, 6px 6px 0 #ffd217, 8px 8px 0 #5ac7ff;

Escrevendo assim

color: #000; background: #808080; text-shadow: 0 0 4px #fefcc9, 5px -5px 9px #feec85, -6px -6px 9px #ffae34, 6px -6px 8px #ec760c, -4px -8px 8px #cd4606, 0 -10px 12px #973716, 10px -10px 8px #451b0e;

Escrevendo assim

color: #000; background: #808080; text-shadow: 1px 1px 0px #808080, 2px 2px 0px #000000;

Escrevendo assim

color: #fff; background: #808080; text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 7px #fff, 0 0 10px #ff00de, 0 0 12px #ff00de, 0 0 14px #ff00de, 0 0 17px #ff00de, 0 0 200px #ff00de; ;

Usar comentários do Facebook e Blogger juntos no blog

2013-04-14T04:58:00.000-03:00

DEMO

Para quem quer o sistema de comentários do Facebook em seu blog, conforme ensinei neste post mas não quer perder o sistema de comentários do Blogger, eis uma solução: coloca-los em sistema de menu de abas, assim, seu leitor decidirá onde comentar. Para isso é necessário conseguir o ID do Facebook. A primeira coisa a fazer é se logar no Facebook, depois clique AQUI e escreva o endereço completo de seu blog.

Depois clique em "GET CODE", abrirá uma janela, copie e cole todo o código em algum local (pode ser o bloco de notas) para separar apenas o número.

No modelo de seu blog clique em Personalizar

Cole então o código abaixo no local indicado.

/*Sistem comentarios Facebook e Blogger------------------------------------------------*/
.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { background-color: #808080; float: left; padding: 5px; margin-right: 3px; cursor: pointer; }
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

Volte ao modelo de seu blog

<head>

E depois dele cole o seguinte código, colocando o número do ID do Facebook no local indicado.

Salve.

Clique então em Ir para um widget e depois clique em Blog1

Procure por <b:includable id='comments' var='post'>...</b:includable>

Procure por <div class='comments' id='comments'>

Troque-o por: (número grifado em rosa representa a largura da área do Facebook, troque-a caso necessário.)

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comentários no Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comentários
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comentários no Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comentários
</div><div class='clear'/>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='52' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Procure agora por:

<b:includable id='comment-form' var='post'>...</b:includable>

Clique na setinha para expandir.

Agora procure por:

<h4 id='comment-post-message'>
<a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>

Onde estiver o número: 410

Troque-o por: 1410

Salve e pronto

Dar estilo aos comentários do novo Blogger

2013-04-14T04:23:00.000-03:00

Ah, quem disse que a área de comentários do Blogger tem que ser essa coisinha sem graça ? Vamos modificar tudo dando uma corzinha e inserir botões ?

Fácil, fácil...

Procure por <b:skin>...</b:skin> e clique na setinha ao lado para abrir a área.

Procure então por:

/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

.comments .comments-content .loadmore a {
border-top: 1px solid $(widget.alternate.text.color);
border-bottom: 1px solid $(widget.alternate.text.color);
}

.comments .comment-thread.inline-thread {
background-color: $(post.footer.background.color);
}

.comments .continue {
border-top: 2px solid $(widget.alternate.text.color);
}

Substitua então pelo código abaixo:

/*Comentario personalizado----------------------------------------------------------------*/
.comments {
background: #808080;
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
background: #eee;
padding: 10px 10px 10px 10px;
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #ccc;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#fff; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: none;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 40px; font-size:12px; background:#cccccc;
}
.comments .comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;

}
.comments .comments-content .comment:first-child {
padding-top:16px;
}
.comments .comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
}
.comments .comments-content .user a {
color:#cccccc; font-size:14px; font-weight: bold;text-decoration: none;
}
.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
color: #999999;
float: right;
font-size: 11px;
text-decoration: none;
}
.comments .comments-content,
.comments .comments-content .comment-content {
margin:0 0 8px;
}

.comment-header {background-color: #F4F4F4;
border: thin solid #E6E6E6;
margin-bottom: 5px;
padding: 5px;
}
.comments .comments-content .comment-content {
text-align:none;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
cursor: pointer;
}
.comments .continue a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #cc0000;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: none;
}
.comments .thread-toggle {
display: inline-block;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
border: 1px solid #DDDDDD;}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}

Salve.

Templates e Acessórios

Efeito hover com CSS- imagens com efeito vintage

Blogroll de ajuda

Menu horizontal lavalamp com CSS

Usar os comentários do Facebook e do Blogger no blog

Substituir comentários do Blogger pelo sistema do Facebook

Widget de postagens populares personalizada com efeito no título

Ícone social com comics

Formulário de contato nativo no Blogger

Template Candied Fofinho

Ícones sociais fofinhos, cute, boninhos

Personalizando os comentários do blogger

Fita de fundo dos títulos dos posts com CSS

Slide compostagens automáticas na sidebar do Blogger

Personalizando o widget de postagens populares

Estilo zoom para os marcadores do Blogger

Ocultar/mostrar elementos no Blogger

Posts aleatórios na sidebar do Blogger mostrando apenas imagens

Marcadores em forma de menu com efeito Jquery

Lista piores sites de compra online segundo o procon

Vídeo com efeito apagar luz

Menu com efeito Jquery- lavalamp para o Blogger

Não à redução da maioridade penal

Text-shadow, colocar sombra nos textos

Usar comentários do Facebook e Blogger juntos no blog

Dar estilo aos comentários do novo Blogger